/* Override local: fuerza el azul de marca del proyecto (blue-600/blue-700) sobre el
   --color-primary por defecto de INSPINIA (teal, definido por su sistema de skins en
   app.min.css). No se toca app.min.css directamente para poder re-vendorizar una
   actualización del tema sin perder este ajuste. */
html {
    --color-primary: #2563eb !important;
    --color-primary-hover: #1d4ed8 !important;
}

/* Topbar con degradado monocromático (solo variaciones del azul de marca --color-primary,
   #2563eb) -- reemplaza dos intentos previos (azul→verde, y luego navy casi negro→azul)
   que no convencieron visualmente; esta versión se queda en la misma familia de azul que
   ya se ve a la derecha del degradado anterior, sin mezclar otro tono.
   --topbar-bg se consume TAL CUAL (mismo valor) en dos cajas de altura distinta:
   `.app-header` (background: var(--topbar-bg), ~64px) y `.page-title-head:before`
   (150px) -- ver app.min.css. Un radial-gradient posicionado en % (probado antes como
   "brillo suave") se renderiza distinto en cada caja por tener alturas distintas, y eso
   dejaba una costura/transparencia rara justo donde termina el header y empieza la banda
   del título ("FINANZAS"). Se sustituyó por un patrón SVG de líneas tipo gráfica
   financiera (sparkline), repetido solo en X y anclado siempre en "top left" en ambas
   cajas -- al no depender de la altura del contenedor, la porción visible del patrón es
   idéntica en el header y en el arranque de la banda del título, sin costura.
   Selectores exactos: deben igualar la especificidad del compilado de app.min.css
   (html + 3 selectores de atributo) para ganar por orden de cascada sin `!important`
   -- ver layouts/base.html (`data-skin="luxe" data-topbar-color="dark"`) y el toggle de
   modo oscuro (`data-theme="dark"`, ver partials/footer-scripts.html), que fuerza su
   propio --topbar-bg plano en app.min.css y por eso necesita su propia regla aquí. */
html[data-skin="luxe"][data-topbar-color="dark"],
html[data-theme="dark"][data-skin="luxe"][data-topbar-color="dark"] {
    /* stroke-opacity muy baja (0.07/0.035) a propósito: es una textura de fondo, no debe
       leerse como una línea propia -- casi imperceptible salvo de cerca.
       attachment "fixed" (ver --topbar-bg abajo) es lo que de verdad evita la costura:
       ancla el patrón al viewport en vez de a cada caja (.app-header y
       .page-title-head:before tienen alturas distintas), así ambas cajas son "ventanas"
       hacia la misma imagen continua en vez de repetir el tile cada una desde su propio
       origen -- eso era lo que se veía como una línea/quiebre entre el título y el
       breadcrumb. */
    --topbar-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='110' viewBox='0 0 240 110'%3E%3Cpolyline points='0,72 22,58 44,80 66,40 88,64 110,46 132,78 154,36 176,68 198,50 220,80 240,44' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='0,90 24,96 48,86 72,98 96,88 120,100 144,90 168,102 192,92 216,104 240,94' fill='none' stroke='white' stroke-opacity='0.035' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='66' cy='40' r='2.5' fill='white' fill-opacity='0.1'/%3E%3Ccircle cx='154' cy='36' r='2.5' fill='white' fill-opacity='0.1'/%3E%3C/svg%3E");
    --topbar-pattern-size: 240px 110px;
}
html[data-skin="luxe"][data-topbar-color="dark"] {
    --topbar-bg:
        var(--topbar-pattern) left top / var(--topbar-pattern-size) repeat-x fixed,
        linear-gradient(115deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
    --topbar-item-color: hsla(0, 0%, 100%, .85);
    --topbar-item-hover-color: #fff;
    --topbar-search-bg: hsla(0, 0%, 100%, .12);
    --topbar-search-border: hsla(0, 0%, 100%, .12);
}
html[data-theme="dark"][data-skin="luxe"][data-topbar-color="dark"] {
    --topbar-bg:
        var(--topbar-pattern) left top / var(--topbar-pattern-size) repeat-x fixed,
        linear-gradient(115deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
    --topbar-item-color: hsla(0, 0%, 100%, .8);
    --topbar-item-hover-color: #fff;
    --topbar-search-bg: hsla(0, 0%, 100%, .08);
    --topbar-search-border: hsla(0, 0%, 100%, .08);
}

/* Breadcrumb de layouts/vertical.html vive dentro de la misma banda oscura de
   .page-title-head (ver --topbar-bg arriba); a diferencia de .page-main-title, el propio
   app.min.css no fuerza blanco en estos <a>/<span> hechos a mano, así que sin esta regla
   heredan el color de texto oscuro por defecto y quedan casi ilegibles sobre el degradado. */
.page-title-head .breadcrumb-link {
    color: hsla(0, 0%, 100%, .75);
}
.page-title-head .breadcrumb-link:hover {
    color: #fff;
}
.page-title-head .breadcrumb-separator {
    color: hsla(0, 0%, 100%, .45);
}
.page-title-head .breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

/* Avatar del usuario visible con el sidenav colapsado ("condensed" -- el único modo de
   minimizado alcanzable en esta app vía el botón del topbar, ver app.js::_toggleSidebar;
   también se activa solo automáticamente en pantallas <=1140px, ver app.js::_adjustLayout;
   los modos "on-hover"/"compact" del tema pertenecen al panel Customizer, no portado).
   INSPINIA oculta por completo .sidenav-user (avatar Y botón de engrane) en ese modo --
   se restaura el bloque completo apilado en columna: el botón de engrane SIGUE
   funcionando (mismo dropdown con Mi perfil/Configuración/Soporte/Cerrar sesión) porque
   es el único punto de acceso a esas páginas -- no existe uno duplicado en el topbar. Solo
   el nombre en texto se oculta (no cabe), reemplazado al pasar el mouse por el tooltip de
   partials/sidenav.html (.sidenav-user-tooltip). */
/* El logo colapsado se veía "achatado" (26px de ancho contra 56px de alto medidos en
   vivo): .logo-box hereda el padding-inline de 24px por lado del modo expandido incluso
   colapsado, y el <img> sin shrink-0 se comprimía por flexbox para caber en los ~26px que
   quedaban dentro del riel de 75px (--sidenav-width-sm) -- no era una animación ni caché,
   el logo nunca llegó a ser realmente 3.5rem cuadrado. Se reduce el padding solo en modo
   condensed para dejarle espacio real a un logo grande y cuadrado. */
html[data-sidenav-size="condensed"] #app-menu .logo-box {
    padding-inline: 0.625rem;
}

html[data-sidenav-size="condensed"] .sidenav-user {
    display: flex !important;
    padding: calc(var(--spacing) * 4) 0 !important;
}

/* El engrane ya no se apila debajo del avatar (dos círculos sueltos con espacio muerto
   entre ambos, se veía desconectado) -- ahora es una insignia que se sobrepone a la
   esquina inferior derecha del avatar, como el patrón típico de "editar/ajustar perfil".
   .sidenav-user-row es el ancestro posicionado común de avatar-wrap y set-icon (son
   hermanos en el HTML, no puede anclarse directo al avatar), así que el offset de la
   insignia se calcula desde el centro de la fila + medio ancho del avatar (36px). */
html[data-sidenav-size="condensed"] .sidenav-user-row {
    position: relative;
    justify-content: center;
}

html[data-sidenav-size="condensed"] .sidenav-user-info {
    display: none !important;
}

html[data-sidenav-size="condensed"] .sidenav-user-set-icon {
    position: absolute;
    left: calc(50% + 0.65rem);
    bottom: -0.2rem;
}

html[data-sidenav-size="condensed"] .sidenav-user-set-icon button {
    display: flex;
    height: 1.375rem;
    width: 1.375rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--sidenav-bg, #fff);
    box-shadow: 0 0 0 2px var(--sidenav-bg, #fff), 0 1px 3px rgba(0, 0, 0, .2);
}

html[data-sidenav-size="condensed"] .sidenav-user-set-icon button i {
    font-size: 0.75rem !important;
}

/* El tooltip (nombre + engrane) solo se activa en modo condensed -- en cualquier otro
   estado el nombre nativo ya es visible en línea junto al avatar. */
.sidenav-user-tooltip {
    display: none;
}
html[data-sidenav-size="condensed"] .sidenav-user-avatar-wrap:hover .sidenav-user-tooltip {
    display: flex;
}