/* ==========================================================================
   Asistente Webclass — hoja de estilos
   --------------------------------------------------------------------------
   Escrita a mano y servida directo desde public/: el servidor de producción no
   tiene Node ni build de Vite, así que no puede haber paso de compilación. Por
   eso tampoco hay CDN externo — todo viaja con la app.
   ========================================================================== */

:root {
    /* Neutros: la base de la interfaz. */
    --gris-50:  #f8fafc;
    --gris-100: #f1f5f9;
    --gris-200: #e2e8f0;
    --gris-300: #cbd5e1;
    --gris-400: #94a3b8;
    --gris-500: #64748b;
    --gris-600: #475569;
    --gris-700: #334155;
    --gris-800: #1e293b;
    --gris-900: #0f172a;

    /* Azul institucional, para acciones y elementos activos. */
    --azul-50:  #eff6ff;
    --azul-100: #dbeafe;
    --azul-200: #bfdbfe;
    --azul-500: #3b82f6;
    --azul-600: #2563eb;
    --azul-700: #1d4ed8;

    /* Semánticos: riesgo, estado de las pruebas de conexión, avisos. */
    --verde-50:  #ecfdf5;
    --verde-200: #a7f3d0;
    --verde-600: #059669;
    --verde-700: #047857;
    --ambar-50:  #fffbeb;
    --ambar-200: #fde68a;
    --ambar-600: #d97706;
    --ambar-700: #b45309;
    --rojo-50:   #fef2f2;
    --rojo-200:  #fecaca;
    --rojo-600:  #dc2626;
    --rojo-700:  #b91c1c;

    --radio: 8px;
    --radio-sm: 6px;
    --sombra-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --sombra-md: 0 4px 12px rgba(15, 23, 42, .08);

    --ancho-barra: 248px;

    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                   "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.6;
    color: var(--gris-800);
    background: var(--gris-100);
}

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; color: var(--gris-900); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-700); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--fuente-mono); font-size: .875em; }

/* ------------------------------------------------------------------ layout */

.app { display: flex; min-height: 100vh; }

.barra {
    width: var(--ancho-barra);
    flex: 0 0 var(--ancho-barra);
    background: var(--gris-900);
    color: var(--gris-300);
    display: flex;
    flex-direction: column;
}

.barra__marca {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1.25rem 1.25rem 1rem;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -.01em;
}
.barra__marca:hover { text-decoration: none; color: #fff; }

.barra__logo {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: var(--radio-sm);
    background: linear-gradient(135deg, var(--azul-500), var(--azul-700));
    display: grid; place-items: center;
    font-size: .8125rem; font-weight: 700; color: #fff;
}

.barra__nav { padding: .5rem; display: flex; flex-direction: column; gap: 2px; }

.barra__grupo {
    padding: 1rem .75rem .375rem;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris-500);
    font-weight: 600;
}

.barra__enlace {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .75rem;
    border-radius: var(--radio-sm);
    color: var(--gris-300);
    font-size: .9375rem;
    font-weight: 500;
    transition: background .12s, color .12s;
}
.barra__enlace:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.barra__enlace--activo { background: var(--azul-600); color: #fff; }
.barra__enlace--activo:hover { background: var(--azul-600); }
.barra__enlace svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }

.barra__pie {
    margin-top: auto;
    padding: .875rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.usuario { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; }
.usuario__avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%;
    background: var(--gris-700);
    color: #fff;
    display: grid; place-items: center;
    font-size: .8125rem; font-weight: 600;
}
.usuario__datos { min-width: 0; }
.usuario__nombre {
    color: #fff; font-size: .875rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario__rol { font-size: .75rem; color: var(--gris-500); }

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
    background: #fff;
    border-bottom: 1px solid var(--gris-200);
    padding: 1rem 1.75rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cabecera__titulo { margin: 0; font-size: 1.125rem; }
.cabecera__sub { margin: .125rem 0 0; font-size: .875rem; color: var(--gris-500); }

.principal { flex: 1; padding: 1.75rem; min-width: 0; }
.principal--pleno { padding: 0; display: flex; flex-direction: column; min-height: 0; }

/* ------------------------------------------------------------------ tarjetas */

.tarjeta {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    margin-bottom: 1.25rem;
}
.tarjeta:last-child { margin-bottom: 0; }

.tarjeta__cabecera {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--gris-200);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
}
.tarjeta__titulo { margin: 0; font-size: .9375rem; font-weight: 600; }
.tarjeta__cuerpo { padding: 1.25rem; }
.tarjeta__pie {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--gris-200);
    background: var(--gris-50);
    border-radius: 0 0 var(--radio) var(--radio);
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}

/* ------------------------------------------------------------------ metricas */

.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.metrica {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 1rem 1.125rem;
    box-shadow: var(--sombra-sm);
}
.metrica__etiqueta {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--gris-500); font-weight: 600; margin-bottom: .25rem;
}
.metrica__valor {
    font-size: 1.75rem; font-weight: 600; line-height: 1.1;
    color: var(--gris-900); font-variant-numeric: tabular-nums;
}
.metrica__pie { font-size: .8125rem; color: var(--gris-500); margin-top: .25rem; }

/* ------------------------------------------------------------------ tablas */

.tabla-contenedor { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th {
    text-align: left;
    padding: .625rem 1.25rem;
    background: var(--gris-50);
    border-bottom: 1px solid var(--gris-200);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--gris-500); font-weight: 600; white-space: nowrap;
}
.tabla td { padding: .75rem 1.25rem; border-bottom: 1px solid var(--gris-100); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--gris-50); }
.tabla__num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla__acciones { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ insignias */

.insignia {
    display: inline-flex; align-items: center; gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.insignia--neutra { background: var(--gris-100); color: var(--gris-600); border-color: var(--gris-200); }
.insignia--ok     { background: var(--verde-50); color: var(--verde-700); border-color: var(--verde-200); }
.insignia--aviso  { background: var(--ambar-50); color: var(--ambar-700); border-color: var(--ambar-200); }
.insignia--mala   { background: var(--rojo-50);  color: var(--rojo-700);  border-color: var(--rojo-200); }
.insignia--info   { background: var(--azul-50);  color: var(--azul-700);  border-color: var(--azul-200); }

.punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ botones */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .5rem .875rem;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    font-family: inherit; font-size: .875rem; font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    text-decoration: none;
}
.boton:hover { text-decoration: none; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.boton--primario { background: var(--azul-600); color: #fff; }
.boton--primario:hover:not(:disabled) { background: var(--azul-700); color: #fff; }

.boton--suave { background: #fff; color: var(--gris-700); border-color: var(--gris-300); }
.boton--suave:hover:not(:disabled) { background: var(--gris-50); border-color: var(--gris-400); }

.boton--peligro { background: #fff; color: var(--rojo-700); border-color: var(--rojo-200); }
.boton--peligro:hover:not(:disabled) { background: var(--rojo-50); border-color: var(--rojo-600); }

.boton--fantasma { background: transparent; color: var(--gris-600); }
.boton--fantasma:hover:not(:disabled) { background: var(--gris-100); color: var(--gris-800); }

.boton--sm { padding: .3125rem .625rem; font-size: .8125rem; }
.boton--bloque { width: 100%; }

/* ------------------------------------------------------------------ formularios */

.campo { margin-bottom: 1rem; }
.campo:last-child { margin-bottom: 0; }

.etiqueta {
    display: block; margin-bottom: .375rem;
    font-size: .875rem; font-weight: 500; color: var(--gris-700);
}

.control {
    display: block; width: 100%;
    padding: .5rem .75rem;
    font-family: inherit; font-size: .9375rem;
    color: var(--gris-800);
    background: #fff;
    border: 1px solid var(--gris-300);
    border-radius: var(--radio-sm);
    transition: border-color .12s, box-shadow .12s;
}
.control::placeholder { color: var(--gris-400); }
.control:focus {
    outline: 0;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px var(--azul-100);
}
textarea.control { resize: vertical; min-height: 76px; line-height: 1.5; }

.ayuda { margin-top: .3125rem; font-size: .8125rem; color: var(--gris-500); }

.checkbox { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--azul-600); margin: 0; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* ------------------------------------------------------------------ avisos */

.aviso {
    padding: .75rem 1rem;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
}
.aviso--info { background: var(--azul-50); border-color: var(--azul-200); color: #1e40af; }
.aviso--ok   { background: var(--verde-50); border-color: var(--verde-200); color: var(--verde-700); }
.aviso--mal  { background: var(--rojo-50); border-color: var(--rojo-200); color: var(--rojo-700); }
.aviso--aviso{ background: var(--ambar-50); border-color: var(--ambar-200); color: var(--ambar-700); }
.aviso div + div { margin-top: .25rem; }

.vacio { padding: 2.5rem 1.25rem; text-align: center; color: var(--gris-500); }
.vacio__titulo { font-weight: 600; color: var(--gris-700); margin-bottom: .25rem; }

/* Paginación: sobreescribe la vista por defecto de Laravel (pensada para
   Tailwind, que esta app no usa) en resources/views/vendor/pagination/. */
.paginacion {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; width: 100%;
}
.paginacion__botones { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.paginacion__botones .boton--sm { min-width: 2rem; text-align: center; padding-left: .5rem; padding-right: .5rem; }
.paginacion__deshabilitado { opacity: .4; cursor: default; }
.paginacion__deshabilitado:hover { background: transparent; }
.paginacion__salto { padding: 0 .125rem; }

.tenue { color: var(--gris-500); }
.pequeno { font-size: .8125rem; }
.mono { font-family: var(--fuente-mono); font-size: .8125rem; }

/* ------------------------------------------------------------------ login */

.acceso {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--gris-900) 0%, #1a2947 55%, var(--gris-800) 100%);
}
.acceso__caja { width: 100%; max-width: 396px; }
.acceso__marca {
    display: flex; align-items: center; justify-content: center; gap: .625rem;
    margin-bottom: 1.5rem; color: #fff; font-size: 1.125rem; font-weight: 600;
}
.acceso__tarjeta {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.24);
}
.acceso__titulo { text-align: center; margin-bottom: .25rem; }
.acceso__sub { text-align: center; color: var(--gris-500); font-size: .875rem; margin-bottom: 1.5rem; }
.acceso__pie { text-align: center; margin-top: 1.25rem; font-size: .8125rem; color: var(--gris-400); }

/* ------------------------------------------------------------------ chat */

.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--gris-50); }

.chat__hilo {
    flex: 1; overflow-y: auto;
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 1.25rem;
}

.chat__centro { max-width: 780px; width: 100%; margin: 0 auto; }

.mensaje { display: flex; gap: .875rem; max-width: 780px; width: 100%; margin: 0 auto; }
.mensaje__avatar {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: var(--radio-sm);
    display: grid; place-items: center;
    font-size: .6875rem; font-weight: 700; color: #fff;
}
.mensaje--usuario .mensaje__avatar { background: var(--gris-600); }
.mensaje--ia .mensaje__avatar { background: linear-gradient(135deg, var(--azul-500), var(--azul-700)); }

.mensaje__cuerpo { min-width: 0; flex: 1; }
.mensaje__autor {
    font-size: .8125rem; font-weight: 600; color: var(--gris-700);
    margin-bottom: .25rem;
    display: flex; align-items: center; gap: .5rem;
}
.mensaje__texto {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: .875rem 1rem;
    box-shadow: var(--sombra-sm);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.mensaje--usuario .mensaje__texto { background: var(--azul-50); border-color: var(--azul-200); }
.mensaje__texto p:last-child { margin-bottom: 0; }

/* La respuesta del asistente viene como HTML desde markdown, asi que los saltos
   ya los pone el marcado. Mantener `pre-wrap` aca dejaria una linea en blanco
   por cada salto del original y todo se veria al doble de alto. */
.mensaje__texto--md { white-space: normal; }
.mensaje__texto--md > :first-child { margin-top: 0; }
.mensaje__texto--md > :last-child { margin-bottom: 0; }

.mensaje__texto--md ul,
.mensaje__texto--md ol { margin: 0 0 .75rem; padding-left: 1.35rem; }
.mensaje__texto--md li { margin-bottom: .25rem; }
.mensaje__texto--md li > p { margin-bottom: .25rem; }

.mensaje__texto--md h1,
.mensaje__texto--md h2,
.mensaje__texto--md h3,
.mensaje__texto--md h4 { font-size: 1rem; margin: 1rem 0 .5rem; }

.mensaje__texto--md code {
    background: var(--gris-100);
    padding: .1rem .3rem;
    border-radius: 4px;
}
.mensaje__texto--md pre {
    background: var(--gris-900);
    color: var(--gris-100);
    padding: .75rem 1rem;
    border-radius: var(--radio-sm);
    overflow-x: auto;
}
.mensaje__texto--md pre code { background: none; padding: 0; color: inherit; }

.mensaje__texto--md blockquote {
    margin: 0 0 .75rem;
    padding-left: .875rem;
    border-left: 3px solid var(--gris-300);
    color: var(--gris-600);
}

/* Tablas: es lo que motivo todo esto. La respuesta del chat trae comparaciones
   —profesores y clases, puntajes por anio— que en texto corrido son ilegibles.
   El contenedor con scroll propio evita que una tabla ancha empuje el chat. */
.mensaje__texto--md .tabla-envoltorio { overflow-x: auto; margin-bottom: .75rem; }

.mensaje__texto--md table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    /* Las cifras de una columna tienen que alinearse entre si */
    font-variant-numeric: tabular-nums;
}
.mensaje__texto--md th,
.mensaje__texto--md td {
    border: 1px solid var(--gris-200);
    padding: .375rem .625rem;
    text-align: left;
    vertical-align: top;
}
.mensaje__texto--md thead th {
    background: var(--gris-50);
    font-weight: 600;
    white-space: nowrap;
}
.mensaje__texto--md tbody tr:nth-child(even) { background: var(--gris-50); }

/* Las columnas de numeros van a la derecha: markdown las marca con `---:` */
.mensaje__texto--md th[align="right"],
.mensaje__texto--md td[align="right"] { text-align: right; }
.mensaje__texto--md th[align="center"],
.mensaje__texto--md td[align="center"] { text-align: center; }

.chat__compositor {
    border-top: 1px solid var(--gris-200);
    background: #fff;
    padding: 1rem 1.75rem 1.25rem;
}
.chat__forma { max-width: 780px; margin: 0 auto; }
.chat__fila { display: flex; gap: .625rem; align-items: flex-end; }
.chat__fila textarea { flex: 1; min-height: 52px; max-height: 220px; }
.chat__nota {
    max-width: 780px; margin: .5rem auto 0;
    font-size: .75rem; color: var(--gris-400);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ------------------------------------------------------- dictado por voz */

/* El botón del micrófono va cuadrado y sólo con el icono: al lado de «Enviar»
   dos botones con texto competían por la atención. */
.boton--icono {
    padding: 0; width: 42px; height: 42px;
    flex: 0 0 auto;
}
.boton--icono svg { width: 18px; height: 18px; }

/* Grabando: rojo y latiendo, para que se vea de reojo que el micrófono está
   abierto. Es la única señal de que algo está escuchando. */
.boton--grabando {
    background: var(--rojo-50);
    color: var(--rojo-700);
    border-color: var(--rojo-200);
    animation: latido 1.4s ease-in-out infinite;
}
.boton--grabando:hover:not(:disabled) {
    background: var(--rojo-50); border-color: var(--rojo-200);
}

@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Sin animación para quien la pidió apagada. El color se mantiene, que es lo
   que de verdad comunica el estado. */
@media (prefers-reduced-motion: reduce) {
    .boton--grabando { animation: none; }
}

.chat__dictado { color: var(--gris-500); }
.chat__dictado--mal { color: var(--rojo-700); }

/* --------------------------------------------------- pares etiqueta / valor */

/* La ficha del colegio son decenas de campos por fuente. En columnas que se
   acomodan solas se leen de un barrido; en una tabla de dos columnas habria
   que bajar media pantalla por cada bloque. */
.pares {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
}
/* Los valores del MIME son frases largas: menos columnas y mas ancho. */
.pares--ancho { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

.par { min-width: 0; }
.par dt {
    color: var(--gris-500);
    font-size: .75rem;
    margin-bottom: .0625rem;
}
.par dd {
    margin: 0;
    /* Un correo largo o una direccion no deben ensanchar la rejilla */
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- listas de personas */

/* Una nomina puede tener 100 docentes. En columnas se abarcan de un barrido,
   y cada uno en su linea con su boton al lado en vez de un parrafo corrido. */
.lista-personas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: .25rem 1.5rem;
}
.persona {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .3125rem 0;
    border-bottom: 1px solid var(--gris-100, #f1f5f9);
    min-width: 0;
}
.persona__nombre { overflow-wrap: anywhere; }

/* El boton de buscar aparece al pasar por encima: con 100 docentes, 100
   botones a la vez compiten con los nombres, que son el dato. */
.persona .boton { opacity: 0; flex: 0 0 auto; white-space: nowrap; }
.persona:hover .boton,
.persona:focus-within .boton { opacity: 1; }

/* Sin hover —en un celular— tienen que estar siempre visibles. */
@media (hover: none) {
    .persona .boton { opacity: 1; }
}

/* --------------------------------------------- series de anios (SIMCE, IDPS) */

/* Cada anio es un bloque: anio arriba, puntaje grande, y la variacion debajo.
   En linea y con envoltura para que 4 anios quepan en una celda de tabla sin
   obligar a la pagina a desplazarse en horizontal. */
.serie {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}
.serie__punto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* Los puntajes se leen en columna, asi que las cifras tienen que alinearse */
    font-variant-numeric: tabular-nums;
}
.serie__punto strong { font-size: 1.0625rem; }

/* Verde y rojo SOLO cuando la diferencia es significativa: si no lo es, el
   texto va en gris (.tenue) para no sugerir un cambio que no existe. */
.ok { color: var(--verde-600, #16a34a); }
.mala { color: var(--rojo-600, #dc2626); }

/* ------------------------------------------------------------------ reportes */

/* La matriz de asignatura x nivel son 13 columnas de numeros: si respira como
   una tabla normal no cabe, y si no se puede leer de un vistazo no sirve. */
/* ---------------------------------------------------------------- pestanas */

.pestanas {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gris-200);
}

.pestana {
    padding: .625rem 1rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--gris-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pestana:hover { color: var(--gris-900); }

.pestana--activa {
    color: var(--azul-600);
    border-bottom-color: var(--azul-500);
}

/* La fila del capacitador que se esta mirando en el detalle de abajo. */
.fila--activa { background: var(--azul-50) !important; }

.tabla--compacta { font-size: .8125rem; }
.tabla--compacta th,
.tabla--compacta td { padding: .3125rem .5rem; }
.tabla--compacta thead th { white-space: nowrap; }

/* Al imprimir (o guardar como PDF, que es lo que va a hacer la gente) sobran
   la barra lateral, la cabecera y los formularios: el informe es la hoja. */
/* ==========================================================================
   Impresión

   En papel el informe NO conserva el diseño de la pantalla: conserva el del
   informe oficial que genera el propio producto —portada, una sección por
   hoja, título gris subrayado en azul, cabecera de tabla celeste y filas
   alternadas—, porque es el documento que el colegio ya conoce y el que el
   ejecutivo deja sobre la mesa.

   Los colores están copiados de ese informe (su hoja de estilos vive en
   mockups.webescuela.cl), no elegidos acá:

       #039      títulos y portada        #02abf1   cabecera de tabla
       #06c      etiquetas del resumen    #f4f4f4   filas alternadas
       #090      las cifras               #999      título de sección
   ========================================================================== */

.solo-imprimir { display: none; }

@media print {
    @page { size: A4 portrait; margin: 1.4cm; }

    /* Sin esto el navegador descarta todos los fondos, que es justamente lo
       que le da identidad al informe: saldría en blanco y negro. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .barra,
    .cabecera,
    .no-imprimir { display: none !important; }

    .solo-imprimir { display: block; }

    .app { display: block; }
    .principal { padding: 0; max-width: none; }
    body { background: #fff; color: #333; font-size: 11pt; }

    /* ---------------------------------------------------------- portada */

    .portada { display: flex; flex-direction: column; height: 24.2cm; }
    .portada__marca {
        text-align: right; font-size: 19pt; font-weight: 700;
        letter-spacing: -.02em; color: #039;
    }
    .portada__titulo { margin-top: 5.5cm; font-size: 32pt; color: #039; }
    .portada__fecha { color: #039; font-size: 11pt; }
    .portada__colegio {
        margin-top: auto; background: #039; color: #fff;
        padding: 1.1cm 1cm; font-size: 19pt; line-height: 1.25;
    }
    .portada__colegio span {
        display: block; margin-top: .3cm; font-size: 10pt; opacity: .85;
    }

    /* ------------------------------------------------- una sección, una hoja */

    .hoja { break-before: page; }

    .tarjeta {
        border: 0; box-shadow: none; margin: 0 0 .8cm;
        break-inside: avoid;
    }
    .tarjeta__cabecera {
        align-items: baseline; padding: 0 0 .15cm; margin-bottom: .7cm;
        border: 0; border-bottom: 1px solid #039;
    }
    .tarjeta__titulo { font-size: 18pt; font-weight: 400; color: #999; }
    .tarjeta__cuerpo { padding: 0; }
    .tarjeta__pie { padding: .4cm 0 0; border: 0; }

    /* --------- el resumen: etiqueta azul a la izquierda, cifra verde a la
                 derecha, que es la forma que tiene en el informe ----------- */

    .metricas { display: block; margin-bottom: 0; }
    .metrica {
        display: flex; align-items: baseline; justify-content: space-between;
        padding: .35cm .45cm; margin-bottom: .25cm;
        background: #fbfbfb; border: 0; border-bottom: 1px solid #e3e3e3;
        border-radius: 0; box-shadow: none;
    }
    .metrica__etiqueta {
        margin: 0; font-size: 13pt; font-weight: 400; color: #06c;
        text-transform: none; letter-spacing: 0;
    }
    .metrica__valor { font-size: 22pt; font-weight: 400; color: #090; }

    /* ----------------------------------------------------------- tablas */

    .tabla-contenedor { overflow: visible; }
    .tabla { border: 1px solid #ccc; font-size: 10pt; }
    .tabla thead { display: table-header-group; }
    .tabla thead th {
        padding: .2cm .3cm; border: 0; background: #02abf1; color: #fff;
        font-size: 10pt; font-weight: 600; text-transform: none; letter-spacing: 0;
    }
    .tabla td { padding: .14cm .3cm; border: 0; }
    .tabla tbody tr { break-inside: avoid; }
    .tabla tbody tr:nth-child(even) { background: #f4f4f4; }
    .tabla tbody tr:hover { background: transparent; }
    .tabla tbody tr:nth-child(even):hover { background: #f4f4f4; }
    .tabla tfoot th {
        padding: .2cm .3cm; background: #fff; color: #039;
        border-top: 2px solid #02abf1;
    }

    /* La matriz no cabe de pie: son 13 niveles más la asignatura. La página
       apaisada con nombre la entienden Chrome y Edge; donde no, el cuerpo más
       chico la deja igual legible en vez de cortarla. */
    @page apaisada { size: A4 landscape; margin: 1.2cm; }
    .hoja--ancha { page: apaisada; }
    .hoja--ancha .tabla { font-size: 8pt; }
    .hoja--ancha .tabla th,
    .hoja--ancha .tabla td { padding: .1cm .16cm; }
}

.sugerencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: 1.25rem; }

/* ==========================================================================
   Prospecta — namespaced bajo #prospecta para no chocar con las clases
   genéricas de arriba (tarjeta, boton, control, etc.), que Prospecta sigue
   usando tal cual donde ya calzan. Lo demás (modal, confirmación, toast) vive
   fuera de #prospecta porque el modal cuelga al final del <body> lógico de
   la vista, no dentro del contenedor de la tabla.
   ========================================================================== */

#prospecta .pr-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

#prospecta #pr-panel-filtros,
#prospecta #pr-panel-columnas {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--gris-100);
}

#prospecta .pr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.pr-fila-filtro { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .4rem; }

.pr-chip {
    display: inline-flex; align-items: center;
    padding: .25rem .625rem;
    border-radius: 999px;
    font-size: .8125rem;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
a.pr-chip:hover { text-decoration: none; filter: brightness(.97); }
.pr-chip--activo { outline: 2px solid var(--azul-500); outline-offset: 1px; }

/* Estado de cuenta / próxima acción / resultado de una interacción comparten
   esta misma escala semántica de color en toda la pantalla. */
.ec--vacio  { background: var(--gris-100); color: var(--gris-500); border-color: var(--gris-200); }
.ec--neutro { background: var(--gris-100); color: var(--gris-600); border-color: var(--gris-200); }
.ec--info   { background: var(--azul-50);  color: var(--azul-700); border-color: var(--azul-200); }
.ec--aviso  { background: var(--ambar-50); color: var(--ambar-700); border-color: var(--ambar-200); }
.ec--buena  { background: var(--verde-50); color: var(--verde-700); border-color: var(--verde-200); }
.ec--mala   { background: var(--rojo-50);  color: var(--rojo-700);  border-color: var(--rojo-200); }

#prospecta .pr-select-estado {
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    padding: .3rem .5rem;
    font-size: .8125rem;
    font-family: var(--fuente);
    cursor: pointer;
}

/* Tabla: columnas reordenables/redimensionables/ocultables — todo vive en
   localStorage del navegador, la tabla sólo obedece los estilos inline que
   el script de la vista le va poniendo por columna. */
#pr-tabla-contenedor { overflow-x: auto; }
#pr-tabla th { position: relative; white-space: nowrap; }
#pr-tabla .pr-th-label a { color: inherit; text-decoration: none; }
#pr-tabla .pr-th-label a:hover { text-decoration: underline; }

.pr-resize {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
}
.pr-resize:hover { background: var(--azul-200); }

.pr-link {
    background: none; border: 0; padding: 0;
    color: var(--azul-700); font-weight: 500;
    cursor: pointer; text-align: left;
}
.pr-link:hover { text-decoration: underline; }

#pr-tabla td.pr-editable { padding: .375rem .75rem; }
.pr-input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    padding: .3rem .5rem;
    font-family: var(--fuente);
    font-size: .875rem;
    background: transparent;
}
.pr-input:hover { border-color: var(--gris-200); }
.pr-input:focus { border-color: var(--azul-500); background: #fff; outline: none; }
.pr-input--chico { max-width: 140px; display: inline-block; width: auto; }

.pr-acciones { display: flex; gap: .25rem; }
.pr-icono-btn {
    border: 1px solid var(--gris-200);
    background: #fff;
    border-radius: var(--radio-sm);
    width: 30px; height: 30px;
    font-size: .9375rem;
    line-height: 1;
    cursor: pointer;
}
.pr-icono-btn:hover { background: var(--gris-50); border-color: var(--gris-300); }

/* Modal de ficha */
.pr-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 3rem 1rem;
    z-index: 60;
    overflow-y: auto;
}
.pr-modal {
    background: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
    width: 100%; max-width: 720px;
}
.pr-modal__cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gris-100);
}
.pr-modal__cabecera h2 { margin: .125rem 0; font-size: 1.125rem; }
.pr-modal__cuerpo { padding: 1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; }

/* "Editar" con bloqueo: campos grises hasta que alguien apreta Editar. */
.pr-editar-barra { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .625rem; }
.pr-editar-acciones { display: inline-flex; gap: .5rem; }
.pr-input:disabled, select.pr-input:disabled { background: transparent; color: var(--gris-600); cursor: default; opacity: 1; }
.pr-mini-btn:disabled { opacity: .35; cursor: default; }
.pr-mini-btn:disabled:hover { background: transparent; }

.pr-seccion h3 { margin: 0 0 .75rem; font-size: .9375rem; }

/* Acordeon de la ficha: varias secciones pueden estar abiertas a la vez,
   pero por defecto solo "Datos clave" lo esta -- la idea es que quien
   prospecta vea lo justo y abra el resto solo si lo necesita. */
.pr-acordeon-item { border: 1px solid var(--gris-200); border-radius: var(--radio); overflow: hidden; }
.pr-acordeon-cabecera {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--gris-50);
    border: 0;
    padding: .75rem 1rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--gris-800);
    cursor: pointer;
    text-align: left;
}
.pr-acordeon-cabecera:hover { background: var(--gris-100); }
.pr-acordeon-cuenta { font-weight: 400; color: var(--gris-500); font-size: .8125rem; }
.pr-acordeon-flecha { color: var(--gris-400); transition: transform .15s ease; }
.pr-acordeon-item--abierto .pr-acordeon-flecha { transform: rotate(180deg); }
.pr-acordeon-cuerpo { display: none; padding: 1rem; border-top: 1px solid var(--gris-200); }
.pr-acordeon-item--abierto .pr-acordeon-cuerpo { display: block; }

@media (prefers-reduced-motion: reduce) {
    .pr-acordeon-flecha { transition: none; }
}

.pr-datos-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem 1.5rem;
}
.pr-dato { display: flex; flex-direction: column; gap: .1rem; }
.pr-dato-etiqueta { font-size: .75rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .02em; }
.pr-dato-valor { font-size: .9375rem; color: var(--gris-800); }

.pr-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1.2fr auto;
    gap: .5rem;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gris-100);
}
.pr-contacto--nuevo { grid-template-columns: 1fr 1fr 1fr 1fr auto; border-bottom: none; padding-top: .75rem; }
.pr-multi { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }

.pr-mini-btn {
    border: 1px dashed var(--gris-300);
    background: transparent;
    border-radius: var(--radio-sm);
    padding: .2rem .45rem;
    font-size: .75rem;
    color: var(--gris-600);
    cursor: pointer;
}
.pr-mini-btn:hover { background: var(--gris-50); }
.pr-mini-btn--mala { border-color: var(--rojo-200); color: var(--rojo-700); }
.pr-mini-btn--mala:hover { background: var(--rojo-50); }

.pr-historial-item { padding: .625rem 0; border-bottom: 1px solid var(--gris-100); font-size: .875rem; }
.pr-historial-item:last-child { border-bottom: none; }

.pr-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-tipo-btn {
    border: 1px solid var(--gris-200);
    background: #fff;
    border-radius: 999px;
    padding: .375rem .875rem;
    font-size: .8125rem;
    cursor: pointer;
}
.pr-tipo-btn:hover { background: var(--gris-50); }
.pr-tipo-btn--activo { outline: 2px solid var(--azul-500); outline-offset: 1px; }

/* Registrar interacción: lo único que queda fuera del acordeón, siempre a
   la vista -- es la acción que más se repite al usar la ficha. */
.pr-registrar {
    padding: .875rem 1rem;
    background: var(--gris-50);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
}
.pr-tipo-btn--grande {
    flex: 1 1 100px;
    border-radius: var(--radio);
    padding: .875rem .5rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.pr-aviso { padding: .625rem .875rem; border-radius: var(--radio-sm); font-size: .875rem; border: 1px solid transparent; }
.pr-aviso--buena { background: var(--verde-50); color: var(--verde-700); border-color: var(--verde-200); }

textarea.pr-input { min-height: 4.5rem; resize: vertical; }

/* Confirmación propia — se porta tal cual de la maqueta en vez del confirm()
   nativo del navegador, para mantener la apariencia ya validada. */
.pr-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    z-index: 70;
    padding: 1rem;
}
.pr-confirm-box {
    background: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
    padding: 1.25rem 1.5rem;
    max-width: 380px;
    width: 100%;
}
.pr-confirm-acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

.pr-toast {
    position: fixed;
    bottom: 1.5rem; left: 50%;
    transform: translate(-50%, 12px);
    background: var(--gris-900);
    color: #fff;
    padding: .625rem 1rem;
    border-radius: var(--radio-sm);
    font-size: .875rem;
    box-shadow: var(--sombra-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 80;
    max-width: min(90vw, 420px);
}
.pr-toast--visible { opacity: 1; transform: translate(-50%, 0); }

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

/* Popover de indicadores: flota junto al botón que lo abrió, no empuja el
   layout de la tabla ni de la ficha. */
.pr-popover {
    position: absolute;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra-md);
    padding: .875rem 1rem;
    max-width: min(92vw, 420px);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 75;
}
.pr-popover-cerrar {
    position: absolute; top: .4rem; right: .4rem;
    border: 0; background: transparent;
    width: 22px; height: 22px;
    border-radius: var(--radio-sm);
    cursor: pointer;
    color: var(--gris-500);
}
.pr-popover-cerrar:hover { background: var(--gris-100); }

/* Resumen único de indicadores: una fila por indicador, una columna por
   año -- comparar es leer la fila de izquierda a derecha. */
.pr-indicador-tabla { border-collapse: collapse; width: 100%; font-size: .8125rem; white-space: nowrap; }
.pr-indicador-tabla th, .pr-indicador-tabla td {
    padding: .3rem .5rem;
    text-align: center;
    border: 1px solid var(--gris-100);
}
.pr-indicador-tabla th { color: var(--gris-500); font-weight: 500; background: var(--gris-50); }
.pr-indicador-tabla td { font-weight: 600; }
.pr-indicador-tabla th:first-child, .pr-indicador-tabla td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--gris-700);
    background: var(--gris-50);
    white-space: normal;
}
.pr-indicador-dif { font-size: .6875rem; font-weight: 500; opacity: .85; }
.sugerencia {
    text-align: left;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: .875rem 1rem;
    cursor: pointer;
    font-family: inherit; font-size: .875rem; color: var(--gris-700);
    box-shadow: var(--sombra-sm);
    transition: border-color .12s, box-shadow .12s;
}
.sugerencia:hover { border-color: var(--azul-500); box-shadow: var(--sombra-md); }
.sugerencia strong { display: block; color: var(--gris-900); margin-bottom: .125rem; }

.bienvenida { text-align: center; padding: 2rem 0 .5rem; }
.bienvenida__icono {
    width: 48px; height: 48px; margin: 0 auto 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--azul-500), var(--azul-700));
    display: grid; place-items: center; color: #fff; font-weight: 700;
}

/* ------------------------------------------------------------------ riesgo */

.barra-riesgo {
    height: 6px; border-radius: 999px; background: var(--gris-200);
    overflow: hidden; min-width: 72px; margin-top: .3125rem;
}
.barra-riesgo__relleno { height: 100%; border-radius: 999px; }
.barra-riesgo__relleno--ok    { background: var(--verde-600); }
.barra-riesgo__relleno--aviso { background: var(--ambar-600); }
.barra-riesgo__relleno--mala  { background: var(--rojo-600); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .app { flex-direction: column; }
    .barra {
        width: 100%; flex: none;
        flex-direction: row; align-items: center;
        overflow-x: auto;
        gap: .5rem;
    }
    .barra__marca { padding: .75rem 1rem; }
    .barra__nav { flex-direction: row; padding: .5rem; }
    .barra__grupo { display: none; }
    .barra__pie { margin: 0 0 0 auto; border-top: 0; padding: .5rem 1rem; }
    .usuario { margin-bottom: 0; }
    .usuario__datos { display: none; }
    .cabecera, .principal, .chat__hilo, .chat__compositor { padding-left: 1rem; padding-right: 1rem; }
}

/* --- Fuentes citadas por el asistente ------------------------------------
   Se muestran deliberadamente tenues y chicas: son para comprobar, no para
   leer. Lo que importa es la respuesta; esto es el respaldo. */
.mensaje__fuentes {
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px solid var(--gris-200);
}

.mensaje__fuentes ul {
  margin: .375rem 0 0;
  padding-left: 1.125rem;
  list-style: disc;
}

.mensaje__fuentes li {
  margin: .125rem 0;
  font-size: .8125rem;
}

.mensaje__fuentes a {
  color: var(--azul-600);
  text-decoration: none;
  word-break: break-all;
}

.mensaje__fuentes a:hover,
.mensaje__fuentes a:focus-visible {
  text-decoration: underline;
}

/* --- Serie mensual de los Desafíos ----------------------------------------
   Doce barras, una por mes, para ver de un vistazo si el uso sube, cae o se
   cortó. No es un gráfico de verdad y no pretende serlo: el número exacto de
   cada mes va en el `title`, y la tabla de abajo tiene el detalle. Sin build
   ni librería, como el resto del CSS. */
.serie {
  display: flex; align-items: flex-end; gap: 3px;
  height: 44px; margin-top: .5rem;
}

.serie__mes {
  flex: 1 1 0; min-width: 4px;
  background: var(--gris-200); border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.serie__mes--con-uso { background: var(--azul-500); }
.serie__mes--ultimo  { background: var(--azul-700); }

.serie__pie {
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--gris-500); margin-top: .25rem;
}

/* Cada Desafío es una tarjeta con su estado al lado del nombre. */
.desafio__cabecera {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* --- Selector para imprimir varios contratos a la vez ---------------------
   Barra fija abajo: aparece sola cuando hay algo marcado y desaparece cuando
   no, para no robar espacio en una pantalla que ya es larga. Fuera del papel. */
.seleccion-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .625rem 1rem;
  background: var(--gris-900); color: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}

.seleccion-barra__cuenta { font-size: .875rem; }
.seleccion-barra__acciones { margin-left: auto; display: flex; gap: .5rem; }
.seleccion-barra .tenue { color: var(--ambar-200); }

.seleccion__casilla { width: 16px; height: 16px; cursor: pointer; }

/* Para los encabezados de columna que sólo existen para el lector de pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}