/*
  Panel de administración (E7-1).

  La paleta NO está elegida a ojo: son los tonos que Material 3 deriva del seed de la app
  (#2E7D32, §8.1 del plan). Se exportan con
  `flutter test test/core/tema/exportar_paleta_test.dart` y se pegan acá, así el panel y la
  app son literalmente el mismo sistema de color y no dos aproximaciones parecidas.

  Incluye modo oscuro por `prefers-color-scheme`, igual que la app.

  OJO: wwwroot solo sirve esta hoja de estilos. Las fotos de perfil y los escudos NO viven
  acá — van fuera del webroot y se sirven por endpoint autenticado (regla dura #7).
*/

:root {
    /* --- Material 3 desde el seed #2E7D32, esquema claro --- */
    --primary: #3C6939;
    --on-primary: #FFFFFF;
    --primary-container: #BCF0B4;
    --on-primary-container: #245024;

    --secondary-container: #D6E8CE;
    --on-secondary-container: #3B4B38;

    --tertiary: #38656A;
    --tertiary-container: #BCEBF0;
    --on-tertiary-container: #1F4D52;

    --error: #BA1A1A;
    --error-container: #FFDAD6;
    --on-error-container: #93000A;

    /* El fondo tiene un verde apenas perceptible: es lo que separa "cancha" de
       "planilla de Excel". */
    --surface: #F7FBF1;
    --on-surface: #191D17;
    --surface-lowest: #FFFFFF;
    --surface-low: #F1F5EB;
    --surface-container: #ECEFE6;
    --surface-high: #E6E9E0;
    --on-surface-variant: #424940;
    --outline: #72796F;
    --outline-variant: #C2C9BD;

    /* El fondo de una tarjeta, como token propio y no como color suelto: la columna de
       acciones va anclada sobre la tabla y tiene que pintarse del MISMO fondo que la
       tarjeta para tapar lo que pasa por debajo. En oscuro ese fondo no es el mismo, así
       que el dato tiene que vivir en un solo lugar. */
    --fondo-tarjeta: var(--surface-lowest);

    /* Sombras en lugar de bordes duros: es lo que da sensación de material. */
    --sombra-1: 0 1px 2px rgba(25, 29, 23, .06), 0 1px 3px rgba(25, 29, 23, .04);
    --sombra-2: 0 2px 6px rgba(25, 29, 23, .08), 0 1px 3px rgba(25, 29, 23, .06);
    --sombra-3: 0 6px 18px rgba(25, 29, 23, .10), 0 2px 6px rgba(25, 29, 23, .06);

    --radio: 14px;
    --radio-chico: 10px;
    --transicion: 160ms cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #A1D39A;
        --on-primary: #0A390F;
        --primary-container: #245024;
        --on-primary-container: #BCF0B4;

        --secondary-container: #3B4B38;
        --on-secondary-container: #D6E8CE;

        --tertiary: #A0CFD4;
        --tertiary-container: #1F4D52;
        --on-tertiary-container: #BCEBF0;

        --error: #FFB4AB;
        --error-container: #93000A;
        --on-error-container: #FFDAD6;

        --surface: #10140F;
        --on-surface: #E0E4DB;
        --surface-lowest: #0B0F0A;
        --surface-low: #191D17;
        --surface-container: #1D211B;
        --surface-high: #272B25;
        --on-surface-variant: #C2C9BD;
        --outline: #8C9388;
        --outline-variant: #424940;

        /* Una línea propia y adentro de este :root, no un `:root { ... }` suelto más abajo:
           `VariablesCssPanelTests` busca las variables al principio de renglón, y escrita en
           una sola línea la daba por no redefinida en oscuro. El CSS andaba igual —por eso
           no se notó— pero el test es el que avisa cuando una variable se queda con el valor
           claro estando el sistema en oscuro, y así no podía hacer su trabajo. */
        --fondo-tarjeta: var(--surface-low);

        /* En oscuro la elevación se lee peor con sombras: se refuerza el contraste. */
        --sombra-1: 0 1px 3px rgba(0, 0, 0, .40);
        --sombra-2: 0 2px 8px rgba(0, 0, 0, .48);
        --sombra-3: 0 8px 24px rgba(0, 0, 0, .56);
    }

    /* En oscuro las tarjetas suben un escalón para despegarse del fondo. */
    .metrica, .formulario { background: var(--surface-low) !important; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--surface);
    color: var(--on-surface);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

.barra {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Semitransparente + blur: al hacer scroll el contenido se insinúa debajo en vez de
       cortarse contra una banda opaca. */
    background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--sombra-1);
    padding: 8px 24px;
    /* min-height y no height: la barra tiene flex-wrap, y con alto fijo un ítem que pasa al
       segundo renglón se dibuja FUERA de la barra, encima del contenido. */
    min-height: 62px;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: 9px; }
.marca strong { letter-spacing: -.01em; }
.marca .pelota { font-size: 20px; line-height: 1; }
.marca .etiqueta {
    background: var(--primary-container);
    color: var(--on-primary-container);
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.barra nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.barra nav a {
    position: relative;
    color: var(--on-surface-variant);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 500;
    transition: background var(--transicion), color var(--transicion);
}
.barra nav a:hover { background: var(--surface-container); color: var(--on-surface); }
.barra nav a.activo { background: var(--secondary-container); color: var(--on-secondary-container); }

.salir { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* El email se recorta en vez de empujar: un admin con dirección larga hacía saltar la
   última solapa del menú a un segundo renglón. El title deja el valor completo a mano. */
.salir .quien {
    color: var(--on-surface-variant);
    font-size: 13px;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.salir button {
    background: none;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    padding: 7px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background var(--transicion), border-color var(--transicion);
}
.salir button:hover { background: var(--surface-container); border-color: var(--outline); }

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

.contenido { padding: 32px 24px 64px; max-width: 1200px; margin: 0 auto; }
.contenido.centrado {
    max-width: 440px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1 { font-size: 27px; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 600; }
h2 {
    font-size: 13px;
    margin: 36px 0 14px;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
}
.bajada { color: var(--on-surface-variant); margin: 0 0 26px; max-width: 70ch; }

/* --------------------------------------------------------------------------
   Tarjetas de números
   -------------------------------------------------------------------------- */

.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.metrica {
    position: relative;
    background: var(--surface-lowest);
    border-radius: var(--radio);
    padding: 18px 18px 16px;
    box-shadow: var(--sombra-1);
    overflow: hidden;
    transition: box-shadow var(--transicion), transform var(--transicion);
}
/* Franja de color al costado: identifica de un vistazo qué mirar sin recurrir a
   fondos enteros de color, que a seis tarjetas juntas marean. */
.metrica::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}
.metrica:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }

.metrica .valor {
    font-size: 32px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}
.metrica .titulo { color: var(--on-surface-variant); font-size: 13px; margin-top: 6px; }

.metrica.alerta::before { background: var(--tertiary); }
.metrica.alerta .valor { color: var(--tertiary); }
.metrica.error::before { background: var(--error); }
.metrica.error .valor { color: var(--error); }

/* Un cero no es una noticia: se apaga para que el ojo vaya a lo que sí tiene datos. */
.metrica.apagada::before { background: var(--outline-variant); }
.metrica.apagada .valor { color: var(--on-surface-variant); font-weight: 500; }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.tarjeta {
    background: var(--fondo-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-1);
    overflow: hidden;
    padding: 20px 22px;
}

/* Una tarjeta que solo envuelve una tabla NO lleva padding: las celdas ya traen el suyo y
   la banda del encabezado tiene que llegar hasta el borde para leerse como encabezado.
   Nació al revés —`.tarjeta` sin padding, pensada para tablas— y por eso todo lo que no
   era una tabla (los chips de métricas, los títulos de las distribuciones, el SVG) quedaba
   pegado contra el borde. El caso raro es la tabla, no el contenido común. */
.tarjeta:has(> table),
.tarjeta:has(> .tabla-scroll),
.tarjeta:has(> form > table) { padding: 0; }

/* Dos tarjetas seguidas se leen como un bloque continuo si no hay aire entre ellas.
   Va sobre los hijos DIRECTOS de .contenido y no sobre cualquier par de tarjetas: dentro de
   una grilla, las hermanas ya están separadas por el `gap`, y un margen extra en la segunda
   y la tercera las baja respecto de la primera y descuadra la fila entera. */
.contenido > .tarjeta + .tarjeta,
.contenido > .tarjeta + .grilla-distribuciones,
.contenido > .grilla-distribuciones + .tarjeta { margin-top: 18px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 18px; }
th {
    background: var(--surface-low);
    font-size: 12px;
    color: var(--on-surface-variant);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
td { border-top: 1px solid var(--outline-variant); }
tbody tr { transition: background var(--transicion); }
tbody tr:hover { background: var(--surface-low); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* El estado vacío de una tarjeta. Estaba definido dos veces, con paddings distintos: la
   segunda ganaba y la primera confundía a quien leyera la hoja. Queda una sola. */
.vacio { padding: 44px 24px; text-align: center; color: var(--on-surface-variant); }

/* --------------------------------------------------------------------------
   Pastillas de estado
   -------------------------------------------------------------------------- */

.pastilla {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pastilla.ok { background: var(--primary-container); color: var(--on-primary-container); }
.pastilla.mal { background: var(--error-container); color: var(--on-error-container); }
.pastilla.tibio { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.pastilla.neutro { background: var(--surface-container); color: var(--on-surface-variant); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.formulario {
    background: var(--surface-lowest);
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: var(--sombra-3);
}
.formulario h1 { margin-bottom: 8px; }

.campo { margin-bottom: 18px; }
.campo label {
    display: block;
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 7px;
    font-weight: 500;
}
.campo input, .campo select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radio-chico);
    font-size: 15px;
    font-family: inherit;
    background: var(--surface-lowest);
    color: var(--on-surface);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo select:hover { border-color: var(--outline); }
.campo input:focus, .campo select:focus {
    outline: none;
    border-color: var(--primary);
    /* Anillo en vez de outline del navegador: se ve igual en todos y respeta el radio. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.boton {
    width: 100%;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    padding: 13px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow var(--transicion), filter var(--transicion);
}
.boton:hover { box-shadow: var(--sombra-2); filter: brightness(1.06); }
.boton:active { filter: brightness(.96); box-shadow: none; }

/* nowrap: en una celda angosta, "Marcar visto" partido en dos renglones deja el botón con
   el doble de alto que el resto de la fila. */
.boton.chico { width: auto; padding: 8px 18px; font-size: 13px; white-space: nowrap; }

/* Contorneado y no relleno: es una acción destructiva secundaria y aparece una vez por
   fila. En rojo pleno, una tabla de 20 filas es una pared roja que tapa el contenido. */
.boton.peligro {
    background: none;
    color: var(--error);
    border: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
}
.boton.peligro:hover {
    background: var(--error-container);
    color: var(--on-error-container);
    border-color: transparent;
    filter: none;
}

.boton.secundario {
    background: none;
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
}
.boton.secundario:hover { background: var(--surface-container); filter: none; }

.error-caja {
    background: var(--error-container);
    color: var(--on-error-container);
    padding: 13px 15px;
    border-radius: var(--radio-chico);
    margin-bottom: 18px;
    font-size: 14px;
}

.aviso {
    background: var(--primary-container);
    color: var(--on-primary-container);
    padding: 13px 15px;
    border-radius: var(--radio-chico);
    margin-bottom: 18px;
    font-size: 14px;
}

.filtros { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin-bottom: 0; min-width: 200px; }

/* --------------------------------------------------------------------------
   Gráfico de barras
   -------------------------------------------------------------------------- */

/* La CSP del panel es `style-src 'self'`: los atributos style= inline se descartan. Todo
   lo que antes se dibujaba con un style —alto de barras, ancho de tramos, color de las
   series— pasó a SVG o a clases. Estas utilidades son para lo que quedaba suelto. */
.nowrap { white-space: nowrap; }
/* `bloque-qr` y no `centrado`: el nombre genérico chocaba con `.contenido.centrado`, que
   es la clase del layout cuando no hay sesión. Las dos tienen la misma especificidad, así
   que esta —por ir después— le pisaba el `margin: 0 auto` heredado de `.contenido` y la
   tarjeta del login se pegaba al borde izquierdo. Una utilidad de una sola clase no puede
   llamarse igual que un modificador de layout. */
.bloque-qr { text-align: center; margin: 8px 0 20px; }
.boton.enlace { text-decoration: none; display: inline-block; }
	.detalle-tenue { color: var(--on-surface-variant); font-size: 12px; }

/* La franja que capta el hover de cada período. Transparente pero no `display:none`:
   tiene que recibir el mouse para que el navegador muestre su <title>. */
.franja-hover { fill: transparent; }
.franja-hover:hover { fill: color-mix(in srgb, var(--primary) 8%, transparent); }

/* Las métricas elegidas, como fichas con su color y una cruz para sacarlas. */
.elegidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ficha-metrica {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 10px; border-radius: 999px;
  border: 1px solid var(--outline-variant);
  /* `--surface-container`, que existe. Antes decía `--surface-container-low`, que NO está
     definida: se usaba el respaldo crema en LOS DOS modos, y en oscuro quedaba texto claro
     sobre fondo claro —1,17 de contraste, ilegible—. */
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 13px;
}
.ficha-metrica .quitar {
  text-decoration: none; font-size: 16px; line-height: 1;
  color: var(--on-surface-variant); padding: 0 2px;
}
.ficha-metrica .quitar:hover { color: var(--error, #ba1a1a); }

.serie-svg { display: block; width: 100%; height: 210px; padding: 10px 14px 4px; box-sizing: border-box; }

/* El título de la gráfica y su selector, en la misma línea. */
.encabezado-serie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.encabezado-serie h2 { margin-bottom: 0; }
.periodo-serie select { padding: 6px 10px; }
.serie-svg .barra-svg { fill: var(--primary); transition: opacity var(--transicion); }
.serie-svg .barra-svg:hover { opacity: .75; }

svg.barra-pista { width: 100%; height: 10px; display: block; }
/* La pista va con `--surface-high`, que existe. Con la variable inventada de antes caía al
   respaldo claro también en oscuro, y el relleno verde claro sobre esa pista clara daba 1,40
   de contraste: la barra no se veía. */
svg.barra-pista .barra-fondo { fill: var(--surface-high); }
svg.barra-pista .barra-relleno { fill: var(--primary); }

.serie { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 20px 20px 12px; }
.serie .barra-dato {
    flex: 1;
    background: linear-gradient(to top, var(--primary), color-mix(in srgb, var(--primary) 62%, var(--surface-lowest)));
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    transition: filter var(--transicion);
}
.serie .barra-dato:hover { filter: brightness(1.15); }

.pie-serie {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 16px;
    color: var(--on-surface-variant);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Reportes del plantel
   -------------------------------------------------------------------------- */

/* pre-wrap y no wrap a secas: si alguien escribió en renglones, se lee como lo escribió.
   El ancho tope es el de una columna cómoda de leer; sin él, un reporte largo empuja el
   resto de la tabla fuera de la pantalla. */
.texto-reporte { white-space: pre-wrap; max-width: 52ch; }

/* Barrita al costado de lo que todavía no miró nadie. Es lo contrario de apagar las filas
   vistas: bajarles el contraste haría ilegible justo lo que se guarda para consultar. */
tr.sin-ver td:first-child { box-shadow: inset 3px 0 var(--primary); }

.dato-menor { color: var(--on-surface-variant); font-size: 12px; }

.contexto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.contexto > span {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}
/* Cada dato lleva su etiqueta a la vista: un "14" suelto al lado de un "asistencia" suelto
   no es contexto de nada. La etiqueta va apagada para que el ojo caiga en el valor. */
.contexto .clave { color: var(--outline); }

/* Lo denunciado, debajo de la denuncia: la barra del costado lo separa de lo que escribió quien denuncia. */
.denunciado {
    margin-top: 8px;
    padding: 6px 10px;
    max-width: 52ch;
    border-left: 3px solid var(--outline-variant);
    border-radius: 0 6px 6px 0;
    background: var(--surface-low);
}
.denunciado form { margin-top: 6px; }

.puntaje { color: var(--primary); letter-spacing: 2px; white-space: nowrap; }
.puntaje .apagado { color: var(--outline-variant); }

/* --------------------------------------------------------------------------
   Detalles largos (stack traces)
   -------------------------------------------------------------------------- */

details { padding: 6px 0 4px; }
details summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
}
pre {
    background: var(--surface-low);
    padding: 13px;
    border-radius: var(--radio-chico);
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0 0;
    color: var(--on-surface-variant);
}

code {
    font-size: 13px;
    background: var(--surface-container);
    padding: 2px 7px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Tablas anchas: la que scrollea es la tabla, no la página
   --------------------------------------------------------------------------

   El problema concreto: la tabla de usuarios pide 1332 px de ancho mínimo —solo el email
   se lleva 312, porque es una sola palabra sin dónde cortarla— y `.contenido` topea en
   1200. Nunca entra, ni en el monitor más grande. La columna de los botones es la última,
   así que era exactamente la que quedaba afuera, y para llegar a ella había que descubrir
   que la tarjeta scrolleaba de costado: en Mac la barra de scroll no se dibuja hasta que
   ya estás scrolleando, así que no había ni una pista de que hubiera algo más a la derecha.

   La solución tiene tres partes que se sostienen entre sí:
     1. la tarjeta de la tabla se lleva el alto que sobra y scrollea sola, en vez de estirar
        la página;
     2. el encabezado queda pegado arriba, para no perder de vista qué columna es cuál;
     3. la columna de acciones queda anclada a la derecha, siempre visible.
   Sin (1) el encabezado pegajoso no tiene contra qué pegarse; sin (3) el scroll horizontal
   sigue escondiendo los botones. */

.tabla-scroll { overflow: auto; }

/* Una página cuya carne es UNA tabla: la tabla ocupa lo que queda de pantalla y es la
   única que scrollea. Se pide desde la página con ViewData["ClaseContenido"], no se
   deduce sola: el dashboard y las gráficas son varios bloques apilados y ahí la página
   TIENE que scrollear; encerrarlas a la altura del viewport les cortaría contenido. */
body:has(> .alto-completo) {
    display: flex;
    flex-direction: column;
    /* dvh y no vh: en el navegador del teléfono la barra de direcciones se recoge al
       scrollear, y con vh la tabla queda más alta que la pantalla justo cuando está. */
    height: 100dvh;
    overflow: hidden;
}

/* La barra NO se comprime. Como ítem flex se encoge por defecto, y cuando la tabla pide
   más alto del que hay, la barra se achica hasta su min-height y el menú —que en pantalla
   angosta se va a un renglón propio— se dibuja fuera de ella, encima del título. */
body:has(> .alto-completo) > .barra { flex-shrink: 0; }

.contenido.alto-completo {
    display: flex;
    flex-direction: column;
    /* Sin min-height:0 un ítem flex no baja de su contenido, así que la tabla empujaría el
       alto del contenedor en vez de recortarse, y no scrollearía nunca. */
    min-height: 0;
    /* `width: 100%` explícito. `.contenido` ya trae `max-width: 1200px; margin: 0 auto`, y
       como ítem flex ese margen auto en el eje transversal ANULA el estirado: sin ancho
       propio el <main> se dimensiona por su contenido y se planta en los 1200 px del
       max-width aunque la ventana mida 858. Quedaba más ancho que el body —que ahora
       recorta— y la tabla se cortaba sin barra de scroll con la que llegar a ella. */
    width: 100%;
    /* Los 64 px de aire al pie eran para despegar del final del scroll. Acá no hay final
       de scroll: son 64 px menos de tabla. */
    padding-bottom: 24px;
}

/* Lo mismo para el título, la bajada y los filtros: lo único que cede alto es la tabla. */
.contenido.alto-completo > * { flex-shrink: 0; }

.contenido.alto-completo > .tabla-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/* El encabezado se queda arriba mientras las filas pasan por debajo. `th` ya trae fondo
   propio, así que no se transparenta. La línea inferior va como sombra y no como borde:
   con border-collapse el borde de una celda pegajosa se pinta en el lugar donde la celda
   ESTARÍA sin pegar, y queda flotando en medio de la tabla.

   Hijo DIRECTO y no `.tabla-scroll thead th` a secas: en equipos cada fila despliega el
   plantel en una `.sub-tabla` con encabezado propio, y ese encabezado también se pegaba
   arriba del contenedor. Terminaban dos y tres encabezados apilados en el borde, uno de
   ellos de una tabla que ya había pasado de largo. */
.tabla-scroll > table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px var(--outline-variant);
}

/* La columna de acciones, anclada al borde derecho. Se marca a mano en cada tabla que la
   tiene y no con `:last-child`: en auditoría o en errores la última columna es un dato, y
   anclar un dato cualquiera es ruido, no ayuda. */
.tabla-scroll th.col-acciones,
.tabla-scroll td.col-acciones {
    position: sticky;
    right: 0;
    background: var(--fondo-tarjeta);
    /* La línea izquierda va inset (ver arriba: con border-collapse el borde se despega) y
       la sombra hacia afuera es lo que dice «hay tabla debajo de esto». */
    box-shadow: inset 1px 0 var(--outline-variant), -8px 0 12px -10px rgb(0 0 0 / .35);
}

/* El fondo de la celda anclada tapa las filas que pasan por debajo, así que también tiene
   que acompañar el hover: si no, la fila se ilumina entera menos el pedazo del botón. */
.tabla-scroll tbody tr:hover td.col-acciones { background: var(--surface-low); }

/* Encabezado y acciones se cruzan en la esquina: ahí manda el encabezado. */
.tabla-scroll th.col-acciones {
    z-index: 3;
    background: var(--surface-low);
    box-shadow: inset 1px 0 var(--outline-variant), inset 0 -1px var(--outline-variant),
                -8px 0 12px -10px rgb(0 0 0 / .35);
}
.tabla-scroll td.col-acciones { z-index: 1; }

/* La celda anclada se pinta sobre la tabla, y el borde superior de la fila queda debajo.
   Se lo devuelve como sombra para que la grilla no se corte en la última columna. */
.tabla-scroll tbody td.col-acciones { box-shadow: inset 1px 0 var(--outline-variant), inset 0 1px var(--outline-variant), -8px 0 12px -10px rgb(0 0 0 / .35); }
.tabla-scroll tbody tr:first-child td.col-acciones { box-shadow: inset 1px 0 var(--outline-variant), -8px 0 12px -10px rgb(0 0 0 / .35); }

/* Un email es una sola palabra larguísima: sin permiso para cortarlo, su ancho mínimo es
   el del string entero y arrastra a toda la tabla. Cortarlo baja el mínimo de la tabla
   varios cientos de píxeles, que es la diferencia entre scrollear y no tener que hacerlo.

   `anywhere` y no `break-word` porque solo `anywhere` reduce de verdad el ancho mínimo de
   la columna —`break-word` corta al pintar, pero para el cálculo la palabra sigue midiendo
   entera y la tabla no adelgaza—. El `min-width` es el contrapeso: con permiso para cortar
   en cualquier lado, el reparto de anchos le daba a la columna lo mínimo posible y los
   emails quedaban en tres renglones de seis letras. Corta cuando hace falta, no siempre. */
.cortable {
    overflow-wrap: anywhere;
    min-width: 22ch;
}

/* Respeta a quien pidió menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .metrica:hover { transform: none; }
}

@media (max-width: 640px) {
    .contenido { padding: 22px 14px 48px; }
    .barra { padding: 10px 14px; column-gap: 12px; row-gap: 10px; }
    th, td { padding: 11px 12px; }

    /* El menú pasa a un renglón propio, a lo ancho y con scroll horizontal.
       Con `flex: 1` en una barra angosta quedaba como una columna de siete ítems apilados
       al lado de la marca: 360 px de menú antes de llegar al contenido. */
    .barra nav {
        order: 3;
        flex: 0 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        /* La barrita de scroll ocuparía más alto que el propio menú. El gesto sigue. */
        scrollbar-width: none;
    }
    .barra nav::-webkit-scrollbar { display: none; }
    .barra nav a { white-space: nowrap; padding: 7px 12px; }

    .salir { margin-left: auto; }
    .salir .quien { max-width: 14ch; }

    /* El SVG escala con el viewBox, así que a 375 px de ancho queda de 120 px de alto y no
       se lee ni una fecha. Se le da un ancho mínimo y se scrollea de costado. */
    .lienzo-grafica { overflow-x: auto; }
    .lienzo-grafica .grafica { min-width: 560px; }
}

/* ---------------------------------------------------------------------------
   Gráficas armables
   --------------------------------------------------------------------------- */

.filtros-grafica .grupo-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filtros-grafica fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.filtros-grafica legend {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}

/* La casilla real se oculta pero sigue ahí: el formulario funciona sin JavaScript y
   el foco de teclado se mantiene. */
.chip-metrica {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}

.chip-metrica input { position: absolute; opacity: 0; pointer-events: none; }
.chip-metrica:hover { border-color: var(--primary); }
.chip-metrica.activa { background: var(--primary-container); border-color: var(--primary); }

.chip-metrica:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.fila-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--outline-variant);
}

.fila-controles label,
.filtros-reportes label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
}

/* Los <select> y el botón de estas filas quedaban con el widget nativo del navegador:
   cajas blancas con borde gris en un panel oscuro. No alcanza con estilar `.campo select`
   porque acá el control no cuelga de un `.campo`. */
.fila-controles select,
.fila-controles input,
.filtros-reportes select,
.filtros-reportes input[type="text"],
.filtros-reportes input[type="search"] {
  padding: 9px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radio-chico);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-lowest);
  color: var(--on-surface);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.fila-controles select:hover,
.filtros-reportes select:hover { border-color: var(--outline); }

.fila-controles select:focus,
.fila-controles input:focus,
.filtros-reportes select:focus,
.filtros-reportes input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* El submit de estas filas es un <button> pelado, sin la clase .boton. Se le da la misma
   forma que al resto en vez de pedirle a cada página que se acuerde de la clase. */
.fila-controles button[type="submit"],
.filtros-reportes button[type="submit"] {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow var(--transicion), filter var(--transicion);
}

.fila-controles button[type="submit"]:hover,
.filtros-reportes button[type="submit"]:hover {
  box-shadow: var(--sombra-2);
  filter: brightness(1.06);
}

.grafica {
  width: 100%;
  height: auto;
  display: block;
}

/* Sirven a las dos gráficas —la de líneas de Gráficas y las barras del dashboard—, así que
   no van acotados a .grafica: el dashboard quedaba sin guías ni números en el eje. */
.guia { stroke: var(--outline-variant); stroke-width: 1; }
.eje { fill: var(--on-surface-variant); font-size: 11px; }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--outline-variant);
  font-size: 0.85rem;
}

.item-leyenda { display: inline-flex; align-items: center; gap: 7px; }
.item-leyenda strong { color: var(--on-surface); }


/* Distribuciones: barras horizontales, sin gráfico */

.titulo-seccion { margin-top: 36px; }

.grilla-distribuciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.grilla-distribuciones h3 { margin: 0 0 4px; font-size: 1rem; }

.nota-distribucion {
  margin: 0 0 16px;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
}

.barra-fila {
  display: grid;
  /* La etiqueta se encoge hasta 88px antes de partirse en dos renglones, en vez de tener
     110px fijos que en una tarjeta angosta se comen el ancho de la barra. */
  grid-template-columns: minmax(88px, 130px) 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 11px;
  font-size: 0.82rem;
}

.barra-fila:last-child { margin-bottom: 0; }

.barra-etiqueta { color: var(--on-surface-variant); }

.barra-pista {
  height: 10px;
  /* --surface-high y no --surface-container: la pista va sobre una tarjeta que ya está un
     escalón por encima del fondo, y con el tono intermedio no se distingue de ella. Sin
     pista visible la barra flota y no se puede comparar un tramo contra el resto. */
  background: var(--surface-high);
  border-radius: 999px;
  overflow: hidden;
}

.barra-relleno {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  /* Un mínimo visible: un tramo con una sola persona no puede quedar invisible. */
  min-width: 3px;
}

/* Conteo y porcentaje son dos datos, no uno: sin separación se leen como un número raro
   ("0 0%"). Van en flex con gap propio y el porcentaje con ancho fijo, así la columna
   queda alineada entre tramos aunque uno diga 7% y otro 100%. */
.barra-valor {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.barra-valor .conteo { font-weight: 600; }
.barra-valor em {
  color: var(--on-surface-variant);
  font-style: normal;
  font-size: 0.74rem;
  min-width: 34px;
  text-align: right;
}

/* El bloque que estaba acá —.globo-nuevos, .filtros-reportes, .reporte-cabecera,
   .etiqueta-tipo, .reporte-meta, .accion-visto, .reporte-texto y compañía— se borró: era
   una SEGUNDA versión de los estilos de Reportes que nunca llegó a usarse. Ninguna de esas
   clases aparecía en un .cshtml.

   No era inocuo. Redefinía `.contexto` y `.puntaje`, que sí se usan, y al ir después ganaba
   la cascada: `.puntaje { color: var(--borde) }` pintaba TODAS las estrellas del mismo gris,
   así que en un reporte de 4 de 5 las llenas y las vacías se veían idénticas. Las
   definiciones vivas de esas dos clases están más arriba, junto al resto de Reportes. */


/* La fila desplegable de cada equipo. */
.plantel-equipo > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plantel-equipo > summary::-webkit-details-marker { display: none; }
.plantel-equipo > summary::before {
  content: "\25B8";
  color: var(--on-surface-variant);
  transition: transform var(--transicion);
  display: inline-block;
}
.plantel-equipo[open] > summary::before { transform: rotate(90deg); }

.pastilla.chica { font-size: 11px; padding: 1px 7px; }

/* La fila del plantel: sin borde arriba, para que se lea como continuación de la fila
   del equipo y no como un equipo más de la lista. */
.fila-plantel > td { border-top: none; padding-top: 0; }

/* La sub-tabla de miembros. Sale del ancho completo de la fila —no de una celda— así que
   cada dato tiene su columna en vez de amontonarse contra el borde izquierdo. */
.sub-tabla {
  width: 100%;
  margin: 10px 0 6px;
  border-collapse: collapse;
  background: var(--surface-container);
  border-radius: 10px;
  overflow: hidden;
}
.sub-tabla th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 8px 12px;
  border-bottom: 1px solid var(--outline-variant);
}
.sub-tabla td {
  padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
  font-size: 13px;
}
.sub-tabla tr:last-child td { border-bottom: none; }

/* Dato secundario dentro de una celda: la fecha del último acceso debajo de la versión.
   Sin esto se lee igual de fuerte que el dato principal y la columna se vuelve ruido. */
.atenuado {
    color: var(--on-surface-variant);
    font-size: 12px;
}

/* Encabezados por los que se puede ordenar. La flecha aparece al ordenar por esa columna;
   apagada al pasar por encima, para que se vea que se puede tocar antes de tocar. */
th.ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.ordenable::after {
    content: " ↕";
    opacity: 0;
    transition: opacity var(--transicion);
}

th.ordenable:hover::after,
th.ordenable:focus-visible::after { opacity: .35; }

th.ordenable[data-orden="asc"]::after { content: " ↑"; opacity: 1; }
th.ordenable[data-orden="desc"]::after { content: " ↓"; opacity: 1; }

th.ordenable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* «Limpiar filtros» de Gráficas. Se ve como una acción secundaria: quien viene a mirar
   datos no tiene que confundirlo con el control que aplica el filtro. */
.limpiar-filtros {
    align-self: flex-end;
    padding: 8px 14px;
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background var(--transicion), border-color var(--transicion);
}

.limpiar-filtros:hover {
    background: var(--surface-high);
    border-color: var(--outline);
}