/* Portal de entrenadores · hoja única.
 *
 * El motor es el del administrativo (variables, dos temas, todo en rem para
 * que la escala de accesibilidad funcione), pero la DIRECCIÓN es otra, y sale
 * de dónde se usa: de pie en la sala, con el teléfono en una mano, entre
 * serie y serie. De ahí: navegación abajo (zona del pulgar), objetivos de
 * 48 px, y un punto más de tamaño de letra que en el administrativo, que se
 * usa sentado y de cerca.
 *
 * ORDEN DEL FICHERO (importa): tokens, base, componentes, estados, pantallas,
 * y al final lo responsive y la impresión. A igual especificidad gana la
 * última regla, así que lo que debe ganar va después.
 */

:root {
  --escala: 1;
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;

  /* --- Tema claro. Contrastes medidos sobre --papel-carta (#ffffff). --- */
  --papel: #f1f3f3;
  --papel-carta: #ffffff;
  --tinta: #121615;          /* texto principal              18,2:1 */
  --tinta-suave: #566160;    /* texto secundario              6,9:1 */
  --linea: #e1e5e4;
  --linea-fuerte: #c0c6c5;

  /* El acento es de ESTE producto: verde azulado. En el administrativo el
     verde significa «entra dinero»; aquí no hay dinero, así que no choca con
     nada. Se usa SOLO para la acción primaria y lo seleccionado, nunca para
     decorar. */
  --acento: #0f5c57;         /* sobre blanco                  7,8:1 */
  --acento-fuerte: #0a3f3b;
  --acento-tenue: #e3efee;
  --acento-tinta: #ffffff;   /* texto encima del acento       7,8:1 */

  --alerta: #a63a1f;         /* lo que administración tiene que mirar 6,2:1 */
  --alerta-tenue: #fae8e3;
  --aviso: #5b4600;          /* pendiente, sin urgencia       7,4:1 */
  --aviso-tenue: #f7eed2;
  --bien: #14603c;           /* hecho, resuelto               7,1:1 */
  --bien-tenue: #e2f0e9;

  /* La navegación es oscura en los DOS temas, así que lleva sus propios
     tokens y NO los del tema: con el acento del tema claro (#0f5c57) encima
     de este fondo, la sección activa quedaba en 1,6:1 y no se leía. */
  --barra: #0c1211;          /* navegación: casi negro en los dos temas */
  --barra-texto: #aeb8b7;    /* sobre --barra                 9,0:1 */
  --barra-activo: #1b2423;
  --barra-acento: #5fd8c9;   /* sección actual, sobre --barra-activo 9,6:1 */

  --foco: #0f5c57;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 10px rgba(0, 0, 0, .05);
  /* 48 px: lo pulsa un pulgar de pie, no un ratón sentado. */
  --toque: 3rem;
}

:root[data-tema="oscuro"] {
  --papel: #0e1211;
  --papel-carta: #171c1b;
  --tinta: #eef2f1;          /* sobre --papel-carta          15,1:1 */
  --tinta-suave: #a2acab;    /*                               6,6:1 */
  --linea: #262d2c;
  --linea-fuerte: #3a4341;

  --acento: #4fd1c2;         /* sobre --papel-carta           9,4:1 */
  --acento-fuerte: #7ae0d4;
  --acento-tenue: #15302d;
  --acento-tinta: #06201d;   /* texto encima del acento       9,1:1 */

  --alerta: #ff9273;         /*                               7,9:1 */
  --alerta-tenue: #35190f;
  --aviso: #e8c468;          /*                               9,8:1 */
  --aviso-tenue: #2e2608;
  --bien: #67d6a0;           /*                               9,6:1 */
  --bien-tenue: #10261b;

  --barra: #0a0e0d;
  --barra-texto: #9aa4a3;
  --barra-activo: #1b2423;

  --foco: #4fd1c2;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
}

:root[data-letra="gruesa"] {
  --peso-texto: 500;
  --peso-medio: 600;
  --peso-fuerte: 700;
}

* { box-sizing: border-box; }

html {
  /* 106,25 %: un punto por encima del administrativo. Se lee de pie, a
     distancia de brazo y con la luz de la sala. */
  font-size: calc(17px * var(--escala));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: var(--peso-texto);
  line-height: 1.5;
  /* Una sola familia para todo: títulos, botones, etiquetas y datos. */
}

/* Escala de 1,2 entre pasos: hay muchos elementos de texto y un contraste
   exagerado solo hace ruido. Fija en rem, no fluida. */
h1 { font-size: 1.44rem; font-weight: var(--peso-fuerte); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.2rem;  font-weight: var(--peso-fuerte); margin: 0; }
h3 { font-size: 1rem;    font-weight: var(--peso-fuerte); margin: 0; }
p  { margin: 0 0 .75rem; }

.sutil { color: var(--tinta-suave); font-size: .875rem; }
.oculto-accesible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Foco: uno solo para todo lo que se puede enfocar ------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--toque);
  padding: 0 1.1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--papel-carta);
  color: var(--tinta);
  font: inherit;
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.boton:hover { background: var(--acento-tenue); border-color: var(--acento); }
.boton:active { transform: translateY(1px); }

.boton-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

/* Deshabilitado y cargando: los dos estados que casi nadie dibuja y que son
   los que más se ven cuando algo va mal. */
.boton[disabled], .boton[aria-busy="true"] { cursor: not-allowed; opacity: .55; }
.boton[disabled]:hover, .boton[aria-busy="true"]:hover {
  background: var(--papel-carta); border-color: var(--linea-fuerte);
}
.boton-primario[disabled]:hover, .boton-primario[aria-busy="true"]:hover {
  background: var(--acento); border-color: var(--acento);
}
.boton[aria-busy="true"]::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girando .7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boton[aria-busy="true"]::before { animation-duration: 2.5s; }
  * { transition-duration: .01ms !important; }
}

/* --- Campos ------------------------------------------------------------- */
.campo { display: block; margin-bottom: 1rem; }
.campo > span {
  display: block; margin-bottom: .35rem;
  font-size: .875rem; font-weight: var(--peso-medio); color: var(--tinta-suave);
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  min-height: var(--toque);
  padding: .55rem .75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--papel-carta);
  color: var(--tinta);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:hover, .campo textarea:hover { border-color: var(--acento); }
.campo input[aria-invalid="true"] { border-color: var(--alerta); }
.campo input[disabled] { background: var(--papel); color: var(--tinta-suave); cursor: not-allowed; }

/* --- Avisos ------------------------------------------------------------- */
.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .85rem;
  border-radius: var(--radio-chico);
  border-left: 3px solid var(--alerta);
  background: var(--alerta-tenue);
  color: var(--tinta);
  font-size: .9375rem;
}
.aviso[hidden] { display: none; }

/* --- Tarjeta ------------------------------------------------------------ */
.tarjeta {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}

/* --- Pantalla de entrada ------------------------------------------------ */
.pantalla-acceso {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 1.5rem 1rem;
}
.caja-acceso { width: 100%; max-width: 23rem; }
.marca {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.5rem;
}
.marca-icono {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radio-chico);
  background: var(--acento);
  color: var(--acento-tinta);
}
.marca-nombre { font-size: 1.2rem; font-weight: var(--peso-fuerte); line-height: 1.15; }
.marca-sub { font-size: .875rem; color: var(--tinta-suave); }

.pie-acceso { margin: 1.25rem 0 0; font-size: .875rem; color: var(--tinta-suave); }

/* --- Estructura de la aplicación --------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  background: var(--papel-carta);
  border-bottom: 1px solid var(--linea);
}
.contenido { padding: 1rem 1rem calc(var(--toque) + 2.5rem); }

/* Navegación: abajo y a lo ancho, que es donde llega el pulgar. */
.navegacion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--barra);
  padding-bottom: env(safe-area-inset-bottom);
}
.navegacion a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: var(--toque);
  padding: .5rem .25rem;
  color: var(--barra-texto);
  text-decoration: none;
  font-size: .75rem;
  font-weight: var(--peso-medio);
}
.navegacion a[aria-current="page"] { color: var(--barra-acento); background: var(--barra-activo); }
.navegacion svg { width: 1.3rem; height: 1.3rem; }

/* --- Estado vacío: enseña qué hace la pantalla, no dice «no hay nada» --- */
.vacio {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 2.5rem 1rem;
  color: var(--tinta-suave);
}
.vacio strong { color: var(--tinta); font-size: 1.0625rem; }
.vacio p { max-width: 32ch; margin: 0; }

/* --- Alumnos ------------------------------------------------------------ */
.barra-acciones { margin-bottom: 1rem; }
.fila-botones { display: flex; gap: .6rem; flex-wrap: wrap; }

.tarjeta-alumno,
.tarjeta-conversacion {
  display: grid; gap: .35rem;
  margin-bottom: .75rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-alumno:hover,
.tarjeta-conversacion:hover { border-color: var(--acento); }
.tarjeta-alumno:active,
.tarjeta-conversacion:active { transform: translateY(1px); }
.alumno-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.alumno-cabecera strong { font-size: 1.0625rem; }
.ultima-nota {
  margin: .25rem 0 0;
  /* Dos líneas y corta: en la lista interesa recordar, no leerlo entero. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El estado del plan dice lo que hay que hacer, y el color solo lo refuerza:
   quien no distinga los colores lo lee igual en el texto. */
.etiqueta {
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.etiqueta-bien { background: var(--bien-tenue); color: var(--bien); }
.etiqueta-aviso { background: var(--aviso-tenue); color: var(--aviso); }
.etiqueta-alerta { background: var(--alerta-tenue); color: var(--alerta); }

/* --- Ficha del alumno --------------------------------------------------- */
.cajon {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-items: end;
  background: rgba(0, 0, 0, .55);
}
.cajon[hidden] { display: none; }
.cajon-caja {
  background: var(--papel);
  border-top-left-radius: var(--radio);
  border-top-right-radius: var(--radio);
  max-height: 92dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.cajon-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem;
  background: var(--papel-carta);
  border-bottom: 1px solid var(--linea);
}
.cajon-cuerpo { overflow-y: auto; padding: 1rem calc(1rem + env(safe-area-inset-right)) 2rem 1rem; }
.cajon-cuerpo textarea { resize: vertical; min-height: 5rem; }
.titulo-notas { margin: 1.5rem 0 .6rem; }
.nota {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico);
  padding: .7rem .85rem;
  margin-bottom: .6rem;
}
.nota p { margin: .2rem 0 0; white-space: pre-wrap; }
body.con-cajon { overflow: hidden; }

/* --- Mensajes ----------------------------------------------------------- */
.hilo { display: grid; gap: .6rem; margin-bottom: 1rem; }
.burbuja {
  display: grid; gap: .25rem;
  max-width: 85%;
  padding: .7rem .85rem;
  border-radius: var(--radio);
  background: var(--papel-carta);
  border: 1px solid var(--linea);
}
.burbuja p { margin: 0; white-space: pre-wrap; }
/* La burbuja es un grid y sus hijos se estiran: sin esto la marca «Urgente»
   ocupaba todo el ancho del mensaje, como si fuera una barra. */
.burbuja > .etiqueta { justify-self: start; }
/* Lo mío a la derecha y con el acento; lo suyo a la izquierda. La posición
   dice quién habla sin tener que leer ningún nombre. */
.burbuja.mia { justify-self: end; background: var(--acento-tenue); border-color: var(--acento); }
.burbuja.suya { justify-self: start; }
.burbuja.urgente { border-left: 3px solid var(--alerta); }
.escribir { position: sticky; bottom: calc(var(--toque) + .5rem); }
.escribir textarea { resize: vertical; }
.marca-urgente { display: flex; align-items: center; gap: .4rem; font-size: .9375rem; }
/* `display: flex` de arriba pisa al atributo `hidden` (que solo vale
   `display: none` en la hoja del navegador), así que la casilla seguía
   viéndose cuando se escondía. Se dice explícitamente. */
.marca-urgente[hidden] { display: none; }
.marca-urgente input { width: 1.1rem; height: 1.1rem; }

/* --- Carga: esqueleto, no una ruedita en medio de la pantalla ---------- */
.esqueleto-linea { height: 1rem; margin: .4rem 0; }
.esqueleto-linea.corta { width: 55%; }
.esqueleto {
  border-radius: var(--radio-chico);
  background: linear-gradient(90deg, var(--linea) 25%, var(--papel) 50%, var(--linea) 75%);
  background-size: 200% 100%;
  animation: cargando 1.2s ease-in-out infinite;
}
@keyframes cargando { to { background-position: -200% 0; } }

/* --- Responsive: ESTRUCTURAL. En escritorio la navegación se va al lado,
       que es donde entra administración y hay sitio de sobra. ------------ */
@media (min-width: 48rem) {
  /* Solo el body de la APLICACIÓN se parte en dos columnas. La pantalla de
     entrada no tiene barra lateral, y con este grid su tarjeta caía dentro de
     la columna de 14rem: pegada a la izquierda y aplastada. */
  body.app { display: grid; grid-template-columns: 14rem 1fr; min-height: 100dvh; }
  .navegacion {
    position: sticky; top: 0; bottom: auto;
    grid-auto-flow: row; grid-auto-columns: auto;
    align-content: start; gap: .25rem;
    height: 100dvh;
    padding: 1rem .6rem;
  }
  .navegacion a {
    flex-direction: row; justify-content: flex-start; gap: .65rem;
    border-radius: var(--radio-chico);
    padding: .6rem .75rem;
    font-size: .9375rem;
  }
  .principal { min-width: 0; }
  .contenido { padding: 1.5rem; max-width: 70rem; }
  /* En pantalla ancha la ficha deja de ser una hoja que sube desde abajo y
     se centra: aquí hay sitio y no hay pulgar que alcanzar. */
  .cajon { align-items: center; justify-items: center; padding: 2rem; }
  .cajon-caja { border-radius: var(--radio); width: min(44rem, 100%); max-height: 85dvh; }
}

/* --- Impresión: al final del fichero a propósito ----------------------- */
@media print {
  .navegacion, .cabecera { display: none !important; }
  body { background: #fff; color: #000; display: block; }
  .tarjeta { box-shadow: none; border-color: #999; }
}