/* Sistema de diseño del panel administrativo — paleta y componentes propios sobre Bootstrap 5,
   no el look por defecto del scaffolding. Tokens centralizados en :root para mantener todo
   consistente (sidebar, topbar, tarjetas, badges, formularios) desde un solo lugar. */
/* Rediseño (2026-09-11, pedido explícito del usuario — referencia HTML/CSS entregada como
   handoff de diseño, "Panel AxonCoreCR"): paleta IBM Plex Sans/Mono, sidebar casi negro, acento
   índigo más oscuro. Solo se tocan los VALORES de estos tokens — los ~30 componentes que ya los
   consumen (tarjetas, botones, badges, formularios en las 82 vistas del panel) heredan el cambio
   sin tocarlos uno por uno. */
:root {
    --admin-sidebar-bg: #0e1016;
    --admin-sidebar-bg-hover: #171a21;
    --admin-sidebar-bg-active: #4338ca;
    --admin-sidebar-text: #9ca3af;
    --admin-sidebar-text-active: #ffffff;
    --admin-accent: #4338ca;
    --admin-accent-hover: #312e81;
    --admin-accent-soft: #f5f6ff;
    --admin-bg: #f4f5f8;
    --admin-card-bg: #ffffff;
    --admin-border: #e4e6eb;
    --admin-text: #1a1c22;
    --admin-text-muted: #6b7280;
    --admin-radius: 0.75rem;
    --admin-shadow: 0 1px 2px rgba(16, 20, 32, 0.04);
    --admin-shadow-lg: 0 6px 18px rgba(14, 16, 22, 0.18);
    --admin-sidebar-width: 248px;
    --admin-font-sans: "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
    --admin-font-mono: "IBM Plex Mono", "Consolas", monospace;
}

body {
    background-color: var(--admin-bg);
    color: var(--admin-text);
    font-family: var(--admin-font-sans);
}

/* --- Shell: sidebar + topbar + content --- */
.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: var(--admin-sidebar-width);
    flex-shrink: 0;
    background: var(--admin-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    transition: transform 0.2s ease;
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.925rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar__brand i {
    font-size: 1.15rem;
    color: #818cf8;
}

.axon-logo {
    flex-shrink: 0;
    display: block;
}

/* Dashboard "axón" (Home/Index, pedido del usuario 2026-08-20/2026-08-26) — nodo central con líneas
   hacia un nodo por módulo. El contenedor es un cuadrado (aspect-ratio:1) porque las posiciones se
   calculan en Razor como porcentaje de un viewBox de 600x600 — si el contenedor no fuera cuadrado,
   los porcentajes horizontal/vertical se distorsionarían entre sí.
   Alto acotado por viewport (2026-09-11, pedido explícito del usuario: "que quepa en la pantalla y
   no tenga barra de desplazamiento vertical") — calc(100vh - 460px) resta el resto del cromo
   vertical de la página (barra superior + saludo/accesos rápidos + badge de tipo de cambio +
   encabezado de la tarjeta + su padding), medido real contra capturas de pantalla reales (Edge
   headless + DevTools Protocol). Bug real encontrado en el camino: la barra sobraba 60px de más en
   TODAS las pantallas por un `body{margin-bottom:60px}` viejo del scaffolding de ASP.NET Core (ver
   site.css) — corregido ahí, no acá; sin ese bug este cálculo ya alcanza para no scrollear. Como es
   un cuadrado (aspect-ratio 1/1), acotar el ANCHO por una altura disponible acota el CUADRO completo. */
.axon-dashboard {
    position: relative;
    /* max(360px, ...) es un piso — en una ventana muy baja preferimos algo de scroll a un mapa
       ilegible o colapsado a 0. */
    width: min(900px, 100%, max(360px, calc(100vh - 460px)));
    aspect-ratio: 1 / 1;
    margin: 1rem auto;
}

.axon-dashboard__lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Líneas del "radio" (2026-09-11, rediseño) — gris-lavanda neutro en vez del índigo claro de antes,
   más cercano al degradado sutil de la referencia. */
.axon-dashboard__lineas line {
    stroke: #c7cbd8;
}

.axon-dashboard__centro,
.axon-dashboard__nodo {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    text-align: center;
}

/* Hub central (2026-09-11, rediseño) — círculo oscuro detrás del logo (antes el logo flotaba sin
   fondo propio); tamaño generoso para no achicar el logo "neurona" ya detallado (pedido explícito
   del usuario en una ronda anterior: "quiero un logo más detallado y profesional") — a diferencia
   de la referencia (hub de 92px con un ícono simple adentro), este hub mide 8.75rem para que el
   logo de 72px siga viéndose grande y nítido, con la etiqueta "AXONCORE" debajo, dentro del mismo
   círculo. */
.axon-dashboard__centro {
    width: 9rem;
    height: 9rem;
    border-radius: 999px;
    background: var(--admin-sidebar-bg);
    justify-content: center;
    box-shadow: 0 6px 18px rgba(14, 16, 22, 0.28);
}

.axon-dashboard__centro span {
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e5e7eb;
}

.axon-dashboard__nodo-icono {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 999px;
    background: var(--admin-card-bg);
    border: 1.5px solid #dfe2ea;
    color: var(--admin-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: var(--admin-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* min-height reserva SIEMPRE 2 líneas (2026-09-11, corrige un desalineamiento real: "el círculo de
   Cuentas por Cobrar no está bien alineado") — .axon-dashboard__nodo se centra sobre su punto con
   translate(-50%,-50%) tomando el alto de TODA la columna (ícono + texto); una etiqueta de 2 líneas
   ("Cuentas por Cobrar") hacía esa columna más alta que las de 1 línea, corriendo el ícono hacia
   arriba respecto a las demás. Con las 6 etiquetas reservando el mismo alto de texto, el ícono
   queda en la misma posición relativa en todos los nodos, sin importar cuánto texto tengan. */
.axon-dashboard__nodo-texto {
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.15;
    color: var(--admin-text);
    /* 3.4em cubre el peor caso real (Cuentas por Cobrar envuelve a 3 líneas cortas: "Cuentas" /
       "por" / "Cobrar") — todas las etiquetas reservan el mismo alto aunque tengan menos texto, así
       el ícono queda siempre en la misma posición relativa sin importar cuántas líneas use cada una. */
    min-height: 3.4em;
    max-width: 6.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.axon-dashboard__nodo:hover .axon-dashboard__nodo-icono {
    transform: scale(1.06);
    box-shadow: var(--admin-shadow-lg);
    border-color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.axon-dashboard__nodo:hover .axon-dashboard__nodo-texto {
    color: var(--admin-accent);
}

/* Tipo de cambio (Panel, RF-04.4, pedido explícito del usuario, 2026-08-26) — badge persistente. */
.admin-tipo-cambio-badge {
    display: inline-flex;
    align-items: center;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.admin-tipo-cambio-badge:hover {
    background: var(--admin-accent);
    color: #fff;
}

/* Notas importantes (Panel, pedido explícito del usuario, 2026-08-26) — anuncios de plataforma
   publicados por el SuperAdmin, visibles para cualquier rol. */
.admin-notas-importantes__item {
    padding: 0.85rem 1.4rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-notas-importantes__item:last-child {
    border-bottom: none;
}

.admin-notas-importantes__titulo {
    font-weight: 600;
    color: var(--admin-text);
}

.admin-notas-importantes__contenido {
    color: var(--admin-text-muted);
    white-space: pre-wrap;
    margin-top: 0.15rem;
}

.admin-notas-importantes__fecha {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    margin-top: 0.3rem;
}

@media (max-width: 767.98px) {
    .axon-dashboard {
        width: min(420px, 100%);
    }

    .axon-dashboard__nodo-icono {
        width: 3.1rem;
        height: 3.1rem;
        font-size: 1.2rem;
    }

    .axon-dashboard__nodo-texto {
        font-size: 0.7rem;
    }
}

.admin-sidebar__nav {
    flex: 1;
    padding: 0.6rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    overflow-y: auto;
}

.admin-sidebar__section {
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: #6b7280;
    padding: 0.55rem 0.6rem 0.2rem;
    font-weight: 600;
}

/* Separador de grupos del sidebar (2026-09-05, pedido explícito del usuario: "en lugar de un
   espacio pongamos una línea, detallala que se vea muy profesional") — línea con degradado que se
   desvanece en los bordes (en vez de un borde sólido de punta a punta, que se ve genérico) y un
   nodo pequeño con resplandor en el centro, echando mano del mismo lenguaje visual del logo/dashboard
   "axón" (nodo + líneas) — un separador que se siente parte de la marca, no un `<hr>` de scaffolding. */
.admin-sidebar__divider {
    position: relative;
    height: 2px;
    margin: 1rem 1.1rem;
    border: none;
    border-radius: 999px;
    /* El navegador aplica "overflow: hidden" por defecto a <hr> (hoja de estilos UA) — sin esto,
       recorta el resplandor del nodo central (::after) apenas se sale de esta caja de 2px de alto. */
    overflow: visible;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.3) 12%,
        rgba(165, 180, 252, 0.55) 38%,
        rgba(224, 231, 255, 0.95) 50%,
        rgba(165, 180, 252, 0.55) 62%,
        rgba(99, 102, 241, 0.3) 88%,
        transparent 100%
    );
}

/* Sombra de 1px justo debajo de la línea — efecto "grabado" en la superficie oscura del sidebar,
   en vez de una línea plana flotando encima. */
.admin-sidebar__divider::before {
    content: "";
    position: absolute;
    inset: 2px 0 auto 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.4);
}

/* Nodo con resplandor en el centro (2026-09-05, pedido explícito del usuario: "detallala que se vea
   muy profesional") — mismo lenguaje visual del logo/dashboard "axón" (nodo + líneas), con un anillo
   del color del sidebar alrededor para que el resplandor se lea como una fuente de luz propia y no
   como un halo pegado encima de la línea. */
.admin-sidebar__divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #eef2ff;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 3px var(--admin-sidebar-bg),
        0 0 6px 2px rgba(224, 231, 255, 1),
        0 0 16px 4px rgba(129, 140, 248, 0.9),
        0 0 30px 10px rgba(79, 70, 229, 0.45);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    color: var(--admin-sidebar-text);
    text-decoration: none;
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.admin-nav-link i {
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
}

.admin-nav-link:hover {
    background: var(--admin-sidebar-bg-hover);
    color: #ffffff;
}

.admin-nav-link.active {
    background: var(--admin-accent);
    color: var(--admin-sidebar-text-active);
}

/* Secciones anidadas del menú (Administración > Seguridad/Sistema) */
.admin-nav-group__toggle {
    cursor: pointer;
    justify-content: space-between;
}

.admin-nav-group__toggle .bi-chevron-down {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.admin-nav-group__toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.admin-nav-link--sub {
    padding-left: 2.2rem;
    font-size: 0.78rem;
}

/* Árbol de Reportería (2026-09-07, pedido explícito del usuario: "al seleccionar esta opcion en el
   area de trabajo se va a abrir un treeview y la seccion de parametros") — panel DENTRO del área de
   trabajo (Views/Reportes/_Arbol.cshtml), no confundir con .admin-sidebar (navegación global, donde
   Reportería quedó como un único link). */
.reportes-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.reportes-arbol {
    width: 240px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.6rem;
    padding: 0.6rem 0;
}

.reportes-arbol__titulo {
    padding: 0.2rem 1rem 0.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    font-weight: 700;
}

.reportes-arbol-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    color: #334155;
    text-decoration: none;
    font-size: 0.83rem;
    cursor: pointer;
}

.reportes-arbol-link:hover {
    background: #f1f5f9;
    color: #334155;
}

.reportes-arbol-link.active {
    background: var(--admin-accent);
    color: #fff;
    font-weight: 600;
}

.reportes-arbol-link--sub {
    padding-left: 2.1rem;
    font-size: 0.8rem;
}

.reportes-arbol-link .bi-chevron-down {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.reportes-arbol-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.reportes-contenido {
    flex: 1;
    min-width: 0;
}

.admin-sidebar__footer {
    padding: 0.6rem 1.1rem;
    color: #545a66;
    font-size: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-main {
    margin-left: var(--admin-sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.75rem;
    background: var(--admin-card-bg);
    border-bottom: 1px solid var(--admin-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.admin-topbar__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--admin-text);
}

/* Empresa/Sucursal activa, arriba a la izquierda junto al título (pedido explícito del usuario,
   2026-08-29 — reubicado desde el final del sidebar; rediseñado 2026-09-11 como chip con etiqueta,
   siguiendo la referencia entregada — antes era texto en negrita del color de acento). */
.admin-topbar__empresa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: #3d4149;
    max-width: 260px;
    transition: border-color 0.12s ease;
}

.admin-topbar__empresa:hover {
    border-color: #c7cad3;
}

.admin-topbar__empresa i {
    font-size: 0.85rem;
    color: #8a8f9a;
    flex-shrink: 0;
}

.admin-topbar__chip-label {
    color: #8a8f9a;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.admin-topbar__chip-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.admin-sidebar-toggle {
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    border-radius: 0.5rem;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-text);
}

.admin-topbar__user .btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    padding: 0.3rem 0.9rem 0.3rem 0.3rem;
    background: var(--admin-card-bg);
    color: var(--admin-text);
    font-size: 0.9rem;
    font-weight: 500;
}

.admin-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--admin-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-content {
    padding: 1.75rem;
    flex: 1;
}

/* Documentos (Ventas Pagadas/Notas de Crédito): la lista debe caber completa en la pantalla, sin
   scroll de página completa (pedido explícito del usuario, 2026-08-26) — solo la tabla misma
   scrollea internamente. Acotado a estas pantallas vía :has(.documentos-pantalla), sin tocar el
   layout general (el resto de pantallas sí debe poder crecer y hacer scroll normal de página). */
.admin-shell:has(.documentos-pantalla) {
    height: 100vh;
}

.admin-shell:has(.documentos-pantalla) .admin-main {
    height: 100vh;
    overflow: hidden;
}

.admin-shell:has(.documentos-pantalla) .admin-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.documentos-pantalla {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Recepción Documentos / Confirmar: pantalla grande con muchas líneas y columnas (pedido explícito
   del usuario, 2026-09-03) — oculta el menú lateral y aprovecha el ancho completo, mismo criterio de
   :has() ya usado arriba para no tocar el layout general. */
.admin-shell:has(.pantalla-ancho-completo) .admin-sidebar {
    display: none;
}

.admin-shell:has(.pantalla-ancho-completo) .admin-main {
    margin-left: 0;
}

/* Panel (Home/Index) — fondo moderno acorde a la marca (2026-09-05, pedido explícito del usuario,
   paso 6 de "Pendientes por realizar.txt"). "Mesh gradient" suave con los mismos tonos de acento ya
   usados en toda la app (--admin-accent, el mismo azul-violeta de las líneas del dashboard "axón" y
   del estado activo del sidebar) — sutil a propósito para no competir con las tarjetas/tiles encima.
   Acotado a esta pantalla vía :has(.panel-pantalla), mismo patrón ya usado para
   documentos-pantalla/pantalla-ancho-completo más abajo, sin tocar el fondo de ninguna otra pantalla. */
.admin-shell:has(.panel-pantalla) .admin-content {
    background-color: var(--admin-bg);
    background-image:
        radial-gradient(760px circle at 4% -10%, rgba(79, 70, 229, 0.16), transparent 60%),
        radial-gradient(680px circle at 104% -6%, rgba(129, 140, 248, 0.22), transparent 55%),
        radial-gradient(950px circle at 50% 115%, rgba(99, 102, 241, 0.12), transparent 60%);
    background-repeat: no-repeat;
    /* Mapa de módulos más arriba (2026-09-11, pedido explícito del usuario) — menos aire arriba del
       Panel específicamente, sin tocar el padding estándar de .admin-content en el resto de
       pantallas. */
    padding-top: 1rem;
}

/* Saludo + accesos rápidos del Panel (2026-09-11, rediseño — antes el Panel arrancaba directo en
   el badge de tipo de cambio + tarjeta "axón", sin encabezado propio). */
.panel-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.panel-hero__titulo {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--admin-text);
}

.panel-hero__fecha {
    margin: 0.35rem 0 0;
    color: var(--admin-text-muted);
    font-size: 0.84rem;
}

.panel-hero__acciones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    box-shadow: var(--admin-shadow);
    padding: 0.56rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #23262d;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.panel-btn:hover {
    border-color: var(--admin-accent);
    color: var(--admin-accent-hover);
    text-decoration: none;
}

.panel-btn__signo {
    color: var(--admin-accent);
    font-family: var(--admin-font-mono);
    font-size: 0.875rem;
}

.panel-btn--primary {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
    color: #fff;
}

.panel-btn--primary:hover {
    background: var(--admin-accent-hover);
    border-color: var(--admin-accent-hover);
    color: #fff;
}

.panel-btn--primary .panel-btn__signo {
    color: #fff;
}

/* Etiqueta "EN VIVO" de la tarjeta "Mapa de módulos" (2026-09-11, rediseño). */
.panel-live-tag {
    font-size: 0.66rem;
    font-family: var(--admin-font-mono);
    color: var(--admin-text-muted);
    border: 1px solid var(--admin-border);
    border-radius: 0.3rem;
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
}

.documentos-pantalla .admin-card:last-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.documentos-pantalla .admin-card:last-child .table-responsive {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.documentos-pantalla .admin-card:last-child .table-responsive thead th {
    position: sticky;
    top: 0;
    background: var(--admin-card-bg);
    z-index: 1;
}

.documentos-pantalla .admin-card:last-child .admin-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.admin-impersonation-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #7c3aed;
    color: #fff;
    padding: 0.5rem 1.75rem;
    font-size: 0.875rem;
}

.admin-impersonation-banner form {
    margin: 0;
}

/* --- Cards, tablas, badges, formularios --- */
.admin-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    transition: box-shadow 0.22s ease, border-color 0.18s ease;
}

/* Sombra en capas (piloto visual, segunda pasada, pedido explícito del usuario, 2026-09-09) — en
   reposo la sombra ajustada de siempre (--admin-shadow), al pasar el mouse una más difusa y profunda
   (--admin-shadow-lg, el mismo token ya usado en el hover de .axon-dashboard__nodo-icono) que sugiere
   que la tarjeta "se levanta". Sin mover la tarjeta (sin transform) para no generar jitter en pantallas
   con varias tarjetas apiladas o tablas largas dentro. */
.admin-card:hover {
    box-shadow: var(--admin-shadow-lg);
}

.admin-card__header {
    padding: 1.15rem 1.4rem;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-card__header h2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
}

.admin-card__body {
    padding: 1.4rem;
}

/* Subtítulo de sección DENTRO de una tarjeta ya abierta (p. ej. "Contacto" bajo "Identificación y
   comercial", o "Líneas" dentro de un formulario largo) — antes varias vistas reutilizaban
   `.admin-card__header` con estilos inline (`style="border:none; padding-left:0;"`) para simular esto,
   lo que lo hacía indistinguible del encabezado real de la tarjeta. Componente propio, más liviano,
   con una marquita de acento en vez de reusar el header completo. */
.admin-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-muted);
    margin: 1.75rem 0 1rem;
}

.admin-section-title:first-child {
    margin-top: 0;
}

.admin-section-title::before {
    content: "";
    width: 3px;
    height: 0.85rem;
    border-radius: 999px;
    background: var(--admin-accent);
    flex-shrink: 0;
}

.admin-section-title i {
    color: var(--admin-accent);
    font-size: 0.95rem;
}

/* Par etiqueta/valor de una vista de Detalle (Clientes, Proveedores, Productos, Sucursales, Usuarios
   comparten este patrón) — mismo lenguaje visual ya usado en .recepcion-info-strip (etiqueta muted en
   mayúsculas + valor en negrita), formalizado acá para que TODAS las vistas de Detalle lo compartan. */
.admin-detail-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.admin-detail-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.4;
}

/* Panel de totales al pie de un formulario con líneas (Compras/Crear, Ventas/Vender y similares) —
   mismo fondo/borde ya usado en .recepcion-totales, formalizado como componente reusable con su propia
   fila de total resaltada en el color de acento. */
.admin-totales-panel {
    background: #fbfcfe;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 1rem 1.4rem;
    min-width: 280px;
}

.admin-totales-panel__row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    color: var(--admin-text-muted);
}

.admin-totales-panel__row--total {
    border-top: 1px solid var(--admin-border);
    margin-top: 0.3rem;
    padding-top: 0.6rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--admin-text);
}

.admin-totales-panel__row--total span:last-child {
    color: var(--admin-accent);
}

.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.admin-page-header h1,
.admin-page-header h2,
.admin-page-header h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--admin-text);
}

.admin-page-header p {
    color: var(--admin-text-muted);
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
}

.admin-stat {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 1.25rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-stat__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.admin-stat__value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-stat__label {
    color: var(--admin-text-muted);
    font-size: 0.82rem;
}

.table.admin-table {
    margin: 0;
}

.admin-table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--admin-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--admin-border);
    padding: 0.85rem 1.4rem;
    background: #fbfcfe;
}

.admin-table tbody td {
    padding: 0.85rem 1.4rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--admin-border);
    font-size: 0.9rem;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr {
    transition: background-color 0.12s ease;
}

.admin-table tbody tr:hover {
    background: #fafbff;
}

/* Cuentas por Pagar (2026-09-05, pedido explícito del usuario: "ajustemos la lista") — 9 columnas
   (Tipo/Documento/Proveedor/Fecha/Vencimiento/Total/Saldo/Estado/Acciones) no caben cómodas con el
   padding horizontal genérico de 1.4rem por celda (usado en tablas más angostas de 4-6 columnas en
   el resto del sistema) — empujaba Acciones fuera del viewport en una pantalla de laptop típica.
   Modificador propio, más angosto, en vez de tocar `.admin-table` global (afectaría todas las demás
   tablas del sistema sin necesidad). */
.admin-table--cuentasporpagar thead th,
.admin-table--cuentasporpagar tbody td {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* 2026-09-05 (encontrado ajustando Cuentas por Pagar): el selector pedía "badge.admin-badge" —
   ambas clases juntas — pero casi ninguna vista del sistema agrega la clase Bootstrap "badge" al
   `<span class="admin-badge ...">`, solo "admin-badge" a secas. Resultado real: la píldora de color
   (fondo/padding/radio) nunca se aplicaba en la enorme mayoría de las pantallas — se veía como texto
   plano. Selector de una sola clase para que funcione en TODAS las pantallas que ya usan este
   patrón, sin tener que tocar cada vista una por una. */
.admin-badge {
    display: inline-block;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.4em 0.7em;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.admin-badge--success { background: #dcfce7; color: #15803d; }
.admin-badge--danger { background: #fee2e2; color: #b91c1c; }
.admin-badge--warning { background: #fef3c7; color: #b45309; }
.admin-badge--muted { background: #f1f5f9; color: #475569; }
.admin-badge--info { background: #dbeafe; color: #1d4ed8; }

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--admin-text);
}

.form-control, .form-select {
    border-radius: 0.5rem;
    border-color: var(--admin-border);
    font-size: 0.9rem;
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-text {
    font-size: 0.8rem;
}

.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active {
    transform: translateY(0);
}

/* Foco visible real para navegación por teclado (WCAG) — separado de :focus para no alterar el
   anillo ya existente de .form-control/.form-select al hacer clic con mouse. */
.btn:focus-visible,
.admin-nav-link:focus-visible,
.reportes-arbol-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--admin-accent-hover);
    border-color: var(--admin-accent-hover);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--admin-shadow);
}

.btn-outline-primary {
    color: var(--admin-accent);
    border-color: var(--admin-accent);
}

.btn-outline-primary:hover {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--admin-shadow);
}

.admin-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--admin-text-muted);
}

.admin-empty i {
    font-size: 2.25rem;
    color: #cbd5e1;
    margin-bottom: 0.75rem;
    display: block;
}

/* --- Línea de tiempo del log de un comprobante (Comprobantes/Detalle) --- */
.admin-timeline {
    position: relative;
    margin: 0;
    padding-left: 1.75rem;
}

.admin-timeline__item {
    position: relative;
    padding-bottom: 1.5rem;
}

.admin-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -1.31rem;
    top: 1.1rem;
    bottom: -0.4rem;
    width: 2px;
    background: var(--admin-border);
}

.admin-timeline__dot {
    position: absolute;
    left: -1.75rem;
    top: 0.2rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--admin-card-bg);
    box-shadow: 0 0 0 1px var(--admin-border);
}

.admin-timeline__dot--success { background: #22c55e; }
.admin-timeline__dot--danger { background: #ef4444; }
.admin-timeline__dot--warning { background: #f59e0b; }
.admin-timeline__dot--info { background: #3b82f6; }
.admin-timeline__dot--muted { background: #94a3b8; }

.admin-timeline__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.admin-timeline__fecha {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
}

.admin-timeline__detalle {
    color: var(--admin-text);
    white-space: pre-wrap;
    font-size: 0.9rem;
}

.admin-timeline__usuario {
    font-size: 0.78rem;
    color: var(--admin-text-muted);
    margin-top: 0.15rem;
}

.admin-secret-box {
    background: #0f172a;
    color: #a7f3d0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    word-break: break-all;
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--admin-shadow-lg);
    }

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

/* --- Login --- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #1e293b, #0f172a 60%);
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--admin-card-bg);
    border-radius: 1rem;
    box-shadow: var(--admin-shadow-lg);
    padding: 2.25rem 2rem;
}

.login-card__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--admin-text);
    margin-bottom: 1.75rem;
}

.login-card__brand i {
    font-size: 1.6rem;
    color: var(--admin-accent);
}

/* Recepción Documentos / Confirmar (RF-12, 2026-09-06) — franja de referencia del comprobante
   original: icono + etiqueta + valor, mismo lenguaje visual que .admin-stat pero más compacto
   (4 datos en línea, no tarjetas separadas). */
.recepcion-info-strip {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 2rem;
}

.recepcion-info-strip__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 190px;
    flex: 1 1 190px;
}

.recepcion-info-strip__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.recepcion-info-strip__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-muted);
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.recepcion-info-strip__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--admin-text);
    overflow-wrap: anywhere;
}

/* Tarjeta con acento (la decisión de Mensaje de Aceptación dispara todo lo demás en esta pantalla,
   se distingue con un encabezado teñido en vez de uno más entre varios iguales). */
.admin-card--acento .admin-card__header {
    background: var(--admin-accent-soft);
    border-bottom-color: #c7d2fe;
    border-top-left-radius: var(--admin-radius);
    border-top-right-radius: var(--admin-radius);
}

.admin-card--acento .admin-card__header h2 {
    color: var(--admin-accent-hover);
}

.admin-card__header h2 {
    display: flex;
    align-items: center;
}

.admin-card__header h2 i {
    color: var(--admin-accent);
}

.recepcion-totales {
    background: #fbfcfe;
    border-top: 1px solid var(--admin-border);
    padding: 1rem 1.4rem;
}

/* --- Piloto de modernización visual, segunda pasada (pedido explícito del usuario, 2026-09-09) ---
   Ideas elegidas de una lluvia de ideas previa, solo donde aplican de verdad: números tabulares,
   toast con barra de progreso y flash de actualización de un total recalculado en vivo. */

/* Números tabulares — todas las columnas/celdas de montos, cantidades y totales del sistema (no solo
   las 3 pantallas piloto: es una clase reusable, cualquier vista futura puede aplicarla) para que los
   dígitos no "bailen" de ancho entre filas contiguas. font-variant-numeric es la propiedad moderna;
   font-feature-settings:"tnum" queda como respaldo para motores que todavía no la resuelven sola. */
.admin-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Flash de actualización — breve resalte de fondo color de acento sobre un número que se acaba de
   recalcular en vivo (hoy: el Total de Compras/Crear), en vez de mover o parpadear todo el bloque.
   Reusable: cualquier pantalla futura con un total recalculado por JS puede alternar esta clase.
   padding+margin negativo para que el fondo no empuje el layout al aparecer. */
.admin-num-flash {
    display: inline-block;
    padding: 0 0.3rem;
    margin: 0 -0.3rem;
    border-radius: 0.35rem;
    animation: admin-flash-update 0.7s ease;
}

@keyframes admin-flash-update {
    0% { background-color: rgba(79, 70, 229, 0.22); }
    100% { background-color: rgba(79, 70, 229, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-num-flash {
        animation: none;
    }
}

/* Toast global (TempData["Exito"]/TempData["Error"], _Layout.cshtml) — antes era un alert de Bootstrap
   fijo en el flujo de la página que desaparecía de golpe a los N segundos, sin ningún aviso de cuánto
   faltaba. Ahora es una notificación flotante con una barra de progreso fina que se vacía en tiempo
   real durante esos mismos segundos (misma duración que _Layout.cshtml fija en --toast-duration inline).
   Pausa al pasar el mouse o el foco (WCAG 2.2.1, control sobre límites de tiempo) y tiene cierre manual. */
.admin-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(380px, calc(100vw - 2.5rem));
}

.admin-toast {
    position: relative;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow-lg);
    padding: 0.9rem 2.4rem 1rem 1rem;
    overflow: hidden;
    animation: admin-toast-in 0.22s ease;
}

@keyframes admin-toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-toast.is-leaving {
    animation: admin-toast-out 0.18s ease forwards;
}

@keyframes admin-toast-out {
    to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

.admin-toast__body {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--admin-text);
    line-height: 1.4;
}

.admin-toast__body i {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.admin-toast--success .admin-toast__body i { color: #16a34a; }
.admin-toast--danger .admin-toast__body i { color: #dc2626; }

.admin-toast__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    border: none;
    background: transparent;
    color: var(--admin-text-muted);
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.admin-toast__close:hover {
    background: var(--admin-bg);
    color: var(--admin-text);
}

.admin-toast__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(15, 23, 42, 0.07);
}

.admin-toast__progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    animation: admin-toast-progress linear forwards;
    animation-duration: var(--toast-duration, 5s);
}

.admin-toast.is-paused .admin-toast__progress-bar {
    animation-play-state: paused;
}

@keyframes admin-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.admin-toast--success .admin-toast__progress-bar { background: #22c55e; }
.admin-toast--danger .admin-toast__progress-bar { background: #ef4444; }

@media (prefers-reduced-motion: reduce) {
    .admin-toast,
    .admin-toast.is-leaving,
    .admin-toast__progress-bar {
        animation: none;
    }
}

/* Módulo de Reportería (2026-09-07, pedido explícito del usuario: "cada reporte debe de darle la
   opcion de imprimir") — impresión nativa del navegador (window.print()), sin generar nada en el
   servidor: oculta sidebar/topbar/filtros/botones, deja solo el título y la tabla del reporte.
   .reporte-no-imprimir marca cualquier bloque que no debe salir en el papel (filtros, botones). */
@media print {
    .admin-sidebar,
    .admin-topbar,
    .reporte-no-imprimir {
        display: none !important;
    }
    .admin-main {
        margin-left: 0 !important;
    }
    .admin-content {
        padding: 0 !important;
    }
}