.form-control {
    font-size: 0.85rem !important;
    padding: 0.25rem 0.5rem; /* Para reducir altura */
}
/* Botones */
.btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
}

/* Tablas */
.table {
    font-size: 0.85rem;
}

/* Tablas */
.table-chica {
    font-size: 0.75rem;
}

.rz-datatable-table {
    table-layout: auto !important;
    width: 100% !important;
}

/* Sobrescribe la clase de Radzen, que por defecto pone table-layout: fixed */
.rz-datatable .rz-datatable-table .rz-grid-table-fixed {
    table-layout: auto !important;
    width: 100% !important;
    white-space: normal; /* Si quieres permitir quiebre de línea */
    word-wrap: break-word; /* Permitir partir palabras largas */
}

.container{
    margin-left:inherit;
    margin-right:inherit;
}



/* Afecta el texto en las celdas y en los headers */
.rz-datatable .rz-cell-data,
.rz-datatable .rz-column-header {
    font-size: 0.85rem; /* Ajusta a tu gusto */
    padding: 0.4rem; /* Ajusta para reducir altura */
}

.rz-datatable {
    /* Para ajustar aún más espacios, bordes o el ancho global */
    font-size: 0.85rem; /* Si deseas un cambio global para la tabla */
}

.label {
    font-size: small;
}

multiselect, .rz-dropdown {
    font-size: small;
}

.rz-stack {
    height:30px;

}


.company-info-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem 0.55rem;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.9); /* texto sobre el violeta del sidebar */
}

.company-details {
    display: flex;
    flex-direction: column;
    min-width: 0; /* permite truncar nombres largos */
}

    .company-details .empresa-name {
        font-weight: 600;
        font-size: 0.82rem;
        line-height: 1.2;
        margin-bottom: 0.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .company-details .sucursal-name {
        font-size: 0.72rem;
        line-height: 1.2;
        opacity: 0.7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.icon-boton {
    cursor: pointer; /* Cambia el cursor al pasar por el ícono */
    transition: color 0.2s;
}

    .icon-boton:hover {
        color: #ffffff; /* Se aclara al pasar el ratón */
    }

/* Íconos de acción con clase semántica: conservan su color propio (el !important de
   .icon-boton en app.css se los pisaba). Danger=rojo, warning=ámbar, success=verde.
   Custom.css carga último → gana. (El default y hover de los neutros = acento, en app.css.) */
.icon-boton.text-danger,
.icon-boton.text-danger:hover { color: var(--bs-danger, #dc3545) !important; }
.icon-boton.text-warning,
.icon-boton.text-warning:hover { color: #f59e0b !important; }
.icon-boton.text-success,
.icon-boton.text-success:hover { color: var(--bs-success, #198754) !important; }



// Ocultar botón de subir subir y bajar de Radzen
.rz-spinner-button {
    display: none !important;
}

/* Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.overlay-cargando {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}



.scrollable-area {
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

/* ── Popup de filtro (embudo) recortado por el wrapper de las grillas ──────────
   Cada grilla va envuelta en <div style="overflow:auto"> (para desbordes). Cuando
   la grilla es baja (pocas filas), ese overflow recortaba verticalmente el popup
   del filtro Excel al alto de la grilla. El scroll horizontal de grillas anchas lo
   maneja el propio .e-content de Syncfusion (verificado), así que el wrapper NO
   necesita recortar: lo pasamos a visible (!important vence al style inline). */
div:has(> .e-grid) {
    overflow: visible !important;
}

/* Corrige las columnas fijas (sticky real) */
.e-grid .e-leftfreeze,
.e-grid .e-headercell.e-leftfreeze {
    position: sticky !important;
    background-color: #fff !important;
    z-index: 4 !important;
}

/* Evita que las celdas congeladas se superpongan */
.e-grid .e-freezeleftborder {
    box-shadow: none !important;
}

/* Arregla el problema de "sombra proyectada falsa" */
.e-grid .e-rowcell.e-leftfreeze {
    box-shadow: inset -1px 0 0 #ddd;
}

/* Arregla encabezado congelado mal alineado */
.e-grid .e-headercell.e-freezeleftborder {
    box-shadow: inset -1px 0 0 #ddd;
}


.e-grid .e-headercell.e-leftfreeze,
.e-grid .e-rowcell.e-leftfreeze {
    background-color: #fff !important;
    position: sticky !important;
    z-index: 3 !important;
}

.e-grid .e-headercell.e-freezeleftborder,
.e-grid .e-rowcell.e-freezeleftborder {
    box-shadow: none !important;
}


/* CAMBIOS EN NAV BAR*/
/* Layout principal */
/* Estructura general */
.layout {
    display: flex;
    height: 100vh;
}

/* Franja de acento al pie de la pantalla. Decorativa (pointer-events:none, no tapa
   scrollbars ni clics). Toma el color personalizado del usuario: usa la variable de
   acento y, si no, el color del botón primario del tema (magenta de marca por defecto). */
.brand-bottom-strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--app-accent, #dc2c88);
    z-index: 1032; /* sobre la barra (1031), debajo de diálogos/modales */
    pointer-events: none;
}

/* Shell de páginas SIN sesión (login, recuperar contraseña): sin menú ni barra
   superior, contenido a pantalla completa. */
.anon-shell {
    min-height: 100vh;
    background: #e0e1e7;
}

/* Tarjeta de marca para páginas de cuenta (recuperar/reset contraseña, confirmaciones,
   lockout, etc.). El login tiene su propio diseño; estas van centradas en una card. */
.solfa-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}
.solfa-auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(13, 23, 57, .12);
    padding: 2.25rem 2rem;
}
.solfa-auth-logo { display: block; width: 175px; max-width: 60%; margin: 0 auto 1.6rem; }
.solfa-auth-card h1 { font-size: 1.4rem; font-weight: 600; color: #380c5c; margin-bottom: .2rem; }
.solfa-auth-card h2 { font-size: .95rem; font-weight: 400; color: #6b6b80; margin-bottom: 1.1rem; }
.solfa-auth-card h3 { font-size: 1.05rem; font-weight: 600; color: #0d1739; }
.solfa-auth-card hr { display: none; } /* la línea divisoria grande no hace falta en la card */
/* Las páginas usan <div class="row"><div class="col-md-4"> que angostaría el form;
   dentro de la card lo forzamos a ancho completo. */
.solfa-auth-card .row { margin: 0; }
.solfa-auth-card .row > [class^="col-"],
.solfa-auth-card .row > [class*=" col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

/* Menú lateral */
.nav-scrollable {
    width: 250px;
    transition: width 0.3s ease;
    background: var(--app-sidebar-bg, #380c5c);
    color: white;
    overflow-x: hidden;
    border-bottom-right-radius: 70px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Zona scrolleable del menú (el botón "Cerrar panel" queda fijo abajo) */
.nav-scroll-inner {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Scrollbar fino: la barra nativa de Windows (~15px) comía ancho útil
       de los textos del menú y provocaba más títulos en dos líneas. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
    /* Reserva SIEMPRE el espacio de la barra de scroll (aparezca o no), para que
       al abrir menús y activarse el scroll NO se reacomode/achique el contenido. */
    scrollbar-gutter: stable;
}

.nav-scroll-inner::-webkit-scrollbar { width: 6px; }
.nav-scroll-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.nav-scroll-inner::-webkit-scrollbar-track { background: transparent; }

/* Botón "Cerrar panel" al pie del menú */
.cerrar-panel-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .6rem 1rem;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .15);
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    cursor: pointer;
}
.cerrar-panel-btn:hover { background: rgba(0, 0, 0, .28); color: #fff; }
.cerrar-panel-btn .material-symbols-outlined { font-size: 1.1rem; }

/* Menú colapsado */
#navToggle:checked ~ .nav-scrollable {
    width: 1px;
}

    #navToggle:checked ~ .nav-scrollable .nav-link span,
    #navToggle:checked ~ .nav-scrollable .sub-menu {
        display: none;
    }

/* Contenido principal */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Barra superior — gris claro (marca): logo + versión a la izquierda, usuario a la derecha */
.top-row {
    background-color: var(--app-topbar-bg, #e0e1e7);
    color: var(--app-topbar-fg, #0d1739);
    padding: 0.5rem 1rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid rgba(13, 23, 57, 0.12);
    z-index: 1031; /* sobre el menú (1000), debajo de modales Bootstrap (1050) */
}

/* ── Header (barra superior) — controles de marca ── */
.topbar-logo { height: 30px; width: auto; display: block; }
/* La versión se apoya en la línea base del wordmark del logo (misma línea de texto).
   Color: sigue el contraste automático de la barra (--app-topbar-fg), atenuado. */
.topbar-version { color: var(--app-topbar-fg, #6b6b80); opacity: .75; font-size: .85rem; white-space: nowrap; align-self: flex-end; padding-bottom: 4px; margin-top:25px;}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .15rem;
    color: var(--app-topbar-fg, rgba(13, 23, 57, .6));
    text-decoration: none;
    transition: opacity .15s;
    opacity: .85;
}
.topbar-icon-btn:hover { opacity: 1; }
.topbar-icon-btn .material-symbols-outlined { font-size: 1.2rem; }

.topbar-username {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--app-topbar-fg, #0d1739);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.topbar-username:hover { opacity: .85; }
.topbar-username .material-symbols-outlined { font-size: .95rem; }

.topbar-logout-form { margin: 0; line-height: 1; }
.topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--app-accent, #dc2c88);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}
.topbar-logout .material-symbols-outlined { font-size: .95rem; }
.topbar-logout:hover { color: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000); }

/* Campana sobre header claro: ícono suelto (sin recuadro), tono suave */
.top-row .campana-btn {
    border: none;
    background: none;
    box-shadow: none;
    padding: .15rem;
    color: var(--app-topbar-fg, rgba(13, 23, 57, .6));
    opacity: .85;
    line-height: 1;
}
.top-row .campana-btn:hover { background: none; opacity: 1; }
.top-row .campana-btn .material-symbols-outlined { font-size: 1.2rem; }

/* Botón "Abrir panel": sólo visible cuando el menú está colapsado */
.abrir-panel-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--app-topbar-fg, #380c5c);
    cursor: pointer;
}
.abrir-panel-btn:hover { background: rgba(128, 128, 128, .12); }
.layout.menu-oculto .abrir-panel-btn { display: inline-flex; }

/* ── Botones del sistema: paleta de marca ──────────────────────────────────
   Guardar (btn-success, era verde) → magenta;  Cancelar (btn-secondary, gris)
   → gris de marca + texto navy. Bootstrap local es 5.1 (NO usa variables
   --bs-btn-*), así que se sobrescribe con propiedades directas + !important.
   El "Guardar" usa las MISMAS variables del tema que btn-primary, de modo que
   si el usuario personaliza el color de botón en /preferencias, también se
   adapta. El rojo de "Eliminar" (btn-danger) se deja como está. */
.btn-success {
    background-color: var(--app-btn-primary-bg, #dc2c88) !important;
    border-color: var(--app-btn-primary-border, #ad0865) !important;
    color: var(--app-btn-primary-fg, #fff) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:active:focus,
.btn-success.active,
.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--app-btn-primary-bg-hover, var(--app-btn-primary-bg, #ad0865)) !important;
    border-color: var(--app-btn-primary-border, #ad0865) !important;
    color: var(--app-btn-primary-fg, #fff) !important;
    box-shadow: none !important;
}
/* Bootstrap 5.3 genera .btn-primary con --bs-btn-*: #0d6efd HARDCODEADO. El override de
   background-color de .btn-primary (sin !important) NO gana en el estado :disabled (pierde
   contra .btn:disabled por especificidad) → los botones DESHABILITADOS (Guardar/Validar/
   Generar/Aceptar hasta cumplir condiciones) salían CELESTES. Se setean las variables --bs-btn-*
   para que TODOS los estados (normal/hover/activo/DISABLED) usen el color de botón del tema. */
.btn-primary,
.btn-success {
    --bs-btn-bg: var(--app-btn-primary-bg, #dc2c88);
    --bs-btn-border-color: var(--app-btn-primary-border, #ad0865);
    --bs-btn-color: var(--app-btn-primary-fg, #fff);
    --bs-btn-hover-bg: var(--app-btn-primary-bg-hover, var(--app-btn-primary-bg, #ad0865));
    --bs-btn-hover-border-color: var(--app-btn-primary-border, #ad0865);
    --bs-btn-hover-color: var(--app-btn-primary-fg, #fff);
    --bs-btn-active-bg: var(--app-btn-primary-bg-hover, var(--app-btn-primary-bg, #ad0865));
    --bs-btn-active-border-color: var(--app-btn-primary-border, #ad0865);
    --bs-btn-active-color: var(--app-btn-primary-fg, #fff);
    --bs-btn-disabled-bg: var(--app-btn-primary-bg, #dc2c88);
    --bs-btn-disabled-border-color: var(--app-btn-primary-border, #ad0865);
    --bs-btn-disabled-color: var(--app-btn-primary-fg, #fff);
}
.btn-secondary {
    background-color: #e0e1e7 !important;
    border-color: #cdd0da !important;
    color: #0d1739 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary.active {
    background-color: #d3d5de !important;
    border-color: #b9bcc9 !important;
    color: #0d1739 !important;
    box-shadow: none !important;
}

/* ── Acciones SECUNDARIAS (eran celeste `btn-info` de Bootstrap) ──────────────
   Violeta claro de marca (#9e59d7 por defecto). NO agrega una preferencia nueva:
   se DERIVA de la barra de menú manteniendo su tonalidad y subiendo la luminosidad.
   Barra #380c5c = hsl(273, 77%, 20%)  →  #9e59d7 = hsl(273, 61%, 60%)
   Es decir: mismo hue, saturación al 80% y luminosidad fija al 60%. Si el usuario
   elige un marrón para el menú, esto queda en un marrón más claro, y así. */
:root {
    /* Fallback para navegadores sin relative color syntax: el violeta por defecto. */
    --app-secundario: #9e59d7;
}
@supports (color: hsl(from red h s l)) {
    :root {
        --app-secundario: hsl(from var(--app-sidebar-bg, #380c5c) h calc(s * 0.8) 60%);
    }
}

.btn-info {
    background-color: var(--app-secundario) !important;
    border-color: color-mix(in srgb, var(--app-secundario) 82%, #000) !important;
    color: #fff !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:active:focus,
.btn-info.active,
.btn-info:disabled,
.btn-info.disabled {
    background-color: color-mix(in srgb, var(--app-secundario) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--app-secundario) 70%, #000) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-outline-info {
    --bs-btn-color: var(--app-secundario);
    --bs-btn-border-color: var(--app-secundario);
    --bs-btn-hover-bg: var(--app-secundario);
    --bs-btn-hover-border-color: var(--app-secundario);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-secundario) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-secundario) 82%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--app-secundario);
    --bs-btn-disabled-border-color: var(--app-secundario);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 158, 89, 215);
}
/* Bootstrap 5.3: `.badge` fuerza texto BLANCO (--bs-badge-color:#fff) y `.bg-*` solo
   pinta el fondo → los badges con fondo CLARO quedaban texto blanco sobre claro (ilegible).
   Se fuerza texto oscuro en esos fondos claros (equivale a lo que hace `.text-bg-*`). */
.badge.bg-warning,
.badge.bg-light,
.badge.bg-info {
    color: #000 !important;
}

/* Controles NATIVOS del navegador: el highlight del calendario de <input type="date">,
   checkboxes/radios/range nativos, etc. usan `accent-color` (default celeste del navegador).
   Se ata al acento de marca (hereda a todo el árbol). */
:root {
    accent-color: var(--app-accent, #dc2c88);
}

/* ── Acentos de marca para Bootstrap y Syncfusion ──────────────────────────
   Bootstrap: "primary" (badges bg-primary, paginación, text-primary, checks…) → magenta.
   Syncfusion: el tema bootstrap5.3 expone tokens `--color-sf-primary-*` (azul #0d6efd = el
   "celeste" de las grillas: fila seleccionada, hover, paginador, checkboxes, orden/filtro).
   Se rebrandean a magenta/rosa de marca. Custom.css carga último → gana. */
:root {
    --bs-primary: #dc2c88;
    --bs-primary-rgb: 220, 44, 136;

    --color-sf-primary: rgba(220, 44, 136, 1);
    --color-sf-primary-light: #e85aa5;
    --color-sf-primary-lighter: #fbe0ee; /* fondo de fila seleccionada/hover (era celeste #cfe2ff) */
    --color-sf-primary-dark: #ad0865;
    --color-sf-primary-darker: #8a0a50;
    --color-sf-primary-shadow: 220, 44, 136;
}

/* Grillas: botón "Editar" (btn-warning, era amarillo) → color de ACENTO del tema
   (fallback al violeta de marca si no hay tema custom). Para diferenciarlo del
   "Guardar" (acento pleno) se le da una vuelta de tuerca: borde más oscuro + un
   subrayado interno (box-shadow inset, no altera el layout) en tono más oscuro.
   "Eliminar" (btn-danger) se deja rojo (advertencia/borrado). */
.btn-warning {
    background-color: var(--app-accent, #380c5c) !important;
    border-color: color-mix(in srgb, var(--app-accent, #380c5c) 76%, #000) !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--app-accent, #380c5c) 60%, #000) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: color-mix(in srgb, var(--app-accent, #380c5c) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--app-accent, #380c5c) 66%, #000) !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--app-accent, #380c5c) 52%, #000) !important;
}

/* ── Controles Bootstrap que en 5.3 usan azul #0d6efd HARDCODEADO → marca ────
   (tabs/links, switches/checks, foco de inputs, dropdowns y paginación). */
:root {
    /* Links y TABS: los `.nav-link` usan --bs-link-color. Siguen el acento (default oscuro, hover pleno). */
    --bs-link-color: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000);
    --bs-link-color-rgb: var(--bs-primary-rgb, 173, 8, 101);
    --bs-link-hover-color: var(--app-accent, #dc2c88);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb, 220, 44, 136);
}
/* Switches / checkboxes / radios marcados (era azul hardcodeado) → acento del usuario */
.form-check-input:checked {
    background-color: var(--app-accent, #dc2c88) !important;
    border-color: var(--app-accent, #dc2c88) !important;
}
.form-check-input:focus { border-color: color-mix(in srgb, var(--app-accent, #dc2c88) 60%, #fff); }
/* Borde de foco de inputs/selects (el box-shadow ya es magenta en app.css) */
.form-control:focus,
.form-select:focus { border-color: color-mix(in srgb, var(--app-accent, #dc2c88) 60%, #fff); }
/* Tabs tipo "pill" activas + ítem activo de dropdowns Bootstrap */
.nav-pills .nav-link.active,
.dropdown-item.active,
.dropdown-item:active { background-color: var(--app-accent, #dc2c88); }
/* Paginación Bootstrap */
.page-item.active .page-link { background-color: var(--app-accent, #dc2c88); border-color: var(--app-accent, #dc2c88); }
.page-link { color: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000); }
.page-link:hover { color: var(--app-accent, #dc2c88); }

/* Tabs (nav-tabs) — estilo "subrayado" theme-aware: inactivas en el color de texto del
   tema (legible en claro y oscuro), activa en el ACENTO con subrayado. Sin caja clara
   (antes las inactivas quedaban rosa fijo y en oscuro se veían mal). */
.nav-tabs {
    border-bottom-color: var(--bs-border-color, #dee2e6);
}
.nav-tabs .nav-link {
    color: var(--bs-body-color, #495057);
    opacity: .6;
    background: transparent;
    border-color: transparent;
}
.nav-tabs .nav-link:hover {
    opacity: 1;
    color: var(--app-accent, #dc2c88);
    border-color: transparent transparent var(--app-accent, #dc2c88);
    isolation: auto;
}
.nav-tabs .nav-link.active {
    opacity: 1;
    font-weight: 600;
    color: var(--app-accent, #dc2c88);
    background: transparent;
    border-color: transparent transparent var(--app-accent, #dc2c88);
    border-bottom-width: 2px;
}

/* Radzen: su color primary es naranja (#ff6d41) → magenta/rosa de marca.
   Cubre botones, pickers y acentos de componentes Radzen. */
:root {
    --rz-primary: var(--app-accent, #dc2c88);
    --rz-primary-light: color-mix(in srgb, var(--app-accent, #dc2c88) 78%, #fff);
    --rz-primary-lighter: rgba(var(--bs-primary-rgb, 220, 44, 136), 0.16);
    --rz-primary-dark: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000);
    --rz-primary-darker: color-mix(in srgb, var(--app-accent, #dc2c88) 68%, #000);
}

/* Botones "outline" → paleta (Bootstrap 5.3 usa variables --bs-btn-*).
   primary/success → magenta; warning ("Mov. manuales") → violeta; secondary → gris.
   outline-danger ("Cerrar") se deja rojo. */
.btn-outline-primary,
.btn-outline-success {
    --bs-btn-color: var(--app-accent, #dc2c88);
    --bs-btn-border-color: var(--app-accent, #dc2c88);
    --bs-btn-hover-bg: var(--app-accent, #dc2c88);
    --bs-btn-hover-border-color: var(--app-accent, #dc2c88);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-accent, #dc2c88) 82%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 220, 44, 136);
}
.btn-outline-warning {
    --bs-btn-color: var(--app-accent, #380c5c);
    --bs-btn-border-color: var(--app-accent, #380c5c);
    --bs-btn-hover-bg: var(--app-accent, #380c5c);
    --bs-btn-hover-border-color: var(--app-accent, #380c5c);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--app-accent, #380c5c) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-accent, #380c5c) 82%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 56, 12, 92);
}
.btn-outline-secondary {
    --bs-btn-color: #0d1739;
    --bs-btn-border-color: #cdd0da;
    --bs-btn-hover-bg: #e0e1e7;
    --bs-btn-hover-border-color: #b9bcc9;
    --bs-btn-hover-color: #0d1739;
    --bs-btn-active-bg: #d3d5de;
    --bs-btn-active-border-color: #b9bcc9;
    --bs-btn-active-color: #0d1739;
    --bs-btn-focus-shadow-rgb: 13, 23, 57;
}

/* Outline en MODO OSCURO: el texto navy/violeta de las variantes claras es ilegible
   sobre fondo oscuro → versiones con texto claro. */
html[data-app-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #cfd2dc;
    --bs-btn-border-color: #5a5d6a;
    --bs-btn-hover-bg: #3a3a3a;
    --bs-btn-hover-border-color: #6a6d7a;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #444;
    --bs-btn-active-color: #fff;
}
html[data-app-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #c9a8e8;
    --bs-btn-border-color: #8b5fb5;
    --bs-btn-hover-bg: #380c5c;
    --bs-btn-hover-border-color: #8b5fb5;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2b0947;
    --bs-btn-active-color: #fff;
}

/* Botones "success" de Syncfusion (e-success) → magenta (también sigue el tema) */
.e-btn.e-success,
.e-css.e-btn.e-success {
    background-color: var(--app-btn-primary-bg, #dc2c88) !important;
    border-color: var(--app-btn-primary-border, #ad0865) !important;
    color: var(--app-btn-primary-fg, #fff) !important;
}
.e-btn.e-success:hover,
.e-btn.e-success:focus,
.e-btn.e-success:active {
    background-color: var(--app-btn-primary-bg-hover, var(--app-btn-primary-bg, #ad0865)) !important;
    border-color: var(--app-btn-primary-border, #ad0865) !important;
    color: var(--app-btn-primary-fg, #fff) !important;
}

/* Página interior */
.scrollable-area {
    flex-grow: 1;
    overflow: auto;
    padding: 1rem;
    background: var(--app-content-bg, white);
}

/* OJO: b-7mtixmq7ph es el scope de MainLayout → este selector GANA a `.top-row`
   por especificidad. Debe usar el MISMO fondo (gris claro de marca), si no el header
   queda oscuro. */
.top-row[b-7mtixmq7ph] {
    background-color: var(--app-topbar-bg, #e0e1e7);
    border-bottom: 1px solid rgba(13, 23, 57, 0.12);
    height: 3.5rem;
    display: flex;
    align-items: center;
}

/* Tamaño de letra base del usuario. Va en :root (misma especificidad que la regla
   :root de Radzen, que también fija el font-size del root) y como Custom.css carga
   ÚLTIMO, gana. El body y todo lo rem-based escalan a partir de este root. */
:root {
    font-size: var(--app-font-size-base, 100%);
}

/* Diálogos Syncfusion por ENCIMA de la barra superior (.top-row tiene z-index:1031).
   Syncfusion calcula z-index ~1000 sin contemplar la top-row → el modal quedaba detrás.
   1040 lo deja sobre la top-row (1031) y debajo de los modales Bootstrap (1050+),
   para que un modal hijo (cobro, etc.) siga apareciendo por encima. */
.e-dlg-container { z-index: 1040 !important; }
.e-dlg-overlay { z-index: 1039 !important; }
/* CRÍTICO: el contenedor (1040) crea un stacking context; adentro conviven el cuadro
   (.e-dialog, z-index inline ~1000 de Syncfusion) y el overlay (forzado a 1039 arriba).
   Sin esta regla el overlay queda ENCIMA del cuadro → modal oscurecido y bloqueado.
   El cuadro debe quedar SIEMPRE sobre su overlay dentro del contenedor. */
.e-dlg-container .e-dialog { z-index: 1040 !important; }

/* ── Theming: modo oscuro — legibilidad del texto del "chrome" propio ──
   Los colores de fondo (sidebar/topbar/contenido) los fija el usuario vía variables;
   acá sólo aseguramos texto claro cuando el modo oscuro está activo. */
/* ───────────────────────────────────────────────────────────────────────────
   Theming — modo oscuro. Variables de Bootstrap + overrides de superficies que
   por defecto quedan blancas (cards, modales, inputs, dropdowns, grillas).
   Sólo aplica cuando data-app-theme="dark"; el modo claro/default no se toca.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-app-theme="dark"] {
    --bs-body-color: #e0e0e0;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(224, 224, 224, 0.75);
    --bs-tertiary-color: rgba(224, 224, 224, 0.5);
    --bs-border-color: #3a3a3a;
    --bs-secondary-bg: #2a2a2a;
    --bs-tertiary-bg: #242424;
    --bs-body-bg: #1e1e1e; /* el fondo lo maneja el modo (no hay picker de fondo) */
    /* Superficies para estilos inline del markup (paneles/listas con fondo claro hardcodeado).
       En el markup usar background:var(--app-surface-1,#fff) / var(--app-surface-2,#f8f9fa). */
    --app-surface-1: #1e1e1e;
    --app-surface-2: #242424;
    --app-list-header-bg: #1e3a5f; /* encabezados de columna de listas (eran celeste #d0e4ff) */
    color-scheme: dark;
}

html[data-app-theme="dark"] body,
html[data-app-theme="dark"] .scrollable-area {
    color: #e0e0e0;
}

/* El fondo del área principal lo maneja el MODO (no un color de usuario). */
html[data-app-theme="dark"] .scrollable-area {
    background-color: #1e1e1e;
}

/* Header: el color de texto/íconos lo maneja --app-topbar-fg (contraste automático según
   la luminancia de la barra elegida, calculado en solfaTheme). Acá sólo el borde inferior. */
html[data-app-theme="dark"] .top-row { border-bottom-color: rgba(255, 255, 255, .12); }

/* Superficies tipo "tarjeta" / contenedores que suelen ser blancos */
html[data-app-theme="dark"] .card,
html[data-app-theme="dark"] .modal-content,
html[data-app-theme="dark"] .offcanvas,
html[data-app-theme="dark"] .dropdown-menu,
html[data-app-theme="dark"] .list-group-item,
html[data-app-theme="dark"] .accordion-item,
html[data-app-theme="dark"] .popover {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

html[data-app-theme="dark"] .modal-header,
html[data-app-theme="dark"] .modal-footer,
html[data-app-theme="dark"] .card-header,
html[data-app-theme="dark"] .card-footer {
    background-color: #242424;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

/* Utilidades de fondo claro de Bootstrap (.bg-light/.bg-white) usadas como paneles en
   varias pantallas (ComprobanteVta, RegistroGastos, etc.). Usan !important → el override
   también. Se fuerza el texto a claro dentro de ellas (incluye badges .text-dark). */
html[data-app-theme="dark"] .bg-light,
html[data-app-theme="dark"] .bg-white {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

html[data-app-theme="dark"] .bg-light .text-dark,
html[data-app-theme="dark"] .bg-light.text-dark,
html[data-app-theme="dark"] .bg-white .text-dark,
html[data-app-theme="dark"] .bg-white.text-dark {
    color: #e0e0e0 !important;
}

/* Controles de formulario (Bootstrap) */
html[data-app-theme="dark"] .form-control,
html[data-app-theme="dark"] .form-select,
html[data-app-theme="dark"] .input-group-text {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

html[data-app-theme="dark"] .form-control::placeholder { color: #8a8a8a; }

html[data-app-theme="dark"] .form-control:disabled,
html[data-app-theme="dark"] .form-control[readonly] { background-color: #2a2a2a; }

/* Items de dropdown */
html[data-app-theme="dark"] .dropdown-item { color: #e0e0e0; }
html[data-app-theme="dark"] .dropdown-item:hover,
html[data-app-theme="dark"] .dropdown-item:focus { background-color: #3a3a3a; color: #fff; }

/* Tablas Bootstrap (incluye estados hover/stripe para que el texto no se pierda) */
html[data-app-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e0e0e0;
    --bs-table-border-color: #3a3a3a;
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-striped-color: #e0e0e0;
    --bs-table-hover-bg: #333333;
    --bs-table-hover-color: #ffffff;
    --bs-table-active-bg: #3a3a3a;
    --bs-table-active-color: #ffffff;
    color: #e0e0e0;
}

/* Texto tenue (labels gris) que de otro modo queda ilegible */
html[data-app-theme="dark"] .text-muted,
html[data-app-theme="dark"] .text-secondary { color: #9a9a9a !important; }

/* Columnas congeladas de grillas Syncfusion (tenían background #fff !important) */
html[data-app-theme="dark"] .e-grid .e-leftfreeze,
html[data-app-theme="dark"] .e-grid .e-rightfreeze,
html[data-app-theme="dark"] .e-grid .e-headercell.e-leftfreeze,
html[data-app-theme="dark"] .e-grid .e-rowcell.e-leftfreeze {
    background-color: #1e1e1e !important;
}

/* Chip de "Total" (.total-chip) — era crema (#fffbe6); versión ámbar oscura */
html[data-app-theme="dark"] .total-chip {
    background: #3a2f0a;
    color: #ffd24d;
    border-color: #6b5600;
    box-shadow: none;
}

/* Avisos (Home + modal de la campana): markup <div class="alert-warning"> con una
   <table> adentro. En oscuro el .alert-warning conservaba el fondo amarillo claro de
   Bootstrap (#fff3cd) mientras la regla de .table forzaba texto claro (#e0e0e0)
   => texto claro sobre fondo claro = ilegible. Versión ámbar oscura legible. */
html[data-app-theme="dark"] .alert-warning {
    background-color: #3a2f0a;
    color: #ffe08a;
    border-color: #6b5600;
}

html[data-app-theme="dark"] .alert-warning .table {
    --bs-table-bg: transparent;
    --bs-table-color: #ffe08a;
    --bs-table-border-color: #6b5600;
    color: #ffe08a;
}

/* Totalizadores: inputs readonly de Syncfusion dentro de paneles .bg-light
   (Cantidad/IVA/Impuestos/Total). Fondo transparente para fundirse con el panel
   oscuro + valor en texto claro. */
html[data-app-theme="dark"] .bg-light .e-input-group,
html[data-app-theme="dark"] .bg-light .e-input-group.e-control-wrapper,
html[data-app-theme="dark"] .bg-light .e-numerictextbox {
    background: transparent !important;
    border-color: #3a3a3a !important;
}

html[data-app-theme="dark"] .bg-light .e-input,
html[data-app-theme="dark"] .bg-light .e-numerictextbox,
html[data-app-theme="dark"] .bg-light .e-input-group input {
    color: #e0e0e0 !important;
}

/* Botón "agregar artículo" (ícono add_circle, sin variante de color) — visible en oscuro */
html[data-app-theme="dark"] #addArticulo .material-symbols-outlined {
    color: #51cf66;
}

/* Preparacion.razor — tarjetas de mesas/comandas (clases del <style> de la página, fondo #fff).
   El selector con [data-app-theme] gana por especificidad al <style> inline de la página. */
html[data-app-theme="dark"] .prep-tarjeta {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

html[data-app-theme="dark"] .prep-tarjeta.tarjeta-lista {
    background: #1f2e23;
    border-color: #2f7d4a;
}

html[data-app-theme="dark"] .prep-tipo,
html[data-app-theme="dark"] .prep-tiempo,
html[data-app-theme="dark"] .prep-vacio {
    color: #9aa0a6;
}

html[data-app-theme="dark"] .prep-cantidad {
    background: #1e1e1e;
    color: #e0e0e0;
}

html[data-app-theme="dark"] .prep-item-row {
    border-bottom-color: #3a3a3a;
}

/* SelectorArticulos (ListVentas y otros listados) — estados de fila en oscuro.
   Las filas selected/hover/other-rubro eran celestes/lilas claros con texto claro = ilegibles. */
html[data-app-theme="dark"] .selector-articulos-wrapper .item-lista {
    border-bottom-color: #333;
}

html[data-app-theme="dark"] .selector-articulos-wrapper .item-lista:hover {
    background: #2f2f2f;
}

html[data-app-theme="dark"] .selector-articulos-wrapper .item-lista.selected {
    background: #14324f; /* azul oscuro */
    color: #e0e0e0;
}

html[data-app-theme="dark"] .selector-articulos-wrapper .item-lista.other-rubro {
    background: #2e2640; /* púrpura oscuro */
}

html[data-app-theme="dark"] .selector-articulos-wrapper .item-lista.other-rubro span {
    color: #c9c0e0 !important; /* el inline color:#666 quedaba muy oscuro */
}
/* .item-lista.active-rubro (azul #0d6efd + texto blanco) ya queda bien en oscuro */

@media (max-width: 768px) {
    /* ✅ El menú ocupa toda la pantalla menos la top-bar (3.5rem = 56px) */
    .nav-scrollable {
        position: fixed;
        top: 3.5rem; /* mismo alto que .top-row */
        left: 0;
        height: calc(100% - 3.5rem);
        width: 100vw;
        background: var(--app-sidebar-bg, #380c5c);
        z-index: 1000;
    }

    /* ✅ Al colapsar, se oculta completamente */
    #navToggle:checked ~ .nav-scrollable {
        width: 0;
        overflow: hidden;
    }

    /* ✅ Asegura que el texto e items del menú sean visibles en mobile */
    .nav-scrollable .nav-link span,
    .nav-scrollable .sub-menu {
        display: block !important;
    }

    /* ❌ Pero cuando está colapsado (en mobile), ocultamos todo */
    #navToggle:checked ~ .nav-scrollable .nav-link span,
    #navToggle:checked ~ .nav-scrollable .sub-menu {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Forzar visibilidad de los textos del menú en mobile */
    .nav-scrollable .nav-link span,
    .nav-scrollable .sub-menu {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #navToggle:checked ~ .nav-scrollable .nav-link span,
    #navToggle:checked ~ .nav-scrollable .sub-menu {
        display: none !important;
    }
}


#panelTotales .e-input-group input {
    text-align: right !important;
    padding-right: 6px !important; /* espacio a la derecha */
    height: 25px; /* alto total del campo */
    line-height: 25px; /* centrar verticalmente el texto */
    background-color: gainsboro;
    box-sizing: border-box; /* que el padding no deforme el alto */
}

/* Quitar bordes/padding extra del wrapper del NumericTextBox */
#panelTotales .e-input-group {
    height: 25px; /* mismo alto que el input */
    background-color: gainsboro;
    padding: 0 !important; /* sin padding interno extra */
    border-radius: 4px; /* opcional: esquinas redondeadas */
}


.fila-nuevo-precio {
    background-color: #e6ffe6 !important; /* verde suave */
    font-weight: bold;
}

.modal-dialog{
    max-width:95%;
}

.modal-dialog-angosto {
    max-width: 50%;
}

.e-grid .fila-anulada {
    text-decoration: line-through;
    color: #c62828 !important; /* rojo */
    text-decoration-thickness: 1.8px; /* probá 2–4px o 0.12em */
}

/* Compact "chips" para línea principal */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .15rem .4rem;
    max-width: 100%;
}

.chip-k {
    font-weight: 600;
    color: var(--bs-body-color);
}

.chip-v {
    max-width: 16rem;
    display: inline-block;
}

/* Animación caret del botón "Más datos" */
.collapse-caret {
    transition: transform .2s ease;
}

button[aria-expanded="true"] .collapse-caret {
    transform: rotate(180deg);
}


/*Animacion de costos*/
        /* Contenedor para ubicar el popover relativo al icono */
        .price-attn {
            position: relative;
            display: inline-block;
        }

        /* Ícono con pulso 2× + glow rojo */
        .attn-coin-strong {
            animation: coinPulseStrong 1.1s ease-in-out 3;
            transform-origin: center;
            text-shadow: 0 0 6px rgba(220,53,69,0.7), 0 0 12px rgba(220,53,69,0.5);
            font-size: 1.15rem; /* podés subirlo si querés más presencia */
        }

        @keyframes coinPulseStrong {
            0% {
                transform: scale(1) rotate(0deg);
                filter: drop-shadow(0 0 0 rgba(220,53,69,0));
            }

            35% {
                transform: scale(2) rotate(-6deg);
                filter: drop-shadow(0 0 10px rgba(220,53,69,0.9));
            }

            65% {
                transform: scale(2) rotate(6deg);
                filter: drop-shadow(0 0 10px rgba(220,53,69,0.9));
            }

            100% {
                transform: scale(1) rotate(0deg);
                filter: drop-shadow(0 0 0 rgba(220,53,69,0));
            }
        }

        /* Popover tipo “tooltip lindo” bien visible */
        .attn-pop {
            position: absolute;
            top: -10px; /* cerca del icono */
            left: 28px; /* a la derecha del icono */
            transform: translateY(-100%); /* lo sube arriba del icono */
            background: #111;
            color: #fff;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 0.85rem;
            line-height: 1.1;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            white-space: nowrap;
        }

            /* Flechita del popover */
            .attn-pop .attn-pop-arrow {
                position: absolute;
                bottom: -6px;
                left: 14px;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid #111;
            }

            /* Aparece unos segundos y se va */
            .attn-pop.show {
                animation: popInOut 4s ease-in-out 1 forwards;
            }

        @keyframes popInOut {
            0% {
                opacity: 0;
                transform: translateY(-110%);
            }

            10% {
                opacity: 1;
                transform: translateY(-100%);
            }

            80% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: translateY(-110%);
            }
        }

        /* Respeto a usuarios con reducción de movimiento */
        @media (prefers-reduced-motion: reduce) {
            .attn-coin-strong {
                animation: none;
            }

            .attn-pop.show {
                animation-duration: 1ms;
            }
        }


/* Si estás en un .razor.css, anteponé :global(...) a cada selector */
:global(.e-grid .e-rowcell.col-precio-attn) {
    overflow: visible !important; /* clave: que no recorte el popover */
    position: relative; /* para posicionar absoluto relativo a la celda */
    z-index: 5;
}

:global(.price-attn) {
    position: relative;
    display: inline-block;
}

:global(.attn-coin-strong) {
    animation: coinPulseStrong 1.1s ease-in-out 3;
    transform-origin: center;
    text-shadow: 0 0 6px rgba(220,53,69,0.7), 0 0 12px rgba(220,53,69,0.5);
    font-size: 1.15rem;
}

@keyframes coinPulseStrong {
    0% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(220,53,69,0));
    }

    35% {
        transform: scale(2) rotate(-6deg);
        filter: drop-shadow(0 0 10px rgba(220,53,69,0.9));
    }

    65% {
        transform: scale(2) rotate(6deg);
        filter: drop-shadow(0 0 10px rgba(220,53,69,0.9));
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(220,53,69,0));
    }
}

/* Popover estilo tooltip grande */
:global(.attn-pop) {
    position: absolute;
    bottom: 100%; /* arriba del icono */
    left: 0;
    margin-bottom: 8px; /* separación del icono */
    background: #111;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.15;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

:global(.attn-pop .attn-pop-arrow) {
    position: absolute;
    top: 100%;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #111;
}

/* Mostrar por unos segundos */
:global(.attn-pop.show) {
    animation: popInOut 4s ease-in-out 1 forwards;
}

@keyframes popInOut {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(6px);
    }
}

:global(.col-precio-attn) {
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

:global(.price-attn) {
    position: relative;
    display: inline-block;
}


/*-----------*/

.section-card {
    border: 1px solid #eee;
}

    .section-card .card-header {
        background: #f9fafb;
    }

.table-responsive {
    overflow-x: auto;
}

.form-label {
    font-size: .85rem;
    color: #555;
}

.badge.border {
    border-color: #ddd !important;
}

.collapse-caret {
    transition: transform .15s ease-in-out;
}

.collapse.show + .card-body .collapse-caret,
button[aria-expanded="true"] .collapse-caret {
    transform: rotate(180deg);
}

:root {
    --pad-xxs: .25rem;
}

.card-header {
    background: #f8f9fa;
}

.card-body .form-label {
    font-size: .85rem;
    color: #555;
}


/* sutil fondo + borde izquierdo */
.fila-top {
    background: #fff7e6;              /* tono suave */
    font-weight: 600;
    border-left: 4px solid #ffa940;   /* acento */
}

/* pequeño glow al aparecer */
@keyframes topPulse {
  0% { box-shadow: 0 0 0 rgba(255,169,64,0.0); }
  50% { box-shadow: 0 0 12px rgba(255,169,64,0.55); }
  100% { box-shadow: 0 0 0 rgba(255,169,64,0.0); }
}
.fila-top-glow { animation: topPulse 1.2s ease-out 1; }


/* Fila destacada: fondo cálido + acento lateral con glow */
.e-grid .e-content tr.fila-top {
    position: relative;
    background: linear-gradient(90deg, #fff7e6 0%, #fffdf8 60%, #ffffff 100%);
}

    .e-grid .e-content tr.fila-top::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, #ff8a00, #ffbe3d);
        box-shadow: 0 0 10px rgba(255, 174, 0, .45);
        border-radius: 0 6px 6px 0;
    }

    /* Sutil realce de bordes para separar la franja */
    .e-grid .e-content tr.fila-top > td {
        border-top: 1px solid #ffe1b3 !important;
        border-bottom: 1px solid #ffe1b3 !important;
    }

/* Pulse suave al aparecer */
@keyframes topPulse {
    0% {
        box-shadow: 0 0 0 rgba(255,169,64,0.0);
    }

    50% {
        box-shadow: 0 0 12px rgba(255,169,64,0.45);
    }

    100% {
        box-shadow: 0 0 0 rgba(255,169,64,0.0);
    }
}

.e-grid .e-content tr.fila-top.fila-top-glow {
    animation: topPulse 900ms ease-out 1;
}

/* Accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    .e-grid .e-content tr.fila-top.fila-top-glow {
        animation: none;
    }
}

/* Dark mode (por si tenés tema oscuro en algún cliente) */
@media (prefers-color-scheme: dark) {
    .e-grid .e-content tr.fila-top {
        background: linear-gradient(90deg, #2b241a 0%, #1f1a12 60%, #1a1a1a 100%);
    }

        .e-grid .e-content tr.fila-top::before {
            background: linear-gradient(180deg, #f6a130, #ffcc66);
            box-shadow: 0 0 10px rgba(246,161,48,.35);
        }

        .e-grid .e-content tr.fila-top > td {
            border-color: #4a3b22 !important;
        }
}
.e-grid .e-content tr.fila-top:hover {
    filter: brightness(1.02);
    box-shadow: 0 2px 10px rgba(255,169,64,.15) inset;
}


.btn-xs {
    padding: .125rem .375rem;
    font-size: .75rem;
    line-height: 1;
}

.total-chip {
    background: #fffbe6; /* amarillito suave */
    color: #7a5e00; /* dorado oscuro legible */
    border: 1px solid #ffe58f; /* borde suave */
    border-radius: .5rem; /* más redondeado */
    padding: .4rem .75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    font-size: 0.95rem;
}
    /* AGREGAR AL FINAL DE Custom.css */

    .layout {
        overflow: hidden;
    }

    .nav-scrollable {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        border-bottom-right-radius: 0 !important;
        transition: width 0.25s ease, min-width 0.25s ease !important;
    }

    #navToggle:checked ~ .nav-scrollable {
        width: 250px !important;
        min-width: 250px !important;
    }

    .layout.menu-oculto .nav-scrollable {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .main-content {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .scrollable-area .container,
    .scrollable-area .container-sm,
    .scrollable-area .container-md,
    .scrollable-area .container-lg,
    .scrollable-area .container-xl {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    @media (max-width: 768px) {
        .nav-scrollable {
            position: fixed !important;
            top: 3.5rem !important;            /* debajo de la barra superior, no la tapa */
            left: 0 !important;
            height: calc(100vh - 3.5rem) !important;
            width: 100vw !important;
            min-width: unset !important;
            max-width: unset !important;
            z-index: 1000 !important;
            transform: translateX(0) !important;
            transition: transform 0.25s ease !important;
            overflow-y: auto !important;
        }
    }

    html body .layout.menu-oculto .nav-scrollable {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }


/* ===== Campana de avisos importantes (barra superior) ===== */
.campana-btn {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.campana-btn:hover {
    background: rgba(255,255,255,.12);
}
.campana-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #e0e1e7; /* anillo del color de la barra (header claro) */
}

.campana-animada {
    animation: campanaShake 1.1s ease-in-out 3;
    transform-origin: center top;
}
@keyframes campanaShake {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-12deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    60% { transform: rotate(-4deg); }
    70% { transform: rotate(3deg); }
    80% { transform: rotate(-2deg); }
}
.campana-animada .campana-badge {
    animation: campanaBadgePulse 1.1s ease-in-out 3;
}
@keyframes campanaBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px #e0e1e7; }
    50% { transform: scale(1.25); box-shadow: 0 0 0 2px #e0e1e7, 0 0 8px 2px rgba(220,53,69,.7); }
}

@media (prefers-reduced-motion: reduce) {
    .campana-animada,
    .campana-animada .campana-badge {
        animation: none;
    }
}

/* ==== Tinte de marca sobre las fotos del login (carrusel) ====
   Ajustá el gradiente/opacidad acá y refrescá con Ctrl+F5 (sin recompilar).
   Cada rgba(): los 3 primeros números = color, el 4to = opacidad (0=transparente, 1=tapa).
   Actual: violeta/rosa arriba → azul marino (navy) abajo, bien opaco. */
.solfa-login-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg,
        rgba(173, 8, 101, 0.52) 0%,
        rgba(56, 12, 92, 0.80) 45%,
        rgba(13, 23, 57, 0.88) 100%);
}