/* =============================================================
   ARCHIVO: assets/css/panel.css
   EduNova Kids · superficies de adultos.

   Portada, acceso, registro, panel de familia y administración.
   Mismo lenguaje visual que la aplicación infantil —"material
   limpio"— pero en su versión adulta: menos color, más aire,
   más densidad de información donde hace falta.

   Se adoptan principios del diseño de interfaces de Apple: luz
   primero, tipografía del sistema grande y cerrada, un azul
   único para la acción, superficies separadas por líneas de un
   píxel. No se copia ningún recurso suyo: ni marcas, ni
   imágenes, ni textos, ni la composición de sus páginas.
   ============================================================= */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
  --tinta:   #1D1D1F;
  --suave:   #424245;
  --tenue:   #6E6E73;
  --linea:   rgba(0, 0, 0, 0.09);
  --linea-fuerte: rgba(0, 0, 0, 0.22);
  --fondo:   #FFFFFF;
  --banda:   #F5F5F7;
  --panel:   #FFFFFF;
  --azul:    #0066CC;
  --azul-hover: #0055AB;
  --ok:      #0E8A4F;
  --mal:     #D1293D;
  --aviso:   #B45309;
  --oro:     #B97A00;

  --radio:    14px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --pildora:  980px;

  --tap: 44px;
  --maxw: 1024px;
  --maxw-ancho: 1200px;

  --sombra:      0 12px 36px -12px rgba(0, 0, 0, 0.16);
  --sombra-suave: 0 2px 10px -4px rgba(0, 0, 0, 0.08);

  --fuente: "SF Pro Display", -apple-system, BlinkMacSystemFont,
            "Segoe UI Variable Display", "Segoe UI", Roboto,
            "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono:   ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --cerrado: -0.022em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  color-scheme: light;
}

/* El modo oscuro sigue la preferencia del sistema. Quien trabaja
   de noche en el panel no debería recibir una pantalla blanca. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F5F5F7;
    --suave: #A1A1A6;
    --tenue: #86868B;
    --linea: rgba(255, 255, 255, 0.13);
    --linea-fuerte: rgba(255, 255, 255, 0.3);
    --fondo: #000000;
    --banda: #1C1C1E;
    --panel: #1C1C1E;
    --azul: #0A84FF;
    --azul-hover: #3D9BFF;
    --ok:   #30D158;
    --mal:  #FF6B6B;
    --aviso:#FFD60A;
    --oro:  #FFC24A;
    --sombra: 0 16px 40px -12px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   2. Tipografía
   ============================================================ */

h1, h2, h3, h4 {
  letter-spacing: var(--cerrado);
  line-height: 1.08;
  font-weight: 650;
  margin: 0 0 .5rem;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.9rem); margin-top: 2.5rem; }
h3 { font-size: 1.2rem; margin-top: 1.6rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; max-width: 68ch; }

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

code {
  background: var(--banda);
  border: 1px solid var(--linea);
  padding: .1rem .4rem;
  border-radius: 6px;
  font: 0.88em var(--mono);
}
code.bloque { display: block; padding: .7rem .9rem; word-break: break-all; margin: .5rem 0 0; }

.tenue { color: var(--tenue); font-size: .9375rem; }
.ok  { color: var(--ok);  font-weight: 600; }
.mal { color: var(--mal); font-weight: 600; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tenue);
  margin: 0 0 .5rem;
}

/* ============================================================
   3. Portada y pantallas de acceso
   ============================================================ */

.fondo-auth {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3.5rem 1.25rem 5rem;
  background: var(--fondo);
}

.caja {
  width: 100%;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  padding: 2.25rem;
}

.caja--ancha { max-width: var(--maxw); border: 0; padding: 0; background: none; }

/* Sección de portada: titular grande, centrado y con aire. */
.hero {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(2.5rem, 6vw, 4rem);
  max-width: 54rem;
  margin-inline: auto;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero .lead {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem);
  color: var(--suave);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.hero-acciones {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Banda de sección: alterna con el blanco y marca el ritmo de
   la página sin necesidad de líneas ni marcos. */
.banda {
  background: var(--banda);
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
  margin-block: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radio-xl);
}

.banda > * { max-width: var(--maxw); margin-inline: auto; }

.seccion { padding-inline: 1.25rem; max-width: var(--maxw); margin-inline: auto; }

/* ============================================================
   4. Botones
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--tap);
  padding: .6rem 1.4rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--pildora);
  background: transparent;
  color: var(--azul);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms var(--ease), border-color 120ms var(--ease),
              transform 120ms var(--ease);
}

.btn:hover { text-decoration: none; border-color: var(--azul); background: var(--banda); }
.btn:active { transform: scale(.975); }

.btn--primario {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.btn--primario:hover { background: var(--azul-hover); border-color: var(--azul-hover); }

.btn--peligro { color: var(--mal); border-color: color-mix(in srgb, var(--mal) 45%, transparent); }
.btn--peligro:hover { background: color-mix(in srgb, var(--mal) 10%, transparent); border-color: var(--mal); }

.btn--lg { min-height: 52px; font-size: 1.0625rem; padding-inline: 1.9rem; }
.btn--sm { min-height: 34px; font-size: .875rem; padding-inline: .9rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ============================================================
   5. Formularios
   ============================================================ */

.formulario { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }

.formulario label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9375rem;
  font-weight: 600;
}

.formulario input[type=text],
.formulario input[type=email],
.formulario input[type=password],
.formulario input[type=tel],
.formulario input[type=number],
.formulario input[type=date],
.formulario select,
.formulario textarea {
  font: inherit;
  font-weight: 400;
  padding: .7rem .85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  min-height: var(--tap);
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 18%, transparent);

  /* El anillo se dibuja con una sombra, más suave que un contorno.
     Pero una sombra desaparece en el modo de contraste forzado del
     sistema, así que se deja un contorno transparente: ahí el
     sistema lo vuelve visible y el campo enfocado se distingue. */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* El anillo de foco nunca se quita: es lo único que indica dónde
   estás si navegas con el teclado. */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }

.formulario .fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.formulario .fila > label { flex: 1 1 13rem; }

.checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: .7rem;
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.45;
}
.checkbox input { margin-top: .25rem; min-width: 20px; min-height: 20px; accent-color: var(--azul); }

/* ============================================================
   6. Avisos
   ============================================================ */

.aviso {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--azul);
  background: var(--banda);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-size: .9375rem;
}
.aviso--ok  { border-left-color: var(--ok); }
.aviso--mal { border-left-color: var(--mal); }
.aviso--atencion { border-left-color: var(--aviso); }
.aviso p:first-child { margin-top: 0; }
.aviso p:last-child  { margin-bottom: 0; }

/* ============================================================
   7. Tablas
   ============================================================ */

.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 1rem 0; }

.tabla th, .tabla td {
  text-align: left;
  padding: .75rem .8rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tenue);
  font-weight: 600;
}

.tabla tr:hover td { background: var(--banda); }
.tabla-envuelta { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   8. Etiquetas de estado
   ============================================================ */

.etiqueta {
  display: inline-block;
  padding: .15rem .7rem;
  border-radius: var(--pildora);
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid currentColor;
  letter-spacing: 0;
}
.etiqueta--activa    { color: var(--ok); }
.etiqueta--pendiente { color: var(--aviso); }
.etiqueta--vencida,
.etiqueta--suspendida,
.etiqueta--cancelada { color: var(--mal); }

/* ============================================================
   9. Cabecera del panel
   ============================================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  border-bottom: 1px solid var(--linea);
  padding: .65rem 1.25rem;
}

@supports (backdrop-filter: saturate(180%) blur(20px)) {
  .cabecera {
    background: color-mix(in srgb, var(--fondo) 72%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

.cabecera-interior {
  max-width: var(--maxw-ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.marca {
  font-weight: 700;
  letter-spacing: var(--cerrado);
  text-decoration: none;
  color: var(--tinta);
  font-size: 1.0625rem;
}
.marca:hover { text-decoration: none; }

.menu { display: flex; gap: .25rem; flex-wrap: wrap; }

.menu a {
  padding: .45rem .8rem;
  border-radius: var(--pildora);
  text-decoration: none;
  color: var(--suave);
  font-size: .9375rem;
  font-weight: 500;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.menu a:hover { background: var(--banda); color: var(--tinta); text-decoration: none; }
.menu a.activo { background: var(--tinta); color: var(--fondo); font-weight: 600; }

.contenido { max-width: var(--maxw-ancho); margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.contenido > h1 { margin-bottom: 1.5rem; }

/* ============================================================
   10. Tarjetas y métricas
   ============================================================ */

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

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: 1.4rem;
}
.tarjeta h3 { margin-top: 0; }

.metrica { text-align: center; }
.metrica .valor {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--cerrado);
}
.metrica .rotulo {
  display: block;
  font-size: .75rem;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-top: .35rem;
}

/* ============================================================
   11. Perfiles infantiles
   ============================================================ */

.perfiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.perfil {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-xl);
  padding: 1.4rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease);
}
.perfil:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); text-decoration: none; }
/* El avatar trae su propio fondo recortado en círculo dentro del
   SVG, así que aquí solo hace falta una línea de un píxel para
   que no se difumine contra el panel cuando ambos son claros. */
.perfil svg,
.avatar-op svg {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 12%, transparent);
}
.avatar-op svg { width: 64px; height: 64px; }
.perfil .apodo { font-weight: 650; letter-spacing: var(--cerrado); font-size: 1.0625rem; }
.perfil .edad { font-size: .8125rem; color: var(--tenue); }

/* ============================================================
   12. Rejilla de características (portada)
   ============================================================ */

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

.mundo {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: 1.3rem;
  position: relative;
  overflow: hidden;
}

/* Banda de color para identificar cada mundo sin saturar el
   fondo: el texto conserva su contraste. */
.mundo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-mundo, var(--azul));
}

.mundo h3 { margin: .3rem 0 .35rem; font-size: 1.0625rem; }
.mundo p  { margin: 0; font-size: .9375rem; color: var(--suave); }
.mundo .icono { font-size: 1.6rem; line-height: 1; }

/* ============================================================
   13. Precios
   ============================================================ */

.precio {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: var(--cerrado);
  margin: .3rem 0;
  line-height: 1.05;
}

.plan-destacado { border-color: var(--azul); border-width: 2px; }

/* ============================================================
   14. Móvil
   ============================================================ */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .contenido { padding: 1.5rem 1rem 3.5rem; }
  .caja { padding: 1.5rem; border-radius: var(--radio-lg); }
  .fondo-auth { padding: 1.5rem 1rem 3rem; }
  .banda { border-radius: var(--radio-lg); padding-inline: 1rem; }
  .btn--lg { width: 100%; }
  .menu { gap: .15rem; }
  .menu a { padding: .4rem .6rem; font-size: .875rem; }
}

/* ============================================================
   15. Impresión
   ============================================================ */

@media print {
  .cabecera, .btn, .menu, .hero-acciones { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tarjeta, .caja, .aviso, .mundo { border-color: #000; background: #fff; }
  .banda { background: #fff; border: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
}