/*
 * ============================================================================
 *  DEGAS — Shell de la app (sidebar global, login, dashboard, favoritos)
 * ============================================================================
 *  Rediseño "Consola" (oct-2026): desaparece el header. TODO el chrome vive en
 *  un único sidebar OSCURO de alto completo (DegasShellSidebar, Core UI):
 *  marca + tenant + burger, buscador (abre el command palette), link
 *  "Módulos", el bloque del módulo activo (Inicio + FeatureNavList) — o el
 *  catálogo de módulos cuando no hay módulo — y, al pie, usuario + campana +
 *  tema + Salir. El contenido queda blanco y sin cards de chrome: las
 *  superficies las separan hairlines.
 *
 *  Global y no scoped a propósito: alcanza a los <a> que NavLink/FeatureNavList
 *  renderizan en runtime (fuera de cualquier scope) y evita el bundle scoped
 *  que se queda viejo con dotnet watch (docs/blazor-boilerplate.md gotcha #9).
 *  Todo en tokens — sin hex sueltos ni fallbacks (regla #2 de degas-tokens.css).
 *
 *  También define los primitivos de accesibilidad globales:
 *    - anillo de foco :focus-visible único para toda la app
 *    - skip-link ("Saltar al contenido")
 *    - kill-switch global de animaciones bajo prefers-reduced-motion
 * ============================================================================
 */

/* ===== Accesibilidad global ===== */

/* Anillo de foco ÚNICO para teclado (WCAG 2.4.7). No definir outlines ad-hoc
   por componente; si un componente necesita otro offset, sobreescribe solo el
   offset. Nunca `outline: none` sin reemplazo visible. */
:focus-visible {
    outline: var(--degas-focus-ring-width) solid var(--degas-focus-ring-color);
    outline-offset: var(--degas-focus-ring-offset);
}

/* Skip-link (WCAG 2.4.1): primer elemento enfocable del body; invisible hasta
   recibir foco. Apunta a #main-content (MainLayout). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--degas-space-2);
    z-index: var(--degas-z-toast);
    padding: var(--degas-space-2) var(--degas-space-4);
    background: var(--degas-surface);
    color: var(--degas-primary);
    border: 1px solid var(--degas-primary);
    border-radius: var(--degas-radius);
    font-size: var(--degas-text-md);
    font-weight: var(--degas-font-weight-semibold);
    text-decoration: none;
    box-shadow: var(--degas-shadow-lg);
}

.skip-link:focus-visible {
    left: var(--degas-space-2);
}

/* Kill-switch de movimiento (WCAG 2.3.3): anula TODA animación/transición
   (propias y de Telerik) cuando el usuario pide movimiento reducido. Las
   animaciones saltan a su estado final (duración ~0), sin parpadeo. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Shell: sidebar + contenido ===== */

.app-shell {
    min-height: 100vh;
    display: flex;
    /* flex-start: el sidebar mide 100vh por sí mismo (sticky); el contenido crece con la página. */
    align-items: flex-start;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    box-sizing: border-box;
    /* Los costados son el gutter del shell: en el derecho vive la pestaña del asistente. */
    padding: var(--degas-space-5) var(--degas-shell-gutter) var(--degas-space-6);
    background: var(--degas-surface);
}

/* ===== Sidebar global ===== */

/* La columna se pega al viewport (sticky, alto = 100vh) y el contenido scrollea con la página por su
   cuenta. Adentro, tres zonas: arriba FIJO (marca + buscador + Módulos + bloque del módulo con su
   Inicio), en el medio la ÚNICA zona con scroll propio (.app-sidebar-scroll: el menú del módulo o el
   catálogo de módulos) y abajo FIJO el pie (usuario / campana / tema / Salir). Como la zona del medio
   recorta por overflow, el título completo al pasar el mouse lo despliega el <span> del label en
   position:fixed (ver más abajo), que escapa del recorte.
   color-scheme: dark ⇒ el chrome nativo (scrollbar incluida) sale oscuro también en tema claro.
   --degas-shell-sidebar-current la leen los hijos que se posicionan contra el viewport (el panel
   de la campana). */
.app-sidebar {
    --degas-shell-sidebar-current: var(--degas-shell-sidebar-width);
    /* Anillo de foco sobre fondo oscuro: el primary del tema claro (#1f5bb4) no llega a 3:1 contra
       el sidebar; el azul claro del ítem activo sí, en ambos temas. */
    --degas-focus-ring-color: var(--degas-sidebar-active-icon);
    color-scheme: dark;
    /* Contexto de apilamiento propio por ENCIMA del contenido: el panel de la campana y el label
       desplegado viven adentro; sin esto los taparían las toolbars/encabezados sticky de Telerik y
       las celdas fijas de los pivots. */
    position: sticky;
    top: 0;
    z-index: var(--degas-z-dropdown);
    height: 100vh;
    height: 100dvh;
    width: var(--degas-shell-sidebar-width);
    flex: 0 0 var(--degas-shell-sidebar-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--degas-sidebar-bg);
    color: var(--degas-sidebar-text);
    border-right: 1px solid var(--degas-sidebar-border);
    transition: width var(--degas-duration) var(--degas-ease-out),
                flex-basis var(--degas-duration) var(--degas-ease-out);
}

/* Zona fija de arriba: buscador + Módulos + bloque del módulo (marca + Inicio) o rótulo del catálogo. */
.app-sidebar-pinned {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

/* La única zona que scrollea: el menú del módulo o la lista de módulos. overscroll-behavior evita que,
   al llegar al final, la rueda siga scrolleando la página. */
.app-sidebar-scroll {
    /* Contenedor de posicionamiento de lo que hay adentro: en modo rail los labels de los links se
       ocultan con position:absolute (técnica sr-only) y, si su contenedor fuera el sidebar (sticky,
       sin overflow), quedarían fuera de la zona con scroll y estirarían el documento — la página
       scrolleaba hasta un espacio en blanco al contraer el menú en una página con menú largo. */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 1px 0 var(--degas-space-2);
}

/* ---- Marca + tenant + burger ---- */
.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--degas-space-2);
    height: 48px;
    flex: 0 0 auto;
    padding: 0 var(--degas-space-2) 0 var(--degas-space-4);
    background: var(--degas-sidebar-bg);
    border-bottom: 1px solid var(--degas-sidebar-border);
}

.app-sidebar-brand .brand {
    font-size: var(--degas-text-lg);
    font-weight: var(--degas-font-weight-bold);
    letter-spacing: 0.08em;
    color: var(--degas-sidebar-active-text);
    white-space: nowrap;
}

.app-tenant {
    font-family: var(--degas-font-mono);
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-medium);
    line-height: 1.2;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: var(--degas-radius);
    background: var(--degas-sidebar-chip-bg);
    color: var(--degas-sidebar-chip-fg);
    text-transform: uppercase;
    white-space: nowrap;
}

.module-burger {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-sidebar-text);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out),
                color var(--degas-duration-fast) var(--degas-ease-out);
}

.module-burger:hover,
.module-burger:focus-visible {
    background: var(--degas-sidebar-hover-bg);
    color: var(--degas-sidebar-active-text);
}

/* ---- Buscador global (abre el command palette) ---- */
.app-sidebar-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: var(--degas-space-3) var(--degas-space-3) var(--degas-space-1);
    height: var(--degas-control-height);
    padding: 0 6px 0 8px;
    box-sizing: border-box;
    background: var(--degas-sidebar-input-bg);
    border: 1px solid var(--degas-sidebar-input-border);
    border-radius: var(--degas-radius);
    /* Es la etiqueta visible de un botón, no un placeholder: texto del sidebar (≥8:1), no el muted. */
    color: var(--degas-sidebar-text);
    cursor: text;
    font: inherit;
    font-size: var(--degas-text-sm);
    text-align: left;
    transition: border-color var(--degas-duration-fast) var(--degas-ease-out);
}

.app-sidebar-search:hover,
.app-sidebar-search:focus-visible {
    border-color: var(--degas-sidebar-active-icon);
}

.app-sidebar-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--degas-sidebar-text-muted);
}

.app-sidebar-search-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-search-kbd {
    font-family: var(--degas-font-mono);
    font-size: var(--degas-text-2xs);
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: var(--degas-radius-sm);
    background: var(--degas-sidebar-kbd-bg);
    color: var(--degas-sidebar-text);
    white-space: nowrap;
}

/* ---- Links del sidebar: "Módulos", Inicio, FeatureNavList, catálogo de módulos, Salir ----
   NavLink renderiza un <a> en runtime (la clase `.active` la agrega el propio NavLink); Salir es
   un <button>. Misma métrica para todos: 32px, 13px/500, radio 4, 8px de margen lateral. */
.app-sidebar-global,
.app-sidebar .module-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-sidebar-global {
    margin-top: var(--degas-space-1);
}

.app-sidebar-link,
.app-sidebar .module-nav a {
    display: flex;
    align-items: center;
    box-sizing: border-box;    /* el min-width del despliegue (abajo) incluye padding */
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    margin: 0 var(--degas-space-2);
    border: 0;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-sidebar-text);
    text-decoration: none;
    font: inherit;
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-medium);
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out),
                color var(--degas-duration-fast) var(--degas-ease-out);
}

/* Con el foco del teclado, igual que con el mouse: el link desplegado (ver más abajo) tapa con su
   fondo lo que queda debajo. */
.app-sidebar-link:hover,
.app-sidebar-link:focus-visible,
.app-sidebar .module-nav a:hover,
.app-sidebar .module-nav a:focus-visible {
    background: var(--degas-sidebar-hover-bg);
    color: var(--degas-sidebar-active-text);
}

.app-sidebar-link.active,
.app-sidebar .module-nav a.active {
    background: var(--degas-sidebar-active-bg);
    color: var(--degas-sidebar-active-text);
}

.app-sidebar .module-nav a.active > .k-svg-icon {
    color: var(--degas-sidebar-active-icon);
}

/* El ícono no cede ancho. Con `nowrap`, un título que no entra en el link (más todavía en negrita, al
   quedar activo) le sacaba el ancho al ícono, que se achicaba hasta desaparecer. El que se recorta es
   el título, con elipsis. */
.app-sidebar-link > .k-svg-icon,
.app-sidebar .module-nav a > .k-svg-icon {
    flex: 0 0 auto;
}

.app-sidebar-link > span,
.app-sidebar .module-nav a > span:not(.k-svg-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Al pasar el mouse (o con el foco del teclado), el título completo se muestra en una sola línea POR
   ENCIMA del contenido. Ni el sidebar ni el link se ensanchan: el <span> del label pasa a
   position:fixed ANCLADO al link (CSS anchor positioning) y así escapa del recorte de la zona con
   scroll sin perder su lugar — un fixed "a secas" se posiciona ignorando el scroll interno y queda
   corrido. Con el mismo fondo que el link (inherit) se ve como el link estirado hacia la derecha; el
   left descuenta el padding del link (10) y, si hay ícono, el ícono (16) + gap (10). Nombres de ancla
   distintos para hover y foco: si el teclado tiene un link y el mouse otro, cada label va al suyo.
   z-sidebar le gana a los z-index locales del contenido (grillas, pivots). Un título que entra no
   cambia nada visible: el span queda tapado por el propio fondo del link. Sin soporte de anchor
   positioning (anterior a Chrome/Edge 125, Firefox 144) el título simplemente queda con elipsis. */
@supports (anchor-name: --x) and (top: anchor(top)) {
    .app-sidebar:not(.is-collapsed) .module-nav a:hover { anchor-name: --degas-nav-hover; }
    .app-sidebar:not(.is-collapsed) .module-nav a:focus-visible { anchor-name: --degas-nav-focus; }
    .app-sidebar:not(.is-collapsed) .module-nav a:hover:focus-visible { anchor-name: --degas-nav-hover, --degas-nav-focus; }

    .app-sidebar:not(.is-collapsed) .module-nav a:hover > span:not(.k-svg-icon),
    .app-sidebar:not(.is-collapsed) .module-nav a:focus-visible > span:not(.k-svg-icon) {
        position: fixed;
        top: anchor(top);
        left: calc(anchor(left) + 10px);
        z-index: var(--degas-z-sidebar);
        width: max-content;
        max-width: calc(100vw - var(--degas-shell-sidebar-current) - var(--degas-space-4));
        height: 32px;
        line-height: 32px;
        padding-right: 10px;
        overflow: visible;
        text-overflow: clip;
        background: inherit;
        border-radius: 0 var(--degas-radius) var(--degas-radius) 0;
    }

    .app-sidebar:not(.is-collapsed) .module-nav a:hover > span:not(.k-svg-icon) { position-anchor: --degas-nav-hover; }
    .app-sidebar:not(.is-collapsed) .module-nav a:focus-visible > span:not(.k-svg-icon) { position-anchor: --degas-nav-focus; }

    .app-sidebar:not(.is-collapsed) .module-nav a:hover > .k-svg-icon + span,
    .app-sidebar:not(.is-collapsed) .module-nav a:focus-visible > .k-svg-icon + span {
        left: calc(anchor(left) + 36px);
    }
}

/* ---- Bloque del módulo activo (o rótulo del catálogo) ---- */
.module-brand {
    flex: 0 0 auto;
    margin: var(--degas-space-3) var(--degas-space-4) 6px;
    padding-top: var(--degas-space-3);
    border-top: 1px solid var(--degas-sidebar-border);
}

.module-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.module-brand-title {
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--degas-sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-brand-subtitle {
    font-size: var(--degas-text-2xs);
    color: var(--degas-sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Pie: usuario + asistente + campana + tema + Salir ---- */
.app-sidebar-footer {
    margin-top: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--degas-space-2) 0;
    background: var(--degas-sidebar-bg);
    border-top: 1px solid var(--degas-sidebar-border);
}

.app-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 var(--degas-space-3) 0 var(--degas-space-4);
    color: var(--degas-sidebar-text);
}

.app-sidebar-user--anon {
    justify-content: flex-end;
}

.app-sidebar-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--degas-radius-full);
    background: var(--degas-sidebar-chip-bg);
    color: var(--degas-sidebar-chip-fg);
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-sidebar-username {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-medium);
}

/* Campana y toggle de tema dentro del sidebar: 28px, color del sidebar. Selector con tres clases
   a propósito — tiene que ganarle al CSS scoped de NotificationCenter (0,2,0), que carga después. */
.app-sidebar .app-sidebar-user .notif-bell-btn,
.app-sidebar .app-sidebar-user .degas-theme-toggle {
    width: var(--degas-control-height-compact);
    height: var(--degas-control-height-compact);
    color: var(--degas-sidebar-text);
}

.app-sidebar .app-sidebar-user .notif-bell-btn:hover,
.app-sidebar .app-sidebar-user .notif-bell-btn:focus-visible,
.app-sidebar .app-sidebar-user .notif-bell.is-open .notif-bell-btn,
.app-sidebar .app-sidebar-user .degas-theme-toggle:hover,
.app-sidebar .app-sidebar-user .degas-theme-toggle:focus-visible {
    background: var(--degas-sidebar-hover-bg);
    color: var(--degas-sidebar-active-text);
}

.app-sidebar .app-sidebar-user .notif-bell-badge {
    border-color: var(--degas-sidebar-bg);
}

/* Lanzador del asistente IA en el pie (DegasAsistenteToggle): mismo tamaño, color y hover que la
   campana y el tema. Es un disclosure del panel: mientras el panel está abierto queda "encendido" con
   el fondo y el azul del ítem activo del menú, y sigue a mano para cerrarlo. Selector sin .app-sidebar
   para que la muestra de /design-system lo tome igual. El otro lanzador es la pestaña del margen
   derecho (degas-utilities.css, sección Asistente IA; ui-ux-standards § 5.7). */
.app-sidebar-user .degas-asistente-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--degas-control-height-compact);
    height: var(--degas-control-height-compact);
    padding: 0;
    border: none;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-sidebar-text);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out),
                color var(--degas-duration-fast) var(--degas-ease-out);
}

.app-sidebar-user .degas-asistente-toggle:hover,
.app-sidebar-user .degas-asistente-toggle:focus-visible {
    background: var(--degas-sidebar-hover-bg);
    color: var(--degas-sidebar-active-text);
}

.app-sidebar-user .degas-asistente-toggle.is-abierto {
    background: var(--degas-sidebar-active-bg);
    color: var(--degas-sidebar-active-icon);
}

/* ---- Modo rail (contraído a 56px) ---- */
.app-sidebar.is-collapsed {
    --degas-shell-sidebar-current: var(--degas-shell-rail-width);
    width: var(--degas-shell-rail-width);
    flex-basis: var(--degas-shell-rail-width);
}

.app-sidebar.is-collapsed .brand,
.app-sidebar.is-collapsed .app-tenant,
.app-sidebar.is-collapsed .app-sidebar-search-text,
.app-sidebar.is-collapsed .app-sidebar-search-kbd,
.app-sidebar.is-collapsed .module-brand,
.app-sidebar.is-collapsed .app-sidebar-username {
    display: none;
}

.app-sidebar.is-collapsed .app-sidebar-brand {
    justify-content: center;
    padding: 0;
}

.app-sidebar.is-collapsed .module-burger {
    margin-left: 0;
}

.app-sidebar.is-collapsed .app-sidebar-search {
    justify-content: center;
    margin-left: var(--degas-space-2);
    margin-right: var(--degas-space-2);
    padding: 0;
    cursor: pointer;
}

.app-sidebar.is-collapsed .app-sidebar-link,
.app-sidebar.is-collapsed .module-nav a {
    justify-content: center;
    gap: 0;
    padding: 0;
}

/* Ocultar SOLO el texto del label, preservando accesibilidad: técnica de clip (no display:none)
   para que el lector de pantalla siga leyendo el nombre del link. OJO: el icono Telerik también es
   un <span> directo del <a> (class k-svg-icon) — por eso excluimos `.k-svg-icon`, sino se clipea el
   icono y el rail queda vacío. El label es el otro <span> (sin clase). */
.app-sidebar.is-collapsed .app-sidebar-link > span:not(.k-svg-icon),
.app-sidebar.is-collapsed .module-nav a > span:not(.k-svg-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-sidebar.is-collapsed .app-sidebar-user {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 2px;
    padding: var(--degas-space-1) 0;
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar {
        transition: none;
    }
}

/* ===== Toggle de tema claro/oscuro (<DegasThemeToggle>, DEGAS-538) =====
   Base para cualquier host (también lo embebe /design-system sobre fondo claro); el sidebar lo
   recolorea arriba. 32×32, transparente, hover con el tint de hover. */
.degas-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--degas-radius);
    background: transparent;
    color: var(--degas-text);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out);
}

.degas-theme-toggle:hover {
    background: var(--degas-surface-hover);
}

/* ===== Procesos grid — row resaltado al llegar desde el NotificationCenter =====
   Global (no scoped) porque los <tr> los renderiza TelerikGrid fuera del scope de la pagina.
   Telerik aplica la clase via OnRowRender → args.Class. */
.k-grid .k-table-row.proc-row-highlight > td,
.k-grid tr.proc-row-highlight > td {
    background-color: var(--degas-highlight) !important;
    animation: proc-row-flash 2.6s ease-out 1;
}

@keyframes proc-row-flash {
    0%   { background-color: var(--degas-highlight-strong); }
    100% { background-color: var(--degas-highlight); }
}

/* ===== Filas con diferencia (Comparacion Transporte Terceros, DEGAS-951) =====
   Global por lo mismo que el anterior. El color no es el unico canal: la columna "Hay Diferencia"
   lleva un badge, que sobre este fondo (el mismo del badge is-warn) necesita borde para verse como
   chip. El !important le gana al hover de la grilla, asi que la fila resaltada tiene el suyo. */
.k-grid .k-table-row.degas-row-diferencia > td,
.k-grid tr.degas-row-diferencia > td {
    background-color: var(--degas-warning-bg) !important;
}

.k-grid .k-table-row.degas-row-diferencia:hover > td,
.k-grid tr.degas-row-diferencia:hover > td {
    background-color: var(--degas-highlight-strong) !important;
}

.k-grid .degas-row-diferencia .degas-badge.is-warn {
    box-shadow: inset 0 0 0 1px var(--degas-warning);
}

/* ===== Login ===== */
.login-card {
    max-width: 360px;
    margin: 4rem auto;
    padding: var(--degas-space-6);
    background: var(--degas-surface);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius-lg);
}

.login-card h1 {
    margin: 0 0 var(--degas-space-1);
    font-size: var(--degas-text-2xl);
    font-weight: var(--degas-font-weight-bold);
    letter-spacing: 0.08em;
}

.login-card .muted {
    color: var(--degas-text-muted);
    margin-bottom: var(--degas-space-5);
}

.login-field {
    margin-bottom: var(--degas-space-4);
}

.login-field label {
    display: block;
    font-size: var(--degas-text-xs);
    font-weight: var(--degas-font-weight-medium);
    margin-bottom: var(--degas-space-1);
    color: var(--degas-text-muted);
}

.login-error {
    color: var(--degas-danger);
    font-size: var(--degas-text-sm);
    margin-bottom: var(--degas-space-4);
}

.login-submitting {
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

.login-submitting:not(:empty) {
    margin-bottom: var(--degas-space-4);
}

/* Aviso de sesión expirada (?expired=1) — banner ámbar sobre el form de login. */
.login-notice {
    background: var(--degas-warning-bg);
    color: var(--degas-warning);
    border: 1px solid var(--degas-warning);
    border-radius: var(--degas-radius);
    padding: 0.625rem var(--degas-space-3);
    font-size: var(--degas-text-sm);
    margin-bottom: var(--degas-space-4);
}

/* Modal de re-login in place (SessionReauthHost). */
.reauth-intro {
    margin-bottom: var(--degas-space-4);
}

/* Escotilla "ir a la página de login" dentro del modal de re-login — estilo link
   discreto. Padding vertical para acercarse al target mínimo (2.5.8). */
.reauth-escape {
    display: inline-block;
    margin-top: var(--degas-space-2);
    padding: var(--degas-space-1) 0;
    background: none;
    border: none;
    color: var(--degas-primary);
    font-size: var(--degas-text-sm);
    cursor: pointer;
    text-decoration: underline;
}

.reauth-escape:hover {
    color: var(--degas-primary-hover);
}

/* ===== Dashboard ("Inicio") ===== */
.dashboard-empty {
    padding: var(--degas-space-5);
    background: var(--degas-surface);
    border: 1px dashed var(--degas-border-strong);
    border-radius: var(--degas-radius);
    margin-top: var(--degas-space-4);
}

.dashboard-empty code {
    background: var(--degas-surface-sunken);
    padding: 0.125rem 0.375rem;
    border-radius: var(--degas-radius-sm);
}

/* Rótulos de sección (Favoritos / Módulos): eyebrow en mayúsculas chicas, como las de la barra
   de filtros. */
.fav-section-title,
.modules-section > h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--degas-space-2);
    font-size: var(--degas-text-2xs);
    font-weight: var(--degas-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--degas-text-muted);
}

.fav-section-title .k-svg-icon {
    color: var(--degas-accent-star);
}

.modules-section > .muted {
    margin: 0 0 var(--degas-space-2);
}

/* ===== Favoritos (sección del dashboard) ===== */
.fav-section {
    margin-top: var(--degas-space-1);
    margin-bottom: var(--degas-space-6);
}

.fav-section > .muted {
    margin: 0 0 var(--degas-space-2);
}

.fav-loading {
    display: flex;
    align-items: center;
    gap: var(--degas-space-3);
    padding: var(--degas-space-3) 0;
    color: var(--degas-text-muted);
}

/* Empty-state: usuario sin favoritos. Caja dashed compacta (mismo lenguaje que .dashboard-empty)
   con la estrella atenuada + hint de cómo agregar favoritos. Se muestra SIEMPRE que no hay favs,
   así la sección no aparece-y-desaparece en el primer load. */
.fav-empty {
    display: flex;
    align-items: center;
    gap: var(--degas-space-3);
    padding: var(--degas-space-3) var(--degas-space-4);
    background: var(--degas-surface);
    border: 1px dashed var(--degas-border-strong);
    border-radius: var(--degas-radius);
    color: var(--degas-text-muted);
}

.fav-empty p {
    margin: 0;
    font-size: var(--degas-text-sm);
}

/* La estrella del empty-state va gris (hereda currentColor del contenedor), no dorada. */
.fav-empty .k-svg-icon,
.fav-empty svg {
    flex: 0 0 auto;
}

/* Favoritos como chips/cards compactas en una fila que hace wrap (el drag-to-reorder de
   favorites-reorder.js sigue usando data-fav-index + draggable en cada .fav-card). */
.fav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degas-space-2);
}

.fav-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: var(--degas-space-2) var(--degas-space-3);
    background: var(--degas-surface);
    border: 1px solid var(--degas-border);
    border-radius: var(--degas-radius);
    cursor: pointer;
    transition: border-color var(--degas-duration-fast) var(--degas-ease-out),
                background-color var(--degas-duration-fast) var(--degas-ease-out),
                opacity var(--degas-duration-fast) var(--degas-ease-out);
}

.fav-card:hover,
.fav-card:focus-visible {
    border-color: var(--degas-border-input);
    background: var(--degas-surface-hover);
}

/* La card arrastrada se atenúa; la card destino marca un borde punteado para indicar el drop. */
.fav-card.is-dragging {
    opacity: 0.5;
}

.fav-card.is-drag-over {
    border-color: var(--degas-primary);
    border-style: dashed;
}

.fav-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--degas-space-2);
    color: var(--degas-text-muted);
}

.fav-card-icon-spacer {
    display: inline-block;
}

.fav-card-title {
    font-size: var(--degas-text-sm);
    font-weight: var(--degas-font-weight-semibold);
}

.fav-card-module {
    font-size: var(--degas-text-2xs);
    color: var(--degas-text-muted);
}

/* ===== Catálogo de módulos: lista compacta (ícono + título + descripción + chevron) ===== */
.module-grid {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--degas-border);
}

.module-card {
    display: flex;
    align-items: center;
    gap: var(--degas-space-3);
    min-height: 52px;
    padding: var(--degas-space-2) var(--degas-space-1);
    box-sizing: border-box;
    border-bottom: 1px solid var(--degas-border);
    cursor: pointer;
    transition: background-color var(--degas-duration-fast) var(--degas-ease-out);
}

/* El foco de teclado lo marca el anillo global :focus-visible; el hover tiñe la fila. */
.module-card:hover,
.module-card:focus-visible {
    background: var(--degas-surface-hover);
}

.module-card-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--degas-radius);
    background: var(--degas-primary-soft);
    color: var(--degas-primary);
}

.module-card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.module-card h3 {
    margin: 0;
    font-size: var(--degas-text-md);
    font-weight: var(--degas-font-weight-semibold);
}

.module-card p {
    margin: 0;
    color: var(--degas-text-muted);
    font-size: var(--degas-text-sm);
}

.module-card-chevron {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--degas-text-subtle);
}