/* ==========================================================================
   Panel Administrativo — ENGORVIA
   CSS Vanilla Puro (Sin frameworks)

   SISTEMA VISUAL CENTRALIZADO
   --------------------------------------------------------------------------
   TODO el color del panel sale de las variables de este bloque. Ningún
   componente define su propio color: así, cambiar de tema es cambiar estos
   valores, y todos los componentes responden a la vez.

   LA JERARQUÍA DE BORDES (lo que arregla que las líneas "desaparezcan")
   --------------------------------------------------------------------------
   Antes había un único --border-color para absolutamente todo, y en tema
   claro daba 1.23:1 sobre una tarjeta blanca y 1.13:1 sobre el encabezado de
   tabla: es decir, prácticamente invisible. En tema oscurollegaba a 1.00:1 sobre el
   propio input, porque el borde y el fondo del campo eran el mismo color.

   Ahora hay cuatro niveles, para que el borde(mean) jerarquía en vez de ruido:

     NIVEL 1  --border-subtle   separación interna muy suave.
                                  Filas de tabla dentro de una tarjeta, líneas
                                  de un bloque, separadores internos. Está
                                  para que se note que ahí hay un corte, no para
                                  llamar la atención.

     NIVEL 2  --border          separación visible. El nivel "normal": tarjeta,
                                  divisores de sección, encabezado de tabla,
                                  paginación, inline sections. Es el que se ve
                                  claramente sinrecargar la interfaz.

     NIVEL 3  --border-strong   borde destacado. Campos de formulario, modales,
                                  grupos de manada, el contorno que define un
                                  componente principal. Alcanza 3:1 o más contra
                                  CUALQUIER superficie, que es el mínimo que
                                  pide WCAG 1.4.11 para que un control de
                                  interfaz sea identificable.

     NIVEL 4  --border-active   elemento activo/seleccionado: foco del campo,
                                  enlace del menú activo, pestaña seleccionada.
                                  Usa el verde del sistema, y SOLO aquí, para
                                  que el color signifique algo en vez de
                                  estar decorando.

   Las superficies también están escalonadas, para que se lea la profundidad:
   pagina > tarjeta > encabezado → campo, sin que ninguna se confunda con otra.
   ========================================================================== */

/* ── 1. Variables CSS y Reset ────────────────────────────────────────────── */
:root {
    /* ── Tema Claro (Por defecto) ── */
    /* Superficies: de más profunda (página) a más elevada (cabecera/chips).
       Los valores están elegidos para que cada salto sea perceptible pero
       suave: página vs tarjeta = 1.21:1. */
    --surface-sunken: #f8fafc;   /* campos de formulario, zonas hundidas */
    --surface-raised: #f8fafc;   /* encabezado de tabla, chips, superficies menores */
    --surface-card: #ffffff;     /* tarjeta, panel, modal, lista */
    --surface-page: #e4eaf2;     /* fondo general de la página */
    --surface-sidebar: #ffffff;  /* menú lateral */

    /* Alias históricos: el proyecto ya usaba estos nombres. Se conservan para
       no romper nada existente, pero apuntan al sistema nuevo. */
    --bg-dark: var(--surface-sunken);
    --bg-main: var(--surface-page);
    --bg-card: var(--surface-card);
    --bg-sidebar: var(--surface-sidebar);
    /* El campo va un pelín hundido respecto de la tarjeta: junto con su borde
       de nivel 3, el rectángulo se lee sin necesidad de una sombra. */
    --bg-input: var(--surface-sunken);
    --bg-hover: #eef2f7;

    /* ── Menú lateral: variables PROPIAS, aisladas del resto ──
       El menú se mantiene en azul marino de marca en los DOS temas, así que su
       paleta NO debe seguir al tema. Ese fue el origen
       del bug: sus textos usaban --text-main / --border / --tint-sunken, que en
       tema oscuro valen OSCUROS (#0f1726, #3a4a61, #0f1826) y quedaban
       invisibles sobre el fondo #0a1a2e del propio menú.
       Por eso el sidebar no escucha --text-* ni --border-*: escucha lo suyo,
       mientras el contenido principal sigue escuchando lo suyo. Así las dos
       secciones nunca vuelven a chocar al cambiar de Día a Noche.
       Todos los valores están medidos contra el fondo #0a1a2e. */
    --sidebar-bg: #0a1a2e;          /* azul marino de marca, igual en ambos temas */
    --sidebar-border: #243b57;     /* canto que separa el menú del contenido */
    --sidebar-text: #cbd9ea;        /* enlaces y botones */
    --sidebar-text-strong: #f8fafc; /* marca y hover */
    --sidebar-text-muted: #92a7c1;  /* subenlaces y flechas */
    --sidebar-hover-bg: rgba(148, 197, 255, 0.13);
    --sidebar-hover-text: #ffffff;
    /* Activo: esmeralda con texto VERDE OSCURO, no blanco. El blanco sobre
       #10b981 daba solo 2.54:1 y el texto se perdía; #052e16 da 5.88:1. */
    --sidebar-active-bg: #10b981;
    --sidebar-active-text: #052e16;
    --sidebar-accent: #a3e635;      /* lima: acento de marca, categoría abierta */

    /* ── Tablas ──
       Su marco tiene color propio, más visible que --border, porque delimita
       un bloque y no una línea: en claro daba 1.48:1 sobre la tarjeta y se
       perdía. Medido: 2.08:1 sobre la tarjeta y 1.72:1 sobre la página. */
    --table-border: #a8b5c6;

    /* ── Jerarquía de bordes ── */
    --border-subtle: #e2e8f0;    /* N1 · 1.23:1 sobre tarjeta */
    --border: #cbd5e1;           /* N2 · 1.48:1 sobre tarjeta */
    --border-strong: #7e8da3;    /* N3 · 3.37:1 sobre tarjeta, 3.08:1 sobre campo */
    --border-active: #047857;    /* N4 · el verde del sistema */

    /* Alias histórico: ahora es el NIVEL 2, no un único nivel para todo. */
    --border-color: var(--border);

    --color-primary: #047857;
    --color-primary-hover: #065f46;
    --on-primary: #ffffff;
    --color-accent: #a3e635;
    --color-secondary: #475569;
    --color-secondary-hover: #334155;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-warning: #d97706;
    --color-info: #059669;

    --text-main: #0f172a;        /* 17.9:1 sobre tarjeta */
    --text-muted: #475569;       /* 7.6:1  sobre tarjeta */
    --text-dim: #57677d;         /* 5.8:1  sobre tarjeta: sigue siendo legible */

    /* ── Colores de estado (éxito / aviso / peligro / info) ──
       Se separan el FONDO y el TEXTO/BORDE porque no pueden ser el mismo
       color: un pastel claro detrás de texto oscuro funciona en claro, pero en
       oscuro ese mismo pastel deja de leerse. Al tenerlos separados, cada
       tema define su propio par y ambos cumplen 4.5:1 en texto y 3:1 en borde.
       El borde usa el mismo tono que el texto a propósito: es el que sí
       garantiza contraste contra su propio fondo. */
    --success-bg: rgba(16, 185, 129, 0.14);
    --success-text: #065f46;
    --warning-bg: rgba(245, 158, 11, 0.16);
    --warning-text: #92400e;
    --danger-bg: rgba(239, 68, 68, 0.13);
    --danger-text: #991b1b;
    --info-bg: rgba(163, 230, 53, 0.14);
    --info-text: #4d7c0f;

    /* Tintes neutros usados por cajas de información, chips y zonas vacías.
       Sustituyen a los pastel claros fijos que tenían las plantillas. */
    --tint-accent: rgba(5, 150, 105, 0.10);
    --tint-neutral: rgba(100, 116, 139, 0.12);
    --tint-sunken: #f1f5f9;

    /* Degradado de las cajas de resultado. Sin token, un degradado fijo
       #fff -> #f0f7fc se queda igual de claro en tema oscuro y la caja
       aparece como un bloque blanco. */
    --gradient-surface: linear-gradient(145deg, #ffffff 0%, #eef4fb 100%);

    /* Degradado de los botones/badges informativo. Sus dos paradas son
       oscuras a proposito: llevan texto BLANCO encima, y si una parada
       tomara --info-text (que en oscuro es un azul claro) el texto blanco
       dejaria de leerse. */
    --gradient-info: linear-gradient(135deg, #10b981 0%, #047857 100%);

    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;

    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.09), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --transition: all 0.2s ease-in-out;

    /* Anillo de foco: nivel 4, pero como halo para que se entienda qué campo
       está seleccionado sin thicken el borde del campo. */
    --focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.28);

    --table-header-bg: var(--surface-raised);
    --login-bg: linear-gradient(135deg, #f1f5f9 0%, #dde4ee 100%);
    --active-link-bg: rgba(5, 150, 105, 0.12);
}

/* ── Tema Oscuro ──────────────────────────────────────────────────────────
   Mismos nombres, mismos niveles, mismos objetivos de contraste. Cambia la
   lista de valores, no la estructura: por eso el tema se adapta solo. */
[data-theme="dark"], body.theme-dark {
    /* Superficies: en oscuro el orden se invierte en luminosidad pero no en
       lógica — la tarjeta sigue being un escalón por encima de la página. */
    --surface-sunken: #081525;   /* campos: más oscuros que la tarjeta */
    --surface-raised: #12243a;   /* encabezado de tabla, chips */
    --surface-card: #0e1d31;     /* tarjeta */
    --surface-page: #06101f;     /* fondo general azul marino */
    /* --sidebar-* NO se redefinen aqui a proposito: el menu lateral es oscuro en
       los dos temas y sus variables viven en :root. Si se redefinieran al
       cambiar de tema, su texto volveria a oscurecerse junto con el del
       contenido, que es exactamente el bug que se corrigio. */
    --surface-sidebar: #0a1a2e;  /* menú lateral, azul marino de marca */

    --bg-dark: var(--surface-sunken);
    --bg-main: var(--surface-page);
    --bg-card: var(--surface-card);
    --bg-sidebar: var(--surface-sidebar);
    --bg-input: var(--surface-sunken);
    --bg-hover: #162b44;

    --table-border: #395878;       /* marco de tabla visible sobre la tarjeta */

    /* En oscuro el borde tiene que ser MÁS claro que la superficie para
       recortar contra ella; los cuatro niveles dan 1.34 / 1.82 / 4.05 / 6.46. */
    --border-subtle: #1d3148;    /* N1 */
    --border: #2b4768;           /* N2 */
    --border-strong: #5c7b9e;    /* N3 · contorno claro sobre tarjeta */
    --border-active: #34d399;    /* N4 */

    --border-color: var(--border);

    --color-primary: #10b981;
    --color-primary-hover: #34d399;
    --on-primary: #052e16;
    --color-accent: #a3e635;
    --color-secondary: #334155;
    --color-secondary-hover: #1e293b;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-warning: #f59e0b;
    --color-info: #10b981;

    --text-main: #f1f5f9;
    --text-muted: #a3b3c9;
    --text-dim: #8fa1ba;         /* legible también sobre tarjeta oscura */

    /* ── Colores de estado en oscuro ──
       Mismo par fondo/texto, invertido en luminosidad: fondo apenas tintado
       sobre la superficie oscura y texto en el tono claro de la misma familia.
       Así el pastel claro deja de ser un problema y el aviso se lee igual. */
    --success-bg: rgba(16, 185, 129, 0.16);
    --success-text: #34d399;
    --warning-bg: rgba(245, 158, 11, 0.16);
    --warning-text: #fbbf24;
    --danger-bg: rgba(239, 68, 68, 0.18);
    --danger-text: #fca5a5;
    --info-bg: rgba(163, 230, 53, 0.12);
    --info-text: #bef264;

    --tint-accent: rgba(16, 185, 129, 0.14);
    --tint-neutral: rgba(148, 163, 184, 0.14);
    --tint-sunken: #0f1826;

    --gradient-surface: linear-gradient(145deg, #1e293b 0%, #16202f 100%);
    --gradient-info: linear-gradient(135deg, #10b981 0%, #047857 100%);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.35);

    --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.32);

    --table-header-bg: var(--surface-raised);
    --login-bg: radial-gradient(circle at top right, #0e1d31 0%, #06101f 100%);
    --active-link-bg: rgba(16, 185, 129, 0.18);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── 2. Login Page ───────────────────────────────────────────────────────── */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: var(--login-bg);
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.login-logo-img {
    width: 76px;
    height: 76px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25));
}

.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-main);
    text-transform: uppercase;
}

.login-subtitle {
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.35rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── 3. Sidebar Layout ───────────────────────────────────────────────────── */
/* El menú lateral es el marco de la aplicación: se recorta con NIVEL 3 para
   separarlo bien del contenido, y su fondo es un escalón propio para que no
   se confunda con la página. */
.sidebar {
    width: 280px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    /* El menu es una isla de color: hereda su propio texto para que ningun
       descendiente tome el color del contenido principal por herencia. */
    color: var(--sidebar-text);
}

.sidebar-header {
    padding: 1.15rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--sidebar-border);
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(16, 185, 129, 0.10), transparent 70%);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    text-decoration: none;
    width: 100%;
}

.brand-logo-img {
    width: 70px;
    height: 70px;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(163, 230, 53, 0.20);
    background:
        radial-gradient(circle at 50% 42%, rgba(16, 185, 129, 0.16), #06101f 72%);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8), inset 0 0 18px rgba(16, 185, 129, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.brand-logo-img:hover {
    transform: scale(1.04);
    border-color: rgba(163, 230, 53, 0.45);
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.brand-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--sidebar-text-strong);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.brand-subtitle {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--sidebar-accent);
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0;
}

.sidebar-close-btn {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: none;
    border: none;
    color: var(--sidebar-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.sidebar-close-btn:hover {
    color: var(--sidebar-hover-text);
    background-color: var(--sidebar-hover-bg);
}

.sidebar-nav {
    /* Se mantiene el padding horizontal para no cambiar el ancho de las
       opciones; solo se recorta el aire vertical. El gap entre categorías baja
       de 16px a 8px: era el mayor culpable del alto total del menú. */
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-category {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* DIVISOR: entre una categoría de menú y la siguiente. */
.sidebar-category + .sidebar-category {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-category-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    user-select: none;
}

.sidebar-category-btn:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.sidebar-category.open .sidebar-category-btn {
    color: var(--sidebar-hover-text);
}

/* La categoría que contiene la página activa se marca con el acento esmeralda,
   para que se sepa en cuál se está even sin haber abierto el acordeón. */
.sidebar-category.has-active .sidebar-category-btn {
    color: var(--sidebar-accent);
}

.sidebar-category-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.sidebar-category-icon {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.sidebar-category-name {
    font-weight: 600;
}

.sidebar-category-arrow {
    font-size: 0.85rem;
    color: var(--sidebar-text-muted);
    transition: color 0.2s ease, transform 0.25s ease;
    pointer-events: none;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}

.sidebar-category-btn:hover .sidebar-category-arrow,
.sidebar-category.open .sidebar-category-arrow {
    color: var(--sidebar-accent);
}

.sidebar-category.open .sidebar-category-arrow {
    transform: rotate(90deg);
}

/* Acordeón: se anima con grid-template-rows 0fr -> 1fr, que es lo que permite
   que la altura pase de 0 a la natural sin saberla de antemano. */
.sidebar-category-menu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.28s ease;
    /* Sigue indentado respecto al título de la categoría, pero menos: el
       padding del sub-enlace ya aporta el margen, y antes se sumaban los dos. */
    padding-left: 0.5rem;
}

.sidebar-category.open .sidebar-category-menu {
    grid-template-rows: 1fr;
}

.sidebar-category-menu-inner {
    /* min-height:0 NO es un alto alto: es lo que permite que grid-template-rows
       anime de 0fr a 1fr. Si se quita, el acordeón deja de abrirse. */
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.15rem;
}

/* Segundo nivel: un punto mas compacto que el enlace de primer nivel (5.6px de
   padding y 13px de texto), para que se lea como subordinado y no compita con
   el título de la categoría.
   El selector es DOBLE a proposito. En el HTML el sub-enlace lleva las dos
   clases (class="sidebar-link sidebar-sublink"), y .sidebar-link esta declarado
   DESPUES que esta regla con la misma especificidad, asi que ganaba el: el
   padding compacto de los sub-enlaces nunca se llegaba a aplicar. */
.sidebar-link.sidebar-sublink {
    font-size: 0.8125rem;
    line-height: 1.35;
    padding: 0.35rem 0.6rem;
    gap: 0.4rem;
    color: var(--sidebar-text-muted);
}

.sidebar-sublink:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.sidebar-sublink-dash {
    color: var(--sidebar-text-muted);
    font-weight: 600;
    line-height: 1;
}

.sidebar-sublink:hover .sidebar-sublink-dash,
.sidebar-sublink.active .sidebar-sublink-dash {
    color: currentColor;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Padding vertical de 6.4px (era 9.6px) y line-height propio de 1.35 en
       lugar del 1.5 que hereda body: asi el enlace mide ~32px en vez de ~41px
       sin que el texto se apriete. */
    padding: 0.4rem 0.65rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.35;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.sidebar-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

/* ELEMENTO ACTIVO DEL MENÚ.
   Fondo esmeralda con texto VERDE OSCURO (--sidebar-active-text), no blanco:
   el blanco sobre #10b981 daba 2.54:1 y el texto se perdía. La barra lateral
   verde mantiene la unmistakable marca de "aquí estás". */
.sidebar-link.active,
.sidebar-sublink.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--sidebar-active-text);
    border-radius: var(--border-radius-sm);
}

/* Un enlace activo de segundo nivel usa una marca más discreta, para que los
   dos niveles no griten a la vez. */
.sidebar-sublink.active {
    box-shadow: inset 2px 0 0 var(--sidebar-active-text);
}

/* Icono a 16px para acompañar a un texto de 14px, y con flex-shrink en 0 para
   que en una etiqueta estrecha nunca se deforme ni desalinee. */
.sidebar-link-icon {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* ── 4. Main Area & Header ───────────────────────────────────────────────── */
.main-content {
    margin-left: 280px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1.25rem;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--sidebar-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
    color: var(--sidebar-text-strong);
}

.header-spacer {
    flex: 1;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-divider {
    width: 1px;
    height: 22px;
    background-color: var(--border);
    display: inline-block;
}

/* 1. Interruptor moderno Tema (Sol / Luna) */
.theme-switch {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
    outline: none;
}

.theme-switch-track {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    box-sizing: border-box;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-switch:hover .theme-switch-track {
    border-color: var(--color-primary);
}

.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    z-index: 1;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.theme-icon-sun {
    color: #f59e0b;
    opacity: 1;
}

.theme-icon-moon {
    color: #94a3b8;
    opacity: 0.45;
}

.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

.theme-switch.is-dark .theme-switch-track {
    background-color: #0a1a2e;
    border-color: #243b57;
}

.theme-switch.is-dark .theme-icon-sun {
    color: #64748b;
    opacity: 0.35;
}

.theme-switch.is-dark .theme-icon-moon {
    color: #a3e635;
    opacity: 1;
}

.theme-switch.is-dark .theme-switch-thumb {
    transform: translateX(28px);
    background-color: #12243a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 2. Campana de Notificaciones */
.notif-bell {
    position: relative;
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 50%;
    line-height: 1;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.notif-bell-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.notif-bell:hover {
    background-color: var(--bg-hover);
    color: var(--color-primary);
    opacity: 0.85;
}

.notif-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 2px solid var(--sidebar-border);
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 3. Perfil de Usuario con menú desplegable */
.user-profile {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-profile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    padding: 0.25rem 0.45rem;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    transition: background-color 0.2s ease-in-out;
    outline: none;
}

.user-profile-toggle:hover {
    background-color: var(--bg-hover);
}

.user-avatar-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sidebar-text-strong);
    line-height: 1;
}

.user-chevron {
    width: 12px;
    height: 12px;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

.user-profile.open .user-chevron {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 220px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out, visibility 0.18s;
    z-index: 30;
}

.user-profile.open .user-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
}

.dropdown-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dropdown-header-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.dropdown-header-email {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.2;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-main);
}

.dropdown-item-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.dropdown-sep {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 0.3rem 0;
}

.dropdown-item-danger {
    color: var(--color-danger);
}

.dropdown-item-danger:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: var(--color-danger);
}

.logout-form {
    display: flex;
    width: 100%;
    margin: 0;
}

.logout-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    outline: none;
}

/* Colapsado de Menú */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .main-content {
    margin-left: 0;
}

.menu-toggle {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    padding: 0.55rem;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.menu-toggle:hover {
    background-color: var(--bg-hover);
    border-color: var(--color-primary);
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background-color: var(--text-main);
    border-radius: 2px;
}

.content-wrapper {
    padding: 2rem;
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

.breadcrumbs .active {
    color: var(--text-main);
    font-weight: 500;
}

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

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── 5. Componentes: Cards, Tables, Buttons, Badges ──────────────────────── */
/* Una tarjeta es un componente principal: NIVEL 3, para que su contorno la
   defina contra la página sin necesitar una sombra fuerte. */
.card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    min-width: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

/* Botones sólidos: sin borde propio (el color sólido ya define el contorno),
   pero sí con un estado :active para que se note el "clic". */
.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible,
.page-link:focus-visible,
.sidebar-link:focus-visible,
.sidebar-category-btn:focus-visible,
.nav-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Estado deshabilitado: tiene que leerse como "no disponible" y no como
   un botón normal apagado. */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.4);
    transform: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--on-primary);
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: #fff;
}
.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
}
.btn-danger:hover {
    background-color: var(--color-danger-hover);
}

.btn-success {
    background-color: #10b981;
    color: #052e16;
}
.btn-success:hover {
    background-color: #059669;
    color: #052e16;
}

.btn-ghost {
    background-color: transparent;
    /* Botón sin relleno: aquí el borde ES el contorno, así que NIVEL 3. */
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    text-decoration: none;
}
.btn-ghost:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
    border-color: var(--border-active);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text-main);
}
.btn-outline:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-active);
}

.btn-danger-outline {
    background-color: transparent;
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--color-danger);
}
.btn-danger-outline:hover {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: var(--color-danger);
}

.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

/* Las badges también llevan borde: sin él, sobre un fondo del mismo tono,
   se leen como texto suelto en vez de como etiqueta. */
.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
}

.badge-info {
    background-color: var(--info-bg);
    border-color: var(--info-text);
    color: var(--info-text);
}

.badge-primary {
    background-color: var(--success-bg);
    border-color: var(--success-text);
    color: var(--success-text);
}

.badge-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-text);
    color: var(--warning-text);
}

.badge-danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-text);
    color: var(--danger-text);
}

/* ── 6. Form Inputs & Styles ─────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

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

.required-star {
    color: var(--color-danger);
}

/* Un campo de formulario es el sitio donde más se nota un borde invisible:
   el usuario tiene que ver dónde puede escribir. NIVEL 3 contra cualquier
   superficie (3.37:1 en claro, 4.05:1 en oscuro) + fondo ligeramente hundido
   para que el rectángulo se lea aunque el borde pase desapercibido. */
.form-input, .form-select, .form-textarea, textarea.form-input, select.form-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: var(--transition);
}

/* El placeholder no puede quedar en un tono tan claro que se lea como texto
   ya escrito ni tan oscuro que compita con el valor. */
.form-input::placeholder, .form-textarea::placeholder, textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

.form-input:hover, .form-select:hover, .form-textarea:hover {
    border-color: var(--border-active);
}

/* Foco = NIVEL 4 (verde del sistema). El borde se tiñe y además aparece un
   halo, para que se distinga el campo seleccionado sin ensancharlo. */
.form-input:focus, .form-select:focus, .form-textarea:focus,
textarea.form-input:focus, select.form-select:focus {
    outline: none;
    border-color: var(--border-active);
    box-shadow: var(--focus-ring);
}

.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
    background-color: var(--bg-hover);
    color: var(--text-dim);
    border-color: var(--border);
    cursor: not-allowed;
}

/* El <select> nativo no pinta su propia flecha, así que el control necesita
   un fondo que separe del campo. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.form-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-help {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.field-errors {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.error-text {
    font-size: 0.8rem;
    color: var(--color-danger);
}

/* Campo con error: el borde pasa a rojo (no a "más oscuro"), que es
   información, no decoración. */
.has-error .form-input, .has-error .form-select, .has-error .form-textarea {
    border-color: var(--color-danger);
}
.has-error .form-label {
    color: var(--color-danger);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.form-card {
    padding: 1.75rem;
}

.form-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ── 7. Tables & List View ───────────────────────────────────────────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

/* Jerarquía de la tabla, de fuera hacia dentro:
     · fila      -> NIVEL 1 (la línea que separa una fila de la otra)
     · encabezado-> NIVEL 2 (marca un cambio de zona, no cada fila)
     · tabla     -> NIVEL 2 en su contorno
   Antes las tres usaban el mismo color, y en claro la línea entre filas daba
   1.13:1 sobre el encabezado: las filas se fundían en un bloque gris. */
.table th, .table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.table thead th {
    background-color: var(--table-header-bg);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* El encabezado es la frontera entre "controles" y "datos": NIVEL 2. */
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

/* La última fila no necesita línea de cierre: la corta el borde de la tabla. */
.table tbody tr:last-child td {
    border-bottom: none;
}

/* El hover de fila necesita distinguirse del fondo por superficie, no solo
   por una línea, para que se vea incluso sobre el encabezado. */
.table tbody tr {
    transition: background-color 0.15s ease;
}
.table tbody tr:hover {
    background-color: var(--bg-hover);
}

.actions-cell {
    white-space: nowrap;
}

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

.search-bar {
    margin-bottom: 1.25rem;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
}

.search-input {
    flex: 1;
}

/* La tabla, como contenedor, se recorta con su propio color de marco.
   Antes usaba --border, que en tema claro daba solo 1.48:1 sobre la tarjeta y
   1.23:1 sobre la pagina: la tabla se desligaba del papel y no se leia como
   un bloque. --table-border sube a 2.08:1 / 1.72:1 sin volverse pesada. */
.table {
    border: 1px solid var(--table-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.page-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: var(--transition);
}

.page-link:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
    border-color: var(--border-strong);
}

/* La página en la que estás es NIVEL 4: es "elemento activo". */
.page-link.active,
.page-link.current {
    background-color: var(--active-link-bg);
    border-color: var(--border-active);
    color: var(--color-primary);
    font-weight: 600;
}

.page-info {
    font-size: 0.85rem;
    color: var(--text-dim);
    padding: 0 0.5rem;
}

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

.empty-state p {
    margin-bottom: 1rem;
}

/* ── 8. Dashboard Layout & Cards ─────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Tarjeta de estadística: componente destacado del dashboard -> NIVEL 3. */
.stat-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Al pasar el cursor la tarjeta se "levanta" y se marca con el verde: es el
   estado activo, así que usa NIVEL 4. */
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-active);
    box-shadow: var(--shadow);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.dashboard-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.dashboard-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* El encabezado de una tarjeta se separa de su contenido con NIVEL 2, y la
   tarjeta se recorta con NIVEL 3 (arriba). Así se distinguen las dos líneas. */
.card-header + * {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.85rem;
}

.empty-message {
    color: var(--text-dim);
    font-size: 0.85rem;
    padding: 1rem 0;
}

/* ── 9. Alerts & Confirm Delete ──────────────────────────────────────────── */
.messages-container {
    margin-bottom: 1.5rem;
}

/* Mensajes: cada tipo usa el par fondo/texto del sistema de estado, con el
   borde en el mismo tono que el texto para que se lea como mensaje y no como
   un bloque de color suelto. */
.alert {
    padding: 0.85rem 1.25rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid transparent;
    border-left-width: 4px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-text);
    color: var(--success-text);
}

.alert-error {
    background-color: var(--danger-bg);
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-text);
    color: var(--warning-text);
}

.alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-text);
    color: var(--info-text);
}

.alert-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.delete-container {
    max-width: 500px;
    margin: 2rem auto;
}

.delete-card {
    padding: 2.5rem;
    text-align: center;
}

.delete-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.delete-message {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 1rem 0;
}

.object-preview {
    color: var(--text-main);
    font-weight: 600;
}

.delete-warning {
    font-size: 0.85rem;
    color: var(--color-danger);
    margin-bottom: 1.5rem;
}

.delete-dependencias {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.delete-dependencias li {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
    font-weight: 600;
    margin: 0.35rem 0;
    padding: 0.5rem 0.9rem;
}

.center-actions {
    justify-content: center;
}

/* ── 10. Responsive Media Queries ────────────────────────────────────────── */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

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

    .menu-toggle {
        display: flex;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 95;
    }

    .sidebar-overlay.visible {
        display: block;
    }

    .dashboard-sections {
        grid-template-columns: 1fr;
    }
}

/* ── 11. Formsets en línea (Inlines) ─────────────────────────────────────── */
.inline-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.inline-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.inline-table th, .inline-table td {
    vertical-align: middle;
    padding: 0.6rem 0.75rem;
}

.inline-table td .form-input, .inline-table td .form-select {
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
}

/* ── 12. Modales de eliminación ───────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.55);
}

.modal-overlay.abierto {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 480px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
}

.modal-body {
    padding: 1.25rem;
    color: var(--text-main);
}

.modal-que-desea {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.modal-record {
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.modal-opciones {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.modal-opciones li {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-input);
}

.modal-opciones p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.modal-advertencia {
    margin: 0 0 0.5rem;
    color: var(--color-danger);
    font-size: 1rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* ── 13. Perfil y Configuración ────────────────────────────────────────────── */
.perfil-container,
.config-container {
    max-width: 1000px;
}

.perfil-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.perfil-resumen-card {
    padding: 2rem 1.5rem;
    text-align: center;
}

.perfil-resumen-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.perfil-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25);
}

.perfil-nombre {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0.4rem 0 0;
    line-height: 1.2;
}

.perfil-usuario {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0;
}

.perfil-rol {
    margin-top: 0.35rem;
}

.perfil-meta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.perfil-meta p {
    margin: 0;
}

.perfil-meta strong {
    color: var(--text-main);
    font-weight: 600;
}

.card-section-title,
.config-section-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.card-section-title {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.config-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.config-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.config-section-header {
    margin-bottom: 1.25rem;
}

.config-section-header p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.config-single {
    max-width: 720px;
}

@media (max-width: 900px) {
    .perfil-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 14. Responsive Tablet (2 columnas) y Móvil (1 columna) ──────────────── */
/* Tablet: 640px – 1023px → 2 columnas */
@media (min-width: 640px) and (max-width: 1023px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Móvil: < 640px → 1 columna apilada, campos y botones a 100% */
@media (max-width: 639px) {
    .content-wrapper {
        padding: 1rem;
    }

    .top-header {
        padding: 0 0.75rem;
    }

    .header-user {
        gap: 0.5rem;
    }

    .user-name {
        display: none;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 1.25rem;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 1.5rem;
    }

    .form-actions .btn {
        width: 100%;
    }

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

    .header-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .header-actions .btn {
        width: 100%;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }

    .search-form .btn {
        width: 100%;
    }

    .empty-state {
        padding: 1.5rem 1rem;
    }

    .delete-card {
        padding: 1.5rem;
    }

    .modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .login-card {
        padding: 1.5rem;
    }

    .login-header {
        margin-bottom: 1.5rem;
    }
}

/* ═══ 15. Tablas del listado: scroll horizontal + acciones siempre visibles ══
   Antes, por debajo de 768px cada fila se convertía en una tarjeta con una
   línea por columna. Eso no rompía la página, pero un registro de 7 campos
   ocupaba 7 líneas y había que hacer mucho scroll vertical para ver pocos
   registros. Ahora la tabla es tabla en todos los tamaños: se desplaza
   horizontalmente por dentro (nunca la página) y la columna de acciones queda
   fija a la derecha con position: sticky. */

.list-container .table-responsive {
    /* Único punto donde hay scroll horizontal: la tabla, no la página. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    max-width: 100%;
    /* Sombras laterales que aparecen solo cuando la tabla se puede desplazar.
       Truco CSS: los fondos "local" se quedan pegados al scroll y los "scroll"
       se mueven con el contenido, así que el degradado solo se ve en el lado
       hacia el que queda contenido. */
    background-image:
        linear-gradient(to right, var(--bg-card) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(to left, var(--bg-card) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.list-container .table-responsive::-webkit-scrollbar {
    height: 9px;
}

.list-container .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.list-container .table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 9999px;
}

.list-container .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-dim);
}

.list-container .table {
    /* border-collapse: separate es obligatorio: con 'collapse' el sticky de la
       columna de acciones no funciona de forma fiable en los navegadores. */
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.875rem;
}

.list-container .table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0.55rem 0.7rem;
    background-color: var(--table-header-bg);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* El encabezado queda congelado mientras las filas pasan por debajo, así
       que necesita un filo propio: con --border-subtle quedaba a 1.18:1 y las
       filas se leían como si siguió pegadas al rótulo. */
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.list-container .table tbody td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-main);
    vertical-align: middle;
}

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

.list-container .table tbody tr:hover td {
    background-color: var(--bg-hover);
}

/* ── Anchos por tipo de columna ────────────────────────────────────────────
   width:1% + white-space:nowrap hace que el navegador encoja la columna a lo
   justo. Así una fecha no empuja a las demás y la tabla entra en la pantalla. */
.list-container .table .col-fecha,
.list-container .table .col-num,
.list-container .table .col-compacta {
    width: 1%;
    white-space: nowrap;
}

.list-container .table .col-num,
.list-container .table .col-fecha {
    font-variant-numeric: tabular-nums;
}

/* Relaciones (potrero, lote, plan...). El <td> solo lleva width:1% para que el
   reparto de columnas de la tabla encoja la columna; el recorte va en el hijo,
   porque 'text-overflow' no se aplica de forma fiable sobre un <td>. */
.list-container .table .col-ref {
    width: 1%;
    white-space: nowrap;
}

.list-container .table .col-ref .celda-contenido {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los textos largos no estiran la tabla: se truncan y el texto completo queda
   en el title de la celda (y por supuesto en el formulario de edición). */
.list-container .table .col-texto {
    width: 1%;
    white-space: nowrap;
}

.list-container .table .col-texto .celda-contenido {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La columna de manada no compite por la atención: el nombre del lote ya está
   en el encabezado del grupo, así que aquí va discreto y sin repetir el icono. */
.list-container .table .col-manada {
    width: 1%;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.list-container .table .col-manada .celda-contenido {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Columna de acciones: siempre visible ──────────────────────────────────
   Sticky a la derecha con fondo opaco (para que el texto que pasa por debajo
   no se transparente) y una línea/shadow a la izquierda que la separa del
   contenido que se desplaza. */
.list-container .table th.col-acciones,
.list-container .table td.col-acciones {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 1%;
    white-space: nowrap;
    text-align: center;
    background-color: var(--bg-card);
    /* Mismo motivo que el marco: en claro la línea de la columna de acciones
       quedaba a 1.48:1 y no separaba la columna del contenido que se desplaza. */
    box-shadow: -1px 0 0 var(--table-border);
}

.list-container .table thead th.col-acciones {
    z-index: 4;
    background-color: var(--table-header-bg);
    text-align: center;
    box-shadow: -1px 0 0 var(--table-border);
}

.list-container .table tbody tr:hover td.col-acciones {
    background-color: var(--bg-hover);
}

.acciones-grupo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Botones de acción compactos: cuadrado, solo icono, con tooltip. */
.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
    text-decoration: none;
    color: var(--text-muted);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-icono:hover {
    color: var(--text-main);
    background-color: var(--bg-hover);
    border-color: var(--text-dim);
}

.btn-icono-edit:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-icono-del:hover {
    color: #f87171;
    border-color: #f87171;
}

.btn-icono:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.btn-icono-txt {
    display: none;
    font-size: 0.78rem;
    font-weight: 600;
}
/* En pantallas estrechas la tabla se mantiene como tabla (scroll horizontal
   interno) y las acciones fijas siguen funcionando. Lo que cambia es que los
   botones vuelven a mostrar su etiqueta para que en el celular se entienda de
   un vistazo qué hace cada uno. */
@media (max-width: 768px) {
    .list-container .table thead th,
    .list-container .table tbody td {
        padding: 0.5rem 0.6rem;
    }

    /* En pantallas estrechas las columnas se estrechan un poco más, pero el
       recorte sigue en el hijo, que es donde el navegador lo aplica bien. */
    .list-container .table .col-texto .celda-contenido {
        max-width: 16ch;
    }

    .list-container .table .col-ref .celda-contenido {
        max-width: 14ch;
    }

    .list-container .table .col-manada .celda-contenido {
        max-width: 11ch;
    }

    .btn-icono {
        min-width: 30px;
        height: 30px;
        padding: 0 0.5rem;
    }

    .btn-icono-txt {
        display: inline;
    }

    /* Fila de filtros: el selector de manada y la búsqueda se apilan. */
    .search-form {
        max-width: none;
        flex-wrap: wrap;
    }

    .search-form .search-input {
        min-width: 180px;
    }

    .filtro-manada-wrap {
        min-width: 100%;
    }
}

/* ═══ Agrupación por Manada / Lote (aplicada a todo el panel) ═══════════════
   Un mismo diseño en los 15 listados CRUD agrupados y en los 3 historiales,
   porque todos usan el parcial _manada_grupo_header.html.

   Cada lote es una SECCIÓN con borde propio, esquinas redondeadas y separación
   real respecto del lote siguiente, para que se lea como un bloque y no como
   otra franja de la misma tabla. Usa las variables del tema, así que funciona
   igual en claro y en oscuro. */

.list-container .card-agrupada {
    padding: 0;
    overflow: hidden;
}

.manada-grupo {
    background-color: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
}

.manada-grupo + .manada-grupo {
    margin-top: 0.9rem;
}

/* Las pantallas de historial (vacunación, alimentación, pastoreo) meten sus
   resultados dentro de una .card. Cuando esa tarjeta contiene secciones de
   lote deja de ser un marco y pasa a ser solo espacio: así cada lote se lee
   como su propia sección y no como una caja dentro de otra caja. */
.card:has(> .manada-grupo) {
    padding: 0.9rem;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.manada-grupo-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.9rem;
    background-color: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    /* Las esquinas superiores las redondea la propia banda, no un overflow:hidden
       en la sección, porque ese crearía un contenedor de scroll que podría
       estropear el position:sticky de la columna de acciones. */
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
}

/* Barra de acento del color del sistema. Va como elemento propio (no como
   border-left) para poder redondear sus extremos junto con la sección. */
.manada-grupo-marca {
    flex-shrink: 0;
    width: 3px;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
}

.manada-grupo-icono {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.manada-grupo-titulos {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* "MANADA · LOTE" queda como micro-rótulo y el nombre del lote manda. */
.manada-grupo-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    white-space: nowrap;
}

.manada-grupo-nombre {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.manada-grupo-conteo {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--color-primary);
}

.manada-grupo-conteo-num {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.manada-grupo-conteo-txt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

/* Grupo sin lote asignado: mismo diseño, acento neutro para que se distinga de
   un lote real sin standout. */
.manada-grupo-header-vacio .manada-grupo-marca {
    background-color: var(--text-dim);
}

.manada-grupo-header-vacio .manada-grupo-conteo {
    background-color: rgba(148, 163, 184, 0.18);
    color: var(--text-muted);
}

/* Resumen sobre la barra de busqueda */
.agrupacion-resumen {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.agrupacion-resumen-icono {
    font-size: 1rem;
    line-height: 1;
}

/* Filtro por manada en la barra de busqueda */
.filtro-manada-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 190px;
}

.filtro-manada-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.filtro-manada-select {
    cursor: pointer;
}

/* En pantallas pequeñas el encabezado del lote baja un poco más para dejarle
   sitio al contador, sin dejar de ser una sola línea. */
@media (max-width: 640px) {
    .manada-grupo-header {
        padding: 0.5rem 0.7rem;
    }

    .manada-grupo-nombre {
        font-size: 0.9rem;
    }

    .manada-grupo-conteo {
        margin-left: 0;
    }
}

/* ═══ 16. Acciones del listado: botones modernos, con animaciones puras ═══
   Cada acción tiene su propio color y su propio gesto:
     · Ver      → azul neón con destello y modal de resplandor.
     · Editar   → naranja/amarillo con lápiz que "traza" al pasar el mouse.
     · Eliminar → rojo/púrpura con papelera que "muerde", engulle la etiqueta
                  de confirmación, lanza confeti y desvanece la fila.
   Todo con keyframes CSS y JS liviano: sin librerías externas.
   ========================================================================== */

.icono-accion {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 auto;
}

/* Base de los botones de acción: coloridos, con relieve y elevación al hover. */
.btn-icono {
    position: relative;
    overflow: hidden;
    min-width: 30px;
    height: 30px;
    color: #ffffff;
    border-color: transparent;
    will-change: transform;
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-icono:active {
    transform: translateY(0) scale(0.94);
}

/* ── Ver / Detalles · esmeralda brillante ───────────────────────────────── */
.btn-icono-view {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 2px 6px rgba(5, 150, 105, 0.35);
}

.btn-icono-view:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.7), 0 6px 14px rgba(5, 150, 105, 0.5);
    animation: botonNeon 1.1s ease-in-out infinite;
}

.btn-icono-view .icono-documento {
    transition: transform 0.3s ease;
}

.btn-icono-view:hover .icono-documento {
    transform: scale(1.14);
}

/* Destello (✦) que aparece y gira al pasar el mouse. */
.btn-icono-view::after {
    content: "✦";
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 8px;
    line-height: 1;
    color: #d9f99d;
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
    pointer-events: none;
}

.btn-icono-view:hover::after {
    animation: destelloNeon 0.75s ease-in-out infinite;
}

/* ── Editar · naranja/amarillo con lápiz que traza ──────────────────────── */
.btn-icono-edit {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.4);
}

.btn-icono-edit:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #fcd34d 0%, #ea580c 100%);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.6);
}

.icono-lapiz {
    transform-origin: 80% 80%;
}

.btn-icono-edit:hover .icono-lapiz {
    animation: lapizEscribir 0.6s ease-in-out infinite;
}

/* ── Eliminar · rojo/púrpura con papelera que muerde ────────────────────── */
.btn-icono-del {
    background: linear-gradient(135deg, #a855f7 0%, #dc2626 100%);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

.btn-icono-del:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #c084fc 0%, #b91c1c 100%);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.6), 0 6px 14px rgba(168, 85, 247, 0.45);
}

.icono-papelera {
    transform-origin: 50% 15%;
}

.btn-icono-del:hover .icono-papelera {
    animation: papeleraMuerde 0.65s ease-in-out infinite;
}

/* ── PDF · acento neutro, para que no compita con las tres acciones ─────── */
.btn-icono-pdf {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
    box-shadow: 0 2px 6px rgba(51, 65, 85, 0.4);
}

.btn-icono-pdf:hover {
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 14px rgba(51, 65, 85, 0.6);
}

/* ── Keyframes de las acciones ──────────────────────────────────────────── */
@keyframes botonNeon {
    0%, 100% { box-shadow: 0 0 14px rgba(52, 211, 153, 0.6), 0 6px 14px rgba(5, 150, 105, 0.5); }
    50% { box-shadow: 0 0 22px rgba(52, 211, 153, 0.95), 0 6px 14px rgba(5, 150, 105, 0.55); }
}

@keyframes destelloNeon {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
    50% { opacity: 1; transform: scale(1.05) rotate(12deg); }
}

@keyframes lapizEscribir {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(-16deg) translate(-1px, 1px); }
    50% { transform: rotate(7deg) translate(1px, -1px); }
    75% { transform: rotate(-12deg) translate(-1px, 1px); }
}

@keyframes papeleraMuerde {
    0%, 100% { transform: rotate(0deg); }
    18% { transform: rotate(-15deg); }
    38% { transform: rotate(11deg); }
    58% { transform: rotate(-7deg); }
    78% { transform: rotate(4deg); }
}

/* ── La etiqueta de confirmación es engullida por la papelera ───────────── */
.btn-engullir {
    position: relative;
    overflow: visible;
}

.btn-engullir .icono-accion {
    width: 15px;
    height: 15px;
}

.engullir-escena {
    position: absolute;
    left: 18px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
}

.engullir-texto {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    max-width: 220px;
    padding: 0.16rem 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.5);
}

.engullir-escena.activo .engullir-texto {
    animation: engullirTexto 0.55s cubic-bezier(0.7, -0.4, 0.6, 1.4) forwards;
}

@keyframes engullirTexto {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
    55% { opacity: 1; transform: translate(-50%, 16px) scale(0.55) rotate(24deg); }
    100% { opacity: 0; transform: translate(-50%, 30px) scale(0.04) rotate(45deg); }
}

/* ── Confeti rojo de la eliminación ─────────────────────────────────────── */
.capa-confeti {
    position: fixed;
    inset: 0;
    z-index: 3500;
    pointer-events: none;
    overflow: hidden;
}

.confeti {
    position: fixed;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    opacity: 0;
    animation: confetiVolar 1s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}

@keyframes confetiVolar {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); }
}

/* ── Fila que se desvanece al borrar ────────────────────────────────────── */
.list-container .table tbody tr.fila-saliendo {
    animation: filaSalir 0.55s ease-in forwards;
    pointer-events: none;
}

@keyframes filaSalir {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(48px); }
}

/* ── Aviso flotante tras el borrado ─────────────────────────────────────── */
.toast-accion {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 4000;
    max-width: min(90vw, 520px);
    padding: 0.7rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-accion.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast-accion.ok {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.toast-accion.error {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

/* ── Modal "Ver detalles" · resplandor esmeralda ─────────────────────────── */
.modal-detalle {
    max-width: 560px;
    border: 1px solid rgba(52, 211, 153, 0.5);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25),
                0 24px 60px -12px rgba(5, 150, 105, 0.55),
                0 0 40px rgba(52, 211, 153, 0.3);
}

.modal-overlay.abierto .modal-detalle {
    animation: detalleEntrar 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes detalleEntrar {
    0% { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.modal-detalle .modal-header {
    border-bottom-color: rgba(52, 211, 153, 0.35);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(5, 150, 105, 0.05));
}

.modal-detalle .modal-header h3 {
    color: var(--color-primary);
}

.detalle-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.detalle-fila {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.detalle-fila:last-child {
    border-bottom: none;
}

.detalle-campo {
    flex: 0 0 40%;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-dim);
}

.detalle-valor {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-main);
    word-break: break-word;
}

/* ── Modal de confirmación de borrado: borde rojo ───────────────────────── */
.modal-peligro {
    border: 1px solid rgba(220, 38, 38, 0.5);
    box-shadow: 0 24px 60px -12px rgba(127, 29, 29, 0.6);
}

.modal-peligro .modal-header {
    border-bottom-color: rgba(220, 38, 38, 0.35);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.14), rgba(127, 29, 29, 0.04));
}

/* Al imprimir no interesa el scroll ni la columna fija. */
@media print {
    .list-container .table-responsive {
        overflow: visible;
    }

    .list-container .table th.col-acciones,
    .list-container .table td.col-acciones {
        position: static;
        box-shadow: none;
    }

    /* Al imprimir, un borde de pantalla sutil se convierte en un gris ilegible.
       Se fuerza un gris medio que sí se ve en papel, y se quitan sombras y
       colores de fondo. */
    .card, .table, .modal, .manada-grupo, .stat-card, .dashboard-card {
        border: 1px solid #94a3b8 !important;
        box-shadow: none !important;
    }
    .table th, .table td {
        border-color: #94a3b8 !important;
    }
    .table thead th {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }
    .sidebar, .top-header, .pagination {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
}