/* ============================================================================
   APLICACIÓN · Festival del Conocimiento
   Estilos de las páginas internas: registro, acceso, expediente y tablero.
   La landing usa landing.css; aquí no hay que encapsular nada porque estas
   páginas son nuestras y no conviven con ningún tema ajeno.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* Marca (gráfica) */
  --turquesa:#10ABC4; --magenta:#E91587; --verde:#99CA3C;
  --naranja:#F5821F;  --amarillo:#F6D20A;
  /* Marca legible sobre fondo claro */
  --turquesa-tx:#0A7285; --magenta-tx:#C90D70;
  --verde-tx:#587A17;    --naranja-tx:#B85800;
  /* Estructura */
  --dark:#12343B; --darker:#0B252A;
  --bg:#F7F9F8; --surface:#FFFFFF; --ice:#EEF7F6;
  --tx:#12343B; --tx-2:#52676B; --tx-3:#627275;
  --line:#DCE4E4; --line-2:#EDF2F2;
  /* Semáforo */
  --rojo:#C0392B; --ambar:#8A5D00; --sem-verde:#1E8E5A;
  --rojo-bg:#FBE3E0; --ambar-bg:#FBF0D6; --verde-bg:#E3F3EA;

  --r:14px; --r-s:10px;
  --sombra:0 1px 2px rgba(18,52,59,.05), 0 10px 28px rgba(18,52,59,.08);
  --f-disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,li,figure,fieldset,legend{margin:0;padding:0;border:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--turquesa-tx)}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------ encabezado -- */
.barra{
  background:var(--dark); color:#fff;
  padding:14px 0; position:sticky; top:0; z-index:50;
}
.barra__in{
  max-width:1240px; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.barra__logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.barra__logo img{width:34px}
.barra__logo b{font-family:var(--f-disp);font-weight:700;font-size:.98rem;line-height:1.1}
.barra__logo span{display:block;font-size:.72rem;color:rgba(255,255,255,.6);font-weight:400}
.barra nav{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.barra nav a{
  color:rgba(255,255,255,.78); text-decoration:none; font-size:.88rem;
  font-family:var(--f-disp); font-weight:600;
  padding:7px 14px; border-radius:100px;
}
.barra nav a:hover,.barra nav a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff}
.barra__quien{font-size:.82rem;color:rgba(255,255,255,.62);white-space:nowrap}
.barra button.salir{
  background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
  font:inherit;font-size:.84rem;padding:6px 14px;border-radius:100px;cursor:pointer;
}
.barra button.salir:hover{background:rgba(255,255,255,.14)}

/* -------------------------------------------------------------- página --- */
.hoja{max-width:1240px;margin-inline:auto;padding:38px 24px 90px}
.hoja--angosta{max-width:760px}
.hoja--media{max-width:980px}

.titulo{margin-bottom:30px}
.kicker{
  font-family:var(--f-disp);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-tx);
  margin-bottom:10px;
}
h1{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance;
}
h2{
  font-family:var(--f-disp);font-weight:700;font-size:1.3rem;
  letter-spacing:-.015em;margin-bottom:4px;
}
.entrada{color:var(--tx-2);margin-top:12px;max-width:62ch;text-wrap:pretty}

/* --------------------------------------------------------------- tarjeta -- */
.tarjeta{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;box-shadow:var(--sombra);
}
.tarjeta + .tarjeta{margin-top:16px}

/* -------------------------------------------------------------- formulario */
fieldset{margin-bottom:30px}
legend{
  font-family:var(--f-disp);font-weight:700;font-size:1.06rem;
  margin-bottom:4px;letter-spacing:-.01em;
}
.leyenda{color:var(--tx-3);font-size:.9rem;margin-bottom:18px}

.campos{display:grid;gap:16px}
@media(min-width:640px){.campos--2{grid-template-columns:1fr 1fr}}

.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:.92rem}
.campo .pista{font-size:.82rem;color:var(--tx-3);line-height:1.45}
.campo.completo{grid-column:1/-1}

input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],select,textarea{
  font:inherit;font-size:.97rem;color:var(--tx);
  background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:11px 13px;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical;min-height:96px;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--turquesa);
  box-shadow:0 0 0 3px rgba(16,171,196,.18);
}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--rojo);
}
.error-campo{color:var(--rojo);font-size:.84rem;font-weight:500}

/* rango de avance */
.rango{display:flex;align-items:center;gap:16px}
.rango input[type=range]{flex:1;accent-color:var(--turquesa);height:26px}
.rango output{
  font-family:var(--f-disp);font-weight:700;font-size:1.5rem;
  min-width:74px;text-align:right;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- botones -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:100px;border:0;cursor:pointer;
  text-decoration:none;transition:background .15s ease,transform .15s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--principal{background:#D4116F;color:#fff}
.btn--principal:hover:not(:disabled){background:#B80A63}
.btn--linea{background:none;border:2px solid var(--dark);color:var(--dark);padding:11px 24px}
.btn--linea:hover:not(:disabled){background:var(--dark);color:#fff}
.btn--chico{padding:8px 16px;font-size:.86rem}
.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* --------------------------------------------------------------- avisos --- */
.aviso{
  padding:15px 18px;border-radius:var(--r-s);margin-bottom:20px;
  font-size:.94rem;border-left:4px solid;
}
.aviso--ok  {background:var(--verde-bg);border-color:var(--sem-verde);color:#14603C}
.aviso--mal {background:var(--rojo-bg); border-color:var(--rojo);      color:#8C2418}
.aviso--info{background:var(--ice);     border-color:var(--turquesa);  color:var(--tx-2)}

/* -------------------------------------------------------------- semáforo -- */
.luces{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}
.luces i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.luces--rojo  i:nth-child(1){background:var(--rojo)}
.luces--ambar i:nth-child(2){background:var(--ambar)}
.luces--verde i:nth-child(3){background:var(--sem-verde)}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px;border-radius:100px;
  font-size:.8rem;font-weight:600;white-space:nowrap;
}
.chip--rojo {background:var(--rojo-bg); color:#8C2418}
.chip--ambar{background:var(--ambar-bg);color:#6B4700}
.chip--verde{background:var(--verde-bg);color:#14603C}

.eje{
  display:inline-block;padding:3px 10px;border-radius:100px;
  font-size:.76rem;font-weight:600;background:var(--ice);color:var(--tx-2);
}

/* ---------------------------------------------------------------- tablas -- */
.tabla-caja{
  overflow-x:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sombra);
}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:13px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
tbody tr:last-child td{border-bottom:0}
th{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;background:var(--ice);white-space:nowrap;
}
td{color:var(--tx-2)}
td strong{color:var(--tx);font-weight:600}
.num{font-variant-numeric:tabular-nums;text-align:right}
tbody tr:hover{background:var(--ice)}

/* --------------------------------------------------------------- estados -- */
.vacio{
  text-align:center;padding:56px 24px;color:var(--tx-3);
  background:var(--surface);border:2px dashed var(--line);border-radius:var(--r);
}
.vacio h3{font-family:var(--f-disp);font-weight:700;font-size:1.15rem;color:var(--tx);margin-bottom:8px}
.vacio p{max-width:44ch;margin:0 auto 18px}

.cargando{padding:52px;text-align:center;color:var(--tx-3);font-size:.94rem}

/* ---------------------------------------------------------- tarjeta de act */
.acts{display:grid;gap:14px}
@media(min-width:900px){.acts{grid-template-columns:repeat(2,1fr)}}
.act{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:12px;
}
.act__top{display:flex;justify-content:space-between;gap:12px;align-items:start}
.act h3{font-family:var(--f-disp);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;line-height:1.25}
.act__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--tx-3)}
.act__barra{height:7px;background:var(--line-2);border-radius:99px;overflow:hidden}
.act__barra i{display:block;height:100%;background:var(--turquesa);border-radius:99px}
.act__pie{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.84rem;color:var(--tx-3)}

/* ------------------------------------------------------------------ pie -- */
.pie{
  border-top:1px solid var(--line);margin-top:60px;padding:26px 24px;
  text-align:center;font-size:.82rem;color:var(--tx-3);
}
.pie a{color:var(--tx-2)}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

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