/* Portal de Prácticas Profesionales · LIE · UPN */

:root {
  /* UPN: azul marino institucional */
  --navy: oklch(0.33 0.13 266);
  --navy-ink: oklch(0.24 0.08 266);
  --navy-soft: oklch(0.92 0.042 258);
  /* LIE: acentos del logotipo, usados solo para significado */
  --lie-blue: oklch(0.58 0.15 248);
  --lie-lime: oklch(0.82 0.17 128);
  --lie-orange: oklch(0.71 0.17 50);
  --lie-purple: oklch(0.50 0.17 305);
  --lie-yellow: oklch(0.88 0.15 92);

  --paper: oklch(0.955 0.02 255);
  --surface: oklch(0.993 0.006 255);
  --line: oklch(0.86 0.03 258);
  --text: oklch(0.22 0.05 264);
  --muted: oklch(0.45 0.05 262);

  --ok-bg: oklch(0.95 0.06 128);
  --ok-ink: oklch(0.40 0.11 140);
  --wait-bg: oklch(0.96 0.06 92);
  --wait-ink: oklch(0.44 0.09 75);
  --bad-bg: oklch(0.95 0.04 45);
  --bad-ink: oklch(0.47 0.15 38);

  --font-display: "Gloock", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --radius: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: max(16px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--text);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* Gloock solo tiene un peso: nunca se engruesa artificialmente */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--navy); }

:focus-visible { outline: 3px solid var(--lie-blue); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Barra institucional ---------- */

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: calc(var(--space-sm) + env(safe-area-inset-top)) var(--gutter) var(--space-sm);
  background: var(--navy);
}

.brand img { display: block; height: 52px; width: auto; }
.brand .lie { height: 62px; }
.brand img { animation: fade-in 600ms var(--ease-out) both; }

/* Logos en placas blancas: LIE abre el panel, UPN regresa al inicio */
.logo-link {
  display: block; padding: 4px 8px; border-radius: 12px; background: oklch(0.995 0.003 255);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.logo-link:active { transform: scale(0.94); }
@media (hover: hover) {
  .logo-link:hover { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 8px 20px oklch(0.2 0.1 264 / 0.35); }
  .upn-link:hover { transform: translateY(-2px) rotate(3deg); }
}

.brand-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: oklch(0.97 0.01 255);
  line-height: 1.2;
}
.brand-title small { display: block; font-family: var(--font-body); font-weight: 400; color: oklch(0.82 0.05 255); font-size: 0.8rem; }

@media (max-width: 520px) {
  .brand-title { display: none; }
}

main {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter) calc(var(--space-3xl) + env(safe-area-inset-bottom));
}

/* ---------- Botones y campos ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--navy);
  color: var(--surface);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn.danger { background: transparent; color: var(--bad-ink); border-color: oklch(0.85 0.06 40); }
.btn.ok { background: var(--ok-ink); }
.btn.small { min-height: 36px; padding: 0 var(--space-md); font-size: 0.9rem; }

@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--navy-ink); }
  .btn.ghost:hover:not(:disabled) { background: var(--navy-soft); }
  .btn.danger:hover:not(:disabled) { background: var(--bad-bg); }
  .btn.ok:hover:not(:disabled) { background: oklch(0.34 0.1 140); }
}

.link-btn {
  background: none; border: 0; padding: var(--space-xs) 0; min-height: 44px;
  color: var(--navy); font-weight: 700; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

label.field { display: grid; gap: var(--space-2xs); font-weight: 600; font-size: 0.95rem; }
label.field span.hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 16px; /* evita zoom en iOS */
  transition: border-color 160ms var(--ease-out);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lie-blue); box-shadow: 0 0 0 3px oklch(0.58 0.15 248 / 0.18); }

.error-msg {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-weight: 700;
}

/* ---------- Pantalla 1: elegir PP ---------- */

/* portada: foto del plantel difuminada a todo lo ancho, título institucional encima */
body { overflow-x: clip; }
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100vw; margin: calc(-1 * var(--space-xl)) 0 var(--space-3xl) calc(50% - 50vw);
  min-height: calc(100dvh - 78px);
  display: grid; align-content: center; justify-items: center; gap: var(--space-2xl);
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  text-align: center; color: oklch(0.98 0.005 255);
}
.portada::before {
  content: ""; position: absolute; inset: -40px; z-index: -2;
  background: url("../assets/portada.jpg") center 40% / cover no-repeat;
  filter: blur(5px) saturate(1.1);
  transform: scale(1.04);
  animation: portada-in 1600ms var(--ease-out) both;
}
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, oklch(0.24 0.08 266 / 0.35), transparent 75%),
    linear-gradient(180deg, oklch(0.24 0.08 266 / 0.35), oklch(0.24 0.08 266 / 0.7));
}
@keyframes portada-in { from { transform: scale(1.12); opacity: 0; } }
.portada-texto { display: grid; justify-items: center; gap: var(--space-lg); }
.portada-sup {
  font-size: clamp(0.7rem, 1.6vw, 0.82rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: oklch(0.9 0.04 255); line-height: 1.6;
}
.portada-sup span { display: block; text-wrap: balance; }
.portada h1 {
  font-size: clamp(2.8rem, 9vw, 6rem); line-height: 0.98; letter-spacing: -0.025em;
  max-width: 14ch; text-wrap: balance; color: oklch(0.99 0.004 255);
  text-shadow: 0 2px 30px oklch(0.2 0.08 266 / 0.45);
}
.portada h1 em { display: block; font-style: normal; color: var(--lie-lime); }
.portada-linea { width: 56px; height: 2px; background: oklch(0.99 0.004 255 / 0.7); }
.portada-bajar {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 48px;
  padding: 0 var(--space-lg); border-radius: 999px;
  border: 1px solid oklch(0.99 0.004 255 / 0.55); background: oklch(0.99 0.004 255 / 0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: inherit; font-weight: 600; text-decoration: none;
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.portada-bajar span { display: inline-block; animation: bajar 1.8s ease-in-out infinite; }
.portada-bajar:active { transform: scale(0.97); }
@media (hover: hover) { .portada-bajar:hover { background: oklch(0.99 0.004 255 / 0.2); } }
@keyframes bajar { 50% { transform: translateY(4px); } }
.portada-texto > * { animation: rise 900ms var(--ease-out) both; }
.portada-texto > :nth-child(2) { animation-delay: 150ms; }
.portada-texto > :nth-child(3) { animation-delay: 300ms; }
.portada-bajar { animation: rise 900ms var(--ease-out) 450ms both; }
/* la elección de práctica ocupa una pantalla completa, para que el desplazamiento llegue hasta ella */
.elegir { min-height: 100dvh; display: grid; align-content: center; padding: var(--space-xl) 0; }
@media (prefers-reduced-motion: reduce) { .portada::before, .portada-bajar span { animation: none; } }

.hero { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lie-blue);
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); color: var(--navy-ink); letter-spacing: -0.02em; line-height: 1.05; }
.hero p { color: var(--muted); font-size: 1.1rem; }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 620px) { .pp-grid { grid-template-columns: 1fr; } }

.pp-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: var(--space-2xs);
  min-height: 200px;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out);
  animation: rise 620ms var(--ease-out) backwards;
}
.pp-btn:nth-child(2) { animation-delay: 70ms; }
.pp-btn:nth-child(3) { animation-delay: 140ms; }
.pp-btn:active { transform: scale(0.98); }

/* Fragmento geométrico, eco de las piezas del logotipo LIE */
.pp-btn::before {
  content: "";
  position: absolute;
  inset: -10% -20% 40% 35%;
  z-index: -1;
  background: var(--shard);
  clip-path: polygon(30% 0, 100% 0, 100% 75%, 0 100%);
  opacity: 0.9;
  transition: transform 320ms var(--ease-out);
}
.pp-btn[data-pp="I"] { --shard: var(--lie-blue); }
.pp-btn[data-pp="II"] { --shard: var(--lie-purple); }
.pp-btn[data-pp="III"] { --shard: var(--lie-orange); }

.pp-btn .numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5rem;
  line-height: 0.9;
  color: var(--navy-ink);
  letter-spacing: -0.04em;
}
.pp-btn .label { font-weight: 700; font-size: 1.05rem; }
.pp-btn .sub { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 620px) {
  .pp-btn { min-height: 120px; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-lg); }
  .pp-btn .numeral { grid-row: span 2; font-size: 3.6rem; min-width: 2.2ch; }
  .pp-btn { padding-right: 56px; }
  .pp-btn::before { inset: -30% -10% -30% calc(100% - 44px); }
}

@media (hover: hover) {
  .pp-btn:hover { border-color: var(--navy); transform: translateY(-3px); }
  .pp-btn:hover::before { transform: translate(-6px, 6px) rotate(-3deg); }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Pantalla 2: entrar ---------- */

.login { display: grid; gap: var(--space-lg); max-width: 460px; }
.login h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--navy-ink); }
.login .back, .login .modo { justify-self: start; }
.login .check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 500; cursor: pointer; justify-self: start; }
.login .check input { width: 20px; height: 20px; accent-color: var(--navy); }

/* contraseña con botón de ojito */
.pass { position: relative; display: block; }
.pass input { width: 100%; padding-right: 52px; }
.ojo {
  position: absolute; top: 50%; right: 4px; translate: 0 -50%;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.ojo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ojo .tache { stroke-dasharray: 23; stroke-dashoffset: 0; transition: stroke-dashoffset 220ms var(--ease-out); }
.ojo[aria-pressed="true"] { color: var(--navy); }
.ojo[aria-pressed="true"] .tache { stroke-dashoffset: 23; }
.ojo:active { background: var(--navy-soft); }
@media (hover: hover) { .ojo:hover { color: var(--navy); } }

.combo { position: relative; }
.combo ul {
  position: absolute; z-index: 5; inset: calc(100% + 4px) 0 auto;
  margin: 0; padding: var(--space-2xs); list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px oklch(0.24 0.08 266 / 0.12);
}
.combo li {
  padding: var(--space-sm) var(--space-md); border-radius: 6px; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; font-weight: 400;
}
.combo li[aria-selected="true"] { background: var(--navy-soft); }
.combo li mark { background: none; color: var(--navy); font-weight: 700; }

/* ---------- Pantalla 3: etapas ---------- */

/* tarjeta azul de bienvenida */
.student-head {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-radius: 18px;
  background: var(--navy); color: oklch(0.97 0.01 255);
  animation: rise 600ms var(--ease-out) both;
}
.student-head::after {
  content: ""; position: absolute; z-index: -1; inset: -40% -10% 30% 62%;
  background: var(--lie-blue); clip-path: polygon(30% 0, 100% 0, 100% 75%, 0 100%); opacity: 0.55;
  animation: shard-in 900ms 150ms var(--ease-out) backwards;
}
.student-head .eyebrow { color: oklch(0.82 0.08 240); }
.student-head .saludo { font-size: 1.05rem; color: oklch(0.88 0.04 255); animation: rise 600ms 120ms var(--ease-out) both; }
.student-head .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.student-head h1 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); color: oklch(0.99 0.004 255); letter-spacing: -0.01em; animation: rise 700ms 200ms var(--ease-out) both; }
.student-head .meta { color: oklch(0.85 0.04 255); }
.student-head .link-btn { color: oklch(0.97 0.01 255); }

.node {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); background: var(--surface); color: var(--muted);
}
.node svg { width: 20px; height: 20px; }

/* indicador de pasos: círculos unidos por un riel, como un registro por etapas */
.pasos { margin-bottom: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.pasos::-webkit-scrollbar { display: none; }
.pasos ol {
  list-style: none; margin: 0; padding: 12px 0 4px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
}
.pasos li { position: relative; }
.pasos li + li::before {
  content: ""; position: absolute; z-index: 0; top: 21px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 3px;
  border-radius: 3px; background: var(--line);
}
.pasos li:not([data-estado="bloqueada"]) + li:not([data-estado="bloqueada"])::before { background: var(--lie-lime); }
.paso-btn {
  all: unset; box-sizing: border-box; position: relative; z-index: 1;
  width: 100%; min-height: 44px; padding: 0 6px;
  display: grid; justify-items: center; gap: var(--space-xs);
  text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.paso-btn:disabled { cursor: not-allowed; }
.paso-btn:focus-visible .node { outline: 3px solid var(--lie-blue); outline-offset: 3px; }
.paso-nombre { font-size: 0.82rem; font-weight: 600; line-height: 1.25; color: var(--muted); }
.paso-btn[aria-current] .paso-nombre { color: var(--navy-ink); font-weight: 700; }
.pasos li[data-estado="aprobado"] .node { background: var(--lie-lime); border-color: var(--lie-lime); color: var(--navy-ink); }
.pasos li[data-estado="enviado"] .node { background: var(--lie-yellow); border-color: var(--lie-yellow); color: var(--navy-ink); }
.pasos li[data-estado="rechazado"] .node { background: var(--lie-orange); border-color: var(--lie-orange); color: var(--surface); }
.pasos li.actual[data-estado="pendiente"] .node { border-color: var(--navy); color: var(--navy); }
.paso-btn[aria-current] .node { transform: scale(1.12); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--navy); }
.pasos li[data-estado="pendiente"] .paso-btn[aria-current] .node { background: var(--navy); color: var(--surface); }
.node { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
@media (hover: hover) { .paso-btn:not(:disabled):not([aria-current]):hover .node { transform: translateY(-2px); } }

/* la etapa en pantalla: una hoja formal — apartado, instrucciones y entrega */
.paso {
  display: grid; gap: var(--space-xl);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px oklch(0.33 0.13 266 / 0.05);
}
.paso-intro { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line); }
.paso-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs);
  max-width: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.paso-meta .chip { text-transform: none; letter-spacing: 0; }
.paso-intro h2 { font-size: clamp(1.75rem, 4.2vw, 2.3rem); line-height: 1.1; color: var(--navy-ink); text-wrap: balance; }
.paso-intro .instrucciones { max-width: 68ch; color: var(--text); font-size: 1.02rem; line-height: 1.7; }

.paso .stage-panel { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; gap: var(--space-xl); }
.bloque { display: grid; gap: var(--space-sm); }
.bloque h3 {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.r-archivos { display: grid; gap: var(--space-xs); }
.campo-doc { display: grid; gap: var(--space-xs); }
.campo-doc + .campo-doc { margin-top: var(--space-sm); }
.campo-nombre { font-weight: 600; color: var(--navy-ink); }
.campo-doc .dropzone { padding: var(--space-lg) var(--space-md); background: var(--paper); border-width: 1.5px; }
.campo-doc.listo .dropzone { padding: var(--space-sm); }
.campo-doc.listo .dropzone span { display: none; }

/* una sola línea de estado, sin recuadros de color */
.aviso { padding-left: var(--space-md); border-left: 2px solid var(--line); color: var(--muted); max-width: 68ch; }
.aviso[data-estado="aprobado"] { border-color: var(--lie-lime); color: var(--ok-ink); }
.aviso[data-estado="enviado"] { border-color: var(--navy); color: var(--navy-ink); }

/* coordinación pidió cambios */
.cambios { display: grid; gap: var(--space-2xs); padding-left: var(--space-md); border-left: 2px solid var(--bad-ink); }
.cambios strong { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bad-ink); }
.cambios p { white-space: pre-line; color: var(--text); max-width: 68ch; }

.envio { margin-top: var(--space-sm); }
.paso-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.paso-nav .meta { max-width: 32ch; text-align: right; margin-left: auto; }

.stage-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.stage-title h2 { font-size: 1.45rem; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  background: var(--navy-soft); color: var(--navy-ink);
}
.chip[data-estado="aprobado"] { background: var(--ok-bg); color: var(--ok-ink); }
.chip[data-estado="enviado"] { background: var(--wait-bg); color: var(--wait-ink); }
.chip[data-estado="rechazado"] { background: var(--bad-bg); color: var(--bad-ink); }
.chip[data-estado="bloqueada"] { background: transparent; color: var(--muted); border: 1px dashed var(--line); }

.stage-panel {
  display: grid; gap: var(--space-lg);
  margin-top: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.instrucciones { white-space: pre-line; }

@media (max-width: 520px) {
  .stage-panel { padding: var(--space-md); }
  .pasos ol { grid-auto-columns: minmax(96px, 1fr); }
  .paso-nombre { font-size: 0.75rem; }
  .paso-nav .btn { flex: 1; }
  .paso { padding: var(--space-lg) var(--space-md) var(--space-md); }
  .envio .btn { flex: 1; }
  .paso-nav .meta { text-align: left; margin-left: 0; }
}

.feedback {
  display: grid; gap: var(--space-xs);
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--bad-bg);
  color: var(--bad-ink);
}
.feedback strong { font-size: 1rem; font-weight: 700; }
.feedback p { color: var(--text); white-space: pre-line; }

.note {
  padding: var(--space-md); border-radius: var(--radius);
  background: var(--wait-bg); color: var(--wait-ink); font-weight: 500;
}
.note.ok { background: var(--ok-bg); color: var(--ok-ink); }

.files { display: grid; gap: var(--space-xs); }
.files h3 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.file {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); min-height: 52px;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
}
.file .ext {
  flex: none; display: grid; place-items: center; width: 40px; height: 28px; border-radius: 4px;
  background: var(--navy-soft); color: var(--navy); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
}
.file .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file .date { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.file.coord { background: var(--navy-soft); border-color: transparent; }
.file.coord .ext { background: var(--navy); color: var(--surface); }
a.file:active { transform: scale(0.99); }
@media (hover: hover) { a.file:hover { border-color: var(--navy); } }

.dropzone {
  display: grid; place-items: center; gap: var(--space-2xs);
  padding: var(--space-xl) var(--space-md);
  border: 2px dashed var(--line); border-radius: 14px;
  text-align: center; cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.dropzone strong { color: var(--navy); }
.dropzone span { color: var(--muted); font-size: 0.9rem; }
.dropzone.over { border-color: var(--lie-blue); background: oklch(0.58 0.15 248 / 0.06); }
.dropzone input { display: none; }

/* un documento pedido, con su nombre exacto */
.doc-slot {
  display: grid; gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.doc-slot.listo { border-color: oklch(0.82 0.12 128); background: oklch(0.975 0.025 128); }
.doc-head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.doc-head strong { font-weight: 600; line-height: 1.4; padding-top: 3px; }
.doc-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-soft); color: var(--navy); font-weight: 700; font-size: 0.85rem;
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.doc-n svg { width: 16px; height: 16px; }
.doc-slot.listo .doc-n { background: var(--lie-lime); color: var(--navy-ink); }
.doc-slot .dropzone { padding: var(--space-lg) var(--space-md); }
.doc-slot.listo .dropzone { padding: var(--space-sm); }
.doc-slot.listo .dropzone span { display: none; }
.doc-label { display: block; color: var(--muted); font-size: 0.8rem; }
.faltan { font-size: 0.9rem; }

.pending-files { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.pending-files li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius); background: var(--paper); }
.pending-files li span { overflow-wrap: anywhere; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* lista de instituciones */
.inst-list { display: grid; gap: var(--space-2xs); max-height: 340px; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.inst-list label {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); min-height: 52px;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.inst-list input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.inst-list .n { flex: 1; }
.inst-list .cupo { font-size: 0.85rem; font-weight: 700; color: var(--ok-ink); white-space: nowrap; }
.inst-list .cupo.lleno { color: var(--bad-ink); }
.inst-list label:has(input:checked) { border-color: var(--navy); background: var(--navy-soft); }

/* ---------- Avisos ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 20px); opacity: 0;
  max-width: calc(100% - 32px);
  padding: var(--space-sm) var(--space-lg); border-radius: 999px;
  background: var(--navy-ink); color: var(--surface); font-weight: 700;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad-ink); }

.loading { color: var(--muted); padding: var(--space-2xl) 0; }
.meta { color: var(--muted); }

/* ---------- Panel de coordinación ---------- */

.admin main { width: min(100%, 1180px); }

.tabs {
  display: flex; gap: var(--space-2xs); overflow-x: auto;
  padding: 0 var(--gutter); background: var(--navy-ink);
  scrollbar-width: none;
}
.tabs button {
  flex: none; min-height: 48px; padding: 0 var(--space-md);
  border: 0; border-bottom: 3px solid transparent; background: none;
  font-weight: 700; color: oklch(0.80 0.05 255); cursor: pointer;
}
.tabs button[aria-selected="true"] { color: oklch(0.99 0.004 255); border-bottom-color: var(--lie-blue); }
.tabs .count { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--lie-yellow); color: var(--navy-ink); font-size: 0.8rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-ink); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.toolbar input[type="search"] { flex: 1 1 260px; }
.toolbar select { flex: 0 1 220px; }
.toolbar .check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; font-weight: 700; }
.toolbar .check input { width: 20px; height: 20px; accent-color: var(--navy); }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.table th { text-align: left; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); background: var(--paper); }
.table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.click { cursor: pointer; }
@media (hover: hover) { .table tbody tr.click:hover { background: var(--navy-soft); } }
.table .num { font-variant-numeric: tabular-nums; }
.table input[type="number"] { width: 80px; min-height: 40px; padding: var(--space-xs); }
.table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); }

@media (max-width: 760px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
  .table td { border: 0; padding: 2px 0; }
  .table td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 0.85rem; }
}

.empty { padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); align-items: end; }

.block {
  display: grid; gap: var(--space-md);
  padding: var(--space-lg); margin-bottom: var(--space-lg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.block > h2 { font-size: 1.45rem; }

details.block > summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; min-height: 28px; }
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::before { content: "+ "; color: var(--navy); }
details.block[open] > summary::before { content: "− "; }

.back { margin-bottom: var(--space-md); }

.review { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--line); }

.stage-edit { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); }
.stage-edit .order { display: grid; gap: var(--space-2xs); align-content: start; }
.stage-edit .order .node { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.icon-btn {
  width: 44px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; color: var(--navy);
}
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.docs-campo { align-content: start; }
.docs-campo .check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; font-weight: 500; cursor: pointer; }
.docs-campo .check input { width: 20px; height: 20px; accent-color: var(--navy); }
.docs-campo textarea:disabled { opacity: 0.45; background: var(--paper); }

fieldset.copiar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; border: 0; }
fieldset.copiar legend { float: left; margin-right: var(--space-sm); font-weight: 600; font-size: 0.95rem; }
fieldset.copiar .check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 600; cursor: pointer; }
fieldset.copiar input { width: 20px; height: 20px; accent-color: var(--navy); }

/* guía de etapas del informe: recuadro pequeño de consulta */
.guia-etapas {
  display: grid; gap: var(--space-sm); margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: 8px;
  font-size: 0.85rem;
}
.guia-titulo, .guia-pp { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.guia-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm) var(--space-lg); }
.guia-etapas ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px var(--space-lg); }
.guia-etapas li { display: flex; align-items: center; gap: var(--space-xs); }
.guia-n {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px;
  background: var(--navy-soft); color: var(--navy-ink); font-weight: 700; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.guia-nota { display: flex; align-items: center; gap: var(--space-xs); color: var(--muted); max-width: none; }
.guia-nota .casilla { cursor: default; flex: none; }

/* informe: una hoja carta horizontal, editable en pantalla */
.informe-hoja {
  margin-top: var(--space-md); padding: var(--space-2xl) var(--space-xl);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 2px oklch(0.33 0.13 266 / 0.06), 0 16px 40px -28px oklch(0.33 0.13 266 / 0.4);
  overflow-x: auto; outline: none; font-size: 0.9rem;
}
.informe-hoja:focus-visible { box-shadow: 0 0 0 3px oklch(0.58 0.15 248 / 0.35); }
.informe-hoja header { padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 2px solid var(--navy); }
.informe-hoja .inst { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.informe-hoja h1 { font-size: 1.7rem; color: var(--navy-ink); margin: 4px 0; }
.informe-hoja h2 { font-size: 1.2rem; color: var(--navy-ink); margin: var(--space-lg) 0 4px; }
.informe-hoja p { max-width: none; }
.informe-hoja table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0; font-variant-numeric: tabular-nums; }
.informe-hoja th, .informe-hoja td { border: 1px solid oklch(0.85 0.02 258); padding: 4px 8px; text-align: left; vertical-align: top; }
.informe-hoja th { background: var(--navy-soft); color: var(--navy-ink); font-size: 0.78rem; }
.informe-hoja td.marca { text-align: center; font-weight: 700; min-width: 28px; }
.casilla {
  display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: middle;
  border: 1.5px solid oklch(0.62 0.05 258); border-radius: 4px; background: var(--surface);
  color: var(--surface); font-size: 0.8rem; line-height: 1; cursor: pointer; user-select: none;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 120ms var(--ease-out);
}
.casilla[aria-checked="true"] { background: var(--navy); border-color: var(--navy); }
.casilla:active { transform: scale(0.88); }
.casilla:focus-visible { outline: 2px solid var(--lie-blue); outline-offset: 2px; }
@media (hover: hover) { .casilla:hover { border-color: var(--navy); } }
@media print { .casilla { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.informe-hoja .leyenda { font-size: 0.78rem; color: var(--muted); }
.informe-hoja .firma { margin-top: var(--space-3xl); width: 260px; text-align: center; }
.informe-hoja .firma span { display: block; border-top: 1px solid var(--navy-ink); margin-bottom: 4px; }
@media print {
  @page { size: landscape; margin: 1.2cm; }
  body { background: #fff; }
  body > :not(main), main > :not(.informe-hoja) { display: none !important; }
  main { padding: 0; width: auto; }
  .informe-hoja { margin: 0; padding: 0; border: 0; box-shadow: none; overflow: visible; font-size: 9pt; }
  .informe-hoja tr { break-inside: avoid; }
}

/* ventana de confirmación */
.dialogo {
  width: min(440px, calc(100% - 2 * var(--gutter))); margin: auto; padding: 0;
  border: 0; border-radius: 18px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 60px oklch(0.24 0.08 266 / 0.28);
  animation: dialogo-in 280ms var(--ease-out);
}
.dialogo::backdrop { background: oklch(0.24 0.08 266 / 0.45); animation: fade-in 200ms var(--ease-out); }
.dialogo form { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.dialogo h2 { font-size: 1.5rem; color: var(--navy-ink); }
.dialogo p { color: var(--muted); }
.dialogo .copiar { display: grid; gap: var(--space-2xs); }
.dialogo .check .hint { margin-left: 4px; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.dialogo .actions { justify-content: flex-end; }
.dialogo .btn.danger { background: var(--bad-ink); color: var(--surface); border-color: var(--bad-ink); }
@keyframes dialogo-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }

.pill-select { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--navy-soft); }
.pill-select button { min-height: 40px; min-width: 64px; padding: 0 var(--space-md); border: 0; border-radius: 999px; background: none; font-weight: 700; cursor: pointer; color: var(--navy-ink); }
.pill-select button[aria-pressed="true"] { background: var(--navy); color: var(--surface); }

/* ---------- Movimiento ---------- */

@keyframes fade-in { from { opacity: 0; } }
@keyframes shard-in { from { opacity: 0; transform: translate(40px, -24px) rotate(6deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* cambio de pantalla: lo viejo sube y se va, lo nuevo entra desde abajo */
::view-transition-old(root) { animation: 180ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 380ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(*) { animation-duration: 360ms; animation-timing-function: var(--ease-out); }

/* portada y formularios: entrada escalonada */
.hero > *, .login > * { animation: rise 600ms var(--ease-out) both; }
.hero > :nth-child(2), .login > :nth-child(2) { animation-delay: 60ms; }
.hero > :nth-child(3), .login > :nth-child(3) { animation-delay: 120ms; }
.login > :nth-child(4) { animation-delay: 180ms; }
.login > :nth-child(n+5) { animation-delay: 240ms; }
.pp-btn { animation-delay: 200ms; }
.pp-btn:nth-child(2) { animation-delay: 280ms; }
.pp-btn:nth-child(3) { animation-delay: 360ms; }
.pp-btn::before { animation: shard-in 800ms var(--ease-out) backwards; animation-delay: inherit; }
.pp-btn .numeral { transition: transform 320ms var(--ease-out); }
@media (hover: hover) { .pp-btn:hover .numeral { transform: translateX(4px); } }

.error-msg:not([hidden]) { animation: nudge 360ms var(--ease-out); }

/* barra de avance del alumno */
.progreso { height: 6px; margin-top: var(--space-xs); border-radius: 999px; background: oklch(1 0 0 / 0.18); overflow: hidden; }
.progreso span {
  display: block; height: 100%; border-radius: inherit; background: var(--lie-lime);
  transform-origin: left; transform: scaleX(var(--p));
  animation: grow-x 900ms 300ms var(--ease-out) both;
}

/* bienvenida: anima solo al entrar, no en cada cambio de etapa */
.student-head.quieto, .student-head.quieto *, .student-head.quieto::after { animation: none; }

/* pasos: la palomita se dibuja, el riel se llena, la etapa pendiente "late" */
.pasos li { animation: rise 480ms var(--ease-out) backwards; }
.pasos li:nth-child(2) { animation-delay: 60ms; }
.pasos li:nth-child(3) { animation-delay: 120ms; }
.pasos li:nth-child(n+4) { animation-delay: 180ms; }
.pasos li[data-estado="aprobado"] .node path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 520ms 380ms var(--ease-out) forwards; }
.pasos li + li::before { transform-origin: left; animation: grow-x 600ms 300ms var(--ease-out) both; }
.pasos .node { position: relative; }
.pasos li.actual .paso-btn:not([aria-current]) .node::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid currentColor; color: var(--navy);
  animation: ring 2.4s var(--ease-out) infinite;
}
.pasos li.actual[data-estado="rechazado"] .node::after { color: var(--lie-orange); }
.pasos li.actual[data-estado="enviado"] .node::after { color: var(--lie-yellow); }

/* cada etapa entra deslizándose desde el lado hacia donde avanzas */
.paso[data-dir="0"] { animation: rise 420ms var(--ease-out) both; }
.paso[data-dir="1"] { animation: desde-der 380ms var(--ease-out) both; }
.paso[data-dir="-1"] { animation: desde-izq 380ms var(--ease-out) both; }
@keyframes desde-der { from { opacity: 0; transform: translateX(48px); } }
@keyframes desde-izq { from { opacity: 0; transform: translateX(-48px); } }
.stage-panel > * { animation: fade-in 420ms var(--ease-out) both; animation-delay: 120ms; }

.file { transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
@media (hover: hover) { a.file:hover { transform: translateY(-2px); } }
.pending-files li { animation: rise 320ms var(--ease-out) both; }
.dropzone { transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 200ms var(--ease-out); }
.dropzone.over { transform: scale(1.01); }
.chip { animation: fade-in 400ms var(--ease-out) both; }

/* panel: filas y bloques entran en cascada */
.table tbody tr { animation: rise 420ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.block { animation: rise 480ms var(--ease-out) both; }
.block:nth-of-type(2) { animation-delay: 60ms; }
.block:nth-of-type(3) { animation-delay: 120ms; }
.block:nth-of-type(n+4) { animation-delay: 180ms; }
.tabs button { transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }

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