/* ============================================================
   Aula Sofía — capa de pulido visual (v1, 12/09/2026)
   ============================================================
   Es el mismo lenguaje que quedó en la portada (index.html): una escala
   tipográfica en vez de cinco tamaños casi iguales, ritmo de 8, sombras de dos
   capas, el color de marca solo arriba y botones que responden al ratón.

   CÓMO SE USA
   1. <link rel="stylesheet" href="/shared/css/pulido.css?v=..."> DESPUÉS del
      <style> propio de la página (si va antes, la página le gana).
   2. class="as-pulido" en el <body>.

   POR QUÉ ASÍ Y NO CON !important: al ir después, en empate de especificidad
   gana este archivo. Nada aquí usa !important salvo donde hay estilo en línea.

   NO cambia estructura, tamaños de caja ni posiciones: solo superficie, color,
   tipografía y estados. Los emojis DENTRO de la app se quedan (decisión del
   owner, 31/08). */

:root {
  /* Marca (paleta intacta) */
  --mv-indigo: #4F46E5; --mv-violeta: #9333EA; --mv-magenta: #DB2777;
  --mv-grad: linear-gradient(135deg, #4F46E5, #9333EA);
  /* Tinta — #475569 es el gris mínimo que pasa AA sobre el lila del fondo */
  --p-tinta-1: #0F172A; --p-tinta-2: #334155; --p-tinta-3: #475569;
  /* Superficie */
  --p-sup: #FFFFFF; --p-sup-2: #F8FAFC; --p-fondo: #FAFAFC;
  --p-borde: #E6E9F2; --p-borde-2: #CBD5E1;
  /* Sombra en dos capas: contacto + difusa */
  --p-som-1: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.20);
  --p-som-2: 0 2px 4px rgba(15,23,42,.05), 0 20px 44px -20px rgba(15,23,42,.30);
  --p-som-marca: 0 8px 20px -6px rgba(79,70,229,.42);
  /* Radios y ritmo */
  --p-r-s: 12px; --p-r-m: 16px; --p-r-l: 20px;
}

/* ── 1. El fondo: color de marca ARRIBA, limpio abajo ──────────────────────
   Antes el degradado lila→rosa cubría la página entera y el pie terminaba
   rosado. Va como background-image (no como pseudo-elemento) a propósito: así
   no hace falta tocar `position` de ningún contenedor y no se mueve nada. */
body.as-pulido,
body.as-pulido .as-wrap {
  background-color: var(--p-fondo);
  background-image:
    radial-gradient(900px 520px at 10% -10%, #E6E9FF 0%, rgba(230,233,255,0) 62%),
    radial-gradient(760px 460px at 94% 0%, #FBE7F4 0%, rgba(251,231,244,0) 58%),
    linear-gradient(180deg, #F3F4FF 0%, rgba(250,250,252,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 820px;
  background-attachment: scroll;
}

/* ── 2. Superficies: sombra de dos capas ───────────────────────────────────
   La sombra plana de una sola capa (0 1px 2px) es lo que hacía que las
   tarjetas se vieran pegadas al papel. */
body.as-pulido .card,
body.as-pulido .kpi,
body.as-pulido .idcard,
body.as-pulido .cred-card,
body.as-pulido .student-card,
body.as-pulido .plan-card,
body.as-pulido .uproc {
  box-shadow: var(--p-som-1);
  border-color: var(--p-borde);
}
body.as-pulido .card { border-radius: var(--p-r-l); }
body.as-pulido .kpi  { border-radius: var(--p-r-m); }

/* Lo que se puede pulsar, se levanta */
body.as-pulido .student-card,
body.as-pulido .lift {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.as-pulido .student-card:hover,
body.as-pulido .lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--p-som-2);
  border-color: #C7CDF7;
}

/* ── 3. Cifras: tabulares ──────────────────────────────────────────────────
   Sin esto un 1 y un 7 miden distinto y la fila de indicadores "baila"
   cuando el número cambia. */
body.as-pulido .kpi .big,
body.as-pulido .kpi .n,
body.as-pulido .kpi strong,
body.as-pulido .stat-value,
body.as-pulido .num,
body.as-pulido .nota,
body.as-pulido .lvl-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ── 4. Botones: estados que antes no existían ─────────────────────────────
   Casi todos los botones de los paneles viven en `style=` o en una regla sin
   :hover. Un botón que no responde al ratón es el detalle que más delata una
   página hecha a mano. */
body.as-pulido .btn,
body.as-pulido .as-btn,
body.as-pulido .cta {
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease,
              background-color .18s ease, border-color .18s ease;
}
body.as-pulido .btn { box-shadow: var(--p-som-marca); }
body.as-pulido .btn:hover,
body.as-pulido .cta:hover {
  box-shadow: 0 12px 26px -6px rgba(79,70,229,.55);
  filter: saturate(1.06) brightness(1.04);
}
body.as-pulido .btn:active,
body.as-pulido .as-btn:active,
body.as-pulido .cta:active { transform: scale(.97); }
/* Botón secundario (blanco con borde) */
body.as-pulido .btn.ghost,
body.as-pulido .btn.sec {
  box-shadow: none;
  border: 1.5px solid var(--p-borde-2);
}
body.as-pulido .btn.ghost:hover,
body.as-pulido .btn.sec:hover {
  border-color: #A5B4FC;
  background: #FCFCFF;
  box-shadow: var(--p-som-1);
  filter: none;
}

/* ── 4b. Accesos del panel de profesor ────────────────────────────────────
   Antes: seis tarjetas centradas de 140px con el emoji flotando arriba, el
   título a 12.5px y el subtítulo a 10.5px en gris lavado. Se leían como
   etiquetas, no como accesos. Ahora siguen el patrón de las cuatro "puertas"
   de la portada: icono en pastilla a la izquierda, título legible, y una
   flecha que se corre al pasar el ratón. */
.herramientas {
  display: grid;
  /* 280px: en el ancho del panel (1080px) entran 3 por fila, o sea 3 y 3.
     Con 215px entraban 4 y quedaba una segunda fila de 2, desparejo. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: var(--p-r-l);
}
.herr {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--p-sup);
  border: 1px solid var(--p-borde);
  border-radius: var(--p-r-m);
  padding: 13px 15px;
  box-shadow: var(--p-som-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.herr:hover { transform: translateY(-3px); box-shadow: var(--p-som-2); border-color: #C7CDF7; }
.herr-ico {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
  background: #EEF2FF;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.herr-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.herr-tit { font-weight: 800; font-size: 14.5px; color: var(--p-tinta-1); letter-spacing: -.01em; }
.herr-sub { font-size: 12.5px; color: var(--p-tinta-3); line-height: 1.3; }
.herr-fle { margin-left: auto; flex: none; color: #94A3B8; font-weight: 800; transition: transform .18s ease; }
.herr:hover .herr-fle { transform: translateX(3px); color: #4338CA; }
@media (prefers-reduced-motion: reduce) {
  .herr:hover { transform: none; }
  .herr:hover .herr-fle { transform: none; }
}

/* ── 4c. Accesos del panel de padre/madre ─────────────────────────────────
   Un solo lenguaje y UNA acción principal, en vez de seis pastillas pastel
   del mismo peso. */
.accesos {
  margin: 6px 0 22px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.acc {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  color: var(--p-tinta-2); background: var(--p-sup);
  border: 1px solid var(--p-borde); border-radius: var(--p-r-s);
  padding: 11px 16px; min-height: 44px;
  box-shadow: var(--p-som-1);
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.acc:hover { transform: translateY(-2px); box-shadow: var(--p-som-2); border-color: #C7CDF7; color: #4338CA; }
.acc-pri {
  background: var(--mv-grad); border: none; color: #fff;
  box-shadow: var(--p-som-marca);
}
.acc-pri:hover { color: #fff; box-shadow: 0 12px 26px -6px rgba(79,70,229,.55); filter: saturate(1.06) brightness(1.04); }
/* Los paneles por rol no son para todos los días: van detrás de un rótulo y
   SIEMPRE en su propia línea (flex-basis:100%). Si se deja fluir, el rótulo
   parte la primera fila por la mitad y queda un "Panel de profesor" huérfano
   arriba y los otros dos abajo. */
.acc-sep {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 -2px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #64748B;
}
.acc-sep::after { content: ""; flex: 1; height: 1px; background: var(--p-borde); }
.acc-rol { font-size: 13.5px; padding: 9px 13px; box-shadow: none; background: var(--p-sup-2); }
.acc-rol:hover { background: var(--p-sup); }
@media (max-width: 640px) {
  .accesos { gap: 8px; }
  .acc, .acc-pri { width: 100%; justify-content: center; }
  .acc-sep { width: 100%; margin: 6px 0 0; padding: 0; border-left: none; }
  .acc-rol { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .acc:hover { transform: none; } }

/* ── 5. Pastillas ─────────────────────────────────────────────────────────── */
body.as-pulido .chip {
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.as-pulido .chip:hover {
  border-color: #A5B4FC;
  background: #FCFCFF;
  color: #4338CA;
}

/* ── 6. Campos: se ve dónde estás escribiendo ─────────────────────────────── */
body.as-pulido .field,
body.as-pulido input[type="text"],
body.as-pulido input[type="email"],
body.as-pulido input[type="tel"],
body.as-pulido textarea,
body.as-pulido select {
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.as-pulido .field:focus,
body.as-pulido input:focus,
body.as-pulido textarea:focus,
body.as-pulido select:focus {
  outline: none;
  border-color: #A5B4FC;
  box-shadow: 0 0 0 4px rgba(79,70,229,.14);
}

/* ── 6b. Enlaces del encabezado ───────────────────────────────────────────
   Median 15-18px de alto: por debajo del mínimo de 24px de WCAG 2.5.8. El
   padding los lleva a 26px sin mover el diseño. */
.as-top-link {
  text-decoration: none; color: var(--p-tinta-3); font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; min-height: 26px; padding: 4px 2px;
  border-radius: 8px; transition: color .15s ease;
}
.as-top-link:hover { color: #4338CA; }
/* Todos los enlaces de la barra superior de los paneles, no solo el de volver:
   "¿Cómo funciona?" y el nombre del usuario median 16-17px de alto. */
body.as-pulido .as-nav-in a,
body.as-pulido nav.nav a,
body.as-pulido .sofia-nav a,
body.as-pulido header a {
  display: inline-flex; align-items: center; min-height: 26px; padding-block: 4px;
  border-radius: 8px;
}

/* ── 7. Foco de teclado ───────────────────────────────────────────────────── */
body.as-pulido :where(a, button, summary, [role="button"], .chip, .card[onclick]):focus-visible {
  outline: 3px solid rgba(79,70,229,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ── 8. Títulos y texto ───────────────────────────────────────────────────── */
body.as-pulido h1, body.as-pulido h2, body.as-pulido h3 {
  letter-spacing: -.02em;
  text-wrap: balance;
}
body.as-pulido p { text-wrap: pretty; }
/* Los rótulos de sección en gris claro hundían el contraste */
body.as-pulido .seclabel,
body.as-pulido .sec-label,
body.as-pulido .muted,
body.as-pulido .sub { color: var(--p-tinta-3); }

@media (prefers-reduced-motion: reduce) {
  body.as-pulido *,
  body.as-pulido *::before,
  body.as-pulido *::after { transition-duration: .01ms !important; }
  body.as-pulido .student-card:hover,
  body.as-pulido .lift:hover { transform: none; }
}
