/* ============================================
   DASHBOARD — FacturaO
   Material Design 3 inspired billing dashboard
   ============================================ */

/* ---------- Google Fonts ---------- */
@import url('../fonts/inter.css');

/* ---------- Extra Design Tokens ---------- */
:root {
    --color-tertiary: #725c07;
    --color-on-primary-fixed-variant: #6f1a94;
    --color-surface-container-low: #f5f2f9;
    --color-error-container: #ffdad6;
    --color-secondary-fixed-dim: #e1b8ee;
    --color-surface-container: #efedf3;
    --color-secondary: #735281;
    --color-inverse-on-surface: #f2f0f6;
    --color-on-background: #1b1b20;
    --color-surface-container-highest: #e4e1e8;
    --color-secondary-container: #f2c9ff;
    --color-on-tertiary-fixed-variant: #564500;
    --color-tertiary-container: #c4a952;
    --color-surface-container-high: #eae7ee;
    --color-secondary-fixed: #f7d8ff;
    --color-on-tertiary-fixed: #231b00;
    --color-on-secondary-fixed-variant: #5a3a67;
    --color-primary-fixed: #f7d8ff;
    --color-on-error: #ffffff;
    --color-on-secondary-container: #72517f;
    --color-surface-variant: #e4e1e8;
    --color-on-surface-variant: #4e4351;
    --color-on-primary-container: #eebeff;
    --color-on-tertiary-container: #4e3e00;
    --color-on-secondary-fixed: #2b0e39;
    --color-tertiary-fixed-dim: #e1c46a;
    --color-primary-fixed-dim: #eab2ff;
    --color-surface-dim: #dbd9df;
    --color-surface-bright: #fbf8ff;
    --color-on-tertiary: #ffffff;
    --color-on-secondary: #ffffff;
    --color-surface-tint: #8938ae;
    --color-inverse-surface: #303035;
    --color-inverse-primary: #eab2ff;
    --color-tertiary-fixed: #ffe083;
    --color-on-primary-fixed: #320047;
}

/* ---------- Dashboard Layout ---------- */
body.dashboard-page {
    margin: 0;
    padding: 0;
    background: var(--color-background, #fbf8ff);
}

body.dashboard-page>main {
    display: contents;
    /* Let the dashboard-wrapper control layout directly */
}

body.dashboard-page #encabezado-lateral,
body.dashboard-page #btn-lateral,
body.dashboard-page #muestraversion {
    display: none !important;
}

/* ---------- Heroicons base ---------- */
.hi {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    background: var(--color-background, #fbf8ff);
    color: var(--color-on-background, #1b1b20);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* ============ SIDEBAR ============ */
/* El menú son dos columnas: un rail estrecho con un icono por departamento y un
   panel con las páginas del departamento elegido. Contraer el menú (o el modo
   riel) esconde el panel y deja solo el rail; de ahí que los anchos vivan en
   variables: main y topbar se ajustan solos. */
:root {
    --dash-rail-w: 4.75rem;
    --dash-panel-w: 13.75rem;
    /* Radio de la lengüeta del departamento abierto y de sus curvas cóncavas */
    --dash-rail-r: 0.9rem;
    /* Rail y panel son de colores distintos: sin ese contraste no hay nada a lo
       que "pegarse". --dash-panel-bg es el color del panel EN SU BORDE IZQUIERDO
       (la junta), que es del que se pinta la lengüeta activa; tiene que ser un
       color liso porque las curvas cóncavas lo usan en un radial-gradient. */
    --dash-rail-bg: var(--color-surface-container, #f2eff4);
    --dash-panel-bg: var(--color-surface-container-lowest, #fff);
}

/* El total se declara en el body, no en :root: una var se sustituye con los
   valores del elemento donde se declara, así que en :root se quedaría fijada al
   ancho expandido y `body.sidebar-collapsed` (que pone --dash-panel-w a 0) no
   tendría ningún efecto sobre él. */
body {
    --dash-sidebar-w: calc(var(--dash-rail-w) + var(--dash-panel-w));
}

.dash-sidebar {
    width: var(--dash-sidebar-w);
    min-height: 100vh;
    max-height: 100vh;
    background: var(--color-surface-container-lowest, #fff);
    display: flex;
    flex-direction: row;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    border-right: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Rail de departamentos ---- */
/* El rail y el panel son de colores distintos, y el botón del departamento
   abierto se pinta del color del panel y llega hasta la junta: así se lee como
   una pestaña pegada a su submenú (ver .dash-rail__btn.active). Por eso el rail
   no lleva borde derecho: la junta es el propio cambio de color, y el botón
   activo tiene que poder cruzarla sin que una línea lo corte. */
.dash-rail {
    width: var(--dash-rail-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 0 1rem;
    background: var(--dash-rail-bg);
    /* Con la ventana muy baja el rail hace scroll. No corta las curvas cóncavas:
       se salen de la caja del botón, pero no de la del rail (llegan justo a la
       junta, que es su borde derecho). */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.dash-rail::-webkit-scrollbar {
    display: none;
}

.dash-rail__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

/* Todos los botones ocupan el ancho del rail, así el icono nunca da un salto al
   cambiar de departamento. El borde derecho transparente + background-clip es lo
   que separa los dos estados sin mover nada: en reposo y al pasar el ratón el
   fondo se queda dentro (chip suelto, redondeado entero), y solo el activo lo
   desborda hasta la junta para pegarse al panel. */
.dash-rail__btn {
    align-self: stretch;
    margin-left: 0.5rem;
    border: none;
    border-right: 0.5rem solid transparent;
    background-clip: padding-box;
    min-height: 3.1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.15rem;
    background-color: transparent;
    color: var(--color-outline);
    border-radius: var(--dash-rail-r);
    cursor: pointer;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.dash-rail__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
}

/* Los iconos del rail traen su propio tamaño; .hi {width:24px} de base.css lo pisaría */
.dash-rail__btn .hi {
    width: auto;
    height: auto;
}

.dash-rail__lbl {
    max-width: 3.4rem;
    font-size: 0.5875rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-rail__btn:hover {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Departamento donde vive la página actual, con su panel cerrado (pasa solo si
   estás curioseando otro departamento): barra lateral.
   Va como background-image y no como ::before porque los pseudos de estos
   botones son las curvas de la lengüeta, que tienen que existir siempre para
   poder fundirse (ver más abajo). */
.dash-rail__btn.aqui {
    color: var(--color-primary);
}

.dash-rail__btn[data-dept].aqui:not(.active) {
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-position: 0.25rem center;
    background-size: 3px 1.5rem;
}

/* Inicio y Salir no tienen panel (no llevan data-dept), así que nunca pueden
   pegarse a nada: cuando Inicio es la página actual se marca con su propia
   pastilla, que es lo que se lee como "estás aquí". */
.dash-rail__btn.aqui:not([data-dept]) {
    background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.dash-rail__btn--salir:hover {
    color: var(--color-error);
    background-color: color-mix(in srgb, var(--color-error) 8%, transparent);
}

/* ---- Departamento abierto: la pestaña se pega a su submenú ----
   El botón se pinta del color del panel y llega hasta la junta, así que deja de
   leerse como un botón sobre el rail y pasa a ser una lengüeta del panel. Las
   dos curvas cóncavas (::before y ::after) son lo que vende el efecto: sin
   ellas el encuentro sería un ángulo recto y parecería un recorte pegado.
   Solo con el menú desplegado: contraído no hay panel al que pegarse. */
body:not(.sidebar-collapsed) .dash-rail__btn.active {
    background-color: var(--dash-panel-bg);
    /* Desborda el borde derecho transparente: el fondo llega hasta la junta */
    background-clip: border-box;
    border-radius: var(--dash-rail-r) 0 0 var(--dash-rail-r);
    color: var(--color-primary);
}

/* Curvas cóncavas arriba y abajo del extremo pegado: un cuadrado del color del
   panel al que se le recorta un cuarto de círculo, de modo que el panel parece
   abrazar la lengüeta en vez de encontrarla en esquina.
   Existen en TODOS los botones de departamento, invisibles salvo en el activo:
   así se funden a la vez que el relleno al cambiar de sección. Si solo existieran
   en .active aparecerían y desaparecerían de golpe mientras el fondo se funde, y
   durante esos milisegundos se verían curvas flotando sobre una lengüeta a medio
   pintar (y la saliente quedaría un instante en ángulo recto). */
body:not(.sidebar-collapsed) .dash-rail__btn[data-dept]::before,
body:not(.sidebar-collapsed) .dash-rail__btn[data-dept]::after {
    content: "";
    position: absolute;
    /* -0.5rem = el ancho del borde derecho transparente: `right: 0` los dejaría
       en el borde de la caja de padding, a media junta */
    right: -0.5rem;
    width: var(--dash-rail-r);
    height: var(--dash-rail-r);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

body:not(.sidebar-collapsed) .dash-rail__btn.active::before,
body:not(.sidebar-collapsed) .dash-rail__btn.active::after {
    opacity: 1;
}

body:not(.sidebar-collapsed) .dash-rail__btn[data-dept]::before {
    top: calc(var(--dash-rail-r) * -1);
    background: radial-gradient(circle at top left,
        transparent var(--dash-rail-r), var(--dash-panel-bg) var(--dash-rail-r));
}

body:not(.sidebar-collapsed) .dash-rail__btn[data-dept]::after {
    bottom: calc(var(--dash-rail-r) * -1);
    background: radial-gradient(circle at bottom left,
        transparent var(--dash-rail-r), var(--dash-panel-bg) var(--dash-rail-r));
}

/* ---- Lengüeta deslizante ----
   Un único elemento que viaja de un departamento a otro al cambiar de sección,
   igual que la píldora de las pestañas de documento (.cli-tab-pill de base.js).
   Lo crea el JS y marca el rail con .has-pill; si el JS no llega a correr, cada
   botón sigue pintando su propia lengüeta (las reglas .active de arriba), que es
   el mismo dibujo pero fundiéndose en vez de deslizarse. */
.dash-rail {
    position: relative;
}

.dash-rail__pill {
    position: absolute;
    /* Misma caja que los botones: desde su margen izquierdo hasta la junta */
    left: 0.5rem;
    right: 0;
    top: 0;
    height: 0;
    background-color: var(--dash-panel-bg);
    border-radius: var(--dash-rail-r) 0 0 var(--dash-rail-r);
    opacity: 0;
    pointer-events: none;
    transition:
        top 0.28s cubic-bezier(0.25, 1.2, 0.35, 1),
        height 0.28s cubic-bezier(0.25, 1.2, 0.35, 1),
        opacity 0.15s ease;
}

/* Las curvas cóncavas viajan con ella */
.dash-rail__pill::before,
.dash-rail__pill::after {
    content: "";
    position: absolute;
    right: 0;
    width: var(--dash-rail-r);
    height: var(--dash-rail-r);
    pointer-events: none;
}

.dash-rail__pill::before {
    top: calc(var(--dash-rail-r) * -1);
    background: radial-gradient(circle at top left,
        transparent var(--dash-rail-r), var(--dash-panel-bg) var(--dash-rail-r));
}

.dash-rail__pill::after {
    bottom: calc(var(--dash-rail-r) * -1);
    background: radial-gradient(circle at bottom left,
        transparent var(--dash-rail-r), var(--dash-panel-bg) var(--dash-rail-r));
}

/* El icono y el texto van por encima de la lengüeta que pasa por debajo */
.dash-rail.has-pill .dash-rail__btn {
    z-index: 1;
}

/* Con lengüeta deslizante, el botón activo ya no pinta la suya ni sus curvas:
   la única que se ve es la que viaja */
.dash-rail.has-pill .dash-rail__btn.active {
    background-color: transparent;
}

.dash-rail.has-pill .dash-rail__btn[data-dept]::before,
.dash-rail.has-pill .dash-rail__btn[data-dept]::after {
    display: none;
}

/* Contraído no hay panel al que pegarse */
body.sidebar-collapsed .dash-rail__pill {
    display: none;
}

/* ---- Panel del departamento ---- */
.dash-panel {
    width: var(--dash-panel-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.75rem 1rem;
    overflow: hidden;
    background: var(--dash-panel-bg);
}

.dash-panel__section[hidden] {
    display: none;
}

/* Cambio de sección: la nueva entra desde el rail, en el sentido en que se abre
   el panel. La dispara el JS con .entra en vez de :not([hidden]) para que NO se
   lance al cargar la página: el menú se queda quieto entre navegaciones.
   El ajuste "reducir efectos de movimiento" del perfil la apaga sola (corta
   todas las animaciones). */
@keyframes dashSeccionEntra {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dash-panel__section.entra {
    animation: dashSeccionEntra 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Los items entran escalonados detrás del título: da sensación de que la lista
   se despliega, no de que el bloque entero se desliza de golpe.
   La sección de Búsqueda queda fuera: sus resultados se reconstruyen en cada
   tecla, así que se pondrían a entrar de nuevo con cada letra. Ahí basta con que
   el bloque se funda una vez al abrirse. */
@keyframes dashItemEntra {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dash-panel__section.entra:not([data-dept="dept-busqueda"]) li {
    animation: dashItemEntra 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dash-panel__section.entra li:nth-child(1) { animation-delay: 0.03s; }
.dash-panel__section.entra li:nth-child(2) { animation-delay: 0.06s; }
.dash-panel__section.entra li:nth-child(3) { animation-delay: 0.09s; }
.dash-panel__section.entra li:nth-child(4) { animation-delay: 0.12s; }
.dash-panel__section.entra li:nth-child(5) { animation-delay: 0.15s; }
.dash-panel__section.entra li:nth-child(n + 6) { animation-delay: 0.18s; }

.dash-panel__title {
    margin: 0 0 0.6rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-outline);
}

.dash-panel__hint {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--color-on-surface-variant);
    opacity: 0.8;
}

.dash-panel__hint[hidden] {
    display: none;
}

/* Departamento al que pertenece cada resultado de la búsqueda */
.dash-nav-link__dept {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.05rem;
}

/* ---- Submenú flotante (menú contraído: al pasar el ratón por el rail) ---- */
.dash-rail__flyout {
    position: fixed;
    left: calc(var(--dash-rail-w) + 0.5rem);
    z-index: 90;
    min-width: 11.5rem;
    max-width: 15rem;
    padding: 0.75rem 0.6rem;
    border-radius: 0.9rem;
    background: var(--color-surface-container-lowest, #fff);
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.dash-rail__flyout[hidden] {
    display: none;
}

.dash-rail__flyout ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-rail__flyout li[hidden],
.dash-rail__flyout li[data-solo-busqueda] {
    display: none;
}

.dash-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
}

.dash-sidebar__brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-primary);
    font-weight: 900;
    font-size: 0.875rem;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.dash-sidebar__brand-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.dash-sidebar__brand-sub {
    font-size: 0.7rem;
    color: var(--color-outline);
    font-weight: 500;
    margin-top: 2px;
}

/* CTA Button */
.dash-sidebar__cta {
    width: 100%;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    color: var(--color-on-primary);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(50, 0, 71, 0.08);
    transition: opacity 150ms ease, transform 150ms ease;
}

.dash-sidebar__cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Navigation */
.dash-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    margin-right: -0.35rem;
    padding-right: 0.35rem;
    /* Scrollbar fino y discreto (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.25s ease;
}

.dash-sidebar__nav:hover {
    scrollbar-color: color-mix(in srgb, var(--color-outline) 40%, transparent) transparent;
}

/* Scrollbar pro (WebKit/Chromium): auto-oculto, aparece al hover, resalta al agarrar */
.dash-sidebar__nav::-webkit-scrollbar {
    width: 9px;
}

.dash-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.dash-sidebar__nav::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color 0.25s ease;
}

.dash-sidebar__nav:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-outline) 38%, transparent);
    background-clip: content-box;
}

.dash-sidebar__nav::-webkit-scrollbar-thumb:hover,
.dash-sidebar__nav::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
    background-clip: content-box;
}

.dash-sidebar__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--color-outline);
    font-weight: 500;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 200ms ease;
    position: relative;
}

/* El panel es estrecho: los iconos van a 20px y .hi {width:24px} de base.css los agrandaría */
.dash-nav-link .hi {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.dash-nav-link:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.dash-nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-right: 3px solid var(--color-primary);
}

.dash-nav-link .hi {
    font-size: 22px;
    font-variation-settings: 'wght' 400;
}

.dash-nav-link.active .hi {
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ============ SIDEBAR: TOGGLE / BUSCADOR / COLAPSO ============ */

/* Botón flotante para contraer/expandir (en el borde derecho del sidebar).
   Va a la altura del título del panel, no a la del buscador: ahí lo taparía. */
.dash-sidebar__toggle {
    position: absolute;
    top: 4.6rem;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-surface-container-lowest, #fff);
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);
    color: var(--color-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.dash-sidebar__toggle:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    transform: scale(1.08);
}

.dash-sidebar__toggle .hi {
    width: 16px;
    height: 16px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buscador del menú */
.dash-sidebar__search {
    position: relative;
    margin-bottom: 1rem;
}

.dash-sidebar__search .hi {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-outline);
    pointer-events: none;
    transition: color 0.2s ease;
}

.dash-sidebar__search:focus-within .hi {
    color: var(--color-primary);
}

.dash-sidebar__search input {
    width: 100%;
    /* !important: vence a la regla universal de inputs (modules.css, alta especificidad) */
    padding: 0.55rem 2rem 0.55rem 2.25rem !important;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
    background: color-mix(in srgb, var(--color-surface-container-high) 45%, transparent);
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dash-sidebar__search input::placeholder {
    color: color-mix(in srgb, var(--color-on-surface-variant) 65%, transparent);
}

.dash-sidebar__search input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface-container-lowest, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.dash-sidebar__search-kbd {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-on-surface-variant);
    background: color-mix(in srgb, var(--color-outline-variant) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.dash-sidebar__search:focus-within .dash-sidebar__search-kbd,
.dash-sidebar__search.has-text .dash-sidebar__search-kbd {
    opacity: 0;
}

/* Botón X para borrar la búsqueda (solo visible cuando hay texto) */
.dash-sidebar__search-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dash-sidebar__search-clear[hidden] {
    display: none;
}

.dash-sidebar__search-clear:hover {
    background: color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
    color: var(--color-on-surface);
}

/* Anula el posicionado absoluto de la lupa para el icono de dentro del botón */
.dash-sidebar__search-clear .hi {
    position: static;
    transform: none;
    width: 14px;
    height: 14px;
    color: inherit;
    pointer-events: none;
}

/* Apartado de la página que ha coincidido con la búsqueda */
.dash-sidebar__nav .dash-nav-link span {
    min-width: 0;
}

.dash-nav-link__hint {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0.1rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resaltado de coincidencias en los enlaces */
.dash-nav-link mark {
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* Sobre la fila de la página actual (fondo morado lleno) el resaltado normal
   no se distingue: ahí se marca en claro */
.dash-nav-link.active mark {
    background: color-mix(in srgb, var(--color-on-primary) 30%, transparent);
}

/* Animación suave al reordenar/filtrar */
.dash-sidebar__nav li {
    transition: opacity 0.18s ease;
}

.dash-sidebar__nav li[hidden] {
    display: none;
}

/* Páginas sin sitio fijo en el menú (p.ej. Mi Perfil, que vive en el avatar de
   la topbar): no se listan en el panel, pero el buscador sí las encuentra */
.dash-panel__section li[data-solo-busqueda] {
    display: none;
}

/* ---- Estrella de favoritos ---- */
.dash-panel__section li {
    position: relative;
}

/* Hueco para que la estrella no se monte sobre el nombre de la página */
.dash-panel__section .dash-nav-link {
    padding-right: 1.9rem;
}

.dash-fav-star {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-outline-variant);
    cursor: pointer;
    /* Oculta hasta que hace falta: en reposo el menú se lee sin ruido. Sigue
       siendo enfocable con el teclado, de ahí el :focus-visible. */
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dash-panel__section li:hover .dash-fav-star,
.dash-fav-star:focus-visible,
.dash-fav-star.on {
    opacity: 1;
}

.dash-fav-star:hover {
    color: var(--c-amber, #b45309);
    transform: translateY(-50%) scale(1.15);
}

.dash-fav-star.on {
    color: var(--c-amber, #b45309);
}

.dash-fav-star .hi {
    width: 14px;
    height: 14px;
}

/* Sobre la fila de la página actual (fondo morado) la estrella va en claro */
.dash-nav-link.active + .dash-fav-star {
    color: color-mix(in srgb, var(--color-on-primary) 70%, transparent);
}

.dash-nav-link.active + .dash-fav-star:hover,
.dash-nav-link.active + .dash-fav-star.on {
    color: var(--color-on-primary);
}

/* En el submenú flotante las estrellas son un clon sin listeners: no se enseñan */
.dash-rail__flyout .dash-fav-star {
    display: none;
}

/* Estado sin resultados */
.dash-sidebar__empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 1.25rem 0.5rem;
    color: var(--color-on-surface-variant);
    font-size: 0.8125rem;
}

.dash-sidebar__empty .hi {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* ===== MODO CONTRAÍDO (solo el rail de departamentos) ===== */
/* El ancho lo llevan las variables: main y topbar siguen al sidebar sin repetir medidas */
body.sidebar-collapsed {
    --dash-panel-w: 0rem;
}

body.sidebar-collapsed .dash-panel {
    display: none;
}

body.sidebar-collapsed .dash-rail {
    border-right: none;
}

/* Plegado no hay junta a la que llegar, así que el hueco de la derecha pasa a
   ser margen de verdad en vez de borde transparente. Con el borde, la caja del
   botón seguía siendo 8px más ancha que su pastilla (el fondo se recorta a la
   caja de padding), y la sombra de arcilla —que se dibuja sobre la caja del
   BORDE— la rodeaba por fuera: asomaba por detrás como un borde suelto. */
body.sidebar-collapsed .dash-rail__btn {
    border-right-width: 0;
    margin-right: 0.5rem;
}

body.sidebar-collapsed .dash-sidebar__toggle .hi {
    transform: rotate(180deg);
}

/* En móvil el sidebar se oculta por completo (ya gestionado abajo); sin riel */
@media (max-width: 768px) {
    .dash-sidebar__toggle { display: none; }
}

/* ============ MAIN CONTENT AREA ============ */
.dash-main {
    margin-left: var(--dash-sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ TOP BAR ============ */
.dash-topbar {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - var(--dash-sidebar-w));
    height: 4rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 10%, transparent);
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Search */
.dash-topbar__search {
    position: relative;
    width: 16rem;
}

.dash-topbar__search .hi {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    font-size: 20px;
}

.dash-topbar__search input {
    width: 100%;
    background: var(--color-surface-container-highest, #e4e1e8);
    color: var(--color-on-surface);
    border-radius: 0.5rem;
    /* !important: gana a la regla universal de inputs (modules.css) que si no pisa el
       padding-left y la lupa se solapa con el placeholder */
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
    font-size: 0.875rem;
    border: none;
    outline: none;
    transition: box-shadow 200ms ease;
}

.dash-topbar__search input:focus {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.dash-topbar__search input::placeholder {
    color: color-mix(in srgb, var(--color-on-surface-variant) 70%, transparent);
}

/* Top Nav Links */
.dash-topbar__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.dash-topbar__nav-link {
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-outline);
    padding: 1.25rem 0;
    opacity: 0.8;
    transition: all 200ms ease;
    border-bottom: 2px solid transparent;
}

.dash-topbar__nav-link:hover {
    opacity: 1;
    color: var(--color-primary);
}

.dash-topbar__nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
    opacity: 1;
    border-bottom-color: var(--color-primary);
}

/* Right Actions */
.dash-topbar__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.dash-topbar__upgrade {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 200ms ease;
}

.dash-topbar__upgrade:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dash-topbar__icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-topbar__icon-btn {
    background: none;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    position: relative;
    opacity: 0.8;
    transition: all 200ms ease;
    padding: 0;
    display: flex;
}

.dash-topbar__icon-btn:hover {
    color: var(--color-primary);
    opacity: 1;
}

.dash-topbar__icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Profile */
.dash-topbar__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
    cursor: pointer;
    /* Es un <a> hacia "Mi Perfil" (salvo para inspector, que no tiene perfil y sigue siendo <div>) */
    text-decoration: none;
    color: inherit;
}

.dash-topbar__profile-info {
    text-align: right;
}

.dash-topbar__profile-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    line-height: 1.2;
}

.dash-topbar__profile-role {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 400;
}

.dash-topbar__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ============ CANVAS / PAGE CONTENT ============ */
.dash-canvas {
    flex: 1;
    margin-top: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
    background: var(--color-surface, #f7f9fb);
}

/* Page Header */
.dash-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dash-page-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dash-page-header p {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.dash-page-header__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Subtítulo + botón de mostrar/ocultar resumen, en la misma fila */
.dash-page-header__subline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dash-resumen-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--color-on-surface-variant);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dash-resumen-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* Los SVG del botón traen su propio tamaño; .hi de base.css lo forzaría a 24px */
.dash-resumen-toggle .hi {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

body.resumen-oculto .dash-kpi-grid {
    display: none;
}

/* Action Buttons */
.btn-secondary {
    background: color-mix(in srgb, var(--color-primary-fixed-dim) 20%, transparent);
    color: var(--color-on-primary-fixed-variant);
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 200ms ease;
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-primary-fixed-dim) 30%, transparent);
}

.btn-secondary .hi {
    font-size: 18px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
    color: var(--color-on-primary);
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 24px rgba(50, 0, 71, 0.06);
    transition: opacity 200ms ease, transform 150ms ease;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-primary .hi {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

/* ============ BENTO GRID: KPI CARDS ============ */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.dash-kpi-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(50, 0, 71, 0.06);
}

.dash-kpi-card--hero {
    background: var(--color-surface-container-highest, #e4e1e8);
}

.dash-kpi-card--default {
    background: var(--color-surface-container-low, #f5f2f9);
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
}

.dash-kpi-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.dash-kpi-card__label {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

.dash-kpi-card__icon {
    font-size: 24px;
    opacity: 0.7;
}

.dash-kpi-card__icon--primary {
    color: var(--color-primary);
}

.dash-kpi-card__icon--tertiary {
    color: var(--color-tertiary);
}

.dash-kpi-card__icon--secondary {
    color: var(--color-secondary);
}

.dash-kpi-card__body {
    position: relative;
    z-index: 2;
}

.dash-kpi-card__value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dash-kpi-card__value--sm {
    font-size: 2rem;
    font-weight: 700;
}

.dash-kpi-card__delta {
    font-size: 0.75rem;
    color: var(--color-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dash-kpi-card__delta .hi {
    font-size: 14px;
}

.dash-kpi-card__sub {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

/* Decorative gradient blob */
.dash-kpi-card__glow {
    position: absolute;
    right: -2.5rem;
    bottom: -2.5rem;
    width: 10rem;
    height: 10rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(32px);
    pointer-events: none;
}

/* ============ TABLE SECTION ============ */
.dash-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-table-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-table-header__link {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: all 200ms ease;
}

.dash-table-header__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.dash-table-container {
    background: var(--color-surface-container-lowest, #fff);
    border-radius: 0.75rem;
    padding: 0.25rem;
    box-shadow: 0 4px 24px rgba(50, 0, 71, 0.02);
    border: 1px solid color-mix(in srgb, var(--color-outline-variant) 15%, transparent);
    /* Con muchas columnas activas la tabla desborda: que scrolle ella, no la página */
    overflow-x: auto;
}

.dash-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.dash-table thead th {
    padding: 1rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid color-mix(in srgb, var(--color-surface-container-high) 50%, transparent);
}

.dash-table thead th.text-right {
    text-align: right;
}

.dash-table tbody td {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    vertical-align: middle;
}

.dash-table tbody tr.data-row {
    transition: background-color 200ms ease;
    cursor: pointer;
}

.dash-table tbody tr.data-row:hover {
    background: color-mix(in srgb, var(--color-surface-container-low) 50%, transparent);
}

.dash-table .spacer-row td {
    height: 0.5rem;
    background: var(--color-surface);
    padding: 0;
}

/* Client Cell */
.dash-table__client {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-table__client-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.dash-table__client-avatar--purple {
    background: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
}

.dash-table__client-avatar--gray {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}

.dash-table__client-name {
    font-weight: 600;
    color: var(--color-on-surface);
    transition: color 200ms ease;
}

.data-row:hover .dash-table__client-name {
    color: var(--color-primary);
}

.dash-table__client-invoice {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

.dash-table .text-muted {
    color: var(--color-on-surface-variant);
}

.dash-table .text-right {
    text-align: right;
}

.dash-table .font-medium {
    font-weight: 500;
}

/* Status Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-status--pending {
    background: var(--color-surface-container-highest);
    color: var(--color-on-surface-variant);
}

.badge-status--paid {
    background: color-mix(in srgb, var(--color-secondary-container) 50%, transparent);
    color: var(--color-on-secondary-container);
}

.badge-status--overdue {
    background: color-mix(in srgb, var(--color-error-container) 50%, transparent);
    color: var(--color-on-error-container);
}

/* Row More Button */
.dash-table__more {
    background: none;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease, color 200ms ease;
    padding: 0;
    display: flex;
}

.data-row:hover .dash-table__more {
    opacity: 1;
}

.dash-table__more:hover {
    color: var(--color-primary);
}

.dash-table__more .hi {
    font-size: 20px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .dash-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash-topbar__nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .dash-sidebar {
        display: none;
    }

    .dash-main {
        margin-left: 0;
    }

    .dash-topbar {
        width: 100%;
    }

    .dash-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dash-kpi-card__value {
        font-size: 2.5rem;
    }

    .dash-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-topbar__profile-info {
        display: none;
    }
}

/* ============ ANIMATIONS ============ */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animaciones desactivadas para mayor velocidad percibida
.dash-kpi-card,
.dash-table-container {
    animation: fadeSlideUp 0.3s ease both;
}
*/