/* ADDCOR.IA — panel de clientes. Colores cálidos (naranja y ámbar de señal, carbón cálido; decisión 8-oct-2026),
   tipografía Overpass (alojada aquí, sin Google). Cada autoescuela puede poner su color: ver js/marca.js. */

@font-face {
  font-family: "Overpass";
  src: url("/fuentes/overpass-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --fondo: #fff8f1;
  --tinte: #ffebd6;
  --tinte-2: #fdd9b5;
  --ambar: #f5a524;
  /* Color de la marca: el de ADDCOR.IA o el que elija cada autoescuela (js/marca.js calcula las variantes legibles). */
  --primario: #c2410c;
  --primario-oscuro: #9a3412;
  --sobre-primario: #ffffff;
  --carbon: #2a211c;
  --tinta: #2a211c;
  --tinta-2: #5e4b40;
  --tinta-3: #76604f;
  --linea: #eadccd;
  --borde-campo: #94796a;
  --superficie: #ffffff;
  --serie-ia: #c2410c;
  --serie-wa: #14a088;
  --wa-pista: #d3efe9;
  --previsto: #efe3d6;
  --bien-texto: #006300;
  --bien-fondo: #e3f5e3;
  --aviso-texto: #7a5100;
  --aviso-fondo: #fff4d9;
  --critico-texto: #a32424;
  --critico-fondo: #fdecec;
  --radio-s: 6px;
  --radio-m: 14px;
  --radio-l: 24px;
  --fuente: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 1rem; line-height: 1.5; color: var(--tinta); background: var(--fondo); accent-color: var(--primario); }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
h1, h2, h3 { line-height: 1.15; font-weight: 760; letter-spacing: -0.01em; }
a { color: var(--primario-oscuro); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Marca y botones */
.logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 820; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--carbon); text-decoration: none; }
.logo svg { width: 32px; height: 32px; flex: none; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.25rem; border-radius: var(--radio-s); border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; }
.boton-principal { background: var(--primario); color: var(--sobre-primario); }
.boton-principal:hover { background: var(--primario-oscuro); }
.boton-principal:disabled { opacity: .75; cursor: progress; }
.boton-secundario { background: transparent; border-color: var(--linea); min-height: 40px; padding: .4rem .9rem; }
.boton-secundario:hover { background: var(--tinte); }

/* ---------- Acceso ---------- */
.acceso { display: grid; min-height: 100dvh; }
.acceso-form { width: 100%; max-width: 27rem; margin-inline: auto; padding: 2rem 1.25rem 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; }
.acceso-form h1 { font-size: 2rem; letter-spacing: -0.025em; }
.acceso-form .intro { margin-top: .5rem; color: var(--tinta-2); font-size: 1.0625rem; }
.formulario { display: grid; gap: 1.125rem; }
.campo { display: grid; gap: .375rem; }
.campo label { font-weight: 680; font-size: .9375rem; }
.campo input { width: 100%; min-height: 50px; padding: .625rem .875rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-s); background: var(--superficie); }
.campo input:focus-visible { border-color: var(--primario); outline-offset: 0; }
.campo-clave { position: relative; }
.campo-clave input { padding-right: 6.5rem; }
.ver-clave { position: absolute; inset-block: 5px; inset-inline-end: 5px; padding-inline: .875rem; border: 0; border-radius: 4px; background: var(--tinte); font-weight: 680; font-size: .875rem; cursor: pointer; }
.error-form { color: var(--critico-texto); background: var(--critico-fondo); padding: .75rem .875rem; border-radius: var(--radio-s); font-size: .9375rem; }
.ayuda { color: var(--tinta-2); font-size: .9375rem; }
.acceso-marca { display: none; }

@media (min-width: 900px) {
  .acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .acceso-form { grid-column: 1; grid-row: 1; }
  .logo-movil { display: none; }
  .acceso-marca { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 3rem clamp(2rem, 5vw, 5rem); background: var(--tinte); }
  .marca-checks { width: 132px; height: 80px; fill: none; stroke: var(--primario); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.5rem; }
  .lema { font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 830; line-height: 1; letter-spacing: -0.04em; color: var(--carbon); max-width: 11ch; }
  .lema + p { margin-top: 1.25rem; max-width: 34ch; font-size: 1.125rem; color: var(--tinta-2); }
}

/* ---------- Panel: estructura ---------- */
.pagina-panel { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.saltar { position: absolute; left: .5rem; top: -4rem; z-index: 30; background: #fff; padding: .5rem .75rem; border-radius: var(--radio-s); }
.saltar:focus { top: .5rem; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem 1rem; padding: .625rem 1rem; background: #fff; border-bottom: 1px solid var(--linea); }
.barra .logo span { display: none; }
.barra-cliente { flex: 1; min-width: 0; }
.nombre-cliente { font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lo que lleva consumido el cliente este mes, en todas las pantallas (transparencia: decisión 8-oct-2026). */
.consumo-siempre { font-size: .8125rem; line-height: 1.35; color: var(--tinta-2); }
.consumo-siempre .parte { white-space: nowrap; }
/* En pantallas muy angostas, el total; el detalle (IA y WhatsApp) está a un toque, en Consumo. */
@media (max-width: 479px) { .consumo-siempre .parte + .parte { display: none; } }
.consumo-siempre a { color: inherit; text-decoration: none; }
.consumo-siempre a:hover strong, .consumo-siempre a:focus-visible strong { text-decoration: underline; }
.consumo-siempre strong { color: var(--carbon); font-weight: 720; }
.ver-como { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--tinta-2); }
.ver-como select { min-height: 34px; max-width: 100%; border: 1px solid var(--linea); border-radius: var(--radio-s); background: #fff; padding-inline: .5rem; }
.navegacion { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #fff; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.navegacion a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: .375rem .125rem; font-size: .6875rem; font-weight: 680; line-height: 1.1; text-align: center; color: var(--tinta-3); text-decoration: none; }
.navegacion a .icono { width: 22px; height: 22px; stroke-width: 1.8; }
.navegacion a > span { max-width: 100%; -webkit-hyphens: auto; hyphens: auto; }
.solo-ancho { display: none; }
@media (min-width: 600px) {
  .solo-movil { display: none; }
  .solo-ancho { display: inline; }
}
.navegacion a[aria-current="page"] { color: var(--primario); }
.navegacion a[aria-current="page"] .icono { stroke-width: 2.4; }
main { width: 100%; max-width: 1180px; margin-inline: auto; padding: 1.25rem 1rem 2.5rem; }
main:focus { outline: none; }
.cargando { color: var(--tinta-2); padding: 2rem 0; }
.vacio { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); padding: 2rem 1.25rem; display: grid; gap: .75rem; justify-items: start; color: var(--tinta-2); }
.vacio h1 { color: var(--tinta); font-size: 1.375rem; }

@media (min-width: 600px) {
  .barra .logo span { display: inline; }
}

@media (min-width: 900px) {
  .pagina-panel { padding-bottom: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; }
  .barra { grid-column: 1 / -1; padding-inline: 1.5rem; }
  .navegacion { position: sticky; top: 61px; align-self: start; grid-auto-flow: row; grid-template-columns: 1fr; gap: .25rem; padding: 1.5rem .75rem; border: 0; background: transparent; }
  .navegacion a { flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: 44px; padding: .5rem .875rem; border-radius: var(--radio-s); font-size: .9375rem; color: var(--tinta-2); }
  .navegacion a:hover { background: var(--tinte); }
  .navegacion a[aria-current="page"] { background: #fff; color: var(--carbon); box-shadow: inset 3px 0 0 var(--primario); }
  main { padding: 1.75rem 2rem 3rem; }
}

/* ---------- Resumen ---------- */
.cabecera-seccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.cabecera-seccion h1 { font-size: 1.625rem; letter-spacing: -0.02em; }
.selector-mes { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 2px; }
.selector-mes button { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.selector-mes button:hover:not(:disabled) { background: var(--tinte); }
.selector-mes button:disabled { opacity: .3; cursor: default; }
.selector-mes output { min-width: 9.5rem; text-align: center; font-weight: 720; }

.resumen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.resumen > * { min-width: 0; }

.estado { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; padding: .875rem 1rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.estado p { display: grid; }
.estado span:not(.estado-icono) { color: var(--tinta-2); font-size: .9375rem; }
.estado-icono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; }
.estado--activo .estado-icono { background: var(--bien-fondo); color: var(--bien-texto); }
.estado--pausa .estado-icono { background: var(--tinte); color: var(--tinta-2); }
.estado--parado { border-color: #f1b9b9; }
.estado--parado .estado-icono { background: var(--critico-fondo); color: var(--critico-texto); }

.avisos { list-style: none; padding: 0; display: grid; gap: .5rem; }
.aviso { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--radio-m); font-size: .9375rem; }
.aviso .icono { margin-top: 1px; }
.aviso--info { background: var(--tinte); color: var(--carbon); }
.aviso--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.aviso--critico { background: var(--critico-fondo); color: var(--critico-texto); }

.heroe { padding-block: .25rem; }
.heroe-intro { font-size: 1.1875rem; color: var(--tinta-2); }
.heroe-cifra { margin-block: .25rem .5rem; font-size: clamp(3.75rem, 17vw, 6rem); font-weight: 840; line-height: .92; letter-spacing: -0.045em; color: var(--carbon); }
.heroe-cifra small { margin-inline-start: .625rem; font-size: 1.5rem; font-weight: 720; letter-spacing: -0.01em; }
.heroe-valor { font-size: 1.125rem; max-width: 30ch; }
.delta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .625rem; font-size: .9375rem; font-weight: 680; }
.delta .icono { width: 18px; height: 18px; }
.delta--sube { color: var(--bien-texto); }
.delta--baja { color: var(--tinta-2); }

.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-m); overflow: hidden; }
.datos div { background: #fff; padding: .875rem 1rem; }
.datos dt { font-size: .875rem; color: var(--tinta-2); }
.datos dd { font-size: 1.75rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.2; }

/* El depósito: la pieza fuerte del panel, como el cuadro de mandos de un coche. */
.deposito { display: grid; gap: .875rem; padding: 1.25rem 1.25rem 1.375rem; background: var(--carbon); color: #fff; border-radius: var(--radio-l); }
.deposito h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.0625rem; font-weight: 700; color: var(--tinte-2); }
.deposito p { color: #f7e3cf; font-size: .9375rem; }
.deposito strong { color: #fff; }
.deposito-grafico { width: 100%; max-width: 300px; margin: .25rem auto 0; }
.deposito-grafico svg { display: block; width: 100%; height: auto; }
.deposito .deposito-dias { text-align: center; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: #fff; }
.deposito-dias span { display: block; margin-top: .15rem; font-size: .875rem; font-weight: 600; color: var(--tinte-2); }
.deposito .deposito-aviso { display: flex; justify-content: center; align-items: center; gap: .5rem; font-weight: 720; color: #ffb547; }
.deposito--critico .deposito-aviso { color: #ffaaaa; }
.deposito .deposito-cifra { text-align: center; font-size: clamp(2.5rem, 12vw, 3rem); font-weight: 840; letter-spacing: -0.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.deposito .deposito-cifra--texto { font-size: 1.75rem; letter-spacing: -0.02em; }
.deposito-cifra span { display: block; margin-top: .5rem; font-size: .9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--tinte-2); }
.deposito-cuentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.deposito-cuentas div { padding: .75rem .875rem; border-radius: var(--radio-s); background: rgb(255 255 255 / .08); }
.deposito-cuentas dt { font-size: .8125rem; color: var(--tinte-2); }
.deposito-cuentas dd { margin-top: .15rem; font-size: 1.125rem; font-weight: 760; line-height: 1.25; color: #fff; font-variant-numeric: tabular-nums; }
.deposito-cuentas dd span { display: block; font-size: .8125rem; font-weight: 600; color: #f7e3cf; }
.deposito-enlace { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; color: #fff; font-weight: 700; text-underline-offset: 3px; }
.deposito-enlace .icono { width: 18px; height: 18px; }
.estado-credito { flex-basis: 100%; display: flex; align-items: center; gap: .625rem; min-height: 44px; padding-top: .625rem; border-top: 1px solid var(--linea); color: var(--tinta); font-size: .9375rem; text-decoration: none; }
.estado-credito:hover span { text-decoration: underline; }
.estado-credito .icono { color: var(--primario); }
.estado-credito--aviso .icono { color: var(--aviso-texto); }
.estado-credito--critico .icono { color: var(--critico-texto); }
.recomendacion { display: grid; gap: .5rem; padding: .875rem 1rem; background: rgb(255 255 255 / .08); border-radius: var(--radio-m); }
.dep-pista, .dep-reserva, .dep-nivel { fill: none; stroke-width: 16; stroke-linecap: round; }
.dep-pista { stroke: rgb(255 255 255 / .14); }
.dep-reserva { stroke: rgb(245 179 42 / .4); stroke-linecap: butt; }
/* Verde = bien; ámbar y rojo quedan para los avisos (no se confunden con la marca). */
.dep-nivel { stroke: #8fd3a6; transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }
.dep-nivel--aviso { stroke: #f5b32a; }
.dep-nivel--critico { stroke: #ff7a7a; }
.dep-nivel--vacio { visibility: hidden; }
.dep-marca { stroke: rgb(255 255 255 / .45); stroke-width: 2; stroke-linecap: round; }
.dep-etiqueta { fill: #d9bfa8; font: 600 11px var(--fuente); }
.dep-aguja { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.dep-aguja-grupo { transform-box: view-box; transform-origin: 120px 122px; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.dep-eje { fill: #fff; }

.bloque { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; padding: 1.125rem 1.125rem 1.25rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.bloque h2 { font-size: 1.0625rem; }
.cifra-grande { font-size: 2rem; font-weight: 820; letter-spacing: -0.03em; line-height: 1.1; }
.cifra-grande .de { font-size: 1.125rem; font-weight: 650; color: var(--tinta-2); letter-spacing: 0; }
.texto-2 { color: var(--tinta-2); font-size: .9375rem; }
.texto-2 strong { color: var(--tinta); }
.barra-apilada { display: flex; gap: 2px; height: 14px; }
.barra-apilada span { flex: 0 1 0; min-width: 3px; border-radius: 3px; }
.seg-ia { background: var(--serie-ia); }
.seg-wa { background: var(--serie-wa); }
.seg-previsto { background: var(--previsto); }
.leyenda { list-style: none; padding: 0; display: grid; gap: .375rem; font-size: .9375rem; }
.leyenda li { display: flex; align-items: center; gap: .5rem; }
.leyenda .muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.leyenda .valor { margin-left: auto; font-weight: 680; font-variant-numeric: tabular-nums; }
.medidor { height: 12px; border-radius: 999px; background: var(--wa-pista); overflow: hidden; }
.medidor span { display: block; height: 100%; inline-size: 0; background: var(--serie-wa); border-radius: 999px; }

.grafico { position: relative; min-width: 0; min-height: 200px; }
.grafico svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafico svg:focus-visible { outline-offset: 4px; }
.eje-texto { fill: var(--tinta-3); font: 500 11px var(--fuente); font-variant-numeric: tabular-nums; }
.rejilla { stroke: var(--linea); stroke-width: 1; }
.base { stroke: #d8c3b0; stroke-width: 1; }
.tooltip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); padding: .375rem .625rem; background: var(--carbon); color: #fff; border-radius: var(--radio-s); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.tabla summary { display: flex; align-items: center; min-height: 44px; color: var(--primario); font-weight: 680; font-size: .9375rem; cursor: pointer; }
.tabla table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: .4rem .5rem; text-align: right; border-bottom: 1px solid var(--linea); }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla thead th { color: var(--tinta-2); font-weight: 650; }

@media (min-width: 640px) {
  .datos { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  .resumen { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .estado, .avisos, .grafico-bloque, .resumen .whatsapp-qr { grid-column: 1 / -1; }
  .heroe { grid-column: 1 / 8; }
  .datos { grid-column: 1 / 8; grid-template-columns: repeat(2, 1fr); }
  .deposito { grid-column: 8 / -1; grid-row: span 2; }
  .gasto { grid-column: 1 / 7; }
  .gratis { grid-column: 7 / -1; }
}

/* ---------- Versión 1.0: secciones, admin y acceso ---------- */
.nav-admin .icono { stroke-width: 1.8; }
@media (min-width: 900px) {
  .navegacion .nav-admin { margin-top: .75rem; box-shadow: 0 -1px 0 var(--linea); border-radius: 0 0 var(--radio-s) var(--radio-s); }
  .navegacion .nav-admin[aria-current="page"] { box-shadow: inset 3px 0 0 var(--primario), 0 -1px 0 var(--linea); }
}

.seccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.seccion > * { min-width: 0; }
.intro-seccion { margin: -.5rem 0 1.25rem; max-width: 60ch; color: var(--tinta-2); }
.enlace-seccion { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; font-weight: 680; text-decoration: none; }
.enlace-seccion .icono { width: 18px; height: 18px; }
.delta--mas, .delta--menos { color: var(--tinta-2); }
.datos .dd-nota { font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.leyenda--fila { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; }
.lista-nota { padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--tinta-2); font-size: .9375rem; }
.lista-nota strong { color: var(--tinta); }

/* Gráficos: series y resalte */
.marca { transition: opacity .15s; }
.serie-ia { fill: var(--serie-ia); }
.serie-wa { fill: var(--serie-wa); }
.serie-previsto { fill: var(--previsto); }
.con-activa .marca:not(.activa) { opacity: .35; }
.grafico--bajo { min-height: 160px; }

/* Tablas fuera de <details> */
.tabla-scroll { position: relative; overflow-x: auto; }
.tabla-meses, .tabla-admin { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tabla-meses th, .tabla-meses td, .tabla-admin th, .tabla-admin td { padding: .55rem .5rem; text-align: right; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-meses th:first-child, .tabla-meses td:first-child, .tabla-admin th:first-child, .tabla-admin td:first-child { text-align: left; }
.tabla-meses thead th, .tabla-admin thead th { color: var(--tinta-2); font-weight: 650; }
.tabla-meses small, .tabla-admin th small { display: block; font-weight: 500; color: var(--tinta-3); font-size: .75rem; }
.tabla-admin td, .tabla-admin th { white-space: nowrap; }

/* Vida útil */
.lista-necesidad { list-style: none; padding: 0; border-top: 1px solid var(--linea); }
.lista-necesidad li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; }
.lista-necesidad strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-necesidad .total { font-weight: 720; }
.mini-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mini-datos dt { font-size: .8125rem; color: var(--tinta-2); }
.mini-datos dd { font-size: 1.375rem; font-weight: 780; letter-spacing: -0.02em; }

/* Recargas y extracto del crédito */
.extracto { display: grid; margin: 0; border-top: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.extracto div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; }
.extracto dt { color: var(--tinta-2); }
.extracto dd { font-weight: 680; white-space: nowrap; }
.extracto .extracto-total { border-bottom: 2px solid var(--tinta); }
.extracto-total dt, .extracto-total dd { color: var(--tinta); font-weight: 800; }
.recargas h3 { font-size: 1rem; }
.lista-recargas { list-style: none; padding: 0; }
.lista-recargas li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.corregir summary { display: flex; align-items: center; min-height: 44px; color: var(--primario); font-weight: 680; cursor: pointer; }
.corregir[open] summary { margin-bottom: .5rem; }
.tabla-admin td small { display: block; font-size: .75rem; color: var(--tinta-3); }

/* Barras horizontales (temas, idiomas) */
.hbarras { list-style: none; padding: 0; display: grid; gap: .75rem; }
.hbarras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .25rem .75rem; }
.hb-nombre { font-weight: 650; font-size: .9375rem; }
.hb-valor { font-weight: 720; font-variant-numeric: tabular-nums; }
.hb-valor small { margin-left: .5rem; font-size: .8125rem; font-weight: 500; color: var(--tinta-2); }
.hb-pista { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--tinte); overflow: hidden; }
.hb-barra { display: block; height: 100%; inline-size: 0; border-radius: 999px; background: var(--serie-ia); }

/* Conversaciones */
.filtros { display: grid; gap: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-size: .875rem; font-weight: 650; cursor: pointer; }
.chip:hover { background: var(--tinte); }
.chip[aria-pressed="true"] { background: var(--carbon); border-color: var(--carbon); color: #fff; }
.contador { font-size: .9375rem; color: var(--tinta-2); }
.marca-conv { padding: .1rem .5rem; border-radius: 999px; background: var(--tinte); color: var(--carbon); font-size: .75rem; font-weight: 650; }
.marca-conv--tema { background: var(--carbon); color: #fff; }

/* Chats: uno por persona */
.campo-buscar input { width: 100%; max-width: 26rem; min-height: 48px; padding: .5rem .875rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; }
.chats { list-style: none; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.chats li + li { border-top: 1px solid var(--linea); }
.chat-item { display: flex; align-items: center; gap: .875rem; min-height: 68px; padding: .625rem 1rem; color: var(--tinta); text-decoration: none; }
.chat-item:hover { background: var(--fondo); }
.avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tinte-2); color: var(--carbon); font-size: .9375rem; font-weight: 780; letter-spacing: .02em; }
.avatar--grande { width: 56px; height: 56px; font-size: 1.125rem; }
.chat-item-texto { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.chat-item-nombre { overflow: hidden; font-weight: 720; white-space: nowrap; text-overflow: ellipsis; }
.chat-item-sub { display: flex; flex-wrap: wrap; gap: .1rem .75rem; font-size: .875rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.chat-item-tema { color: var(--tinta-3); }
.chat-item-lado { display: grid; justify-items: end; gap: .25rem; flex: none; font-size: .8125rem; color: var(--tinta-2); }
.volver { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; margin-bottom: .5rem; font-weight: 680; text-decoration: none; }
.volver .icono { transform: rotate(180deg); }
.chat-cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.chat-cabecera h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.chat-cabecera p { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ficha-persona summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; }
.ficha-persona summary h2 { font-size: 1.0625rem; }
.ficha-persona[open] summary { margin-bottom: .25rem; }
.ficha-persona > :not(summary) { margin-top: .875rem; }
.ficha-datos { display: grid; gap: .5rem; }
.ficha-datos dt { font-size: .8125rem; color: var(--tinta-2); }
.ficha-datos dd { font-weight: 650; }
.historial { display: grid; gap: 1rem; min-width: 0; }
.tramos { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.tramo { display: grid; gap: .5rem; }
.tramo-fecha { display: flex; justify-content: center; }
.tramo-fecha span { padding: .2rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: .8125rem; font-weight: 650; color: var(--tinta-2); }
.tramo-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }
.chat { list-style: none; display: grid; gap: .5rem; padding: .75rem; border-radius: var(--radio-m); background: var(--fondo); }
.burbuja { display: grid; gap: .125rem; max-width: min(85%, 34rem); padding: .5rem .75rem .375rem; border-radius: 12px; font-size: .9375rem; }
.burbuja--persona { justify-self: start; background: #fff; border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.burbuja--asistente { justify-self: end; background: var(--tinte-2); border-bottom-right-radius: 4px; }
.burbuja--equipo { justify-self: end; background: var(--bien-fondo); border-bottom-right-radius: 4px; }
.burbuja-autor { font-size: .75rem; font-weight: 700; color: var(--tinta-2); }
.burbuja time { justify-self: end; font-size: .6875rem; color: var(--tinta-3); }
.cargar-mas { justify-self: center; }
p.aviso { max-width: 70ch; }

/* Admin */
.pestanas { display: flex; gap: .25rem; margin-bottom: 1.25rem; box-shadow: inset 0 -1px 0 var(--linea); overflow-x: auto; overflow-y: hidden; }
.pestanas a { padding: .625rem .875rem; border-bottom: 3px solid transparent; color: var(--tinta-2); font-weight: 680; text-decoration: none; white-space: nowrap; }
.pestanas a[aria-current="page"] { color: var(--carbon); border-bottom-color: var(--primario); }
.estado-mini { display: inline-flex; align-items: center; gap: .25rem; font-weight: 650; }
.estado-mini .icono { width: 16px; height: 16px; }
.estado-mini--ok { color: var(--bien-texto); }
.estado-mini--aviso { color: var(--aviso-texto); }
.estado-mini--critico { color: var(--critico-texto); }
.lista-simple { list-style: none; padding: 0; }
.lista-simple li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple li > .icono { color: var(--tinta-3); }
.lista-texto { flex: 1; min-width: 0; display: grid; }
.lista-texto small { font-size: .8125rem; color: var(--tinta-2); }
.aviso-mini { flex: none; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.aviso-mini--info { background: var(--tinte); color: var(--carbon); }
.aviso-mini--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.aviso-mini--critico { background: var(--critico-fondo); color: var(--critico-texto); }
.form-admin { display: grid; gap: 1rem; }
.form-admin h3 { font-size: 1rem; }
.form-sub { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.campos-2 { display: grid; gap: 1rem; }
.campo select, .campo textarea { width: 100%; min-height: 50px; padding: .625rem .875rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-s); background: var(--superficie); }
.campo textarea { min-height: 80px; resize: vertical; font: inherit; }
.ayuda-campo { font-size: .875rem; color: var(--tinta-2); }
.interruptores { display: grid; gap: .875rem; margin: 0; padding: 0; border: 0; }
.interruptores legend { margin-bottom: .625rem; padding: 0; font-size: .9375rem; font-weight: 680; }
.interruptor { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.interruptor > span { display: grid; font-weight: 650; }
.interruptor small { font-size: .8125rem; font-weight: 500; color: var(--tinta-2); }
.interruptor input { position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #a08a7c; appearance: none; cursor: pointer; transition: background .15s; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(42 33 28 / .25); transition: transform .15s; }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(18px); }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.check input { width: 20px; height: 20px; accent-color: var(--primario); }
.ok-form { padding: .75rem .875rem; border-radius: var(--radio-s); background: var(--bien-fondo); color: var(--bien-texto); font-size: .9375rem; }
code { padding: .05rem .3rem; border-radius: 4px; background: var(--tinte); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .875em; }
.boton .icono { width: 18px; height: 18px; }
.boton-peligro { background: var(--critico-texto); color: #fff; }
.boton-peligro:hover { background: #8a1c1c; }
.boton-peligro-sec { justify-self: start; min-height: 40px; padding: .4rem .9rem; border-color: #f1b9b9; background: transparent; color: var(--critico-texto); }
.boton-peligro-sec:hover { background: var(--critico-fondo); }

/* Diálogo de confirmación */
.dialogo { max-width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: var(--radio-m); color: var(--tinta); box-shadow: 0 20px 50px rgb(14 38 56 / .3); }
.dialogo::backdrop { background: rgb(14 38 56 / .45); }
.dialogo form { display: grid; gap: 1rem; }
.dialogo h2 { font-size: 1.25rem; }
.dialogo p { color: var(--tinta-2); }
.dialogo-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

/* Acceso: pasos, enlace, página de contraseña */
.paso { display: grid; gap: 1.75rem; }
.paso h1:focus, .acceso-form h1:focus { outline: none; }
.enlace { justify-self: start; min-height: 44px; padding: .5rem 0; border: 0; background: none; color: var(--primario); font-weight: 680; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (min-width: 600px) {
  .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .acceso.acceso--solo { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1000px) {
  .consumo, .vida { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .consumo-total { grid-column: 1 / 6; }
  .consumo-datos { grid-column: 6 / -1; grid-template-columns: repeat(2, 1fr); }
  .consumo .grafico-bloque, .vida .grafico-bloque, .vida .nota { grid-column: 1 / -1; }
  .consumo .gratis { grid-column: 1 / 7; }
  .consumo .nota { grid-column: 7 / -1; }
  .vida .deposito { grid-column: 1 / 6; grid-row: span 3; }
  .vida .proximo, .vida .este-mes, .vida .recargas { grid-column: 6 / -1; }
  .estadisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .estadisticas .datos, .estadisticas .horas { grid-column: 1 / -1; }
  .estadisticas .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .chat-pagina { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .chat-pagina .ficha-persona { position: sticky; top: 80px; }
  .ficha > #form-cliente { grid-row: span 2; }
}

/* ---------- Agenda ---------- */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.agenda-barra .selector-mes output { min-width: 13.5rem; }
.dias { list-style: none; padding: 0; display: grid; gap: 1rem; }
.dia { display: grid; gap: .625rem; padding: .875rem 1rem 1rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.dia--hoy { border-color: var(--primario); box-shadow: inset 3px 0 0 var(--primario); }
.dia--pasado { background: var(--fondo); }
.dia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dia-cabecera h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.0625rem; }
.clases { list-style: none; padding: 0; }
.clase { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; gap: .25rem .75rem; padding: .625rem 0; border-top: 1px solid var(--linea); }
.clase-lado:empty { display: none; }
.clase .clase-lado { grid-column: 2; justify-content: flex-start; }
@media (min-width: 700px) {
  .clase { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .clase .clase-lado { grid-column: 3; justify-content: flex-end; }
}
.clase:first-child { border-top: 0; }
.clase-hora { display: grid; font-weight: 760; font-variant-numeric: tabular-nums; }
.clase-hora small { font-size: .8125rem; font-weight: 500; color: var(--tinta-3); }
.clase-texto { display: grid; gap: .15rem; min-width: 0; }
.clase-texto a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.clase-texto a:hover { text-decoration: underline; }
.clase-sub { display: flex; flex-wrap: wrap; gap: .1rem .75rem; font-size: .875rem; color: var(--tinta-2); }
.clase-lado { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .875rem; }
.clase-lado .enlace { min-height: 36px; padding: .25rem 0; }
.clase--cancelada .clase-hora, .clase--cancelada .clase-texto { opacity: .55; text-decoration: line-through; }
.clase--teorica { padding-inline: .5rem; border-radius: var(--radio-s); background: var(--fondo); }
.teorica-alumnos summary { display: flex; align-items: center; min-height: 32px; color: var(--primario); font-size: .875rem; font-weight: 650; cursor: pointer; }
.teorica-alumnos ul { list-style: none; padding: 0; display: grid; gap: .25rem; font-size: .875rem; }
.enlace--peligro { color: var(--critico-texto); }
.dialogo--ancho { width: 100%; max-width: min(36rem, calc(100vw - 2rem)); }
.huecos { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.huecos legend { margin-bottom: .5rem; padding: 0; font-size: .9375rem; font-weight: 680; }
.huecos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; max-height: 16rem; overflow-y: auto; }
.hueco { display: grid; gap: .1rem; padding: .5rem .625rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-s); background: #fff; font-weight: 760; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer; }
.hueco small { font-size: .75rem; font-weight: 500; color: var(--tinta-2); }
.hueco:hover { border-color: var(--primario); background: var(--fondo); }
.hueco:disabled { opacity: .5; cursor: progress; }
details.bloque > summary { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
details.bloque > summary h2 { font-size: 1.0625rem; }
details.bloque > :not(summary) { margin-top: .875rem; }
.profe h3, .ficha-persona h3 { margin-top: 1.25rem; font-size: 1rem; }
.campos-3 { display: grid; gap: 1rem; }
.check--abajo { align-self: end; min-height: 50px; }
.solicitudes { padding: .25rem 1.125rem; }
.solicitudes li { align-items: flex-start; flex-wrap: wrap; }
.solicitudes .lista-texto { flex: 1 1 16rem; }
.solicitudes .lista-texto > span { margin-block: .15rem; }
.botones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.aviso-mini--ok { background: var(--bien-fondo); color: var(--bien-texto); }
.responder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.responder textarea { width: 100%; min-height: 50px; padding: .625rem .875rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-m); background: #fff; font: inherit; resize: vertical; }
.chat--pendientes .burbuja { border: 1px dashed var(--bien-texto); }
.admin-movil { min-height: 40px; padding: .4rem .9rem; }
.marca-conv--alumno { background: var(--bien-fondo); color: var(--bien-texto); }

/* Casillas con forma de botón: varios profesores y varios días de una vez */
.opciones { display: grid; justify-items: start; gap: .25rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.opciones legend { margin-bottom: .625rem; padding: 0; font-size: .9375rem; font-weight: 680; }
.opciones-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .375rem .875rem .375rem .625rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; font-size: .9375rem; font-weight: 650; cursor: pointer; user-select: none; }
.opcion input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primario); }
.opcion:hover { background: var(--fondo); }
.opcion:has(input:checked) { border-color: var(--primario); background: var(--tinte); color: var(--carbon); }
.opciones .enlace { min-height: 36px; padding: .25rem 0; }
.profes > section { scroll-margin-top: 5.5rem; }

/* Clases por reprogramar: el profesor no puede y el alumno tiene que elegir otro horario */
.por-reprogramar { border-color: #f0d9a0; background: var(--aviso-fondo); }
.por-reprogramar .clase { border-top-color: #f0d9a0; }
.clase--reprogramar .clase-texto > a { color: var(--aviso-texto); }
.clase--reprogramar .clase-sub .aviso-mini { align-self: center; }
.nota-afectadas:empty { display: none; }
.estado-alumno { font-weight: 680; color: var(--bien-texto); }
.estado-alumno .icono { width: 20px; height: 20px; }
.profe > .enlace { display: block; min-height: 36px; padding: .25rem 0; }

@media (min-width: 700px) {
  .campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .navegacion .nav-admin { display: none !important; }
}
@media (min-width: 900px) {
  .admin-movil { display: none !important; }
}
@media (min-width: 1000px) {
  .dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dos-columnas > .ok-form { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Personalización de cada autoescuela: su logo arriba y la pantalla para cambiar color, logo y asistente. */
.logo-escuela { height: 32px; width: auto; max-width: 96px; object-fit: contain; flex: none; }
.personalizar-boton { min-height: 40px; padding: .4rem .6rem; gap: .4rem; }
.personalizar-boton span { display: none; }
@media (min-width: 760px) { .personalizar-boton span { display: inline; } .personalizar-boton { padding: .4rem .9rem; } }
.personalizar .pastilla { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--borde-campo); flex: none; }
.personalizar input[type="color"] { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.logo-actual { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-actual img { height: 48px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 4px; background: #fff; }
.vista-marca { align-content: start; }
.muestra-cabecera { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--linea); border-top: 4px solid var(--primario); border-radius: var(--radio-s); background: #fff; }
.muestra-cabecera > span:last-child { display: grid; line-height: 1.25; }
.muestra-cabecera small { color: var(--tinta-2); font-size: .8125rem; }
.muestra-logo { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--primario); color: var(--sobre-primario); font-weight: 820; overflow: hidden; }
.muestra-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.muestra-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.enlace-muestra { color: var(--primario-oscuro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.muestra-burbuja { max-width: 100%; border-left: 3px solid var(--primario); }

/* ---------- Etapa 1: asistente configurable, saldo, lista de espera, "Mi semana" (8-oct-2026) ---------- */
.pausa-bloque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.pausa-bloque p { display: grid; gap: .15rem; flex: 1 1 18rem; }
.pausa-bloque p span { color: var(--tinta-2); font-size: .9375rem; }
.pausa-bloque--pausado { border-color: #f0d9a0; background: var(--aviso-fondo); }
.personalizar .form-admin h2 + .interruptores, .personalizar .form-admin h2 { margin-top: .25rem; }
.campo label small { font-weight: 500; color: var(--tinta-2); }
.aviso-editable code { white-space: nowrap; }
.saldo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.saldo-fila input { flex: 0 0 6.5rem; width: 6.5rem; min-height: 50px; padding: .625rem .875rem; border: 1px solid var(--borde-campo); border-radius: var(--radio-s); background: var(--superficie); }
.saldo-fila .boton { min-width: 3.25rem; }
.atiendo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.atiendo .aviso { flex: 1 1 18rem; }
.ficha-persona .opciones-lista + .opciones-lista { margin-top: .5rem; }
.lista-espera { border-color: #e8d3bd; }
.hoy h3 { margin-top: .25rem; font-size: 1rem; }
.hoy-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; }
.hoy-datos div { display: grid; align-content: start; gap: .1rem; background: #fff; padding: .75rem .875rem; }
.hoy-datos dt { font-size: .8125rem; color: var(--tinta-2); }
.hoy-datos dd { font-size: 1.5rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hoy-datos dd a { color: inherit; text-underline-offset: 3px; }
.hoy-datos small { font-size: .8125rem; color: var(--tinta-2); }
@media (min-width: 640px) { .hoy-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hoy-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .resumen .hoy, .resumen .contacto-soporte { grid-column: 1 / -1; } }
.tabla-scroll table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-scroll th, .tabla-scroll td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-scroll thead th { color: var(--tinta-2); font-weight: 650; }

/* "Mi semana": la página del profesor, en el móvil */
.pagina-profesor { min-height: 100dvh; }
.pagina-profesor main { max-width: 40rem; }
.profesor-cabecera { padding: 1rem 1rem .75rem; background: #fff; border-bottom: 4px solid var(--primario); }
.profesor-cabecera h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.profesor-escuela { font-weight: 720; color: var(--tinta-2); }
.profesor-pie { max-width: 40rem; margin-inline: auto; padding: 0 1rem 2rem; color: var(--tinta-2); font-size: .875rem; }
.pagina-profesor .dias { margin-top: 1rem; }
.pagina-profesor .bloque + .bloque, .pagina-profesor .ok-form + .intro-seccion { margin-top: 1rem; }
.pagina-profesor .intro-seccion { margin: .25rem 0 1rem; }
.no-puedo { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--linea); }
.clase--pasada .clase-hora, .clase--pasada .clase-texto { opacity: .5; }

/* ---------- Panel 1.11: menú por grupos, accesos rápidos y contadores ---------- */
.navegacion .nav-grupo, .navegacion .nav-extra, .navegacion .nav-rapidas { display: none; }
.navegacion a, .nav-mas { position: relative; }
.nav-mas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: .375rem .125rem; border: 0; background: none; font-size: .6875rem; font-weight: 680; line-height: 1.1; color: var(--tinta-3); cursor: pointer; }
.nav-mas .icono { width: 22px; height: 22px; stroke-width: 1.8; }
.nav-mas[aria-current="page"] { color: var(--primario); }
.insignia { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .3rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: .6875rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.navegacion .insignia, .nav-mas .insignia { position: absolute; top: 6px; left: calc(50% + 4px); }
@media (min-width: 900px) {
  .navegacion { max-height: calc(100dvh - 61px); overflow-y: auto; gap: .125rem; padding-top: 1rem; }
  .navegacion a.nav-extra { display: flex; }
  .nav-mas { display: none; }
  .navegacion .nav-grupo { display: block; margin: .875rem .875rem .25rem; font-size: .75rem; font-weight: 720; color: var(--tinta-3); }
  .nav-grupo:first-child { margin-top: 0; }
  .navegacion .insignia { position: static; margin-left: auto; }
  .navegacion .nav-rapidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
  .nav-rapidas button { display: grid; justify-items: center; gap: .25rem; padding: .625rem .25rem; border: 1px solid var(--linea); border-radius: var(--radio-s); background: #fff; font-size: .75rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
  .nav-rapidas button:hover { border-color: var(--primario); color: var(--primario-oscuro); }
  .navegacion .nav-admin { margin-top: .75rem; }
}
/* "Más" en el móvil: una hoja que sube desde abajo. */
.hoja { width: 100%; max-width: 32rem; max-height: 85dvh; margin: auto auto 0; padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border: 0; border-radius: var(--radio-l) var(--radio-l) 0 0; color: var(--tinta); }
.hoja::backdrop { background: rgb(42 33 28 / .45); }
.hoja-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.hoja-cabecera h2 { font-size: 1.25rem; }
.hoja-enlaces { display: grid; }
.hoja-enlaces a { display: flex; align-items: center; gap: .875rem; min-height: 52px; padding: .5rem .25rem; border-bottom: 1px solid var(--linea); color: var(--tinta); font-weight: 680; text-decoration: none; }
.hoja-enlaces a[aria-current="page"] { color: var(--primario-oscuro); }
.hoja-enlaces .insignia { margin-left: auto; }
.hoja h3 { margin: 1rem 0 .5rem; font-size: .875rem; color: var(--tinta-2); }
.hoja-rapidas { display: grid; gap: .5rem; }
.aviso-flotante { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; width: max-content; max-width: calc(100vw - 2rem); transform: translateX(-50%); padding: .75rem 1rem; border-radius: var(--radio-s); background: var(--carbon); color: #fff; font-size: .9375rem; box-shadow: 0 10px 30px rgb(42 33 28 / .3); }
@media (min-width: 900px) { .aviso-flotante { bottom: 1.5rem; } }
.rapidas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.rapidas .boton { min-height: 44px; }
.acciones-seccion { gap: .5rem; }
.intro-seccion { margin: -.5rem 0 1.25rem; max-width: 70ch; color: var(--tinta-2); }

/* ---------- Agenda: el día, una columna por profesor ---------- */
.dia-profes { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 760px) { .dia-profes { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.col-profe { gap: .5rem; padding: .875rem 1rem; }
.col-profe-cabecera { display: flex; align-items: center; gap: .75rem; }
.col-profe-cabecera a { color: var(--tinta); text-decoration: none; }
.col-profe-cabecera a:hover { text-decoration: underline; }
.col-profe-cabecera small { display: block; font-size: .8125rem; color: var(--tinta-2); }
.col-profe .aviso-mini { justify-self: start; }
.col-profe .clase { grid-template-columns: 3.25rem minmax(0, 1fr); }
.col-profe .clase .clase-lado { grid-column: 2; justify-content: flex-start; }
.clase--libre { display: block; padding: .25rem 0; }
.hueco-dia { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 40px; padding: .375rem .5rem .375rem 0; border: 1px dashed var(--linea); border-radius: var(--radio-s); background: transparent; color: var(--tinta-2); font-size: .875rem; font-weight: 650; text-align: left; cursor: pointer; }
.hueco-dia .clase-hora { padding-left: .5rem; color: var(--tinta-3); }
.hueco-dia small { font-size: .75rem; color: var(--tinta-3); }
.hueco-dia:hover, .hueco-dia:focus-visible { border-style: solid; border-color: var(--primario); background: var(--fondo); color: var(--primario-oscuro); }
.clase--teorica .hueco-dia { margin-top: .375rem; }
.clase--falta .clase-texto > a, .clase--falta .clase-texto > strong { color: var(--critico-texto); }
.dia-titulo { min-height: 0; padding: 0; color: inherit; font: inherit; text-decoration: none; }
.dia-titulo:hover { text-decoration: underline; }
.ir-fecha input { min-height: 40px; padding: .25rem .5rem; border: 1px solid var(--linea); border-radius: var(--radio-s); background: #fff; }

/* ---------- Fichas (alumno y profesor) ---------- */
.ficha-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.ficha-cabecera > div:first-of-type { flex: 1; min-width: 12rem; }
.ficha-cabecera h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.ficha-cabecera p { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ficha-acciones .boton { min-height: 44px; }
.cifras-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.cifras-ficha div { display: grid; gap: .1rem; padding: .75rem 1rem; background: #fff; }
.cifras-ficha dt { font-size: .8125rem; color: var(--tinta-2); }
.cifras-ficha dd { font-size: 1.25rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.texto-aviso { color: var(--critico-texto); }
.ficha-columnas, .ficha-principal, .ficha-lado { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (min-width: 1000px) { .ficha-columnas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ficha-columnas .clase-lado:not(:empty) { grid-column: 2; }
.ficha-lado details.bloque > summary { cursor: pointer; list-style: none; }
.ficha-lado details.bloque > summary::-webkit-details-marker { display: none; }
.zona-peligro { border-color: #f1b9b9; }

/* ---------- Profesores ---------- */
.tarjetas-profes { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .tarjetas-profes { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.tarjeta-profe { height: 100%; gap: .625rem; color: var(--tinta); text-decoration: none; }
.tarjeta-profe:hover { border-color: var(--primario); }
.tarjeta-profe--baja { background: var(--fondo); color: var(--tinta-2); }
.tarjeta-profe-cabecera { display: flex; align-items: center; gap: .75rem; }
.tarjeta-profe-cabecera small { display: block; font-size: .8125rem; color: var(--tinta-2); }
.tarjeta-profe-cifras { display: flex; gap: 1.25rem; font-size: .875rem; color: var(--tinta-2); }
.tarjeta-profe-cifras strong { font-size: 1.25rem; font-weight: 780; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tarjeta-profe-texto { font-size: .875rem; color: var(--tinta-2); }
.tarjeta-profe .aviso-mini { justify-self: start; }

/* ---------- Alumnos: tabla en la computadora, tarjetas en el móvil ---------- */
.filtros:has(.campo-filtro) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .filtros:has(.campo-filtro) { grid-template-columns: minmax(0, 26rem) auto; justify-content: start; } }
.campo-filtro select { min-height: 48px; padding: .5rem .875rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: #fff; }
.chip-cuenta { margin-left: .25rem; font-variant-numeric: tabular-nums; opacity: .75; }
.tabla-alumnos { overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.tabla-alumnos ol { list-style: none; padding: 0; }
.tabla-alumnos li + li { border-top: 1px solid var(--linea); }
.tabla-alumnos .vacio { border: 0; }
.tabla-alumnos-cabecera { display: none; }
.fila-alumno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem 1rem; padding: .75rem 1rem; color: var(--tinta); text-decoration: none; font-size: .875rem; font-variant-numeric: tabular-nums; }
.fila-alumno:hover { background: var(--fondo); }
.fila-alumno-nombre { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; font-size: 1rem; }
.fila-alumno-nombre small { display: block; font-size: .8125rem; color: var(--tinta-2); }
.fila-alumno [data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--tinta-2); }
@media (min-width: 900px) {
  .tabla-alumnos-cabecera, .fila-alumno { display: grid; grid-template-columns: minmax(0, 2.2fr) 4.5rem minmax(0, 1.3fr) minmax(0, 1.3fr) 4rem; align-items: center; gap: 1rem; }
  .tabla-alumnos--saldo .tabla-alumnos-cabecera, .tabla-alumnos--saldo .fila-alumno { grid-template-columns: minmax(0, 2.2fr) 4.5rem 6.5rem minmax(0, 1.3fr) minmax(0, 1.3fr) 4rem; }
  .tabla-alumnos-cabecera { padding: .625rem 1rem; background: var(--fondo); border-bottom: 1px solid var(--linea); font-size: .8125rem; font-weight: 700; color: var(--tinta-2); }
  .fila-alumno-nombre { grid-column: auto; }
  .fila-alumno [data-etiqueta]::before { content: none; }
}

/* ---------- WhatsApp: como WhatsApp Web ---------- */
.wa { display: grid; gap: 1rem; }
.wa-lista { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.wa-lista-cabecera { display: grid; gap: .625rem; }
.wa-lista-cabecera h1 { font-size: 1.625rem; letter-spacing: -0.02em; }
.wa-privacidad { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; }
.wa-privacidad .icono { width: 16px; height: 16px; }
.chips--fila { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .125rem; scrollbar-width: thin; }
.chips--fila .chip { flex: none; }
.chat-item-marcas { display: flex; flex-wrap: wrap; gap: .25rem; }
.chat-item-marcas:empty { display: none; }
.marca-conv--yo { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chat-item--nuevo .chat-item-nombre { font-weight: 820; }
.chat-item--nuevo time { color: var(--primario-oscuro); font-weight: 720; }
.punto-nuevo { width: .75rem; height: .75rem; border-radius: 50%; background: var(--primario); }
.chat-item[aria-current="true"] { background: var(--tinte); box-shadow: inset 3px 0 0 var(--primario); }
.wa-chat { display: none; min-width: 0; }
.wa--con-chat .wa-lista { display: none; }
.wa--con-chat .wa-chat { display: grid; gap: .75rem; align-content: start; }
.wa-chat-cabecera { display: flex; align-items: center; gap: .75rem; }
.wa-chat-quien { flex: 1; min-width: 0; }
.wa-chat-quien h2 { overflow: hidden; font-size: 1.125rem; white-space: nowrap; text-overflow: ellipsis; }
.wa-chat-quien p { font-size: .875rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.wa-chat-acciones .boton { min-height: 40px; }
.wa-volver { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--tinta); }
.wa-volver:hover { background: var(--tinte); }
.wa-estado { display: grid; gap: .5rem; }
.wa-estado .aviso { align-items: center; flex-wrap: wrap; }
.wa-estado-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: .875rem; color: var(--tinta-2); }
.wa-estado-linea .icono { width: 18px; height: 18px; color: var(--bien-texto); }
.wa-estado-linea .enlace, .wa-estado .aviso .enlace { min-height: 32px; padding: 0; margin-left: auto; }
.wa-mensajes { display: grid; gap: 1rem; align-content: start; padding: .75rem; border-radius: var(--radio-m); background: var(--tinte); }
.wa-mensajes:focus-visible { outline-offset: -3px; }
.wa-mensajes .chat { padding: 0; background: transparent; }
.wa-escribir { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; padding: .5rem; border: 1px solid var(--linea); border-radius: var(--radio-l); background: #fff; box-shadow: 0 -6px 18px rgb(42 33 28 / .06); }
.wa-escribir textarea { width: 100%; min-height: 44px; max-height: 160px; padding: .625rem .75rem; border: 0; border-radius: var(--radio-m); background: transparent; font: inherit; resize: none; }
.wa-escribir textarea:focus-visible { outline: 2px solid var(--primario); outline-offset: 0; }
.wa-escribir .boton { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.wa-ayuda { font-size: .8125rem; }
.wa-vacio { display: grid; place-items: center; align-content: center; gap: .5rem; height: 100%; padding: 2rem; text-align: center; color: var(--tinta-2); }
.wa-vacio-icono .icono { width: 48px; height: 48px; stroke-width: 1.4; color: var(--tinta-3); }
@media (min-width: 900px) { .wa-escribir { bottom: 1rem; } }
@media (min-width: 1000px) {
  .wa { grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); gap: 0; height: calc(100dvh - 9.5rem); min-height: 34rem; overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
  .wa-lista, .wa--con-chat .wa-lista { display: grid; grid-template-rows: auto 1fr auto; gap: 0; min-height: 0; border-right: 1px solid var(--linea); }
  .wa-lista-cabecera { padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--linea); }
  .wa-lista .chats { overflow-y: auto; border: 0; border-radius: 0; }
  .wa-lista .cargar-mas { margin: .5rem 1rem; }
  .wa-chat, .wa--con-chat .wa-chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 0; min-height: 0; }
  .wa-chat > .cargando, .wa-chat > .vacio { padding: 2rem; }
  .wa-chat-cabecera { padding: .75rem 1rem; border-bottom: 1px solid var(--linea); }
  .wa-volver { display: none; }
  .wa-estado { padding: .5rem 1rem; border-bottom: 1px solid var(--linea); }
  .wa-mensajes { overflow-y: auto; border-radius: 0; padding: 1rem 1.25rem; }
  .wa-escribir { position: static; margin: .75rem 1rem .25rem; box-shadow: none; }
  .wa-chat > .error-form { margin: 0 1rem; }
  .wa-ayuda { padding: 0 1rem .75rem; }
  body[data-seccion="whatsapp"] main { max-width: 1400px; padding-bottom: 1rem; }
}
.clase-lado { align-items: center; }

/* ---------- Panel 1.12: exámenes, cobros con recibo y vehículos ---------- */
.cifras-ficha small { font-size: .75rem; }
.alumno-fijo { display: grid; gap: .1rem; }
.alumno-fijo .texto-2 { font-size: .875rem; }
.tabla-cobros { overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.tabla-cobros ol, .cobros-ficha { list-style: none; padding: 0; }
.tabla-cobros li + li { border-top: 1px solid var(--linea); }
.tabla-cobros-cabecera { display: none; }
.fila-cobro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; padding: .75rem 1rem; font-size: .875rem; font-variant-numeric: tabular-nums; }
.fila-cobro-alumno, .fila-cobro-concepto, .fila-cobro-acciones { grid-column: 1 / -1; }
.fila-cobro-alumno a { color: var(--tinta); font-weight: 700; font-size: 1rem; text-decoration: none; }
.fila-cobro-alumno a:hover { text-decoration: underline; }
.fila-cobro-importe { font-size: 1rem; }
.fila-cobro-acciones { display: flex; gap: 1rem; }
.fila-cobro-acciones .enlace { min-height: 32px; padding: 0; }
.fila-cobro [data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--tinta-2); }
.fila-cobro--anulado .fila-cobro-importe, .fila-cobro--anulado .fila-cobro-alumno a { text-decoration: line-through; color: var(--tinta-3); }
.cobros-ficha .fila-cobro { padding-inline: 0; border-top: 1px solid var(--linea); }
.cobros-ficha .fila-cobro:first-child { border-top: 0; }
@media (min-width: 900px) {
  .tabla-cobros .tabla-cobros-cabecera, .tabla-cobros .fila-cobro { display: grid; grid-template-columns: 3rem 5.5rem minmax(0, 1.3fr) minmax(0, 1.6fr) 6.5rem 6.5rem 8.5rem; align-items: center; gap: 1rem; }
  .tabla-cobros-cabecera { padding: .625rem 1rem; background: var(--fondo); border-bottom: 1px solid var(--linea); font-size: .8125rem; font-weight: 700; color: var(--tinta-2); }
  .tabla-cobros .fila-cobro-alumno, .tabla-cobros .fila-cobro-concepto, .tabla-cobros .fila-cobro-acciones { grid-column: auto; }
  .tabla-cobros .fila-cobro [data-etiqueta]::before { content: none; }
  .tabla-cobros .fila-cobro-importe { text-align: right; }
  .tabla-cobros .fila-cobro-acciones { justify-content: flex-end; }
}
.tarjeta-boton { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.matricula { display: inline-grid; place-items: center; min-width: 5.5rem; padding: .3rem .5rem; border: 2px solid var(--carbon); border-radius: 4px; background: #fff; font-weight: 800; font-size: .875rem; letter-spacing: .04em; white-space: nowrap; }

/* El recibo: solo existe mientras se imprime. */
.recibo { display: none; }
@media print {
  html.imprimiendo body { background: #fff; padding: 0; display: block; }
  html.imprimiendo body > *:not(#recibo-impresion) { display: none !important; }
  html.imprimiendo .recibo { display: block; max-width: 17cm; margin: 0 auto; padding: 1cm 0; color: #000; font-size: 11pt; }
  .recibo-cabecera { display: flex; justify-content: space-between; gap: 1cm; padding-bottom: .5cm; border-bottom: 1px solid #000; }
  .recibo-datos { margin-top: .2cm; white-space: pre-line; font-size: 10pt; }
  .recibo-numero { display: grid; justify-items: end; gap: .1cm; text-align: right; }
  .recibo h1 { margin: .9cm 0 .5cm; font-size: 18pt; }
  .recibo-texto { font-size: 12pt; line-height: 1.6; }
  .recibo-detalle { display: grid; gap: .2cm; margin: .7cm 0; }
  .recibo-detalle div { display: flex; justify-content: space-between; border-bottom: 1px dotted #999; padding-bottom: .1cm; }
  .recibo-anulado { font-weight: 700; }
  .recibo-firma { margin: 1.8cm 0 0 auto; width: 6cm; padding-top: .2cm; border-top: 1px solid #000; text-align: center; font-size: 10pt; }
  .recibo-pie { margin-top: 1.2cm; font-size: 9pt; color: #333; }
}
.cifras-ficha { display: flex; flex-wrap: wrap; }
.cifras-ficha > div { flex: 1 1 9rem; }

/* ---------- Etapa C (1.13): campana, ayuda, interesados, primeros pasos e informe del mes ---------- */
.boton-icono { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 50%; background: #fff; color: var(--tinta-2); cursor: pointer; }
.boton-icono:hover { background: var(--tinte); color: var(--carbon); }
.boton-icono .icono { width: 21px; height: 21px; }
.boton-icono .insignia { position: absolute; top: -5px; right: -6px; }
.hoja-campana { max-width: 26rem; }
@media (min-width: 900px) {
  .hoja-campana { margin: 64px 1.5rem auto auto; max-height: calc(100dvh - 88px); padding-bottom: 1.25rem; border-radius: var(--radio-m); box-shadow: 0 20px 50px rgb(42 33 28 / .25); }
  .hoja-campana::backdrop { background: transparent; }
}
.campana-lista { list-style: none; padding: 0; margin: 0; display: grid; }
.campana-item { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .5rem .25rem; border-bottom: 1px solid var(--linea); color: var(--tinta); font-weight: 650; text-decoration: none; }
.campana-item:hover { background: var(--fondo); }
.campana-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); }
.campana-item--aviso .campana-punto { background: var(--ambar); }
.campana-item--critico .campana-punto { background: var(--critico-texto); }
.campana-vacia { padding: 1rem .25rem; color: var(--tinta-2); }
.campana-permiso { display: grid; gap: .5rem; justify-items: start; margin-top: 1rem; }
.campana-permiso .texto-2 { font-size: .875rem; }

.ayuda-pasos { display: grid; gap: .625rem; margin: 1rem 0; padding-left: 1.4rem; }
.ayuda-pasos li { padding-left: .25rem; line-height: 1.5; }
.ayuda-pasos li::marker { color: var(--primario); font-weight: 800; }

.boton-chico { min-height: 40px; padding: .35rem .8rem; font-size: .875rem; }
.boton-chico .icono { width: 18px; height: 18px; }
.lista-interesados { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.interesado { display: grid; gap: .5rem; padding: 1rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-m); }
.interesado-quien { display: flex; align-items: center; gap: .75rem; }
.interesado-quien a { color: inherit; }
.interesado-datos { font-size: .875rem; }
.interesado-acciones { align-items: center; gap: .5rem .75rem; }
.interesados > .texto-2 .icono { width: 16px; height: 16px; vertical-align: -3px; }
@media (min-width: 760px) {
  .interesado { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: center; column-gap: 1.25rem; }
  .interesado-acciones { grid-column: 1 / -1; }
}

.primeros-pasos { border-color: var(--tinte-2); background: linear-gradient(var(--fondo), #fff); }
@media (min-width: 1000px) { .resumen .primeros-pasos { grid-column: 1 / -1; } }
.primeros-pasos-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.primeros-pasos progress { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--tinte); overflow: hidden; accent-color: var(--primario); }
.primeros-pasos progress::-webkit-progress-bar { background: var(--tinte); }
.primeros-pasos progress::-webkit-progress-value { background: var(--primario); border-radius: 999px; }
.primeros-pasos progress::-moz-progress-bar { background: var(--primario); border-radius: 999px; }
.pasos-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
@media (min-width: 760px) { .pasos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.pasos-lista li { display: flex; align-items: center; gap: .75rem; min-height: 52px; }
.pasos-lista a { color: inherit; text-decoration: none; }
.pasos-lista a strong { color: var(--primario-oscuro); text-decoration: underline; text-underline-offset: 3px; }
.paso-marca { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 2px solid var(--borde-campo); border-radius: 50%; }
.paso-hecho .paso-marca { border-color: var(--bien-texto); background: var(--bien-fondo); color: var(--bien-texto); }
.paso-hecho .paso-marca .icono { width: 16px; height: 16px; stroke-width: 3; }
.paso-hecho strong { color: var(--tinta-2); font-weight: 600; text-decoration: line-through; }

.informe-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.informe-titulo h2 { font-size: 1.25rem; }
.informe .bloque .tabla-scroll td, .informe .bloque .tabla-scroll thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .seccion.informe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .informe-titulo { grid-column: 1 / -1; } }
@media print {
  html.imprimiendo-informe body { display: block; padding: 0; background: #fff; }
  html.imprimiendo-informe .barra, html.imprimiendo-informe .navegacion, html.imprimiendo-informe .saltar,
  html.imprimiendo-informe .cabecera-seccion, html.imprimiendo-informe .pestanas, html.imprimiendo-informe .no-imprimir,
  html.imprimiendo-informe dialog, html.imprimiendo-informe .aviso-flotante { display: none !important; }
  html.imprimiendo-informe main { max-width: none; padding: 0; }
  html.imprimiendo-informe .seccion.informe { display: block; }
  html.imprimiendo-informe .informe .bloque { margin-top: .5cm; break-inside: avoid; border-color: #bbb; }
  html.imprimiendo-informe .informe .cifras-ficha { border-color: #bbb; background: #bbb; }
}
/* En el móvil, con la ayuda y la campana arriba, el nombre y el consumo van en su propia línea (el consumo, siempre a la vista). */
@media (max-width: 599px) {
  .barra { flex-wrap: wrap; row-gap: .375rem; }
  .barra-cliente { order: 9; flex-basis: 100%; }
  .barra #ayuda { margin-left: auto; }
}

/* Formulario de inscripción (1.13): página pública, con la marca de cada autoescuela; también va dentro de su web. */
.pagina-inscripcion { min-height: 100dvh; background: var(--tinte-marca, var(--fondo)); }
.inscripcion { max-width: 34rem; padding: 1.25rem 1rem 2rem; }
.inscripcion-hoja { display: grid; gap: 1rem; padding: 1.5rem 1.25rem; background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--primario); border-radius: var(--radio-m); }
.inscripcion-cabecera { display: flex; align-items: center; gap: .75rem; }
.inscripcion-logo { max-height: 48px; max-width: 160px; object-fit: contain; }
.inscripcion-escuela { font-weight: 760; color: var(--tinta-2); }
.inscripcion-hoja h1 { font-size: 1.625rem; letter-spacing: -0.02em; line-height: 1.15; }
.inscripcion-hoja .boton-principal { width: 100%; }
.inscripcion-hecha:focus { outline: none; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check--largo { align-items: flex-start; line-height: 1.4; }
.check--largo input { flex: none; margin-top: .05rem; }
.check--largo a { color: var(--primario-oscuro); }

/* WhatsApp por QR (Inicio) */
.whatsapp-qr-estado { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.whatsapp-qr-estado--ok strong { color: var(--bien-texto); }
.whatsapp-qr-estado--no strong { color: var(--critico-texto); }
.whatsapp-qr-dialogo { display: grid; gap: .75rem; }
.whatsapp-qr-dialogo ol { padding-left: 1.25rem; display: grid; gap: .25rem; }
.whatsapp-qr-imagen { display: grid; place-items: center; min-height: 264px; }
.whatsapp-qr-imagen img { width: min(264px, 70vw); height: auto; image-rendering: pixelated; background: #fff; padding: 8px; border: 1px solid var(--linea); border-radius: var(--radio-m); }

/* ==========================================================================
   Pulido visual (10-oct-2026): profundidad, movimiento y detalles de carretera.
   No cambia funciones. Todo lo que se mueve respeta prefers-reduced-motion.
   ========================================================================== */
:root {
  --sombra-1: 0 1px 2px rgb(42 33 28 / .04), 0 6px 18px -12px rgb(42 33 28 / .24);
  --sombra-2: 0 2px 6px rgb(42 33 28 / .06), 0 28px 56px -26px rgb(42 33 28 / .5);
  --curva: cubic-bezier(.2, .8, .2, 1);
  --anillo: 0 0 0 4px color-mix(in srgb, var(--primario) 22%, transparent);
  --linea-suave: #efe2d4;
}
/* Un brillo cálido arriba a la derecha, con el color de la autoescuela. */
.pagina-panel { background: radial-gradient(56rem 26rem at 100% 0, color-mix(in srgb, var(--tinte-marca, #ffe4c8) 75%, transparent), transparent 70%) no-repeat, var(--fondo); }

/* Botones: se levantan un poco al pasar y se hunden al tocar. */
.boton { transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s, translate .2s var(--curva); }
.boton-principal { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 8px 18px -12px color-mix(in srgb, var(--primario) 85%, transparent); }
.boton-secundario { background: #fff; }
.boton-secundario:hover { border-color: #d9c2ad; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton:hover:not(:disabled) { translate: 0 -1px; }
  .boton-principal:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 12px 22px -12px color-mix(in srgb, var(--primario-oscuro) 90%, transparent); }
}
.boton:active:not(:disabled) { translate: 0 1px; }
.chip { transition: background-color .15s, border-color .15s, color .15s; }

/* Campos: un anillo suave del color de la marca al escribir. */
.campo input, .campo select, .campo textarea { transition: border-color .15s, box-shadow .2s; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--primario); box-shadow: var(--anillo); }

/* La barra de arriba: translúcida, y con sombra cuando bajas. */
.barra { background: rgb(255 255 255 / .86); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: rgb(234 220 205 / .85); }
.barra .logo svg { transition: rotate .45s var(--curva); }
.barra .logo:hover svg { rotate: -8deg; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .barra { animation: barra-sombra linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
    @keyframes barra-sombra { to { box-shadow: 0 12px 26px -20px rgb(42 33 28 / .55); } }
  }
}
.consumo-siempre strong { color: var(--primario-oscuro); }

/* El menú. En la computadora, la sección elegida es una pastilla oscura con el icono del color de la marca. */
@media (min-width: 900px) {
  .navegacion a { transition: background-color .15s, color .15s, box-shadow .2s; }
  .navegacion a .icono { transition: color .15s, translate .25s var(--curva); }
  .navegacion a:hover .icono { translate: 2px 0; }
  .navegacion a[aria-current="page"], .navegacion .nav-admin[aria-current="page"] { background: var(--carbon); color: #fff; box-shadow: var(--sombra-1); }
  .navegacion a[aria-current="page"] .icono { color: color-mix(in srgb, var(--primario) 45%, #ffd9a8); }
  .navegacion a[aria-current="page"] .insignia { background: #fff; color: var(--carbon); }
  .nav-rapidas button { transition: border-color .15s, color .15s, background-color .15s, translate .2s var(--curva); }
  .nav-rapidas button:hover { background: #fff; translate: 0 -1px; }
}
/* En el móvil, la barra de abajo: translúcida y con la sección elegida resaltada detrás del icono. */
@media (max-width: 899px) {
  .navegacion { background: rgb(255 255 255 / .9); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); box-shadow: 0 -10px 26px -20px rgb(42 33 28 / .45); }
  .navegacion a[aria-current="page"]::before, .nav-mas[aria-current="page"]::before { content: ""; position: absolute; z-index: -1; top: 7px; left: 50%; width: 3.4rem; height: 1.9rem; translate: -50% 0; border-radius: 999px; background: var(--tinte-marca, var(--tinte)); }
  .nav-mas { position: relative; }
}

/* Al cambiar de sección, la pantalla entra suave (una vez; no al filtrar ni al cambiar de mes). */
@media (prefers-reduced-motion: no-preference) {
  main[data-anima] > * { animation: vista-entra .45s var(--curva) both; }
  main[data-anima] > :nth-child(2) { animation-delay: .04s; }
  main[data-anima] > :nth-child(3) { animation-delay: .08s; }
  main[data-anima] > :nth-child(n+4) { animation-delay: .12s; }
  main[data-anima] .resumen > * { animation: vista-entra .5s var(--curva) both; }
  main[data-anima] .resumen > :nth-child(2) { animation-delay: .05s; }
  main[data-anima] .resumen > :nth-child(3) { animation-delay: .1s; }
  main[data-anima] .resumen > :nth-child(4) { animation-delay: .15s; }
  main[data-anima] .resumen > :nth-child(n+5) { animation-delay: .2s; }
  @keyframes vista-entra { from { opacity: 0; translate: 0 10px; } }
}

/* Tarjetas: un poco de profundidad. */
.bloque, .estado, .datos, .vacio, .chats, .dia, .cifras-ficha, .tabla-alumnos, .tabla-cobros, .interesado { border-color: var(--linea-suave); box-shadow: var(--sombra-1); }
.selector-mes { box-shadow: var(--sombra-1); border-color: var(--linea-suave); }
.selector-mes button { transition: background-color .15s; }
.cabecera-seccion h1 { font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2rem); font-weight: 820; letter-spacing: -0.03em; }
.saludo { margin: -.75rem 0 1.25rem; color: var(--tinta-2); font-size: 1.0625rem; }
.saludo strong { color: var(--tinta); }

/* Pestañas de sección: la raya de la elegida entra deslizándose. */
.pestanas a { position: relative; border-bottom: 0; transition: color .15s; }
.pestanas a::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primario); scale: 0 1; transition: scale .3s var(--curva); }
.pestanas a:hover { color: var(--carbon); }
.pestanas a[aria-current="page"]::after { scale: 1 1; }

/* El asistente está respondiendo: un latido verde al entrar (tres veces, después queda quieto). */
.estado--activo .estado-icono { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .estado--activo .estado-icono::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: latido 2.4s ease-out 3; }
  @keyframes latido { 0% { box-shadow: 0 0 0 0 rgb(0 99 0 / .35); } 75%, 100% { box-shadow: 0 0 0 14px rgb(0 99 0 / 0); } }
}

/* Primeros pasos: la barra de progreso del color de la marca, con degradado. */
.primeros-pasos progress { height: 10px; background: var(--tinte); }
.primeros-pasos progress::-webkit-progress-bar { background: var(--tinte); border-radius: 999px; }
.primeros-pasos progress::-webkit-progress-value { background: linear-gradient(90deg, var(--ambar), var(--primario)); border-radius: 999px; }
.primeros-pasos progress::-moz-progress-bar { background: linear-gradient(90deg, var(--ambar), var(--primario)); border-radius: 999px; }

/* Diálogos y hojas: entran con suavidad, con el fondo difuminado. */
.dialogo, .hoja { box-shadow: var(--sombra-2); }
.dialogo { border-radius: 18px; }
.dialogo::backdrop, .hoja::backdrop { background: rgb(29 22 18 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] { animation: dialogo-entra .3s var(--curva) both; }
  .hoja[open] { animation: hoja-sube .38s var(--curva) both; }
  .dialogo[open]::backdrop, .hoja[open]::backdrop { animation: fondo-entra .25s ease both; }
  @keyframes dialogo-entra { from { opacity: 0; translate: 0 14px; scale: .97; } }
  @keyframes hoja-sube { from { translate: 0 100%; } }
  @keyframes fondo-entra { from { opacity: 0; } }
}

/* El aviso que aparece abajo ("Clase reservada…"): sube y se queda. */
.aviso-flotante { padding: .8rem 1.1rem; border-radius: 12px; box-shadow: var(--sombra-2); }
@media (prefers-reduced-motion: no-preference) {
  .aviso-flotante:not([hidden]) { animation: tostada .38s var(--curva) both; }
  @keyframes tostada { from { opacity: 0; translate: 0 1rem; } }
}

/* Cargando: una carretera chiquita con sus líneas avanzando. */
.cargando { display: flex; align-items: center; gap: .75rem; }
.cargando::before { content: ""; flex: none; width: 3.25rem; height: .5rem; border-radius: 999px; background: repeating-linear-gradient(90deg, #fff4e4 0 .55rem, transparent .55rem 1rem) 0 50% / 1rem 2px repeat-x, var(--carbon); }
@media (prefers-reduced-motion: no-preference) {
  .cargando::before { animation: carga .5s linear infinite; }
  @keyframes carga { to { background-position: 1rem 50%, 0 0; } }
}

/* Vacío: un cono de obra, para que se vea que falta algo por cargar. */
.vacio { position: relative; padding-left: 4.75rem; min-height: 5.25rem; }
.vacio::before { content: ""; position: absolute; left: 1.25rem; top: 1.35rem; width: 2.5rem; height: 2.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M20 6h8l9 32H11z' fill='%23ea580c'/%3E%3Cpath d='M17.6 15h12.8l1.8 6.5H15.8zM14.8 26h18.4l1.9 6.5H12.9z' fill='%23fff8f1'/%3E%3Crect x='6' y='38' width='36' height='5' rx='2' fill='%232a211c'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 479px) { .vacio { padding-left: 1.25rem; padding-top: 4.25rem; } .vacio::before { top: 1.25rem; } }

/* Gráficos: las barras crecen al aparecer. */
@media (prefers-reduced-motion: no-preference) {
  .grafico .marca { transform-box: fill-box; transform-origin: 50% 100%; animation: barra-crece .7s var(--curva) both; }
  @keyframes barra-crece { from { scale: 1 0; } }
}

/* Tablas: la fila bajo el ratón se marca. */
@media (hover: hover) {
  .tabla-alumnos tbody tr, .tabla-cobros tbody tr, .tabla-admin tbody tr { transition: background-color .12s; }
  .tabla-alumnos tbody tr:hover, .tabla-cobros tbody tr:hover, .tabla-admin tbody tr:hover { background: color-mix(in srgb, var(--tinte) 55%, #fff); }
}

/* Insignias del menú: aparecen con un saltito. */
@media (prefers-reduced-motion: no-preference) {
  .insignia:not([hidden]) { animation: insignia .4s var(--curva) both; }
  @keyframes insignia { from { scale: .4; opacity: 0; } }
}

/* Cifras que cuentan hasta su valor (Inicio). */
[data-contar] { font-variant-numeric: tabular-nums; }

/* Acceso: la marca, con la carretera al atardecer y dos mensajes que llegan de noche. */
main.acceso { max-width: none; padding: 0; }
.pagina-acceso { background: radial-gradient(48rem 30rem at 0% 0%, #ffe9d1, transparent 70%) no-repeat, var(--fondo); }
.acceso-form .formulario .boton-principal { min-height: 52px; font-size: 1.0625rem; }
@media (min-width: 900px) {
  .acceso-marca { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-start; gap: 2.5rem; background: #1d1612; color: #f7e3cf; }
  .acceso-marca .logo { color: #fff; }
  .acceso-lema { position: relative; z-index: 1; display: grid; gap: 1.25rem; margin-top: clamp(1rem, 6vh, 4rem); }
  .acceso-marca .lema { color: #fff; max-width: 12ch; }
  .acceso-marca .lema + p { margin-top: 0; color: #f7e3cf; }
  .acceso-escena { position: absolute; inset: 0; z-index: -1; }
  .acceso-cielo { position: absolute; inset: 0 0 34% 0; background: linear-gradient(180deg, #1d1612 0%, #2a1c15 45%, #6a2f16 74%, #c25a17 92%, #f5a524 100%); }
  .acceso-sol { position: absolute; left: 56%; bottom: -6rem; width: 13rem; height: 13rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, #ffe3a8 0 30%, #f9b343 45%, rgb(245 165 36 / 0) 70%); }
  .acceso-suelo { position: absolute; inset: 66% 0 0 0; background: linear-gradient(180deg, #1a1310, #241b16); perspective: 18rem; perspective-origin: 56% 0; overflow: hidden; }
  .acceso-calzada { position: absolute; left: 56%; top: 0; width: 34rem; height: 260%; translate: -50% 0; transform-origin: 50% 0; transform: rotateX(72deg); background: linear-gradient(90deg, #f1e3d4 0 1.2%, #3a2e27 1.2% 98.8%, #f1e3d4 98.8%); }
  .acceso-marcas { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.6%; translate: -50% 0; background: repeating-linear-gradient(180deg, #ffd38a 0 70px, transparent 70px 140px); }
  .acceso-burbuja { position: absolute; max-width: 17rem; padding: .6rem .8rem .45rem; border-radius: 14px; font-size: .9375rem; line-height: 1.35; color: var(--tinta); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .8); }
  .acceso-burbuja time { display: block; text-align: right; font-size: .6875rem; color: var(--tinta-3); }
  .acceso-burbuja--alumno { right: 9%; bottom: 27%; background: #dcf6d3; border-top-right-radius: 4px; }
  .acceso-burbuja--asistente { right: 24%; bottom: 12%; background: #fff; border-top-left-radius: 4px; border-left: 3px solid var(--primario); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .acceso-burbuja { animation: burbuja-llega .6s var(--curva) both; }
  .acceso-burbuja--alumno { animation-delay: .5s; }
  .acceso-burbuja--asistente { animation-delay: 1.6s; }
  .acceso-marcas { animation: marcas-vienen 1.1s linear 4; }
  .acceso-lema { animation: vista-entra .7s var(--curva) both; }
  @keyframes burbuja-llega { from { opacity: 0; translate: 0 14px; scale: .96; } }
  @keyframes marcas-vienen { to { background-position: 0 140px; } }
  @keyframes vista-entra { from { opacity: 0; translate: 0 10px; } }
}

/* Hoy: cada dato en su baldosa, sin huecos al final de la fila. */
.hoy-datos { gap: .6rem; background: none; border: 0; border-radius: 0; overflow: visible; }
.hoy-datos div { border: 1px solid var(--linea-suave); border-radius: 12px; background: #fffaf5; transition: border-color .15s, box-shadow .2s, translate .2s var(--curva); }
.hoy-datos div:has(dd a) { position: relative; }
.hoy-datos div:has(dd a):hover { border-color: color-mix(in srgb, var(--primario) 45%, var(--linea)); box-shadow: var(--sombra-1); }
.hoy-datos dd a { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--primario) 45%, transparent); }
/* Toda la baldosa se puede tocar (el enlace cubre la baldosa entera). */
.hoy-datos div:has(dd a) dd a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.hoy-datos div:has(dd a) dd a:focus-visible { outline: none; }
.hoy-datos div:has(dd a:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }

/* WhatsApp: el fondo del chat con dibujitos de carretera (como en la web), y el vacío con su icono. */
.wa-mensajes, .wa-chat:has(.wa-vacio) { background-color: #f3eadf; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232a211c' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36 26 18l6 18zM16 36h20M22.5 28h7'/%3E%3Ccircle cx='86' cy='26' r='10'/%3E%3Ccircle cx='86' cy='26' r='3'/%3E%3Cpath d='M86 29v7M77 23l6 2M95 23l-6 2'/%3E%3Cpath d='M26 82h10M44 82h10M62 82h10'/%3E%3Crect x='86' y='74' width='16' height='16' rx='3'/%3E%3Cpath d='M91 78v8h6'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-vacio-icono { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: .5rem; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); }
.wa-vacio-icono .icono { width: 42px; height: 42px; stroke-width: 1.6; color: var(--primario); }
.wa-vacio p:first-of-type { color: var(--tinta); font-weight: 720; font-size: 1.0625rem; }
.chat-item { transition: background-color .12s; }
.wa-escribir { transition: border-color .15s, box-shadow .2s; }
.wa-escribir:focus-within { border-color: var(--primario); box-shadow: var(--anillo); }
.wa-escribir textarea:focus-visible { outline: none; }
@media (min-width: 1000px) { .wa { box-shadow: var(--sombra-1); border-color: var(--linea-suave); } }

/* ==========================================================================
   Panel 2 (11-oct-2026): calendario, cambios y avisos, WhatsApp con «¿Quién contesta?» y más detalle en todo.
   Movimiento corto y solo donde explica algo (lo que cambia, lo que se abre). Todo quieto con «reducir movimiento».
   ========================================================================== */

/* ---------- Piezas comunes ---------- */
/* Control segmentado: una opción elegida en blanco sobre una canaleta cálida. Sirve con botones (aria-pressed) o
   con radios de verdad (se manejan con las flechas del teclado). */
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #f3e9df; box-shadow: inset 0 1px 2px rgb(42 33 28 / .08); }
.segmentos > button, .segmentos > label { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .35rem .85rem; border: 0; border-radius: 9px; background: transparent; color: var(--tinta-2); font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .2s; }
.segmentos > button:hover, .segmentos > label:hover { color: var(--carbon); background: rgb(255 255 255 / .6); }
.segmentos > button[aria-pressed="true"], .segmentos > label:has(input:checked) { background: #fff; color: var(--carbon); box-shadow: 0 1px 2px rgb(42 33 28 / .12), 0 4px 10px -6px rgb(42 33 28 / .35); }
.segmentos > label input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmentos > label:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 1px; }
.segmentos .icono { width: 16px; height: 16px; }
.segmentos--chico > label, .segmentos--chico > button { min-height: 32px; padding: .25rem .65rem; font-size: .8125rem; }

.pestanas--iconos a { display: inline-flex; align-items: center; gap: .45rem; }
.pestanas--iconos .icono { width: 18px; height: 18px; color: var(--tinta-3); transition: color .15s; }
.pestanas--iconos a[aria-current="page"] .icono, .pestanas--iconos a:hover .icono { color: var(--primario); }

.campo-buscar--icono { position: relative; display: block; }
.campo-buscar--icono > .icono { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none; }
.campo-buscar--icono input { padding-left: 2.6rem; transition: border-color .15s, box-shadow .2s; }
.campo-buscar--icono input:focus-visible { outline: none; border-color: var(--primario); box-shadow: var(--anillo); }

.chip { display: inline-flex; align-items: center; gap: .35rem; }
.chip .icono { width: 15px; height: 15px; }
.marca-conv { display: inline-flex; align-items: center; gap: .2rem; }
.marca-conv .icono { width: 12px; height: 12px; stroke-width: 2.4; }
.marca-conv--bot { background: color-mix(in srgb, var(--primario) 12%, #fff); color: var(--primario-oscuro); }
.boton-chico .icono { width: 16px; height: 16px; }

/* Avatares con color propio (siempre el mismo para cada persona). */
.avatar { transition: scale .2s var(--curva); }
.avatar--t0 { background: #fde2cf; color: #8a3a0f; }
.avatar--t1 { background: #dbe7f6; color: #1f4f94; }
.avatar--t2 { background: #d5efe8; color: #0f5e57; }
.avatar--t3 { background: #e9e0fb; color: #5b21b6; }
.avatar--t4 { background: #f7ead0; color: #7a5100; }
.avatar--t5 { background: #f8dcef; color: #9d1a7a; }
.avatar--t6 { background: #e3efd3; color: #3d6310; }
.avatar--t7 { background: #e7e5e4; color: #44403c; }
.avatar--color { background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 72%, #000); box-shadow: inset 0 0 0 2px var(--c); }

/* Casilla con forma de pastilla (filtros del calendario y de cambios). */
.cal-opcion { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .25rem .75rem .25rem .6rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; user-select: none; transition: border-color .15s, background-color .15s, color .15s; }
.cal-opcion input { width: 16px; height: 16px; margin: 0; accent-color: var(--primario); }
.cal-opcion:hover { border-color: #d6bea8; color: var(--carbon); }
.cal-opcion:has(input:checked) { border-color: color-mix(in srgb, var(--primario) 40%, var(--linea)); background: color-mix(in srgb, var(--primario) 7%, #fff); color: var(--carbon); }
.cal-opcion:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }

.cal-punto { flex: none; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c, var(--primario)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--primario)) 22%, #fff); }

/* Las clases en cualquier lista: las que pasaron, apagadas; las próximas, con su franja. */
.clase--pasada:not(.clase--reprogramar) .clase-hora, .clase--pasada:not(.clase--reprogramar) .clase-texto { opacity: .55; }
.clase--pasada .clase-texto a { color: var(--tinta-2); }
.clase--proxima { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primario) 70%, #fff); padding-left: .6rem; }
@media (hover: hover) {
  .clases .clase { transition: background-color .12s; border-radius: var(--radio-s); }
  .clases .clase:hover { background: color-mix(in srgb, var(--tinte) 45%, #fff); }
}

/* ---------- Agenda: pendientes (por reprogramar y lista de espera) ---------- */
.pendientes { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 1000px) { .pendientes:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pendientes details.bloque > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; list-style: none; }
.pendientes details.bloque > summary::-webkit-details-marker { display: none; }
.pendientes details.bloque > summary::after { content: ""; width: .55rem; height: .55rem; margin-right: .2rem; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); rotate: 45deg; translate: 0 -2px; transition: rotate .2s var(--curva); }
.pendientes details[open].bloque > summary::after { rotate: 225deg; translate: 0 2px; }
.pendiente-icono { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #fff; color: var(--aviso-texto); box-shadow: var(--sombra-1); }
.lista-espera .pendiente-icono { color: #1f4f94; }
.pendiente-titulo { display: grid; min-width: 0; }
.pendiente-titulo h2 { font-size: 1rem; }
.pendiente-titulo small { font-size: .8125rem; color: var(--tinta-2); }
.pendiente-cuenta { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; background: var(--aviso-texto); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.lista-espera { background: linear-gradient(#f4f8fd, #fff); border-color: #d6e2f2; }
.lista-espera .pendiente-cuenta { background: #1f4f94; }

/* ---------- Calendario ---------- */
.cal-raiz { --pm: 1.15px; transition: opacity .2s; }
.cal-raiz[aria-busy="true"] { opacity: .55; pointer-events: none; }
.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cal-nav .boton-chico { min-height: 40px; }
.cal-nav [data-ir="hoy"][aria-pressed="true"] { border-color: color-mix(in srgb, var(--primario) 45%, var(--linea)); color: var(--primario-oscuro); }
.cal-titulo { margin: 0 .35rem; font-size: clamp(1.125rem, .6vw + .95rem, 1.375rem); font-weight: 800; letter-spacing: -0.02em; }
.cal-titulo::first-letter { text-transform: uppercase; }
.cal-fecha { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 50%; background: #fff; color: var(--tinta-2); cursor: pointer; overflow: hidden; transition: background-color .15s, color .15s; }
.cal-fecha:hover { background: var(--tinte); color: var(--carbon); }
.cal-fecha:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }
.cal-fecha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cal-modos { margin-left: auto; }
.cal-reservar { min-height: 44px; }
@media (max-width: 719px) {
  .cal-modos { margin-left: 0; }
  .cal-reservar { flex: 1; }
}

.cal-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .5rem; }
.cal-profes { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-profe { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .25rem .4rem .25rem .6rem; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--linea)); border-radius: 999px; background: color-mix(in srgb, var(--c) 8%, #fff); font: inherit; font-size: .8125rem; font-weight: 720; color: var(--tinta); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, translate .2s var(--curva); }
.cal-profe small { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #fff; color: color-mix(in srgb, var(--c) 75%, #000); font-size: .75rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.cal-profe:hover { border-color: var(--c); }
.cal-profe[aria-pressed="false"] { background: #fff; border-color: var(--linea); color: var(--tinta-3); }
.cal-profe[aria-pressed="false"] .cal-punto { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.cal-profe[aria-pressed="false"] small { color: var(--tinta-3); background: var(--fondo); }
.cal-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }

.cal-cifras { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .25rem 0 .85rem; }
.cal-cifras li { display: inline-flex; align-items: baseline; gap: .3rem; padding: .25rem .7rem; border: 1px solid var(--linea-suave); border-radius: 999px; background: #fff; font-size: .8125rem; color: var(--tinta-2); }
.cal-cifras strong { font-size: .9375rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cal-cifra--apagada strong { color: var(--tinta-3); }
.cal-cifra--viva strong { color: var(--primario-oscuro); }
.cal-cifra--libre strong { color: var(--bien-texto); }
.cal-cifra--aviso { background: var(--aviso-fondo); border-color: #f0d9a0; }
.cal-cifra--aviso strong { color: var(--aviso-texto); }
.cal-cifra--critico { background: var(--critico-fondo); border-color: #f1c4c4; }
.cal-cifra--critico strong { color: var(--critico-texto); }

/* La rejilla de horas: una columna por día (y un carril por profesor) o una por profesor. */
.cal-rejilla { --cols: 7; overflow: clip; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.cal-cabeceras, .cal-cuerpo { display: grid; grid-template-columns: 3.75rem repeat(var(--cols), minmax(0, 1fr)); }
.cal-cabeceras { z-index: 8; border-bottom: 1px solid var(--linea-suave); background: rgb(255 255 255 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 900px) { .cal-cabeceras { position: sticky; top: 61px; } }
.cal-esquina { border-right: 1px solid var(--linea-suave); }
.cal-cab { display: grid; justify-items: center; align-content: start; gap: .15rem; min-width: 0; padding: .45rem .3rem .4rem; border-left: 1px solid var(--linea-suave); text-align: center; }
.cal-cab:nth-child(2) { border-left: 0; }
.cal-cab--pasado .cal-cab-boton, .cal-cab--pasado .cal-cab-info { opacity: .55; }
.cal-cab--hoy { background: color-mix(in srgb, var(--primario) 6%, #fff); }
.cal-cab-boton { display: grid; justify-items: center; padding: .15rem .55rem; border: 0; border-radius: 10px; background: none; color: var(--tinta); font: inherit; cursor: pointer; transition: background-color .15s; }
.cal-cab-boton:hover { background: var(--tinte); }
.cal-cab-semana { font-size: .75rem; font-weight: 720; color: var(--tinta-3); }
.cal-cab-num { display: grid; place-items: center; min-width: 2.15rem; height: 2.15rem; border-radius: 50%; font-size: 1.25rem; font-weight: 820; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color .2s; }
.cal-cab--hoy .cal-cab-num { background: var(--primario); color: var(--sobre-primario); box-shadow: 0 6px 14px -8px var(--primario); }
.cal-cab-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .4rem; font-size: .6875rem; line-height: 1.3; color: var(--tinta-2); }
.cal-cab-libres { font-weight: 750; color: var(--bien-texto); }
.cal-cab-carriles { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; width: 100%; height: 3px; margin-top: .3rem; }
.cal-cab-carriles span { border-radius: 2px; background: var(--c); }
.cal-cab-profe { display: flex; align-items: center; gap: .55rem; max-width: 100%; padding: .2rem .45rem; border-radius: 12px; color: var(--tinta); text-decoration: none; transition: background-color .15s; }
.cal-cab-profe:hover { background: color-mix(in srgb, var(--c) 9%, #fff); }
.cal-cab-profe .avatar { width: 38px; height: 38px; font-size: .8125rem; }
.cal-cab-profe-texto { display: grid; min-width: 0; text-align: left; }
.cal-cab-profe-texto strong { overflow: hidden; font-size: .9375rem; white-space: nowrap; text-overflow: ellipsis; }
.cal-cab-profe-texto small { font-size: .75rem; color: var(--tinta-2); }
.cal-cab .aviso-mini { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-cuerpo { position: relative; isolation: isolate; height: calc(var(--alto) * var(--pm)); }
.cal-horas { position: relative; border-right: 1px solid var(--linea-suave); background: #fffcf9; }
.cal-hora { position: absolute; right: .5rem; top: calc(var(--y) * var(--pm)); translate: 0 -50%; font-size: .75rem; font-weight: 650; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cal-hora[data-y="0"] { translate: 0 3px; }
.cal-columnas { position: relative; grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-columns: subgrid; }
.cal-raya { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--y) * var(--pm)); border-top: 1px solid #efe4d8; pointer-events: none; }
.cal-raya--media { border-top: 1px dashed #f3eae0; }
.cal-col { position: relative; display: grid; grid-template-columns: repeat(var(--carriles, 1), minmax(0, 1fr)); min-width: 0; border-left: 1px solid var(--linea-suave); }
.cal-col:first-of-type { border-left: 0; }
.cal-col--pasado { background: #fbf8f5; }
.cal-col--hoy { background: color-mix(in srgb, var(--primario) 4%, #fff); }
/* Un carril por profesor: rayado suave fuera de su horario; su horario, en blanco con un toque de su color. */
.cal-carril { position: relative; min-width: 0; background: repeating-linear-gradient(135deg, rgb(42 33 28 / .035) 0 6px, transparent 6px 12px); container-type: inline-size; }
.cal-carril + .cal-carril { box-shadow: inset 1px 0 0 #f1e7dc; }
.cal-turno { position: absolute; inset-inline: 0; top: calc(var(--y) * var(--pm)); height: calc(var(--h) * var(--pm)); background: color-mix(in srgb, var(--c) 3%, #fff); }
.cal-col--hoy .cal-turno { background: color-mix(in srgb, var(--c) 4%, #fffaf3); }
.cal-col--pasado .cal-turno { background: #fdfbf9; }
.cal-turno--teorica { background: color-mix(in srgb, var(--c) 8%, #fff); }
.cal-ausencia { position: absolute; z-index: 2; inset-inline: 2px; top: calc(var(--y) * var(--pm) + 1px); height: calc(var(--h) * var(--pm) - 2px); display: flex; justify-content: center; padding-top: .5rem; border: 1px solid #f0d9a0; border-radius: 8px; background: repeating-linear-gradient(-45deg, #fff6df 0 8px, #fdebc2 8px 16px); color: var(--aviso-texto); font-size: .6875rem; font-weight: 800; text-align: center; overflow: hidden; }
.cal-ausencia span { align-self: flex-start; max-width: 100%; padding: .1rem .45rem; border-radius: 999px; background: #fff8e8; }
@container (max-width: 90px) { .cal-ausencia span { writing-mode: vertical-rl; rotate: 180deg; padding: .45rem .1rem; } }
.cal-cierre { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, rgb(194 65 12 / .08) 0 10px, rgb(194 65 12 / .03) 10px 20px), rgb(255 248 241 / .82); }
.cal-cierre span { writing-mode: vertical-rl; rotate: 180deg; padding: .75rem .3rem; border-radius: 999px; background: #fff; color: var(--primario-oscuro); font-size: .8125rem; font-weight: 800; box-shadow: var(--sombra-1); }

/* Horario libre: un hueco punteado; al pasar por encima, «+ 10:30» con el color del profesor. */
.cal-libre { position: absolute; z-index: 2; inset-inline: 3px; top: calc(var(--y) * var(--pm) + 2px); height: calc(var(--h) * var(--pm) - 4px); display: flex; align-items: flex-start; padding: .2rem .35rem; border: 1px dashed color-mix(in srgb, var(--c) 32%, #e2d2c3); border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--c) 70%, #2a211c); font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .2s; }
.cal-libre-texto { display: inline-flex; align-items: center; gap: .2rem; opacity: 0; transition: opacity .15s; }
.cal-libre-texto .icono { width: 13px; height: 13px; stroke-width: 2.6; }
.cal-libre-texto small { font-weight: 600; }
@container (min-width: 120px) { .cal-libre-texto { opacity: .55; } }
.cal-libre:hover, .cal-libre:focus-visible { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: 0 6px 16px -10px var(--c); outline: none; }
.cal-libre:hover .cal-libre-texto, .cal-libre:focus-visible .cal-libre-texto { opacity: 1; }
.cal-libre--teorica { border-color: color-mix(in srgb, var(--c) 45%, #e2d2c3); }

/* La clase: el color del profesor muy aclarado y su franja. */
.cal-ev { --fondo: color-mix(in srgb, var(--c) 14%, #fff); position: absolute; z-index: 3; top: calc(var(--y) * var(--pm) + 1px); left: calc(var(--sub, 0) / var(--subs, 1) * (100% - 6px) + 3px); width: calc((100% - 6px) / var(--subs, 1) - 2px); height: calc(var(--h) * var(--pm) - 2px); display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: .2rem .35rem .2rem .45rem; border: 0; border-left: 4px solid var(--c); border-radius: 7px; background: var(--fondo); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; user-select: none; container-type: inline-size; box-shadow: 0 1px 0 rgb(42 33 28 / .05), 0 6px 14px -12px rgb(42 33 28 / .5); transition: box-shadow .2s, translate .2s var(--curva), filter .25s, opacity .25s; }
.cal-ev-hora { font-size: .6875rem; font-weight: 760; line-height: 1.25; color: color-mix(in srgb, var(--c) 70%, #000); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-ev-fin { font-weight: 500; opacity: .85; }
.cal-ev-nombre { max-width: 100%; overflow: hidden; font-size: .8125rem; font-weight: 720; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.cal-ev-corto { display: none; font-size: .75rem; font-weight: 800; letter-spacing: .02em; }
.cal-ev-marca { margin-top: auto; max-width: 100%; overflow: hidden; padding: .05rem .4rem; border-radius: 999px; background: #fff; color: var(--tinta-2); font-size: .625rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.cal-ev-marca--aviso { color: var(--aviso-texto); }
.cal-ev-marca--critico { color: var(--critico-texto); }
.cal-ev-marca--proxima { background: var(--c); color: #fff; }
.cal-ev-bot { position: absolute; top: 3px; right: 3px; color: color-mix(in srgb, var(--c) 75%, #000); opacity: .75; }
.cal-ev-bot .icono { width: 13px; height: 13px; stroke-width: 2; }
@container (max-width: 76px) {
  .cal-ev-fin, .cal-ev-nombre, .cal-ev-marca, .cal-ev-bot { display: none; }
  .cal-ev-corto { display: block; }
}
.cal-ev--corta .cal-ev-marca { display: none; }
.cal-ev--corta .cal-ev-nombre { font-size: .75rem; }
.cal-ev--pasada { filter: grayscale(.9); opacity: .55; box-shadow: none; }
.cal-ev--proxima { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c), 0 10px 22px -12px var(--c); }
.cal-ev--encurso { background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 28%, #fff) var(--avance, 0%), var(--fondo) var(--avance, 0%)); box-shadow: 0 0 0 2px var(--c), 0 10px 22px -12px var(--c); }
.cal-ev--reprogramar { border-left-color: var(--ambar); background: repeating-linear-gradient(-45deg, #fff4d9 0 7px, #ffe9bd 7px 14px); }
.cal-ev--reprogramar .cal-ev-hora { color: var(--aviso-texto); }
.cal-ev--cancelada { opacity: .55; border-left-style: dashed; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.cal-ev--cancelada .cal-ev-nombre { text-decoration: line-through; }
.cal-ev--falta .cal-ev-nombre { color: var(--critico-texto); }
.cal-ev--teorica { --fondo: color-mix(in srgb, var(--c) 20%, #fff); border-left-width: 6px; }
.cal-ev[data-movible] { cursor: grab; }
.cal-ev:focus-visible { z-index: 7; outline: 3px solid var(--c); outline-offset: 1px; }
.cal-ev--abierta { z-index: 7; box-shadow: 0 0 0 2px var(--c), 0 14px 28px -12px rgb(42 33 28 / .6); }
@media (hover: hover) {
  .cal-ev:hover { z-index: 6; translate: 0 -1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 12px 24px -12px rgb(42 33 28 / .55); }
  .cal-ev--pasada:hover { filter: grayscale(.35); opacity: .85; }
}
.cal-ev--origen { opacity: .3; filter: grayscale(.5); }
.cal--arrastrando, .cal--arrastrando .cal-ev { cursor: grabbing; }
.cal--arrastrando .cal-libre { visibility: hidden; }

/* La hora de ahora: una línea del color de la marca, con su hora en el margen. */
.cal-ahora { position: absolute; z-index: 5; inset-inline: 0; top: calc(var(--y) * var(--pm)); height: 0; border-top: 2px solid var(--primario); pointer-events: none; }
.cal-ahora::before { content: ""; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--primario); box-shadow: 0 0 0 3px #fff; }
.cal-ahora-hora { position: absolute; z-index: 5; right: 4px; top: calc(var(--y) * var(--pm)); translate: 0 -50%; padding: .05rem .4rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: .6875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cal-ahora::before { animation: latido-ahora 2.4s ease-out 3; }
  @keyframes latido-ahora { 0% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px color-mix(in srgb, var(--primario) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 12px transparent; } }
}

/* Al arrastrar: la clase va con el ratón y los horarios libres adonde se puede llevar se encienden. */
.cal-fantasma { position: fixed; z-index: 60; left: 0; top: 0; display: grid; gap: .1rem; padding: .45rem .65rem; border-left: 4px solid var(--c); border-radius: 10px; background: #fff; box-shadow: 0 18px 36px -14px rgb(42 33 28 / .65), 0 0 0 1px rgb(42 33 28 / .06); font-size: .8125rem; pointer-events: none; rotate: -2deg; }
.cal-fantasma-a { font-size: .75rem; font-weight: 650; color: var(--tinta-2); }
.cal-fantasma--ok { box-shadow: 0 18px 36px -14px rgb(42 33 28 / .65), 0 0 0 2px var(--c); }
.cal-fantasma--ok .cal-fantasma-a { font-weight: 800; color: var(--bien-texto); }
.cal-destino { position: absolute; z-index: 4; inset-inline: 3px; top: calc(var(--y) * var(--pm) + 2px); height: calc(var(--h) * var(--pm) - 4px); display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--c) 55%, #fff); border-radius: 8px; background: color-mix(in srgb, var(--c) 8%, rgb(255 255 255 / .7)); color: color-mix(in srgb, var(--c) 80%, #000); font-size: .6875rem; font-weight: 800; pointer-events: auto; }
.cal-destino--sobre { border-style: solid; background: color-mix(in srgb, var(--c) 22%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .cal-destino { animation: destino-entra .2s ease-out both; }
  @keyframes destino-entra { from { opacity: 0; scale: .9; } }
}

/* Detalle de una clase (al tocarla) y vistazo (al pasar el ratón). */
.cal-pop { position: absolute; z-index: 45; left: var(--pop-x, 1rem); top: var(--pop-y, 5rem); display: grid; gap: .45rem; width: min(22rem, calc(100vw - 2rem)); padding: 1rem 1.1rem 1.05rem; border-top: 5px solid var(--c); border-radius: 16px; background: #fff; box-shadow: var(--sombra-2), 0 0 0 1px rgb(42 33 28 / .06); }
.cal-pop:focus { outline: none; }
.cal-pop:focus-visible { box-shadow: var(--sombra-2), 0 0 0 3px var(--primario); }
.cal-pop-cerrar { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-2); cursor: pointer; transition: background-color .15s; }
.cal-pop-cerrar:hover { background: var(--tinte); color: var(--carbon); }
.cal-pop-cerrar .icono { width: 18px; height: 18px; }
.cal-pop-tipo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-right: 2.25rem; font-size: .75rem; font-weight: 750; }
.cal-pop-tipo > span:first-child { padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 72%, #000); }
.cal-pop-momento { padding: .1rem .5rem; border-radius: 999px; background: var(--fondo); color: var(--tinta-2); }
.cal-pop-momento--futura { background: var(--bien-fondo); color: var(--bien-texto); }
.cal-pop-momento--encurso { background: var(--primario); color: var(--sobre-primario); }
.cal-pop h3 { padding-right: 1.5rem; font-size: 1.25rem; line-height: 1.2; }
.cal-pop h3 a { color: var(--tinta); text-decoration: none; }
.cal-pop h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cal-pop h3 small { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 650; color: var(--bien-texto); }
.cal-pop-fila { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; color: var(--tinta-2); }
.cal-pop-fila .icono { width: 18px; height: 18px; color: var(--tinta-3); }
.cal-pop-fila .cal-punto { margin-inline: .2rem .15rem; }
.cal-pop-origen .icono { color: var(--primario); }
.cal-pop-nota { padding: .5rem .7rem; border-radius: 10px; background: var(--fondo); font-size: .875rem; }
.cal-pop .aviso { margin: 0; padding: .55rem .75rem; font-size: .875rem; }
.cal-pop-alumnos { display: grid; gap: .1rem; max-height: 14rem; overflow-y: auto; list-style: none; padding: 0; margin: .15rem 0 0; }
.cal-pop-alumnos li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .3rem 0; border-bottom: 1px solid var(--linea-suave); font-size: .9375rem; }
.cal-pop-alumnos li > a:first-child { flex: 1; color: var(--tinta); font-weight: 650; }
.cal-pop-alumnos .enlace { min-height: 30px; padding: 0; }
.cal-pop-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; padding-top: .75rem; border-top: 1px solid var(--linea-suave); }
.cal-pop--hoja { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 82dvh; overflow-y: auto; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px -12px rgb(42 33 28 / .45); }
@media (prefers-reduced-motion: no-preference) {
  .cal-pop { animation: pop-entra .22s var(--curva) both; }
  .cal-pop--hoja { animation: hoja-sube .3s var(--curva) both; }
  @keyframes pop-entra { from { opacity: 0; scale: .97; translate: 0 6px; } }
}
.cal-tip { position: absolute; z-index: 44; left: var(--pop-x); top: var(--pop-y); display: grid; gap: .1rem; max-width: 17rem; padding: .55rem .75rem; border-left: 4px solid var(--c, var(--primario)); border-radius: 10px; background: var(--carbon); color: #fff; font-size: .8125rem; line-height: 1.35; pointer-events: none; box-shadow: 0 14px 28px -12px rgb(0 0 0 / .6); }
.cal-tip strong { font-size: .875rem; }
.cal-tip-profe { display: flex; align-items: center; gap: .4rem; }
.cal-tip .cal-punto { box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
.cal-tip-pie { color: #f7e3cf; font-size: .75rem; }
.cal-tip-lista { display: grid; gap: .1rem; list-style: none; padding: 0; margin: .25rem 0; }
.cal-tip-lista li { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.cal-tip-lista .cal-tip-pasada { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .cal-tip { animation: tip-entra .14s ease-out both; }
  @keyframes tip-entra { from { opacity: 0; translate: 0 4px; } }
}

.cal-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; list-style: none; padding: 0; margin: .85rem 0 0; font-size: .8125rem; color: var(--tinta-2); }
.cal-leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.cal-muestra { width: 1.5rem; height: .95rem; border-left: 3px solid #1f4f94; border-radius: 4px; background: #dfe8f4; }
.cal-muestra--pasada { filter: grayscale(.9); opacity: .55; }
.cal-muestra--encurso { background: linear-gradient(#bccde6 50%, #dfe8f4 50%); box-shadow: 0 0 0 2px #1f4f94; }
.cal-muestra--reprogramar { border-left-color: var(--ambar); background: repeating-linear-gradient(-45deg, #fff4d9 0 4px, #ffe1a1 4px 8px); }
.cal-muestra--libre { border: 1px dashed #b9a28f; background: transparent; }
.cal-muestra--fuera { border: 0; background: repeating-linear-gradient(135deg, rgb(42 33 28 / .12) 0 3px, transparent 3px 6px), #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.cal-leyenda-truco { margin-left: auto; color: var(--tinta-3); }

/* Día con muchos profesores en pantallas chicas: se desliza de costado (y la cabecera no se queda fija arriba). */
@media (max-width: 899px) {
  .cal-vista--dia { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radio-m); }
  .cal-rejilla--dia { min-width: calc(3.75rem + var(--cols) * 9.5rem); }
  .cal-rejilla--dia .cal-cabeceras, .cal-rejilla--dia .cal-cuerpo { grid-template-columns: 3.75rem repeat(var(--cols), minmax(9.5rem, 1fr)); }
}
.cal-rejilla--dia .cal-cab { padding: .55rem .4rem; justify-items: start; }
/* En la semana, los huecos libres más suaves (son muchos); en el día, bien a la vista. */
.cal-rejilla--semana .cal-libre { border-color: color-mix(in srgb, var(--c) 16%, #eee2d5); }

/* El mes: todas las clases en su día; las pasadas, apagadas. */
.mes { overflow: clip; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.mes-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--linea-suave); background: #fffaf5; }
.mes-semana span { padding: .5rem .65rem; font-size: .75rem; font-weight: 750; color: var(--tinta-3); }
.mes-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(7.5rem, auto); }
.mes-dia { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .4rem .45rem .45rem; border-right: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); transition: background-color .15s; }
.mes-dia:nth-child(7n) { border-right: 0; }
.mes-ir { position: absolute; z-index: 1; inset: 0; }
.mes-ir:focus-visible { outline: 3px solid var(--primario); outline-offset: -3px; }
@media (hover: hover) { .mes-dia:hover { background: color-mix(in srgb, var(--tinte) 45%, #fff); } }
.mes-num { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mes-dia--hoy { background: color-mix(in srgb, var(--primario) 5%, #fff); }
.mes-dia--hoy .mes-num { background: var(--primario); color: var(--sobre-primario); box-shadow: 0 6px 14px -8px var(--primario); }
.mes-dia--fuera { background: #fcf9f6; }
.mes-dia--fuera > :not(.mes-ir) { opacity: .4; }
.mes-dia--pasado .mes-num { color: var(--tinta-3); }
.mes-dia--cerrado { background: repeating-linear-gradient(-45deg, rgb(194 65 12 / .06) 0 8px, transparent 8px 16px); }
.mes-cerrado { font-size: .6875rem; font-weight: 800; color: var(--primario-oscuro); }
.mes-evs { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.mes-ev { display: flex; align-items: baseline; gap: .3rem; min-width: 0; overflow: hidden; padding: .05rem .35rem; border-left: 3px solid var(--c); border-radius: 5px; background: color-mix(in srgb, var(--c) 14%, #fff); font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
.mes-ev-hora { font-weight: 780; color: color-mix(in srgb, var(--c) 72%, #000); font-variant-numeric: tabular-nums; }
.mes-ev-nombre { overflow: hidden; text-overflow: ellipsis; }
.mes-ev--pasada { filter: grayscale(.95); opacity: .55; }
.mes-ev--encurso { box-shadow: inset 0 0 0 1px var(--c); }
.mes-ev--reprogramar { border-left-color: var(--ambar); background: #fff1cf; }
.mes-ev--cancelada { opacity: .45; text-decoration: line-through; }
.mes-mas { padding-left: .35rem; font-size: .6875rem; font-weight: 750; color: var(--tinta-2); }
.mes-pie { display: flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .2rem; font-size: .6875rem; }
.mes-ocupacion { flex: 1; height: 4px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primario) 75%, #fff) var(--ocupacion, 0%), var(--tinte) var(--ocupacion, 0%)); }
.mes-dia--pasado .mes-ocupacion { filter: grayscale(1); opacity: .6; }
.mes-libres { font-weight: 750; color: var(--bien-texto); white-space: nowrap; }
@media (max-width: 719px) {
  .mes-rejilla { grid-auto-rows: minmax(4.75rem, auto); }
  .mes-dia { padding: .25rem .2rem; }
  .mes-num { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
  .mes-ev { padding: 0 .15rem; border-left-width: 2px; font-size: .5625rem; }
  .mes-ev-nombre, .mes-libres, .mes-cerrado { display: none; }
  .mes-mas { padding-left: .1rem; font-size: .5625rem; }
}

/* La semana en el móvil: una tarjeta por día. */
.cal-lista { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.cal-lista-dia { padding: .6rem .75rem .75rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.cal-lista-dia--hoy { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario), var(--sombra-1); }
.cal-lista-dia--pasado { background: #fcf9f6; }
.cal-lista-cab { display: flex; align-items: center; gap: .6rem; }
.cal-lista-titulo { display: flex; align-items: center; gap: .4rem; padding: .15rem .25rem; border: 0; border-radius: 10px; background: none; color: var(--tinta); font: inherit; cursor: pointer; }
.cal-lista-dia--hoy .cal-cab-num { background: var(--primario); color: var(--sobre-primario); }
.cal-lista-libres { margin-left: auto; padding: .2rem .7rem; border: 1px dashed var(--bien-texto); border-radius: 999px; background: var(--bien-fondo); color: var(--bien-texto); font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; }
.cal-lista-clases { display: grid; gap: .35rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.cal-item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-left: 4px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: filter .2s, opacity .2s; }
.cal-item.cal-ev--pasada { filter: grayscale(.9); opacity: .55; }
.cal-item.cal-ev--encurso { box-shadow: 0 0 0 2px var(--c); }
.cal-item.cal-ev--reprogramar { border-left-color: var(--ambar); background: #fff4d9; }
.cal-item.cal-ev--cancelada { opacity: .5; text-decoration: line-through; }
.cal-item-hora { display: grid; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-item-hora small { font-size: .75rem; font-weight: 500; color: var(--tinta-3); }
.cal-item-texto { display: grid; min-width: 0; }
.cal-item-texto strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-item-texto small { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--tinta-2); }
body[data-seccion="agenda"] main { max-width: 1500px; }

/* ---------- Cambios y avisos: la línea de tiempo ---------- */
.act-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.act-tarjeta { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.act-tarjeta h2 { font-size: .9375rem; font-weight: 720; color: var(--tinta-2); }
.act-barras { display: grid; gap: .45rem; margin: 0; }
.act-barras div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.act-barras dt { font-size: .875rem; color: var(--tinta-2); }
.act-barras dd { display: flex; align-items: center; gap: .55rem; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.act-barras dd > span:first-child { min-width: 1.75rem; }
.act-barra { height: 8px; inline-size: 0; border-radius: 999px; }
.act-barra--bien { background: #2f8f4e; }
.act-barra--aviso { background: var(--ambar); }
.act-barra--critico { background: #d14b4b; }
.act-tarjeta--asistente { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
.act-tarjeta--asistente h2 { grid-column: 1 / -1; }
.act-anillo { position: relative; display: grid; place-items: center; width: 5.75rem; height: 5.75rem; margin: 0; }
.act-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.act-anillo-pista { fill: none; stroke: var(--tinte); stroke-width: 6; }
.act-anillo-valor { fill: none; stroke: var(--primario); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--pct, 0) 100; }
.act-anillo span { font-size: .875rem; font-weight: 700; color: var(--tinta-2); }
.act-anillo strong { font-size: 1.5rem; font-weight: 840; color: var(--tinta); font-variant-numeric: tabular-nums; }
.act-canales { display: grid; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.act-canales li { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--tinta-2); }
.act-canales .icono { width: 22px; height: 22px; color: #1e6b34; }
.act-canales li + li .icono { color: #1f4f94; }
.act-canales strong { margin-right: .25rem; font-size: 1.25rem; font-weight: 820; color: var(--tinta); font-variant-numeric: tabular-nums; }
.act-estado-avisos { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (prefers-reduced-motion: no-preference) {
  .act-barra { animation: barra-ancho .9s var(--curva) both; }
  .act-anillo-valor { animation: anillo-entra 1.1s var(--curva) both; }
  @keyframes barra-ancho { from { inline-size: 0; } }
  @keyframes anillo-entra { from { stroke-dasharray: 0 100; } }
}
.act-herramientas { display: grid; gap: .75rem; margin-bottom: .5rem; }
.act-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.act-filtros .campo-buscar { flex: 1 1 16rem; max-width: 26rem; margin-left: auto; }
.act-filtros .campo-buscar input { max-width: none; }
.act-linea { display: grid; gap: 1.25rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.act-dia-titulo { position: sticky; z-index: 3; top: 72px; display: flex; align-items: baseline; gap: .6rem; width: fit-content; padding: .3rem .8rem; border-radius: 999px; background: var(--carbon); color: #fff; font-size: .875rem; box-shadow: 0 6px 16px -10px rgb(42 33 28 / .6); }
.act-dia-titulo small { font-weight: 600; color: #f7e3cf; }
@media (max-width: 899px) { .act-dia-titulo { top: 7.5rem; } }
.act-items { position: relative; display: grid; gap: .55rem; list-style: none; padding: 0; margin: .65rem 0 0; }
/* La línea que une los cambios del día: discontinua, como la raya del medio de la carretera. */
.act-items::before { content: ""; position: absolute; left: calc(1.2rem - 1px); top: .75rem; bottom: .75rem; width: 2px; background: repeating-linear-gradient(to bottom, #e2d0bd 0 8px, transparent 8px 15px); }
.act-item { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: .75rem; }
.act-icono { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: var(--tinta-2); box-shadow: 0 0 0 4px var(--fondo), var(--sombra-1); }
.act-icono .icono { width: 18px; height: 18px; }
.act-item--bien .act-icono { background: var(--bien-fondo); color: var(--bien-texto); }
.act-item--aviso .act-icono { background: var(--aviso-fondo); color: var(--aviso-texto); }
.act-item--critico .act-icono { background: var(--critico-fondo); color: var(--critico-texto); }
.act-item--azul .act-icono { background: #e3ebf7; color: #1f4f94; }
.act-item--violeta .act-icono { background: #efe7fd; color: #6d28d9; }
.act-item--salida.act-item--whatsapp .act-icono { background: #dcf6d3; color: #1e6b34; }
.act-item--salida.act-item--email .act-icono { background: #e3ebf7; color: #1f4f94; }
.act-cuerpo { min-width: 0; padding: .65rem .9rem .75rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: 14px; box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .2s, translate .2s var(--curva); }
@media (hover: hover) {
  .act-item:hover .act-cuerpo { border-color: color-mix(in srgb, var(--primario) 28%, var(--linea)); box-shadow: 0 2px 6px rgb(42 33 28 / .05), 0 14px 26px -18px rgb(42 33 28 / .55); translate: 2px 0; }
}
.act-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; }
.act-cabeza strong { font-size: .9375rem; }
.act-cabeza time { margin-left: auto; font-size: .8125rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.act-quien { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border: 1px solid var(--linea-suave); border-radius: 999px; background: var(--fondo); font-size: .75rem; font-weight: 700; color: var(--tinta-2); }
.act-quien .icono { width: 13px; height: 13px; }
.act-quien--asistente { border-color: color-mix(in srgb, var(--primario) 25%, #fff); background: color-mix(in srgb, var(--primario) 9%, #fff); color: var(--primario-oscuro); }
.act-detalle { margin-top: .2rem; font-size: .9375rem; }
.act-enlaces { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem; font-size: .8125rem; font-weight: 700; }
.act-enlaces a { text-underline-offset: 3px; }
.act-avisos { display: grid; gap: .4rem; list-style: none; padding: .55rem 0 0; margin: .6rem 0 0; border-top: 1px dashed var(--linea); }
.act-aviso { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: .1rem .5rem; font-size: .8125rem; }
.act-aviso-canal .icono { width: 17px; height: 17px; color: #1e6b34; }
.act-aviso--email .act-aviso-canal .icono { color: #1f4f94; }
.act-aviso-texto { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; color: var(--tinta-2); }
.act-aviso .act-mensaje, .act-aviso .act-motivo { grid-column: 2; }
.act-estado { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; }
.act-estado .icono { width: 12px; height: 12px; stroke-width: 2.6; }
.act-estado--bien { background: var(--bien-fondo); color: var(--bien-texto); }
.act-estado--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.act-estado--critico { background: var(--critico-fondo); color: var(--critico-texto); }
.act-estado--neutro { background: var(--fondo); color: var(--tinta-2); }
.act-mensaje { margin-top: .3rem; }
.act-mensaje summary { display: inline-flex; align-items: center; gap: .3rem; color: var(--primario-oscuro); font-size: .8125rem; font-weight: 700; cursor: pointer; list-style: none; }
.act-mensaje summary::-webkit-details-marker { display: none; }
.act-mensaje summary::before { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; transition: rotate .2s var(--curva); }
.act-mensaje[open] summary::before { rotate: 45deg; }
.act-mensaje p { max-width: 46ch; margin-top: .4rem; padding: .5rem .75rem; border-radius: 12px 12px 12px 4px; background: #f3eadf; font-size: .875rem; white-space: pre-line; }
.act-aviso--whatsapp .act-mensaje p, .act-item--whatsapp .act-mensaje p { border-radius: 12px 12px 4px 12px; background: #dcf6d3; }
.act-motivo { margin-top: .2rem; font-size: .8125rem; color: var(--critico-texto); }

/* ---------- WhatsApp: quién contesta, lo de hoy y la conexión ---------- */
.wa-pagina { display: grid; gap: 1rem; }
.wa-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.wa-cabecera-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.wa-cabecera h1 { font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2rem); font-weight: 820; letter-spacing: -0.03em; }
.wa-vivo { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .65rem; border: 1px solid var(--linea-suave); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 800; box-shadow: var(--sombra-1); }
.wa-led { position: relative; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-3); }
.wa-vivo--asistente { border-color: #bfe3c6; background: var(--bien-fondo); color: var(--bien-texto); }
.wa-vivo--asistente .wa-led { background: #1f9d48; }
.wa-vivo--equipo { border-color: #f0d9a0; background: var(--aviso-fondo); color: var(--aviso-texto); }
.wa-vivo--equipo .wa-led { background: var(--ambar); }
.wa-vivo--nadie { border-color: #f1c4c4; background: var(--critico-fondo); color: var(--critico-texto); }
.wa-vivo--nadie .wa-led { background: #d14b4b; }
@media (prefers-reduced-motion: no-preference) {
  .wa-vivo--asistente .wa-led::after, .wa-conexion-estado--ok .wa-led::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: led 2s ease-out 4; }
  @keyframes led { from { box-shadow: 0 0 0 0 rgb(31 157 72 / .5); } to { box-shadow: 0 0 0 9px rgb(31 157 72 / 0); } }
}
.wa-mando { display: grid; gap: .75rem; }
@media (min-width: 1150px) { .wa-mando { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(13rem, .62fr); align-items: stretch; } }
.wa-quien, .wa-cifras, .wa-conexion { margin: 0; padding: .9rem 1rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.wa-quien { display: grid; gap: .65rem; min-width: 0; }
.wa-quien legend { float: left; width: 100%; padding: 0; margin-bottom: .1rem; font-size: 1rem; font-weight: 760; }
.wa-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; clear: both; }
@media (max-width: 640px) { .wa-modos { grid-template-columns: minmax(0, 1fr); } }
.wa-modo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; padding: .65rem .7rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--fondo); cursor: pointer; transition: border-color .15s, background-color .2s, color .2s, box-shadow .25s, translate .2s var(--curva); }
.wa-modo input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wa-modo-icono { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: #fff; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea-suave); transition: background-color .2s, color .2s; }
.wa-modo-texto { display: grid; min-width: 0; }
.wa-modo-texto strong { font-size: .9375rem; }
.wa-modo-texto small { font-size: .75rem; line-height: 1.3; color: var(--tinta-2); }
@media (hover: hover) { .wa-modo:hover:not(:has(input:checked)) { border-color: #d6bea8; background: #fff; translate: 0 -1px; } }
.wa-modo:has(input:checked) { border-color: var(--carbon); background: var(--carbon); color: #fff; box-shadow: 0 12px 24px -14px rgb(42 33 28 / .85); }
.wa-modo:has(input:checked) small { color: #f7e3cf; }
.wa-modo--asistente:has(input:checked) .wa-modo-icono { background: #1f9d48; color: #fff; box-shadow: none; }
.wa-modo--fuera_horario:has(input:checked) .wa-modo-icono { background: #1f4f94; color: #fff; box-shadow: none; }
.wa-modo--equipo:has(input:checked) .wa-modo-icono { background: var(--ambar); color: var(--carbon); box-shadow: none; }
.wa-modo:has(input:focus-visible) { outline: 3px solid var(--primario); outline-offset: 2px; }
.wa-modo:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.wa-quien-ahora { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.wa-quien-ahora .icono { width: 18px; height: 18px; margin-top: 1px; color: var(--primario); }
.wa-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .6rem; }
.wa-cifra { display: grid; gap: .05rem; align-content: start; padding: .55rem .7rem; border-radius: 12px; background: var(--fondo); transition: background-color .15s; }
.wa-cifra:hover { background: var(--tinte); }
.wa-cifra dt { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: var(--tinta-2); }
.wa-cifra-icono { display: inline-grid; }
.wa-cifra-icono .icono { width: 15px; height: 15px; }
.wa-cifra dd { font-size: 1.625rem; font-weight: 820; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wa-cifra small { font-size: .6875rem; color: var(--tinta-3); }
.wa-cifra--respondidos .wa-cifra-icono { color: #1f9d48; }
.wa-cifra--activas .wa-cifra-icono { color: #1f4f94; }
.wa-cifra--paraEquipo .wa-cifra-icono { color: var(--aviso-texto); }
.wa-cifra--sinLeer .wa-cifra-icono { color: var(--primario); }
@media (prefers-reduced-motion: no-preference) {
  .wa-cifra-cambia { animation: cifra-cambia .7s var(--curva); }
  @keyframes cifra-cambia { 0% { color: var(--primario); scale: 1.15; } }
}
.wa-conexion { display: grid; gap: .6rem; align-content: start; }
.wa-conexion-titulo { display: flex; align-items: center; gap: .55rem; }
.wa-conexion-titulo > span { display: grid; min-width: 0; }
.wa-conexion-titulo small { font-size: .75rem; color: var(--tinta-2); }
.wa-conexion-titulo .icono { color: var(--tinta-2); }
.wa-conexion-estado { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; font-weight: 800; }
.wa-conexion-estado--ok { color: var(--bien-texto); }
.wa-conexion-estado--ok .wa-led { background: #1f9d48; }
.wa-conexion-estado--no { color: var(--critico-texto); }
.wa-conexion-estado--no .wa-led { background: #d14b4b; }
.wa-conexion .boton { justify-self: start; }
@media (max-width: 999px) { .wa-pagina--con-chat .wa-mando, .wa-pagina--con-chat .wa-cabecera { display: none; } }
@media (min-width: 1000px) { .wa { height: calc(100dvh - 7.5rem); } }

/* Un chat: quién contesta en él, respuestas rápidas y burbujas con su autor. */
.wa-atiende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0; padding: 0; border: 0; }
.wa-atiende legend { float: left; padding: 0; font-size: .8125rem; font-weight: 750; color: var(--tinta-2); }
.wa-estado-linea .icono { width: 17px; height: 17px; flex: none; }
.wa-estado-linea--asistente .icono { color: #1f9d48; }
.wa-estado-linea--equipo .icono { color: var(--aviso-texto); }
.wa-estado-linea--nadie .icono { color: var(--critico-texto); }
.wa-chat-quien p { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.wa-escribir { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; }
.wa-rapidas-boton { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--tinta-2); cursor: pointer; transition: background-color .15s, color .15s; }
.wa-rapidas-boton:hover, .wa-rapidas-boton[aria-expanded="true"] { background: var(--tinte); color: var(--carbon); }
.wa-rapidas { position: absolute; z-index: 6; left: .5rem; bottom: calc(100% + .5rem); display: grid; gap: 2px; width: min(22rem, calc(100% - 1rem)); padding: .35rem; border-radius: 14px; background: #fff; box-shadow: var(--sombra-2), 0 0 0 1px var(--linea-suave); }
.wa-rapidas button { padding: .5rem .7rem; border: 0; border-radius: 9px; background: none; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.wa-rapidas button:hover, .wa-rapidas button:focus-visible { background: var(--tinte); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .wa-rapidas:not([hidden]) { animation: pop-entra .18s var(--curva) both; }
  .wa-mensajes .chat .burbuja:last-child { animation: burbuja-entra .32s var(--curva) both; }
  @keyframes burbuja-entra { from { opacity: 0; translate: 0 8px; scale: .98; } }
}
.burbuja { box-shadow: 0 1px 1px rgb(42 33 28 / .08); }
.burbuja-autor { display: inline-flex; align-items: center; gap: .25rem; }
.burbuja-autor .icono { width: 13px; height: 13px; }
.burbuja--asistente .burbuja-autor { color: var(--primario-oscuro); }
.burbuja--equipo .burbuja-autor { color: var(--bien-texto); }
.burbuja-hecho { margin-left: .3rem; font-size: .6875rem; color: #3b82c4; }
@media (hover: hover) { .chat-item:hover .avatar { scale: 1.06; } }
.chat-item:hover { background: color-mix(in srgb, var(--tinte) 50%, #fff); }

/* ---------- Inicio: primeros pasos en chico, la agenda de hoy, baldosas con icono y quién contesta ---------- */
.primeros-pasos { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem 1.25rem; padding: 1rem 1.25rem; }
.primeros-pasos[hidden] { display: none; }
.pasos-anillo { position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0; }
.pasos-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.pasos-anillo span { font-size: .8125rem; font-weight: 700; color: var(--tinta-2); }
.pasos-anillo strong { font-size: 1.375rem; font-weight: 840; color: var(--tinta); }
.pasos-cuerpo { display: grid; gap: .6rem; min-width: 0; padding-right: 2rem; }
.pasos-cuerpo h2 { font-size: 1.0625rem; }
.pasos-faltan { display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .pasos-faltan { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.pasos-faltan a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid var(--linea-suave); border-radius: 12px; background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .2s, translate .2s var(--curva); }
.pasos-faltan a:hover { border-color: color-mix(in srgb, var(--primario) 40%, var(--linea)); box-shadow: var(--sombra-1); translate: 0 -1px; }
.pasos-faltan strong { color: var(--primario-oscuro); }
.pasos-faltan small { font-size: .8125rem; color: var(--tinta-2); }
.pasos-icono { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: color-mix(in srgb, var(--primario) 10%, #fff); color: var(--primario); }
.pasos-ir { color: var(--tinta-3); transition: translate .2s var(--curva), color .15s; }
.pasos-faltan a:hover .pasos-ir { translate: 3px 0; color: var(--primario); }
.pasos-hechos summary { display: inline-flex; align-items: center; min-height: 32px; font-size: .875rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.pasos-hechos ul { display: flex; flex-wrap: wrap; gap: .35rem .5rem; list-style: none; padding: 0; margin: .35rem 0 0; }
.pasos-hechos li { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem .15rem .4rem; border-radius: 999px; background: var(--bien-fondo); color: var(--bien-texto); font-size: .8125rem; font-weight: 650; }
.pasos-hechos .icono { width: 14px; height: 14px; stroke-width: 3; }
.pasos-ocultar { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-3); cursor: pointer; }
.pasos-ocultar:hover { background: var(--tinte); color: var(--carbon); }
.pasos-ocultar .icono { width: 16px; height: 16px; }
@media (max-width: 559px) { .primeros-pasos { grid-template-columns: minmax(0, 1fr); } .pasos-anillo { width: 3.75rem; height: 3.75rem; } }

.hoy-agenda { gap: .85rem; }
@media (min-width: 1000px) { .resumen .hoy-agenda { grid-column: 1 / -1; } }
.hoy-agenda-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.hoy-agenda-cabecera .enlace-seccion { min-height: 32px; }
.hoy-agenda-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.hoy-proxima { display: flex; align-items: center; gap: .75rem; padding: .45rem .9rem .45rem .45rem; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--primario)) 10%, #fff); box-shadow: inset 4px 0 0 var(--c, var(--primario)); }
.hoy-proxima > span:last-child { display: grid; line-height: 1.3; }
.hoy-proxima small { font-size: .75rem; font-weight: 700; color: var(--tinta-2); }
.hoy-proxima-hora { display: grid; place-items: center; min-width: 4rem; padding: .35rem .5rem; border-radius: 10px; background: var(--c, var(--primario)); color: #fff; font-size: 1.125rem; font-weight: 840; font-variant-numeric: tabular-nums; }
.hoy-proxima--fin { padding-left: .9rem; box-shadow: none; background: var(--fondo); color: var(--tinta-2); }
.hoy-agenda-cuenta { display: flex; align-items: baseline; gap: .4rem; color: var(--tinta-2); }
.hoy-agenda-cuenta strong { font-size: 1.5rem; font-weight: 840; color: var(--tinta); font-variant-numeric: tabular-nums; }
.hoy-agenda-cuenta span { margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; background: var(--fondo); font-size: .8125rem; }
/* La tira: una fila por profesor, cada clase en su hora. */
.hoy-tira { position: relative; display: grid; gap: .4rem; padding: 1.4rem .25rem .35rem; border-radius: 12px; color: inherit; text-decoration: none; }
.hoy-tira:focus-visible { outline: 3px solid var(--primario); outline-offset: 3px; }
.hoy-tira-horas { position: absolute; left: 5.75rem; right: .25rem; top: 0; height: 1.2rem; }
.hoy-tira-horas span { position: absolute; left: var(--x); translate: -50% 0; font-size: .6875rem; font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.hoy-tira-fila { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: .25rem; }
.hoy-tira-nombre { display: flex; align-items: center; gap: .4rem; overflow: hidden; font-size: .8125rem; font-weight: 720; white-space: nowrap; text-overflow: ellipsis; }
.hoy-tira-pista { position: relative; height: 1.75rem; border-radius: 8px; background: color-mix(in srgb, var(--c) 5%, #fbf7f2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 10%, #f0e6dc); }
.hoy-tira-clase { position: absolute; top: 3px; bottom: 3px; left: var(--x); width: calc(var(--w) - 2px); min-width: 4px; border-radius: 5px; background: var(--c); box-shadow: 0 2px 6px -3px var(--c); transition: filter .2s, opacity .2s, scale .2s var(--curva); }
.hoy-tira-clase--pasada { filter: grayscale(.9); opacity: .35; box-shadow: none; }
.hoy-tira-clase--encurso { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.hoy-tira-clase--reprogramar { background: repeating-linear-gradient(-45deg, var(--ambar) 0 4px, #ffd889 4px 8px); }
/* Al pasar el ratón por una clase, su hora y su alumno. */
.hoy-tira-clase::after { content: attr(data-texto); position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; padding: .3rem .55rem; border-radius: 8px; background: var(--carbon); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
@media (hover: hover) {
  .hoy-tira-clase:hover { scale: 1 1.25; filter: none; opacity: 1; z-index: 2; }
  .hoy-tira-clase:hover::after { opacity: 1; translate: -50% 0; }
}
.hoy-tira-ahora { position: absolute; z-index: 2; top: 1.1rem; bottom: 0; left: calc(5.75rem + (100% - 6rem) * var(--xn) / 100); width: 0; border-left: 2px solid var(--primario); pointer-events: none; }
.hoy-tira-ahora span { position: absolute; top: -1.15rem; left: 0; translate: -50% 0; padding: 0 .35rem; border-radius: 999px; background: var(--primario); color: var(--sobre-primario); font-size: .625rem; font-weight: 800; }

/* Las baldosas de «Hoy», con su icono. */
.baldosa dt { display: flex; align-items: center; gap: .45rem; }
.baldosa-icono { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--fondo); color: var(--tinta-3); transition: background-color .2s, color .2s, scale .2s var(--curva); }
.baldosa-icono .icono { width: 16px; height: 16px; }
.baldosa--marca .baldosa-icono { background: color-mix(in srgb, var(--primario) 12%, #fff); color: var(--primario); }
.baldosa--aviso .baldosa-icono { background: var(--aviso-fondo); color: var(--aviso-texto); }
.baldosa--bien .baldosa-icono { background: var(--bien-fondo); color: var(--bien-texto); }
.baldosa--azul .baldosa-icono { background: #e3ebf7; color: #1f4f94; }
.baldosa--violeta .baldosa-icono { background: #efe7fd; color: #6d28d9; }
.baldosa--critico .baldosa-icono { background: var(--critico-fondo); color: var(--critico-texto); }
.baldosa--cero dd { color: var(--tinta-3); }
.hoy-datos div.baldosa:has(dd a):hover .baldosa-icono { scale: 1.08; }

.estado-quien { flex-basis: 100%; display: flex; align-items: center; gap: .55rem; min-height: 40px; padding-top: .55rem; border-top: 1px solid var(--linea); color: var(--tinta); font-size: .9375rem; text-decoration: none; }
.estado-quien .icono { color: var(--primario); }
.estado-quien-cambiar { margin-left: auto; font-size: .8125rem; font-weight: 750; color: var(--primario-oscuro); text-decoration: underline; text-underline-offset: 3px; }
.estado-quien:hover .estado-quien-cambiar { text-decoration-thickness: 2px; }

/* ---------- Alumnos: cómo están, y cada fila con más detalle ---------- */
.panorama { display: grid; gap: .6rem; padding: .9rem 1rem 1rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.panorama h2 { font-size: .9375rem; font-weight: 720; color: var(--tinta-2); }
.panorama-barra { display: flex; gap: 3px; height: 14px; }
.panorama-tramo { flex: 0 1 auto; inline-size: 0; height: 100%; padding: 0; border: 0; border-radius: 4px; cursor: pointer; transition: filter .15s, scale .2s var(--curva); }
.panorama-tramo:hover, .panorama-tramo:focus-visible { filter: brightness(1.08) saturate(1.1); scale: 1 1.3; }
.panorama-tramo--bien { background: #2f8f4e; }
.panorama-tramo--aviso { background: var(--ambar); }
.panorama-tramo--critico { background: #d14b4b; }
.panorama-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; list-style: none; padding: 0; margin: 0; font-size: .875rem; color: var(--tinta-2); }
.panorama-leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.panorama-leyenda strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.panorama-leyenda small { padding: 0 .4rem; border-radius: 999px; background: var(--bien-fondo); color: var(--bien-texto); font-weight: 750; }
.panorama-muestra { width: .75rem; height: .75rem; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .panorama-tramo { animation: barra-ancho .9s var(--curva) both; } }

.fila-alumno { position: relative; align-items: center; }
.fila-alumno-ir { position: absolute; z-index: 0; inset: 0; }
.fila-alumno-ir:focus-visible { outline: 3px solid var(--primario); outline-offset: -3px; }
.fila-alumno > :not(.fila-alumno-ir):not(.fila-alumno-acciones) { position: relative; pointer-events: none; }
.fila-alumno--parado { box-shadow: inset 3px 0 0 #efb3b3; }
.fila-alumno-acciones { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .35rem; }
.fila-alumno-acciones .boton { min-height: 34px; padding: .3rem .6rem; }
@media (min-width: 900px) {
  .tabla-alumnos-cabecera, .fila-alumno { grid-template-columns: minmax(0, 2.1fr) 4rem minmax(0, 1.7fr) minmax(0, 1.1fr) 3.25rem 8.25rem; }
  .tabla-alumnos--saldo .tabla-alumnos-cabecera, .tabla-alumnos--saldo .fila-alumno { grid-template-columns: minmax(0, 2.1fr) 4rem 6.75rem minmax(0, 1.7fr) minmax(0, 1.1fr) 3.25rem 8.25rem; }
  .fila-alumno-acciones { grid-column: auto; }
}
@media (min-width: 900px) and (hover: hover) {
  .fila-alumno-acciones { opacity: 0; translate: 6px 0; transition: opacity .15s, translate .2s var(--curva); }
  .fila-alumno:hover .fila-alumno-acciones, .fila-alumno:focus-within .fila-alumno-acciones { opacity: 1; translate: 0 0; }
}
/* El carné, como una matrícula: con la franja azul a la izquierda. */
.carne-chip { display: inline-grid; place-items: center; min-width: 2.1rem; padding: .05rem .4rem .05rem .65rem; border: 1.5px solid var(--carbon); border-radius: 4px; background: #fff; font-size: .75rem; font-weight: 820; letter-spacing: .03em; box-shadow: inset 5px 0 0 #1f4f94; }
/* Las prácticas pagadas: el número y una pila de cinco rayitas. */
.saldo-pila { display: inline-flex; align-items: center; gap: .45rem; }
.saldo-pila strong { min-width: 1.3rem; font-variant-numeric: tabular-nums; }
.saldo-pila-barra { display: inline-grid; grid-template-columns: repeat(5, 6px); gap: 2px; padding: 2px; border: 1px solid var(--linea); border-radius: 4px; background: #fff; }
.saldo-pila-barra i { height: 10px; border-radius: 1px; background: #f1e8de; }
.saldo-pila--bien .lleno { background: #2f8f4e; }
.saldo-pila--poco .lleno { background: var(--ambar); }
.saldo-pila--cero strong { color: var(--critico-texto); }
.saldo-pila--cero .saldo-pila-barra { border-color: #f1c4c4; }
.proxima-clase { display: inline-flex; align-items: center; gap: .5rem; }
.proxima-clase > span:last-child { display: grid; line-height: 1.25; }
.proxima-clase strong { font-weight: 700; }
.proxima-clase small { font-size: .75rem; color: var(--tinta-2); }
@media (hover: hover) { .fila-alumno:hover .avatar { scale: 1.06; } }

/* ---------- Profesores: cada tarjeta con su color, su carga de la semana y lo de hoy ---------- */
.tarjeta-profe { position: relative; overflow: hidden; border-top: 4px solid var(--c, var(--linea)); transition: border-color .15s, box-shadow .2s, translate .2s var(--curva); }
@media (hover: hover) { .tarjeta-profe:hover { translate: 0 -2px; box-shadow: var(--sombra-2); } }
.tarjeta-profe .avatar { width: 48px; height: 48px; }
.carga { display: grid; gap: .3rem; }
.carga-texto { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; color: var(--tinta-2); }
.carga-texto strong { color: var(--tinta); }
.carga-pista { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--primario)) 12%, #fff); }
.carga-pista span { display: block; height: 100%; inline-size: 0; border-radius: 999px; background: var(--c, var(--primario)); }
@media (prefers-reduced-motion: no-preference) { .carga-pista span { animation: barra-ancho 1s var(--curva) both; } }
.tarjeta-profe-hoy { display: flex; flex-wrap: wrap; gap: .3rem; }
.tarjeta-profe-hoy span { padding: .1rem .45rem; border-radius: 6px; background: color-mix(in srgb, var(--c, var(--primario)) 12%, #fff); color: color-mix(in srgb, var(--c, var(--primario)) 70%, #000); font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.tarjeta-profe-hoy .pasada { filter: grayscale(1); opacity: .55; }
.color-profe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.color-profe button { width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--linea); cursor: pointer; transition: scale .15s var(--curva), box-shadow .15s; }
.color-profe button:hover { scale: 1.12; }
.color-profe button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--carbon); }

/* ---------- Vehículos: la matrícula como la de verdad y un semáforo por vencimiento ---------- */
.matricula { position: relative; padding-left: 1.15rem; box-shadow: inset 0 0 0 1px #fff; background: linear-gradient(90deg, #1f4f94 0 .8rem, #fff .8rem); }
.matricula::before { content: "E"; position: absolute; left: .18rem; bottom: .12rem; color: #fff; font-size: .5rem; font-weight: 800; }
.tarjeta-vehiculo { gap: .85rem; }
.semaforos { display: grid; gap: .4rem; }
.semaforo { display: flex; align-items: center; gap: .6rem; }
.semaforo-texto { display: grid; line-height: 1.25; }
.semaforo-texto strong { font-size: .875rem; }
.semaforo-texto small { font-size: .75rem; color: var(--tinta-2); }
.semaforo-luz { display: inline-grid; flex: none; gap: 2px; padding: 3px 3px; border-radius: 6px; background: var(--carbon); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25); }
.semaforo-luz i { width: 7px; height: 7px; border-radius: 50%; background: #4a3d35; }
.semaforo--rojo .semaforo-luz i:nth-child(1) { background: #ff5a4f; box-shadow: 0 0 6px #ff5a4f; }
.semaforo--ambar .semaforo-luz i:nth-child(2) { background: #ffb02e; box-shadow: 0 0 6px #ffb02e; }
.semaforo--verde .semaforo-luz i:nth-child(3) { background: #3ccf6b; box-shadow: 0 0 6px #3ccf6b; }
.semaforo--rojo .semaforo-texto small { color: var(--critico-texto); font-weight: 700; }
.semaforo--ambar .semaforo-texto small { color: var(--aviso-texto); font-weight: 700; }
.semaforo--sin .semaforo-luz { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .semaforo--rojo .semaforo-luz i:nth-child(1) { animation: luz-roja 1.4s ease-in-out 3; }
  @keyframes luz-roja { 50% { background: #8a2f29; box-shadow: none; } }
}

/* ---------- Cobros: la forma de pago con su color ---------- */
.forma { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; }
.forma::before { content: ""; width: .6rem; height: .6rem; border-radius: 3px; background: var(--tinta-3); }
.forma--efectivo::before, .forma-tramo--efectivo { background: #2f8f4e; }
.forma--tarjeta::before, .forma-tramo--tarjeta { background: #1f4f94; }
.forma--bizum::before, .forma-tramo--bizum { background: #0f9e8e; }
.forma--transferencia::before, .forma-tramo--transferencia { background: #7c3aed; }
.forma--otra::before, .forma-tramo--otra { background: #a8a29e; }
.forma-tramo--efectivo, .forma-tramo--tarjeta, .forma-tramo--bizum, .forma-tramo--transferencia, .forma-tramo--otra { cursor: default; }

/* ---------- Cifras de las fichas y secciones: baldosas con un poco de vida ---------- */
.cifras-ficha { gap: .5rem; background: none; border: 0; box-shadow: none; overflow: visible; }
.cifras-ficha > div { position: relative; overflow: hidden; border: 1px solid var(--linea-suave); border-radius: 12px; background: #fff; box-shadow: var(--sombra-1); transition: border-color .15s, translate .2s var(--curva); }
.cifras-ficha > div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: color-mix(in srgb, var(--primario) 55%, #fff); }
.cifras-ficha > div:nth-child(2)::before { background: #1f4f94; }
.cifras-ficha > div:nth-child(3)::before { background: #0f766e; }
.cifras-ficha > div:nth-child(4)::before { background: var(--ambar); }
.cifras-ficha > div:nth-child(5)::before { background: #7c3aed; }
@media (hover: hover) { .cifras-ficha > div:hover { translate: 0 -1px; border-color: #e5d3c1; } }
.cifras-ficha dd { font-variant-numeric: tabular-nums; }

/* ---------- Para la oficina: una tarjeta por pedido, con lo que pidió como un mensaje ---------- */
.solicitudes-tarjetas.solicitudes { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 1000px) { .solicitudes-tarjetas.solicitudes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.solicitud { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .8rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--linea-suave); border-left: 4px solid #1f4f94; border-radius: var(--radio-m); box-shadow: var(--sombra-1); transition: translate .2s var(--curva), box-shadow .2s; }
.solicitud--oficina { border-left-color: var(--ambar); }
@media (hover: hover) { .solicitud:hover { translate: 0 -1px; box-shadow: var(--sombra-2); } }
.solicitud-icono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #e3ebf7; color: #1f4f94; }
.solicitud--oficina .solicitud-icono { background: var(--aviso-fondo); color: var(--aviso-texto); }
.solicitud-cuerpo { display: grid; gap: .45rem; min-width: 0; }
.solicitud-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.solicitud-cabeza a { color: var(--tinta); text-decoration: none; }
.solicitud-cabeza a:hover { text-decoration: underline; text-underline-offset: 3px; }
.solicitud-cabeza time { margin-left: auto; font-size: .8125rem; color: var(--tinta-3); }
.solicitud--vieja .solicitud-cabeza time { font-weight: 750; color: var(--critico-texto); }
.solicitud-texto { padding: .55rem .8rem; border-radius: 12px 12px 12px 4px; background: #f3eadf; font-size: .9375rem; }
.solicitud-nota { font-size: .8125rem; font-weight: 650; color: var(--aviso-texto); }
.solicitud .botones-fila .enlace { min-height: 36px; padding: 0; }

/* ---------- Interesados: el embudo del mes ---------- */
.embudo { display: grid; gap: .6rem; padding: .9rem 1rem 1rem; background: #fff; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-1); }
.embudo h2 { font-size: .9375rem; font-weight: 720; color: var(--tinta-2); }
.embudo ol { display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.embudo-paso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); align-items: center; gap: .75rem; }
.embudo-barra { display: flex; align-items: center; justify-content: flex-end; min-width: 2.75rem; inline-size: 0; height: 2rem; padding: 0 .65rem; border-radius: 8px; color: #fff; font-variant-numeric: tabular-nums; }
.embudo-paso--azul .embudo-barra { background: #1f4f94; }
.embudo-paso--aviso .embudo-barra { background: var(--ambar); color: var(--carbon); }
.embudo-paso--bien .embudo-barra { background: #2f8f4e; }
.embudo-texto { font-size: .875rem; color: var(--tinta-2); }
.embudo-texto small { margin-left: .25rem; font-size: .8125rem; font-weight: 800; color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .embudo-barra { animation: barra-ancho .9s var(--curva) both; } }
@media (max-width: 559px) { .embudo-paso { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.interesado { transition: translate .2s var(--curva), box-shadow .2s, border-color .15s; }
@media (hover: hover) { .interesado:hover { translate: 0 -1px; box-shadow: var(--sombra-2); border-color: #e5d3c1; } }

/* ---------- Buscador rápido (Ctrl+K) ---------- */
kbd { padding: .05rem .35rem; border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 6px; background: var(--fondo); color: var(--tinta-2); font: inherit; font-size: .6875rem; font-weight: 700; }
.buscar-boton { display: inline-flex; flex: none; align-items: center; gap: .5rem; min-height: 40px; padding: .35rem .45rem .35rem .8rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta-3); font: inherit; font-size: .875rem; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .2s; }
.buscar-boton:hover { border-color: #d6bea8; color: var(--carbon); box-shadow: var(--sombra-1); }
.buscar-boton .icono { width: 18px; height: 18px; }
@media (min-width: 1100px) { .buscar-boton { min-width: 14rem; } .buscar-boton kbd { margin-left: auto; } }
@media (max-width: 759px) {
  .buscar-boton { justify-content: center; width: 40px; padding: 0; }
  .buscar-boton span, .buscar-boton kbd { display: none; }
}
.dialogo.buscador { width: min(36rem, calc(100vw - 2rem)); max-width: none; margin: 12vh auto auto; padding: 0; overflow: hidden; border-radius: 18px; }
.buscador-caja { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-bottom: 1px solid var(--linea-suave); }
.buscador-caja > .icono { color: var(--tinta-3); }
.buscador-caja input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; color: var(--tinta); outline: none; }
.buscador-caja input::-webkit-search-cancel-button { display: none; }
.buscador-lista { max-height: min(60vh, 27rem); overflow-y: auto; list-style: none; margin: 0; padding: .35rem; }
.buscador-grupo { padding: .6rem .65rem .25rem; font-size: .75rem; font-weight: 750; color: var(--tinta-3); }
.buscador-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 10px; cursor: pointer; transition: background-color .1s; }
.buscador-item[aria-selected="true"] { background: var(--tinte); }
.buscador-icono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; }
.buscador-icono:not(.avatar) { background: var(--fondo); color: var(--tinta-2); }
.buscador-icono .icono { width: 18px; height: 18px; }
.buscador-icono.avatar { border-radius: 50%; font-size: .75rem; }
.buscador-item[aria-selected="true"] .buscador-icono:not(.avatar) { background: #fff; color: var(--primario); }
.buscador-texto { display: grid; flex: 1; min-width: 0; }
.buscador-texto strong { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.buscador-texto small { overflow: hidden; font-size: .8125rem; color: var(--tinta-2); white-space: nowrap; text-overflow: ellipsis; }
.buscador-vacio { padding: 1rem; color: var(--tinta-2); }
.buscador-vacio:empty { display: none; }
.buscador-pie { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .6rem 1rem; border-top: 1px solid var(--linea-suave); background: #fffaf5; font-size: .75rem; color: var(--tinta-3); }
.buscador-pie span { display: inline-flex; align-items: center; gap: .25rem; }
@media (max-width: 599px) { .dialogo.buscador { margin-top: 1rem; } .buscador-pie { display: none; } }

/* ---------- En el móvil: menos alto en lo de arriba, para que el calendario quede a la vista ---------- */
.cal-lista-pasadas summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; margin-top: .25rem; font-size: .875rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
@media (max-width: 719px) {
  .pendientes { gap: .5rem; margin-bottom: .75rem; }
  .pendientes details.bloque { padding: .6rem .75rem; }
  .pendiente-titulo small { display: none; }
  .pendiente-icono { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
  .cal-barra { gap: .5rem; }
  .cal-nav { flex: 1 1 100%; }
  .cal-titulo { flex: 1; min-width: 0; margin: 0 .2rem; font-size: 1.0625rem; }
  .cal-fecha { margin-left: auto; }
  .cal-filtros { gap: .4rem; }
  .cal-profe { min-height: 34px; }
  .cal-leyenda-truco { display: none; }
  .wa-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-tarjeta--asistente { grid-template-columns: auto minmax(0, 1fr); }
  .act-filtros .campo-buscar { flex-basis: 100%; max-width: none; margin-left: 0; }
}
.cifras-ficha > div:has(.forma)::before { display: none; }

/* ---------- Paneles del profesor y del alumno, vistos desde la oficina (12-oct-2026) ---------- */
.pa-pasos { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; }
.pa-pasos li::marker { font-weight: 800; color: var(--primario); }
.lista-puntos { margin: .35rem 0 .75rem; padding-left: 1.1rem; display: grid; gap: .3rem; }
.acceso-alumno h2 { display: flex; align-items: center; gap: .45rem; }
.acceso-alumno h2 .icono { color: var(--primario); }
.pedidos-profes { margin-bottom: 1rem; }
.pedidos-profes h2 { display: flex; align-items: center; gap: .45rem; }
.pedidos-profes h2 .icono { color: var(--primario); }
.campo--compacto input { min-height: 40px; }
.solicitud-nota--panel { display: inline-flex; align-items: center; gap: .35rem; }
.solicitud-nota--panel .icono { width: 15px; height: 15px; }
.cambios-coche { margin-bottom: 1rem; }
.cambios-coche h2 { display: flex; align-items: center; gap: .45rem; }
.cambios-coche h2 .icono { color: var(--primario); }
.cambios-coche li { gap: .75rem; }
@media (max-width: 719px) { #reportar { display: none; } }
.hoja-reportar { display: block; margin: 1rem auto 0; }
.insignia--en-linea { position: static; margin-left: .35rem; }
.reportes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.reporte { display: grid; gap: .5rem; }
.reporte--nuevo { border-left: 4px solid var(--ambar); }
.reporte--resuelto { opacity: .75; }
.reporte-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: .9375rem; }
.reporte-cabeza time { margin-left: auto; color: var(--tinta-2); font-size: .8125rem; }
.reporte-texto { white-space: pre-line; font-size: 1rem; }
.reporte-meta { color: var(--tinta-2); font-size: .8125rem; }
.reporte-detalle summary { cursor: pointer; font-size: .875rem; color: var(--tinta-2); }
.reporte-detalle pre { white-space: pre-wrap; font-size: .75rem; background: var(--fondo); padding: .5rem; border-radius: var(--radio-s); overflow-x: auto; }
.reporte-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reporte-acciones .campo { flex: 1 1 14rem; }

/* === ADDCOR.IA: Barra de Supervisión de Interfaces (Secretaria, Profesor y Alumno) === */
.visualizar-boton {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .35rem .85rem;
  border: 1.5px solid var(--primario);
  border-radius: 999px;
  background: var(--tinte);
  color: var(--carbon);
  font: inherit;
  font-size: .875rem;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .15s, box-shadow .2s;
}
.visualizar-boton:hover { background: var(--tinte-2); box-shadow: var(--sombra-1); }
.visualizar-boton .icono { width: 18px; height: 18px; color: var(--primario-oscuro); }
.boton-deshacer { border-color: var(--primario); background: #fff; color: var(--primario-oscuro); font-weight: 750; }
.boton-deshacer:hover { background: var(--tinte); }
.selector-idioma {
  min-height: 38px;
  padding: .25rem .65rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: .8125rem;
  font-weight: 750;
  cursor: pointer;
}
.barra-supervision-duena {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .55rem 1.25rem;
  background: var(--carbon);
  color: #fff;
  border-bottom: 3px solid var(--primario);
  z-index: 19;
}
.barra-supervision-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  font-size: .9rem;
}
.barra-supervision-cambio {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--tinte-2);
}
.barra-supervision-cambio select {
  min-height: 34px;
  padding: .2rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--borde-campo);
  background: #fff;
  color: var(--carbon);
  font-weight: 700;
}
.barra-supervision-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.contenedor-interfaz-externa {
  grid-column: 1 / -1;
  width: 100%;
  height: calc(100dvh - 115px);
  background: var(--fondo);
}
.visor-interfaz-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.usu-dialogo { width: min(50rem, calc(100vw - 1.5rem)); max-width: none; max-height: 88dvh; overflow-y: auto; }
.usu-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--linea); }
.usu-herramientas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-block: .85rem; }
.usu-herramientas .campo-buscar { flex: 1 1 14rem; }
.usu-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-height: 50vh; overflow-y: auto; }
.usu-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .75rem .95rem; border: 1px solid var(--linea-suave); border-radius: var(--radio-m); background: #fff; }
.usu-item:hover { background: var(--fondo); }
.usu-info { display: flex; align-items: center; gap: .75rem; min-width: 14rem; flex: 1; }
.usu-rol { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.usu-rol--secretaria { background: #e3ebf7; color: #1f4f94; }
.usu-rol--profesor { background: var(--aviso-fondo); color: var(--aviso-texto); }
.usu-rol--alumno { background: var(--bien-fondo); color: var(--bien-texto); }
.usu-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.aviso-flotante-acciones { display: inline-flex; align-items: center; gap: .75rem; }
.aviso-flotante-boton { padding: .25rem .65rem; border: 1px solid #fff; border-radius: 999px; background: var(--primario); color: #fff; font: inherit; font-size: .8125rem; font-weight: 750; cursor: pointer; }
/* === Tarjetas de Plan (69/100/150 sin IVA + con IVA) y selector de Modo de IA en el panel === */
.plan-resumen-bloque {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  border-left: 4px solid var(--primario);
}
.planes-duena, .modos-duena {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .65rem;
}
.planes-duena legend, .modos-duena legend {
  font-weight: 760;
  font-size: .95rem;
  margin-bottom: .4rem;
}
.planes-duena-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
.plan-duena-tarjeta {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .95rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-m);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .2s;
}
.plan-duena-tarjeta input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plan-duena-tarjeta--activa {
  border-color: var(--primario);
  background: var(--fondo);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 22%, transparent);
}
.plan-duena-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.plan-duena-sub {
  font-size: .8125rem;
  font-weight: 650;
  color: var(--tinta-2);
}
.plan-duena-precio {
  margin-top: .25rem;
  font-size: 1.25rem;
  color: var(--carbon);
  font-variant-numeric: tabular-nums;
}
.plan-duena-precio small {
  font-size: .8125rem;
  color: var(--tinta-2);
}
.plan-duena-iva {
  font-size: .85rem;
  color: var(--primario-oscuro);
  font-variant-numeric: tabular-nums;
}
.plan-duena-explica {
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--tinta-2);
  line-height: 1.35;
}
.modos-duena-lista {
  display: grid;
  gap: .5rem;
}
.modo-duena-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-m);
  background: #fff;
}
.modo-duena-item--activo {
  border-color: var(--primario);
  background: var(--fondo);
}
.modo-duena-item--bloqueado {
  background: #faf6f2;
  opacity: .82;
}
.modo-duena-label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  flex: 1;
  min-width: 15rem;
  cursor: pointer;
}
.modo-duena-item--bloqueado .modo-duena-label {
  cursor: not-allowed;
}
.modo-duena-label input {
  margin-top: .25rem;
  width: 18px;
  height: 18px;
  accent-color: var(--primario);
}
.resumen-iva-duena {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--linea);
}
.precio-con-iva {
  color: var(--primario-oscuro);
  font-size: 1.05rem;
}
/* === Corrección de botones en barra oscura de supervisión y en diálogos + Tooltips de ayuda con ejemplo === */
.boton-barra-oscura {
  background: #3d3028 !important;
  color: #fff8f1 !important;
  border: 1px solid #8c7362 !important;
  font-weight: 720;
}
.boton-barra-oscura:hover {
  background: #524137 !important;
  border-color: #f5a524 !important;
}
.barra-supervision-duena .boton-secundario {
  background: #3d3028 !important;
  color: #fff8f1 !important;
  border-color: #8c7362 !important;
}
.usu-cabecera {
  position: relative;
  z-index: 2;
  background: #fff;
}
.usu-herramientas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-block: .85rem;
}
.usu-herramientas .campo-buscar {
  flex: 1 1 15rem;
  min-width: 14rem;
}
.usu-herramientas .campo-buscar input {
  width: 100%;
  max-width: none;
  background: #fff8f1;
  color: #2a211c;
}
.ficha-raiz > .volver {
  position: static !important;
  display: inline-flex;
  background: transparent !important;
  z-index: 1;
}

/* Tarjeta flotante de ayuda explicativa con ejemplo al pasar el ratón (Hover Tooltip) */
.ayuda-tooltip-flotante {
  position: fixed;
  z-index: 9999;
  max-width: 21rem;
  padding: .75rem .95rem;
  border-radius: 12px;
  background: #2a211c;
  color: #fff8f1;
  border-left: 4px solid #f5a524;
  box-shadow: 0 18px 38px -12px rgb(0 0 0 / .65);
  font-size: .82rem;
  line-height: 1.4;
  pointer-events: none;
  display: grid;
  gap: .3rem;
}
.ayuda-tooltip-flotante strong {
  color: #ffb547;
  font-size: .86rem;
}
.ayuda-tooltip-flotante p {
  margin: 0;
  color: #f7e3cf;
}
.ayuda-tooltip-ejemplo {
  display: block;
  margin-top: .2rem;
  padding: .35rem .55rem;
  border-radius: 7px;
  background: rgb(255 255 255 / .1);
  color: #fff;
  font-size: .78rem;
}
.ayuda-tooltip-ejemplo em {
  color: #f5a524;
  font-style: normal;
  font-weight: 750;
}
/* === 14-OCT-2026: Rediseño Ejecutivo de Login y Barra de 2 Niveles del Panel (Cero colapso) === */

/* LOGIN EJECUTIVO CENTRADO Y ESCAPARATE DERECHO */
.acceso--ejecutivo {
  display: grid;
  min-height: 100dvh;
  background: radial-gradient(52rem 34rem at 15% 10%, #ffe9d1, transparent 70%) no-repeat, var(--fondo);
}
.acceso-columna-izq {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.acceso-tarjeta {
  width: 100%;
  max-width: 30rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-top: 4px solid var(--primario);
  border-radius: 20px;
  box-shadow: 0 22px 48px -24px rgb(42 33 28 / .28);
  display: grid;
  gap: 1.5rem;
}
.acceso-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linea-suave);
}
.acceso-top-acciones {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.acceso-encabezado {
  display: grid;
  gap: .4rem;
}
.acceso-chip-seguro {
  display: inline-block;
  width: fit-content;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--tinte);
  color: var(--primario-oscuro);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.acceso-encabezado h1 {
  font-size: 1.85rem;
  letter-spacing: -0.025em;
}
.acceso-encabezado .intro {
  color: var(--tinta-2);
  font-size: .95rem;
  line-height: 1.45;
}
.acceso-roles-info {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: var(--fondo);
  border: 1px solid var(--linea-suave);
  font-size: .78rem;
  color: var(--tinta-2);
}
.acceso-roles-info span {
  padding-right: .4rem;
}
.acceso-roles-info strong {
  color: var(--carbon);
}
.acceso-submit {
  width: 100%;
  min-height: 50px;
  font-size: 1.02rem;
}
.acceso-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--linea-suave);
  font-size: .88rem;
}
.acceso-pie-enlaces .enlace {
  min-height: 32px;
  padding: 0;
}

@media (min-width: 940px) {
  .acceso--ejecutivo {
    grid-template-columns: minmax(28rem, 1fr) minmax(30rem, 1.15fr);
  }
  .acceso-marca--rica {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 2.5rem clamp(2rem, 4vw, 4rem) 14rem;
  }
}
.acceso-marca-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.acceso-estado-vivo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .18);
  color: #f7e3cf;
  font-size: .78rem;
  font-weight: 700;
}
.punto-verde {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ccf6b;
  box-shadow: 0 0 8px #3ccf6b;
}
.acceso-escaparate {
  position: relative;
  z-index: 2;
  max-width: 31rem;
}
.acceso-mini-panel {
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: rgb(29 22 18 / .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / .15);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / .7);
  display: grid;
  gap: .85rem;
}
.acceso-mini-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
  color: #f7e3cf;
}
.acceso-mini-cabecera strong {
  color: #fff;
}
.acceso-mini-cabecera span {
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgb(60 207 107 / .18);
  color: #8fd3a6;
  font-size: .72rem;
  font-weight: 750;
}
.acceso-mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.acceso-mini-kpis div {
  padding: .6rem .75rem;
  border-radius: 10px;
  background: rgb(255 255 255 / .07);
  display: grid;
  gap: .1rem;
}
.acceso-mini-kpis strong {
  font-size: 1.35rem;
  font-weight: 840;
  color: #ffb547;
  line-height: 1.1;
}
.acceso-mini-kpis small {
  font-size: .74rem;
  color: #f7e3cf;
}
.acceso-mini-tira {
  display: grid;
  gap: .35rem;
  padding-top: .55rem;
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .8rem;
  color: #f7e3cf;
}
.acceso-mini-tira strong {
  color: #fff;
}

/* BARRA DEL PANEL EN DOS FILAS LIMPIAS (NUNCA APLASTA EL NOMBRE DE LA AUTOESCUELA) */
.barra.barra--doble {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  padding: .55rem 1.25rem !important;
}
.barra-fila-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem 1rem;
  width: 100%;
}
.barra-fila-principal .barra-cliente {
  flex: 1 1 15rem !important;
  min-width: 14rem !important;
}
.barra-buscador-y-usuarios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.barra-buscador-y-usuarios .buscar-boton {
  min-width: 9.5rem !important;
}
.barra-iconos-derecha {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.barra-fila-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: .4rem;
  border-top: 1px solid var(--linea-suave);
  width: 100%;
}
.barra-herramientas-izq, .barra-herramientas-der {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
}
.chip-herramienta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  padding: .2rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.chip-herramienta:hover {
  background: var(--tinte);
  border-color: var(--primario);
  color: var(--carbon);
}
.chip-herramienta .icono {
  width: 15px;
  height: 15px;
  color: var(--primario);
}
.etiqueta-selector {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--tinta-2);
}
.selector-idioma--compacto {
  min-height: 30px !important;
  padding: .15rem .55rem !important;
  font-size: .78rem !important;
}
@media (min-width: 900px) {
  .navegacion {
    top: 104px !important;
    max-height: calc(100dvh - 104px) !important;
  }
}
/* === Recorrido Acompañado Paso a Paso y Explicación Visual de Formulario Web === */
.guia-acompanada-modal {
  width: min(54rem, calc(100vw - 1.5rem));
  max-width: none;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
}
.guia-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--linea);
}
.guia-progreso {
  display: grid;
  gap: .55rem;
  margin-top: .25rem;
}
.guia-pasos-botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.8rem, 1fr));
  gap: .35rem;
}
.guia-paso-chip {
  padding: .4rem .55rem;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--tinta-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.guia-paso-chip:hover {
  background: var(--tinte);
  color: var(--carbon);
}
.guia-paso-chip.activo {
  background: var(--carbon);
  border-color: var(--carbon);
  color: #fff;
}
.guia-paso-chip.hecho {
  background: var(--bien-fondo);
  border-color: #bfe3c6;
  color: var(--bien-texto);
}
.guia-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--tinte);
  overflow: hidden;
}
.guia-barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ambar), var(--primario));
  transition: inline-size .35s var(--curva);
}
.guia-cuerpo {
  display: grid;
  gap: 1rem;
  padding-block: .4rem;
}
.guia-explicacion {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: var(--fondo);
  border-left: 4px solid var(--primario);
}
.guia-etiqueta-paso {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primario-oscuro);
}
.guia-explicacion h3 {
  font-size: 1.2rem;
  margin: 0;
}
.guia-explicacion p {
  margin: 0;
  font-size: .92rem;
  color: var(--tinta-2);
}
.guia-formulario {
  display: grid;
  gap: .9rem;
}
.guia-caja-ejemplo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: var(--tinte);
  font-size: .86rem;
  color: var(--carbon);
}
.guia-dos-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: .85rem;
}
.guia-bloque-check {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid #bfe3c6;
  background: #f6fcf6;
}
.guia-bloque-check h4 {
  margin: 0 0 .2rem;
  font-size: .95rem;
  color: var(--bien-texto);
}
.guia-bloque-check--no {
  border-color: #f1c4c4;
  background: #fff8f8;
}
.guia-bloque-check--no h4 {
  color: var(--critico-texto);
}
.guia-tres-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .85rem;
}
.guia-uso-card {
  padding: .95rem 1.05rem;
  border-radius: 14px;
  background: var(--fondo);
  border: 1px solid var(--linea-suave);
  display: grid;
  gap: .35rem;
  align-content: start;
}
.guia-uso-card strong {
  color: var(--primario-oscuro);
  font-size: .92rem;
}
.guia-uso-card p {
  margin: 0;
  font-size: .86rem;
  color: var(--tinta-2);
  line-height: 1.45;
}
.guia-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--linea);
}
/* === Chip de 7 días de prueba gratis y Pasarela de Pago interna del panel === */
.chip-herramienta--alerta {
  background: #ffebd6 !important;
  border-color: var(--primario) !important;
  color: var(--primario-oscuro) !important;
  font-weight: 800 !important;
}
.chip-herramienta--activa {
  background: var(--bien-fondo) !important;
  border-color: #bfe3c6 !important;
  color: var(--bien-texto) !important;
}
.resumen-factura-interna {
  background: #2a211c !important;
  color: #fff !important;
  display: grid;
  gap: .5rem;
  align-content: start;
}
.resumen-factura-interna h3 {
  color: #f5a524 !important;
  margin-bottom: .25rem;
}
.resumen-factura-interna .ayuda-campo {
  color: #f7e3cf !important;
}
.linea-factura-int {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
  color: #f7e3cf;
  font-variant-numeric: tabular-nums;
}
.linea-factura-int--total {
  padding-top: .4rem;
  border-top: 1px solid rgb(255 255 255 / .2);
  color: #fff;
  font-weight: 760;
}
.linea-factura-int--total strong {
  color: #ffb547;
  font-size: 1.2rem;
}
.separador-fino {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / .15);
  margin: .35rem 0;
}

/* ---------- Barra del panel en el móvil (390 px): una fila con lo esencial y el resto en «⋯» ---------- */
.barra-mas { display: none; }
@media (max-width: 720px) {
  .barra.barra--doble { padding: .3rem .75rem !important; gap: .2rem; }
  .barra-fila-principal { flex-wrap: nowrap; gap: .25rem; }
  .barra-fila-principal .logo { flex: none; margin-right: .1rem; }
  .barra-fila-principal .barra-cliente { flex: 1 1 0 !important; min-width: 0 !important; order: 1; }
  .nombre-cliente { font-size: .9375rem; line-height: 1.2; }
  .consumo-siempre { font-size: .75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Los botones de las dos agrupaciones pasan a ser hijos directos de la fila, para poder ordenarlos y esconderlos. */
  .barra-buscador-y-usuarios, .barra-iconos-derecha { display: contents; }
  .barra-buscador-y-usuarios .buscar-boton { order: 2; min-width: 44px !important; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .barra-buscador-y-usuarios .buscar-boton span, .barra-buscador-y-usuarios .buscar-boton kbd { display: none; }
  .barra-iconos-derecha #ayuda { order: 3; margin-left: 0; }
  .barra-iconos-derecha #campana { order: 4; }
  .barra-iconos-derecha .barra-mas { order: 5; display: inline-grid; }
  .barra .boton-icono { width: 44px; height: 44px; }
  /* Escondido hasta abrir «⋯». */
  #visualizar-usuarios, #volver-atras-cambio, #reportar, #ir-personalizar, #salir, #ver-como { display: none; }
  .barra-fila-herramientas { display: contents; }
  .barra-herramientas-izq { display: contents; }
  .barra-herramientas-izq > :not(#abrir-pagar-plan), .barra-herramientas-der { display: none; }
  .barra #abrir-pagar-plan { min-height: 44px; justify-content: center; }
  .barra.barra--abierta .barra-fila-principal { flex-wrap: wrap; }
  .barra.barra--abierta #visualizar-usuarios, .barra.barra--abierta #volver-atras-cambio:not([hidden]), .barra.barra--abierta #reportar,
  .barra.barra--abierta #ir-personalizar:not([hidden]), .barra.barra--abierta #salir, .barra.barra--abierta #ver-como:not([hidden]) { display: inline-flex; order: 6; min-height: 44px; }
  .barra.barra--abierta .barra-herramientas-izq > :not(#abrir-pagar-plan) { display: inline-flex; min-height: 44px; }
  .barra.barra--abierta .barra-herramientas-der { display: flex; flex-wrap: wrap; }
}

.consumo-siempre .parte + .parte { margin-left: .3em; }