/* Cronox Zentro · plataforma (web, Mi Cronox, aula y centro de control)
   Pensada para el móvil: una columna, barra de iconos abajo, botones a dedo.

   Manda el «Manual de identidad de marca v1» (07 Infraestructura digital\
   Marca y logotipo\Cronox Zentro). Lo que se aplica aquí:
   - Tres colores y ninguno más: marino, oro y crema. «El que haga falta se
     resuelve con tono y espacio»: por eso los estados (abierta, borrador,
     baja...) van con oro, crema y el gris azulado del manual, no con verde,
     amarillo o rojo.
   - Tres familias: Anton para titulares cortos (nunca más de dos líneas),
     Oswald para rótulos, cabeceras, tablas y botones, Inter para el texto y
     la interfaz.
   - El oro es acento: nunca texto largo.
   - Fondo oscuro, el marino: un solo tema, que es la identidad. */

:root {
  /* Paleta del manual */
  --marino:  #082E44;
  --oro:     #D4A54A;
  --crema:   #F6F4F1;
  /* Tonos de esos mismos colores (manual: marino suave y gris azulado) */
  --hondo:   #05202F;   /* barras y campos: el marino un punto más oscuro */
  --panel:   #0C3A55;   /* tarjetas: el marino un punto más claro */
  --panel-2: #114767;   /* tarjeta al tocarla */
  --gris:    #8A9AA6;   /* gris azulado del manual: lo apagado (4,9 de contraste) */
  --linea:   rgba(246, 244, 241, .11);
  --niebla:  rgba(246, 244, 241, .7);   /* texto secundario: 7,2 de contraste */

  --f-titular: 'Anton', 'Oswald Variable', sans-serif;
  --f-rotulo:  'Oswald Variable', 'Arial Narrow', sans-serif;
  --f-texto:   'Inter Variable', Calibri, sans-serif;

  --radio:   14px;
  --barra:   68px;      /* alto de la barra de iconos, sin la zona segura */
  color-scheme: dark;
}

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

/* Lo oculto, oculto: sin esto, las clases que ponen display:flex (formulario,
   hoja-cuerpo...) ganaban al atributo hidden y en crear-clave se veían a la vez
   el formulario y el aviso de enlace caducado (9-oct-2026). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--marino);
  color: var(--crema);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Jerarquía del manual, pasada a pantalla oscura */
h1 {                      /* titular: Anton, caja alta, como mucho dos líneas */
  font-family: var(--f-titular);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
h2 {                      /* título 1: Oswald SemiBold */
  font-family: var(--f-rotulo);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h3 {                      /* título 3 / epígrafe: Oswald Medium, oro, caja alta */
  font-family: var(--f-rotulo);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}

p { margin: 0; }
a { color: var(--oro); }

.rotulo {
  font-family: var(--f-rotulo);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--niebla);
}
.suave { color: var(--niebla); }
.cifra { font-family: var(--f-titular); font-variant-numeric: tabular-nums; line-height: 1; }

/* ── Estructura ───────────────────────────────────────────────────────────
   Columna centrada. En el ordenador no se estira: es una app de móvil que
   también se puede abrir en grande. */
.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-inline: 18px;
  padding-block: 0 calc(var(--barra) + env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.app.sin-barra { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

/* Cabecera: el símbolo XZ (manual: la marca sola, por debajo de 15 mm) y el
   nombre de la pantalla. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-inline: -18px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  background: var(--marino);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cabecera .marca { width: 40px; height: auto; flex: none; }
.cabecera h1 { font-size: 1.45rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera .accion { flex: none; }

.seccion { display: flex; flex-direction: column; gap: 12px; }
.seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ── Barra de iconos (abajo) ───────────────────────────────────────────── */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--hondo);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra ul {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 6px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* cinco iconos, o cuatro en la de supervisión */
  height: var(--barra);
}
.barra a {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--gris);
  text-decoration: none;
  font-family: var(--f-rotulo);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.barra a svg { width: 25px; height: 25px; }
.barra a[aria-current="page"] { color: var(--oro); }
/* La pestaña activa lleva un filete de oro arriba: el filete es grafismo de
   la marca (portada de dosier, post de redes, firma de correo). */
.barra a[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 0;
  width: 26px;
  height: 3px;
  background: var(--oro);
}

/* ── Iconos de línea (sin emoticonos) ──────────────────────────────────── */
.ico { width: 22px; height: 22px; flex: none; }
svg.ico, .barra svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Botones: oro con texto marino (6,25 de contraste), Oswald ─────────── */
.boton {
  appearance: none;
  border: 0;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-rotulo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: var(--oro);
  color: var(--marino);
  transition: filter .15s, transform .1s;
}
.boton:hover { filter: brightness(1.07); }
.boton:active { transform: scale(.98); }
.boton:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.boton.secundario { background: transparent; color: var(--crema); border: 1px solid var(--linea); }
.boton.secundario:hover { background: var(--panel); filter: none; }
.boton.ancho { width: 100%; }
.boton.mini { min-height: 40px; padding: 0 14px; font-size: .88rem; }

.redondo {
  appearance: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--crema);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.redondo.oro { background: var(--oro); color: var(--marino); border: 0; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-family: var(--f-rotulo); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--niebla); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--hondo);
  color: var(--crema);
  /* 16 px como mínimo: con menos, el iPhone hace zoom al tocar el campo */
  font: 400 1rem/1.35 var(--f-texto);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro); }
.campo .ayuda { font-size: .88rem; color: var(--niebla); }
.campo.con-error input { border-color: var(--oro); box-shadow: inset 3px 0 0 var(--oro); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-2 > * { min-width: 0; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
/* Casilla de marcar (publicar, fijar...) y pareja de botones al pie de una hoja. */
.casilla { display: flex; align-items: flex-start; gap: 12px; }
.casilla input { width: 22px; height: 22px; accent-color: var(--oro); margin-top: 2px; flex: none; }
.acciones-hoja { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones-hoja .boton { flex: 1 1 140px; }
/* Barra de avance (asistencia, temario) */
.barra-avance { height: 8px; border-radius: 4px; background: var(--hondo); overflow: hidden; }
.barra-avance span { display: block; height: 100%; background: var(--oro); }

/* Campo de contraseña con el botón del ojo para ver lo escrito. */
/* El ojo va en una caja propia con el campo, para quedar pegado al campo
   aunque debajo haya una nota de ayuda. */
.ojo-caja { position: relative; display: block; }
.ojo-caja input { padding-right: 52px; }
.ojo-caja .ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--gris); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.ojo-caja .ver[aria-pressed="true"] { color: var(--oro); }

/* Mensajes: sin rojo (no hay cuarto color). El error se marca con el filete
   de oro y el texto en crema, que se lee bien. */
.mensaje { font-size: .95rem; min-height: 1.4em; }
.mensaje.mal { padding: 10px 12px; border-left: 3px solid var(--oro); background: var(--hondo); border-radius: 6px; }
.mensaje.mal:empty { padding: 0; border: 0; background: none; }
.mensaje.bien { color: var(--niebla); }

/* ── Tarjetas y listas ─────────────────────────────────────────────────── */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px;
}

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cifras > div { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cifras .cifra { font-size: 2.3rem; }
@media (min-width: 560px) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.lista { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.lista > li + li { border-top: 1px solid var(--linea); }
.lista .item {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  min-height: 64px;
  color: inherit; text-decoration: none;
  background: transparent; border: 0; text-align: left; font: inherit; cursor: pointer;
}
.lista a.item:hover, .lista button.item:hover { background: var(--panel-2); }
.lista .item .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista .item .titulo { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.lista .item .detalle { color: var(--niebla); font-size: .9rem; }
.lista .item .ico.ir { color: var(--gris); width: 20px; height: 20px; }
.lista .item .inicial {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hondo); color: var(--oro);
  font-family: var(--f-rotulo); font-weight: 600; font-size: .95rem;
}

.vacio {
  border: 1px dashed rgba(246, 244, 241, .22);
  border-radius: var(--radio);
  padding: 22px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.vacio .ico { color: var(--oro); width: 28px; height: 28px; }
.vacio p { max-width: 46ch; }

/* Píldoras de estado: el estado se lee por la forma, con los tres colores.
   - En marcha (abierta, en curso, matriculada, activa): oro relleno.
   - Pendiente (borrador, preinscrita): contorno crema.
   - Apagado (cerrada, cancelada, baja, inactiva): gris azulado. */
.pildora {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--f-rotulo); font-weight: 500; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--crema);
  color: var(--crema);
  white-space: nowrap;
}
.pildora.abierta, .pildora.en_curso, .pildora.matriculada, .pildora.activo, .pildora.admin {
  background: var(--oro); border-color: var(--oro); color: var(--marino);
}
.pildora.cerrada, .pildora.cancelada, .pildora.baja, .pildora.inactivo, .pildora.finalizada {
  border-color: var(--gris); color: var(--gris);
}

/* Selector de pestañas dentro de una pantalla (Alumnos / Profesores / Admin) */
.selector { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--hondo); border: 1px solid var(--linea); border-radius: 12px; padding: 4px; gap: 4px; }
.selector button { appearance: none; border: 0; border-radius: 9px; min-height: 42px; background: transparent; color: var(--gris); font-family: var(--f-rotulo); font-weight: 500; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.selector button[aria-pressed="true"] { background: var(--panel-2); color: var(--crema); }

/* ── Hoja que sube desde abajo (formularios) ───────────────────────────── */
dialog.hoja {
  width: 100%;
  max-width: 720px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--marino);
  color: var(--crema);
  border-top: 3px solid var(--oro);
}
dialog.hoja::backdrop { background: rgba(2, 14, 22, .7); }
dialog.hoja[open] { animation: subir .22s ease-out; }
@keyframes subir { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.hoja-cab { position: sticky; top: 0; background: var(--marino); display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--linea); z-index: 1; }
.hoja-cab h2 { flex: 1; }
.hoja-cuerpo { padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); display: flex; flex-direction: column; gap: 16px; }

/* ── Campana de avisos e invitación a activarlos ───────────────────────── */
.campana { position: relative; flex: none; text-decoration: none; }
.campana .numero {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--oro); color: var(--marino);
  font-family: var(--f-rotulo); font-weight: 600; font-size: .72rem; line-height: 1;
}
.invitacion { display: flex; flex-direction: column; gap: 10px; border-color: var(--oro); }
.invitacion .inv-cab { display: flex; align-items: center; gap: 10px; font-family: var(--f-rotulo); font-weight: 600; font-size: 1.05rem; }
.invitacion .inv-cab .ico { color: var(--oro); }
.pasos-iphone { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.activos { color: var(--oro); }

/* ── Avisos flotantes ──────────────────────────────────────────────────── */
.avisos { position: fixed; left: 0; right: 0; bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.aviso { pointer-events: auto; max-width: 560px; width: 100%; background: var(--crema); color: var(--marino); border-radius: 10px; padding: 12px 16px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: subir .2s ease-out; }
.aviso.mal { border-left: 5px solid var(--oro); }

/* La página aparece cuando hay sesión comprobada: así no se ve un instante
   una pantalla a medias de un rol que no es el tuyo. */
body:not(.lista-para-ver) .app { visibility: hidden; }

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