/* Lato/Nunito Sans auto-hospedadas (wwwroot/fonts) — sin dependencia de una CDN externa,
   quedan incluidas en cualquier despliegue igual que el resto de los assets estáticos. */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/lato-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/nunito-sans-variable.woff2') format('woff2');
}

html, body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #2C4E61;
    border-color: #2C4E61;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #6B9EB0;
    border-color: #6B9EB0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Barra de menú de módulo (landing) ===== */
.mm-wrap {
    display: flex;
    align-items: stretch;
    background: #6B9EB0; /* Azul Azulado Claro / Soft Teal — contraste con la cabecera (#2C4E61) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.mm-module {
    display: flex;
    align-items: center;
    background: #6F9096;
    color: #EBF3F6;
    font: bold 0.8rem/1 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}

.mm-bar {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-bar > li.mm-top {
    position: relative;
}

.mm-bar > li.mm-top > .mm-label {
    display: block;
    padding: 11px 15px;
    color: #FFFFFF;
    font: 0.9rem/1 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    cursor: default;
    user-select: none;
    background: none;
    border: none;
    border-radius: 0;
}

.mm-bar > li.mm-top.mm-has > .mm-label::after {
    content: " \25BE"; /* ▾ */
    opacity: 0.6;
}

.mm-bar > li.mm-top:hover > .mm-label {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

/* Foco visible por teclado (Tab) — no aparece en clic con mouse, solo con :focus-visible. */
.mm-bar > li.mm-top > .mm-label:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: -3px;
}

/* Submenús (desplegables y flotantes anidados) */
ul.mm-sub {
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 255px;
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c4c4c4;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 3000;
}

.mm-bar > li.mm-top:hover > ul.mm-sub,
.mm-bar > li.mm-top.mm-open > ul.mm-sub {
    display: block;
    top: 100%;
    left: 0;
}

/* Si abrir hacia la derecha se saldría de la pantalla, se alinea al borde derecho del disparador
   en su lugar (ver menuEdgeFlip.js, que agrega/quita esta clase según el ancho disponible). */
.mm-bar > li.mm-top > ul.mm-sub.mm-flip {
    left: auto;
    right: 0;
}

.mm-bar > li.mm-top.mm-open > .mm-label {
    background: #EBF3F6;
    color: #2C4E61;
}

.mm-bar > li.mm-top > .mm-label {
    cursor: pointer;
}

ul.mm-sub li {
    position: relative;
}

/* Categorías anidadas: se despliegan DEBAJO, dentro de la misma columna (no como panel
   flotante al costado) — así se desplazan junto con el resto de la lista sin quedar atrapadas
   ni recortadas por el scroll de ul.mm-sub (ver max-height más arriba). */
ul.mm-sub li.mm-has:hover > ul.mm-sub,
ul.mm-sub li.mm-has.mm-open > ul.mm-sub {
    display: block;
}

ul.mm-sub li.mm-has > ul.mm-sub {
    position: static;
    margin: 2px 0 4px 18px;
    max-height: none;
    overflow-y: visible;
    border: none;
    box-shadow: none;
    background: #fafbfc;
}

ul.mm-sub .mm-label {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 6px 16px;
    background: none;
    border: none;
    color: #333;
    font: 0.85rem/1.25 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    cursor: default;
}

ul.mm-sub li.mm-has > button.mm-label {
    cursor: pointer;
}

/* Foco visible por teclado (Tab) — no aparece en clic con mouse, solo con :focus-visible. */
ul.mm-sub button.mm-label:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: -3px;
    background: #B4C3D8;
}

ul.mm-sub a.mm-link {
    color: #0d3b66;
    cursor: pointer;
}

/* Foco visible por teclado (Tab) — no aparece en clic con mouse, solo con :focus-visible. */
ul.mm-sub a.mm-link:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: -3px;
    background: #B4C3D8;
}

ul.mm-sub li.mm-has > .mm-label::after {
    content: "\25BE"; /* ▾ — se despliega debajo, no al costado */
    color: #8a8a8a;
}

ul.mm-sub li:hover > .mm-label,
ul.mm-sub li.mm-open > .mm-label {
    background: #B4C3D8;
}

.mm-sep {
    height: 1px;
    background: #e2e2e2;
    margin: 5px 12px;
}

/* ===== Modal de login (tema oscuro, estilo LOLFAR9000) ===== */
.login-backdrop {
    position: fixed;
    inset: 0;
    background: transparent; /* la portada atenuada (50%) hace de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

.login-card {
    width: 400px;
    max-width: 92vw;
    background: #1E2D3D;
    border: 1px solid #2a3f52;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.login-head {
    text-align: center;
    padding: 28px 32px 22px;
    border-bottom: 1px solid #2a3f52;
}

.login-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    margin-bottom: 14px;
}

.login-title {
    color: #fff;
    font: bold 1.25rem/1.2 Arial, sans-serif;
    letter-spacing: 0.04em;
    margin: 0;
}

.login-sub {
    color: #26C6DA;
    font-size: 0.78rem;
    margin: 5px 0 0;
}

.login-form {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.login-label {
    display: block;
    font: 600 0.72rem/1 Arial, sans-serif;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.login-inputwrap {
    position: relative;
}

.login-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #475569;
    pointer-events: none;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px 10px 38px;
    background: #0f1e2b;
    border: 1px solid #2a3f52;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.login-input::placeholder { color: #64748b; }
.login-input:focus { border-color: #26C6DA; }

.login-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: #26C6DA;
    color: #fff;
    font: 600 0.9rem Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.login-btn:hover:not(:disabled) { background: #00ACC1; }
.login-btn:disabled { background: #0e7490; opacity: 0.7; cursor: not-allowed; }

.login-spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

@keyframes login-spin { to { transform: rotate(360deg); } }

.login-foot {
    text-align: center;
    padding: 0 32px 22px;
    color: #475569;
    font-size: 0.72rem;
}

/* Loader mientras se restaura la sesión desde sessionStorage */
.session-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    z-index: 4000;
}

.session-spin {
    width: 38px;
    height: 38px;
    border: 4px solid #d3dde6;
    border-top-color: #26C6DA;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

/* ===== Selector de establecimiento (post-login, mismo tema oscuro) ===== */
.estab-card {
    width: 460px;
}

.estab-body {
    padding: 4px 24px 8px;
}

.estab-search {
    margin-bottom: 12px;
}

.estab-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.estab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: #1a2e3d;
    border: 1px solid #2a3f52;
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.estab-item:hover {
    background: #21384a;
    border-color: #26C6DA;
}

.estab-ic {
    font-size: 1.25rem;
    flex: none;
}

.estab-it-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.estab-it-name {
    color: #f1f5f9;
    font: 600 0.88rem Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estab-it-cod {
    color: #94a3b8;
    font-size: 0.72rem;
    margin-top: 1px;
}

.estab-it-go {
    color: #26C6DA;
    font-size: 1.4rem;
    font-weight: bold;
    flex: none;
}

.estab-empty {
    color: #94a3b8;
    text-align: center;
    font-size: 0.85rem;
    padding: 16px 0;
}

.estab-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 24px 20px;
    border-top: 1px solid #2a3f52;
    margin-top: 8px;
}

.estab-count {
    color: #64748b;
    font-size: 0.72rem;
}

.estab-logout {
    background: transparent;
    border: 1px solid #2a3f52;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.78rem;
    padding: 7px 12px;
    cursor: pointer;
}

.estab-logout:hover {
    border-color: #f87171;
    color: #f87171;
}

/* ===== Menú de usuario (avatar + nombre/usuario + desplegable, estilo LOLFAR9000) ===== */
.user-menu {
    position: relative;
    display: inline-block;
    margin-left: 1.5rem;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.user-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.user-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #26C6DA;
    color: #1E2D3D;
    display: flex;
    align-items: center;
    justify-content: center;
    font: bold 0.95rem Arial, sans-serif;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.user-name {
    color: #fff;
    font: 600 0.8rem Arial, sans-serif;
    white-space: nowrap;
}

.user-usr {
    color: #94a3b8;
    font: 0.72rem Arial, sans-serif;
}

.user-caret {
    color: #94a3b8;
    font-size: 0.7rem;
    margin-left: 2px;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #1a2e3d;
    border: 1px solid #2a3f52;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    min-width: 210px;
    overflow: hidden;
    z-index: 5001;
}

.user-dropdown-head {
    padding: 12px 14px;
    border-bottom: 1px solid #2a3f52;
}

.user-dd-name {
    color: #fff;
    font: 600 0.85rem Arial, sans-serif;
}

.user-dd-grp {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 2px;
}

.user-dd-estab {
    color: #5eead4;
    font-size: 0.75rem;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-switch {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a3f52;
    padding: 10px 14px;
    cursor: pointer;
    color: #67e8f9;
    font: 0.85rem Arial, sans-serif;
}

.user-switch:hover {
    background: rgba(38, 198, 218, 0.12);
}

.user-logout {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    color: #f87171;
    font: 0.85rem Arial, sans-serif;
}

.user-logout:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* ===== Pantallas de datos (modelo de mantenimiento): fuente compacta 13px ===== */
.content {
    font-size: 13px;
}

.content h3 {
    font-size: 1.3rem;
}

.content .table,
.content .form-control,
.content .form-select,
.content .form-check-label,
.content .col-form-label,
.content .btn,
.content .page-link,
.content code {
    font-size: 13px;
}

.content .badge {
    font-size: 11px;
}

.content small,
.content .small {
    font-size: 12px;
}

/* Código (codgen) en color de marca en vez del rojo por defecto de Bootstrap */
.content code {
    color: #26C6DA;
}

/* ===== Paleta unificada de formularios en TODOS los CRUD (marca #26C6DA) =====
   Hace que los CRUD simples (motor genérico, Genéricos, Familias, Tipos) usen
   la misma apariencia que Usuarios/Grupos/Productos: etiquetas gris pizarra y
   foco/selección en cian de marca. */
.content .form-label {
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Texto de los campos en negro, para diferenciarlo de la etiqueta gris. */
.content .form-control,
.content .form-select {
    color: #000;
}

/* Cabecera de las grillas de mantenimiento (thead.table-light): mismo fondo que el
   título de los modales, en vez del gris por defecto de Bootstrap. Se sobrescriben
   las variables de Bootstrap (no el "background" directo) para que seguir integrado
   con el resto de reglas de .table (bordes, hover, etc.) que dependen de ellas. */
.content .table-light {
    --bs-table-color: #fff;
    --bs-table-bg: #6B9EB0;
    --bs-table-border-color: #5E8B9B;
}


/* ===== Impresión de reportes: solo se imprime la hoja del reporte ===== */
@media print {
    .master-header,
    .app-footer,
    #blazor-error-ui,
    .no-print { display: none !important; }

    body, .master-page, .master-content { background: #fff !important; }
    .master-content { min-height: 0 !important; }
    .content { padding: 0 !important; font-size: 12px; }

    /* La hoja del reporte ocupa todo, sin sombra ni borde de pantalla. */
    .r-sheet { border: none !important; box-shadow: none !important; padding: 0 !important; }

    /* Repetir el encabezado de la tabla en cada página y no cortar filas. */
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }

    @page { size: A4; margin: 12mm; }

    /* Reportes anchos: hoja en horizontal (clase .print-landscape en la hoja). */
    @page landscapeRep { size: A4 landscape; margin: 12mm; }
    .print-landscape { page: landscapeRep; }
}

/* ===== Impresión desde un modal (resumen / orden): imprime solo la hoja (.oc-print-area) ===== */
@media print {
    body:has(.oc-print-area) * { visibility: hidden !important; }
    body:has(.oc-print-area) .oc-print-area,
    body:has(.oc-print-area) .oc-print-area * { visibility: visible !important; }
    body:has(.oc-print-area) .oc-print-area {
        position: absolute !important; left: 0; top: 0; width: 100%; padding: 0 !important;
    }
    body:has(.oc-print-area) .rp-backdrop,
    body:has(.oc-print-area) .io-backdrop {
        position: static !important; padding: 0 !important; background: none !important;
    }
}

.content .form-control:focus,
.content .form-select:focus,
.content .form-check-input:focus {
    border-color: #26C6DA;
    box-shadow: 0 0 0 0.2rem rgba(38, 198, 218, 0.25);
}

.content .form-check-input:checked {
    background-color: #2C4E61;
    border-color: #2C4E61;
}

/* Campos no editables (readonly / disabled): fondo gris más marcado que bg-light. */
.content .form-control[readonly],
.content .form-control:disabled,
.content .form-select:disabled {
    background-color: #D8D9D9 !important;
}

/* ===== Botón de marca (Slate Navy / Soft Teal) ===== */
.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2C4E61;
    --bs-btn-border-color: #2C4E61;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6B9EB0;
    --bs-btn-hover-border-color: #6B9EB0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6B9EB0;
    --bs-btn-active-border-color: #6B9EB0;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2C4E61;
    --bs-btn-disabled-border-color: #2C4E61;
    color: #fff;
    background-color: #2C4E61;
    border-color: #2C4E61;
}

.btn-brand:hover {
    color: #fff;
    background-color: #6B9EB0;
    border-color: #6B9EB0;
}

.btn-brand:focus,
.btn-brand:active {
    color: #fff;
    background-color: #6B9EB0;
    border-color: #6B9EB0;
}

/* ===== Íconos de acción sin recuadro (Editar / Eliminar) ===== */
.icon-action {
    background: transparent;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    line-height: 1;
    color: inherit;
}

.icon-action.edit { color: #2C4E61; }
.icon-action.view { color: #6B9EB0; }
.icon-action.del { color: #e53935; }
.icon-action.confirm { color: #2e7d32; }
.icon-action.cancel { color: #6c757d; }
.icon-action:hover { opacity: 0.6; }
.icon-action:disabled { opacity: 0.35; cursor: default; }
.icon-action.disabled { opacity: 0.3; cursor: not-allowed; color: inherit; }

/* Botón de ícono adosado a un input (p.ej. "Seleccionar tipos de movimiento") */
.tipkar-select-btn {
    background: #e0f7fa;
    border: 1px solid #ced4da;
    border-left: none;
    color: #00838f;
    display: flex;
    align-items: center;
}
.tipkar-select-btn:hover { background: #b2ebf2; color: #00838f; }
.tipkar-select-btn:focus { box-shadow: none; }
.icon-action.disabled:hover { opacity: 0.3; }

/* ===== Badge Estado activo ===== */
.badge-activo {
    background-color: #6B9EB0;
    color: #fff;
}

/* ===== Ventana modal genérica de la app ===== */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.app-modal {
    background: #fff;
    border-radius: 8px;
    width: 480px;
    max-width: 94vw;
    /* En vez de "90vh": garantiza un margen mínimo de 24px arriba y abajo
       en cualquier alto de ventana (antes, en ventanas bajas, un formulario
       largo podía quedar prácticamente pegado al borde inferior). */
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.app-modal-head {
    background: #6B9EB0;
    color: #fff;
    padding: 10px 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Cuando el modal envuelve un <EditForm> de Blazor, éste se renderiza como
   un <form> real entre ".app-modal" y ".app-modal-body/.app-modal-foot".
   Sin esta regla, ese <form> es un bloque normal (no flex), así que el
   "flex: 1 1 auto; min-height: 0" de ".app-modal-body" no tiene ningún
   efecto dentro de él: el cuerpo crece sin límite y empuja el pie de
   acciones fuera del panel en vez de activar el scroll interno. */
.app-modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.app-modal-x {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.app-modal-x:hover { opacity: 0.8; }

.app-modal-body {
    padding: 16px;
    overflow-y: auto;
    /* Sin esto, un hijo flex no se encoge por debajo de su contenido: en
       formularios altos el cuerpo empuja el pie fuera de la vista en vez
       de scrollear (el pie de acciones queda "cortado" a la mitad). */
    flex: 1 1 auto;
    min-height: 0;
}

/* ==================================================================
   Panel de detalle de página completa (mismo patrón que Registro
   Productos: cabecera .p-head con volver/título a la izquierda y
   Cancelar/Guardar a la derecha, más tarjeta .p-card con las pestañas
   y su contenido). Definido una sola vez aquí porque lo comparten
   varias páginas de mantenimiento tipo TAB (Laboratorios, Proveedores);
   Registro Productos conserva su propia copia con ámbito de página en
   ProductosMaintenance.razor.css, que por especificidad de CSS-isolation
   sigue ganando ahí y no se ve afectada por estas reglas globales. */
.p-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.p-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E2D3D;
    margin: 0;
}

.p-sub {
    font-size: .82rem;
    color: #6b7280;
    margin: .1rem 0 0;
}

.p-code {
    color: #00ACC1;
    font-weight: 600;
    font-family: 'Consolas', 'Courier New', monospace;
}

.p-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.app-modal-foot {
    padding: 14px 16px 18px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ═════════════ Shortcut bar de las pantallas de consulta ═════════════
   Elige la vista dentro de una misma pantalla, al pie del panel de filtros y con el
   aspecto del ShortCutBar de las ventanas originales: la opción activa en ámbar y las
   demás en azul claro. Los márgenes negativos la sacan del padding del cuerpo del panel
   (.7rem .85rem 1rem) para que llegue a los bordes. Si hay una sola vista, el ítem va en
   un <div>: marca dónde estás y no hay a dónde ir. */
.app-scbar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 1.1rem -.85rem -1rem;
    padding: .45rem .5rem .5rem;
    background: #dbe7f5;
    border-top: 1px solid #b3cae4;
}

.app-scbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: .38rem .6rem;
    border: 1px solid #b3cae4;
    border-radius: 4px;
    background: linear-gradient(#fbfdff, #dceaf9);
    color: #1F3A63;
    font-size: .83rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.app-scbar-item:hover { background: linear-gradient(#ffffff, #e9f3fd); }

/* Sin más vistas a las que ir, el ítem no se comporta como botón. */
div.app-scbar-item { cursor: default; }

.app-scbar-item.is-activo {
    background: linear-gradient(#ffd98a, #f6a939);
    border-color: #d9922b;
    color: #4a3106;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.app-scbar-icono {
    flex: 0 0 auto;
    color: #2a6099;
    display: inline-flex;
}

.app-scbar-item.is-activo .app-scbar-icono { color: #7a4a06; }

/* ═════════════ Mantenimientos tipo ficha ═════════════
   Look compartido por las pantallas de lista + ficha (Bonificaciones Ventas, Registro de
   Sorteos): la tarjeta, sus pestañas, el buscador de productos y el switch de estado.
   Vive aquí, y no en el CSS aislado de una página, porque lo usan varias.
   Paleta del proyecto: #1E2D3D / #26C6DA. */
.mant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.mant-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E2D3D;
    margin: 0;
}

.mant-sub {
    font-size: .82rem;
    color: #6b7280;
    margin: .1rem 0 0;
}

.mant-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.mant-card-pad { padding: 1rem 1.25rem; }

.mant-code {
    color: #00ACC1;
    font-weight: 600;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* Código del producto al lado de su descripción, como en el detalle de Facturación. */
.mant-cod {
    margin-left: 6px;
    font-family: 'Consolas', monospace;
    font-size: .72rem;
    color: #94a3b8;
}

/* Pestañas */
.mant-tabs { border-bottom: 1px solid #dee2e6; }

.mant-tabs .nav-link {
    color: #9ca3af;
    font-weight: 600;
    font-size: .9rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
}

.mant-tabs .nav-link:hover { color: #4b5563; }

.mant-tabs .nav-link.active {
    color: #1E2D3D;
    border-bottom-color: #26C6DA;
    background: none;
}

.mant-tabs .badge { margin-left: .4rem; font-size: .7rem; }

.mant-card .form-control:focus,
.mant-card .form-select:focus {
    border-color: #26C6DA;
    box-shadow: 0 0 0 .2rem rgba(38, 198, 218, .25);
}

.mant-chk:checked {
    background-color: #26C6DA;
    border-color: #26C6DA;
}

/* El código del producto es corto: no necesita todo el ancho del grupo. */
.mant-codpro {
    flex: 0 0 110px;
    width: 110px;
}

/* Grilla de establecimientos con scroll */
.mant-estab-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: auto;
    max-height: 460px;
}

.mant-sticky th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Buscador de productos */
.mant-buscador { max-width: 720px; }

.mant-buscador-lista {
    max-height: 45vh;
    overflow-y: auto;
}

.mant-fila { cursor: pointer; }

/* Switch del estado, en la cabecera de la ficha: muestra la acción disponible. */
.mant-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.mant-switch.verde { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.mant-switch.verde:hover { background: #dcfce7; }

.mant-switch.roja { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
.mant-switch.roja:hover { background: #fee2e2; }

/* Aviso de solo lectura en la cabecera de la ficha. */
.mant-lectura {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .25rem .7rem;
}

/* Título de sección dentro de la ficha (Paquete, Productos). */
.mant-sect {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #00838F;
    border-bottom: 1px solid #26C6DA;
    padding-bottom: .35rem;
    margin-bottom: 1rem;
}

/* Suma de los productos contra el precio del paquete: en rojo cuando no cuadra. */
.mant-total {
    font-size: .8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
}

.mant-total.descuadre { color: #dc2626; }

/* ═════════════ Ruta sin permiso ═════════════
   Lo que se ve en lugar de la pantalla cuando el grupo no tiene la opción. Mejor esto que un
   404: el problema no es que la página no exista, es que no le corresponde a este usuario. */
.sin-acceso {
    max-width: 520px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.sin-acceso-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #FBF0DC;
    color: #B4720C;
}

.sin-acceso h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1E2D3D;
    margin: 0 0 .6rem;
}

.sin-acceso p {
    font-size: .88rem;
    color: #6b7280;
    margin: 0 0 1.4rem;
}

.sin-acceso code {
    color: #00ACC1;
    font-weight: 600;
}

/* Dos detalles lado a lado dentro de una ficha (Promociones Varias): mitad y mitad, y uno
   debajo del otro cuando la pantalla se angosta. Cada grilla desplaza por dentro. */
.mant-detalles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.mant-detalle { min-width: 0; }

@media (max-width: 1300px) {
    .mant-detalles { grid-template-columns: minmax(0, 1fr); }
}