/* publico.css — las páginas sin sesión: la bienvenida (/), entrar, restablecer la contraseña, el aviso de privacidad y
   la portada de clases sueltas. Solo acomoda su marco; los componentes y los colores vienen de base.css. */

.publica {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);        /* D136: la columna no crece con lo que trae adentro */
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--acento-tinte), transparent 62%),
    var(--fondo);
}
.publica-arriba { display: flex; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + var(--e-6)) var(--e-4) 0; }
.publica-arriba .marca { font-size: var(--t-titulo-3); color: var(--tinta); }
.publica-arriba a.marca:hover { text-decoration: none; }
.publica-centro {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center; justify-items: center;   /* D117 */
  padding: var(--e-7) var(--e-4) var(--e-8);
}
.publica-pie {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5);
  padding: var(--e-4) var(--e-4) calc(env(safe-area-inset-bottom, 0px) + var(--e-6));
  font-size: var(--t-chica); color: var(--tenue);
}
.publica-pie a { color: var(--tinta-2); }

/* ─── La bienvenida ─── */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); width: min(460px, 100%); text-align: center; }
.portada-marca { font-size: var(--t-gigante); line-height: 1; }
.portada-marca.marca-con-logo { display: flex; justify-content: center; }
.portada-sub { margin-top: var(--e-3); font-size: var(--t-grande); color: var(--tinta-2); }
.portada-opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); text-align: left; }
.portada-opcion {
  display: flex; align-items: center; gap: var(--e-4); min-height: 76px; padding: var(--e-3) var(--e-5);
  border: 1px solid var(--linea-suave); border-radius: var(--r-grande); background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-1); text-decoration: none;
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva);
}
.portada-opcion:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--linea); }
.portada-opcion:active { transform: scale(.99); }
.portada-opcion-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.portada-opcion-titulo { font-size: var(--t-grande); font-weight: 600; letter-spacing: -.01em; }
.portada-opcion-sub { font-size: var(--t-chica); color: var(--tenue); }
.portada-opcion .lista-fila-flecha { width: 22px; height: 22px; }
/* La de alumnas va primero y en el color de la escuela: es la que más gente toca. */
.portada-opcion-principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.portada-opcion-principal:hover { border-color: var(--acento-hondo); background: var(--acento-hondo); }
.portada-opcion-principal .portada-opcion-sub,
.portada-opcion-principal .lista-fila-flecha { color: var(--sobre-acento); opacity: .9; }
.portada-opcion-principal .mosaico { background: var(--velo-claro); }
.portada-sueltas {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque);
  font-size: var(--t-cuerpo); font-weight: 500;
}
.portada-sueltas .icono { width: 18px; height: 18px; }

/* ─── Entrar, restablecer y las demás cajas ─── */
.acceso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); width: min(440px, 100%); }
.acceso-caja {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); padding: var(--e-7) var(--e-6);
  background: var(--papel); border: 1px solid var(--linea-suave); border-radius: 24px; box-shadow: var(--sombra-2);
}
.acceso-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.acceso-titulo { font-size: var(--t-titulo-2); font-weight: 700; letter-spacing: -.025em; }
.acceso-sub { color: var(--tinta-2); }
.acceso-otra { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-4); text-align: center; }
.acceso-nota { font-size: var(--t-chica); color: var(--tenue); text-align: center; }
.acceso-consejo { font-size: var(--t-chica); color: var(--tinta-2); }
/* Cómo va quedando la contraseña nueva (solo lo que se puede saber sin el servidor: el largo y si coinciden). */
.requisitos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-chica); }
.requisito { display: flex; align-items: center; gap: var(--e-2); color: var(--tenue); }
.requisito .icono { width: 18px; height: 18px; }
.requisito-listo { color: var(--verde); font-weight: 500; }
.acceso-quien { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r); background: var(--fondo); }
.acceso-quien .mosaico { background: var(--acento); }

/* ─── Una página de texto (privacidad) ─── */
.texto-legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); width: min(680px, 100%); }
.texto-legal .tarjeta { display: grid; gap: var(--e-4); }
/* El texto que escribió la escuela, tal cual: sus saltos de línea son sus párrafos (va en textContent, nunca HTML). */
.texto-legal-cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: var(--tinta-2); }

/* ─── La portada de clases sueltas ─── */
.sueltas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); width: min(620px, 100%); text-align: center; justify-items: center; }
.sueltas-titulo { font-size: var(--t-titulo-1); font-weight: 700; letter-spacing: -.03em; }
.sueltas-sub { font-size: var(--t-grande); color: var(--tinta-2); max-width: 32ch; }
.sueltas .tarjeta { width: 100%; }

/* El celular: después de las reglas que cambia (D135). */
@media (max-width: 480px) {
  .acceso-caja { padding: var(--e-6) var(--e-5); border-radius: var(--r-grande); }
  .portada { gap: var(--e-6); }
  .portada-opcion { min-height: 72px; padding: var(--e-3) var(--e-4); }
  .publica-centro { padding-top: var(--e-6); }
}