@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Atkinson+Hyperlegible:wght@400;700&family=Chakra+Petch:wght@500;600;700&display=swap');

/* Tema claro neo cyberpunk de Geekz (el mismo del portal y la votación), con detalles navideños. */
:root {
  --morado: #7701a6;
  --morado-2: #a63ee8;
  --lila: #7701a6;      /* acentos de texto y enlaces */
  --cian: #0a8f9e;      /* etiquetas */
  --ok: #0f9a64;
  --rosa: #d1246b;
  --oro: #9a6700;       /* dorado legible sobre fondo claro */
  --rojo: #d6324d;      /* rojo navideño */
  --texto: #1b1030;
  --suave: #4b4366;
  --tenue: #6b6386;
  --panel: rgba(255, 255, 255, 0.82);
  --borde: rgba(119, 1, 166, 0.28);
  --campo: #ffffff;
  --linea: rgba(60, 20, 100, 0.16);
  --titulo: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Chakra Petch', ui-monospace, monospace;
  /* Luces navideñas: colores vivos aunque el fondo sea claro */
  --luz-roja: #ff4d6d;
  --luz-verde: #2fcf8f;
  --luz-oro: #ffd84d;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  font: 400 16px/1.5 'Atkinson Hyperlegible', system-ui, sans-serif;
  background-color: #f1ebfa;
  /* Halos morado, verde y rojo sobre un degradado lila claro */
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(177, 77, 255, 0.20), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(15, 154, 100, 0.14), transparent 70%),
    radial-gradient(460px 300px at 55% 100%, rgba(214, 50, 77, 0.10), transparent 70%),
    linear-gradient(160deg, #fbf8ff 0%, #f1ebfa 55%, #e9e1f6 100%) fixed;
}
a { color: var(--lila); }
a:hover { color: #4d006c; }
h1, h2, h3 { font-family: var(--titulo); margin: 0; line-height: 1.1; }
h1 { font-size: clamp(34px, 6vw, 54px); font-weight: 800; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0; }

.cabecera {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 18px 5%; background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca .logo { display: block; height: 36px; width: auto; }
.marca .sub { font: 600 12px var(--mono); letter-spacing: 0.14em; color: var(--rojo); padding-left: 12px; border-left: 1px solid var(--linea); }
.luces {
  height: 14px;
  background:
    radial-gradient(circle, var(--luz-roja) 0 3.5px, transparent 4.5px) 0 0 / 54px 14px repeat-x,
    radial-gradient(circle, var(--luz-verde) 0 3.5px, transparent 4.5px) 18px 0 / 54px 14px repeat-x,
    radial-gradient(circle, var(--luz-oro) 0 3.5px, transparent 4.5px) 36px 0 / 54px 14px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 216, 77, 0.8));
}
.aviso-prueba {
  background: var(--luz-oro); color: #1a1200; text-align: center; padding: 8px 16px;
  font: 700 13px var(--mono); letter-spacing: 0.06em;
}

.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 40px 5% 64px; }
.angosto { max-width: 860px; }
.etiqueta { font: 600 12px var(--mono); letter-spacing: 0.14em; color: var(--cian); text-transform: uppercase; }
.dorado { color: var(--oro); }
.tenue { color: var(--tenue); }
.suave { color: var(--suave); }
.pila { display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.entre { justify-content: space-between; }
.grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 28px;
  box-shadow: 0 18px 40px rgba(70, 20, 120, 0.12);
}
.panel.chico { padding: 18px; border-radius: 12px; box-shadow: 0 8px 20px rgba(70, 20, 120, 0.06); }

label.campo, div.campo { display: flex; flex-direction: column; gap: 6px; }
label.campo > span, div.campo > span { font: 600 12px var(--mono); letter-spacing: 0.1em; color: var(--cian); text-transform: uppercase; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--linea); background: var(--campo);
  color: #14102a; padding: 10px 14px; font: 400 16px 'Atkinson Hyperlegible', sans-serif;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--morado-2); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: #8a83a3; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, var(--morado), var(--morado-2)); font: 700 16px var(--titulo);
  box-shadow: 0 10px 24px rgba(119, 1, 166, 0.28);
}
.boton:hover { color: #fff; filter: brightness(1.08); }
.boton:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.boton.secundario { background: #fff; border: 1px solid var(--morado-2); color: var(--lila); box-shadow: 0 6px 16px rgba(119, 1, 166, 0.10); }
.boton.peligro { background: #fff; border: 1px solid var(--rojo); color: var(--rojo); box-shadow: none; }
.boton.ok { background: var(--ok); color: #fff; box-shadow: 0 10px 24px rgba(15, 154, 100, 0.25); }
.boton.chico { min-height: 38px; padding: 0 14px; font-size: 14px; }
.boton.bloque { width: 100%; }
.enlace { background: none; border: 0; padding: 0; color: var(--lila); font: inherit; cursor: pointer; text-decoration: underline; min-height: 44px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff;
  font: 600 12px var(--mono); letter-spacing: 0.06em; border: 1px solid currentColor; white-space: nowrap;
}
.chip.ok { color: var(--ok); } .chip.mal { color: var(--rojo); } .chip.oro { color: var(--oro); }
.chip.cian { color: var(--cian); } .chip.lila { color: var(--lila); } .chip.rosa { color: var(--rosa); }
/* Las etiquetas sueltas en un panel pueden ocupar dos líneas en pantallas angostas. */
.panel > .chip { white-space: normal; max-width: 100%; }

.mensaje { border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.mensaje.error { background: #fff0f5; border: 1px solid var(--rojo); color: #7a0f3b; }
.mensaje.ok { background: #ecfbf4; border: 1px solid var(--ok); color: #0a5a3b; }
.mensaje.info { background: #eafbfc; border: 1px solid var(--cian); color: #0b4f57; }
.oculto { display: none !important; }

.lista-pasos .fila { flex-wrap: nowrap; }
.lista-pasos .chip { flex-shrink: 0; }
.pasos { display: flex; flex-wrap: wrap; gap: 8px; }
.pasos a { text-decoration: none; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--linea); background: #fff; font: 600 12px var(--mono); letter-spacing: 0.08em; color: var(--suave); }
.pasos a.listo { border-color: var(--ok); color: var(--ok); }

.subida { border: 1px dashed var(--morado-2); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, 0.6); }
.subida.lista { border-style: solid; border-color: var(--ok); }
.subida.no-pdf { border-style: solid; border-color: var(--rojo); }
.borrador { padding: 14px 16px; border-radius: 12px; background: #f6f0fd; border: 1px dashed var(--morado-2); }
.borrador.guardado { background: #ecfbf4; border: 1px solid var(--ok); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 22px; position: relative; }
.linea-tiempo li::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--linea); }
.linea-tiempo li:last-child::before { display: none; }
.punto { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea); background: #fff; font: 700 14px var(--mono); color: var(--tenue); }
.hecho .punto { border-color: var(--ok); color: var(--ok); }
.actual .punto { border-color: var(--luz-oro); color: var(--oro); box-shadow: 0 0 12px rgba(255, 216, 77, 0.8); }

.tabla-envoltura { overflow-x: auto; border-radius: 12px; border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.84); }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(60, 20, 100, 0.1); vertical-align: middle; }
th { font: 600 11px var(--mono); letter-spacing: 0.12em; color: var(--cian); background: #f6f0fd; position: sticky; top: 0; }
tbody tr:hover { background: rgba(166, 62, 232, 0.06); }
.num { font: 700 18px var(--mono); }

.sjt { width: 100%; min-width: 0; }
.sjt th, .sjt td { padding: 8px; }
.opcion-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; cursor: pointer; }
.opcion-radio:has(input:checked) { border-color: var(--morado-2); background: rgba(166, 62, 232, 0.08); }
.opcion-radio input { margin-top: 4px; accent-color: var(--morado-2); width: 18px; height: 18px; flex: none; }
.pre { white-space: pre-line; }
.ficha { background: #fffaea; border: 1px solid rgba(212, 160, 23, 0.6); border-radius: 12px; padding: 18px; }
.correcta { color: var(--ok); } .incorrecta { color: var(--rojo); }

.navegacion { display: flex; flex-wrap: wrap; gap: 6px; }
.navegacion a { padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--suave); font: 600 13px var(--mono); }
.navegacion a.activo { background: linear-gradient(90deg, var(--morado), var(--morado-2)); color: #fff; }

.grilla > *, .fila > * { min-width: 0; }

/* Portada: en computador, texto y pasos a la izquierda y el ingreso a la derecha.
   En celular el ingreso va justo después del texto, antes de los pasos, para verlo sin bajar tanto. */
.portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "texto ingreso" "pasos ingreso"; gap: 22px 48px; align-content: center; }
.portada-texto { grid-area: texto; gap: 22px; align-self: end; }
.portada-intro { font-size: 18px; max-width: 520px; }
.portada-ingreso { grid-area: ingreso; align-self: center; }
.portada-pasos { grid-area: pasos; align-self: start; }
@media (max-width: 860px) {
  .portada { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "ingreso" "pasos"; }
  .portada-ingreso { max-width: 560px; }
}
@media (max-width: 640px) {
  .portada-texto { gap: 12px; }
  .portada-intro { font-size: 16px; }
}

/* Tablet */
@media (max-width: 900px) {
  .contenedor { padding: 32px 24px 56px; }
  h1 { font-size: clamp(30px, 7vw, 44px); }
}

/* Celular */
@media (max-width: 640px) {
  .panel { padding: 18px; border-radius: 14px; }
  .contenedor { padding: 24px 16px 48px; }
  .cabecera { padding: 12px 16px; }
  .marca .sub { font-size: 10px; letter-spacing: 0.1em; }
  h2 { font-size: 21px; }
  .grilla { grid-template-columns: 1fr; }
  .fila > .boton, .borrador .boton { width: 100%; }
  .pasos a { flex: 1 1 calc(50% - 8px); text-align: center; }
  .navegacion { width: 100%; }
  .navegacion a { flex: 1 1 auto; text-align: center; }
  input, select, textarea { font-size: 16px; } /* evita el zoom automático en iPhone */
}

/* Top 3 de tiendas */
.top3 { border: 1px solid var(--borde); border-radius: 12px; margin: 0; padding: 14px 16px 16px; background: #fbf8ff; }
.top3 legend { padding: 0 6px; font: 600 12px var(--mono); letter-spacing: 0.1em; color: var(--cian); text-transform: uppercase; }
.medalla { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 11px var(--mono); color: #fff; vertical-align: middle; margin-right: 4px; }
.m1 { background: #d4a017; } .m2 { background: #a3a3b8; } .m3 { background: #c07a3a; }
.lista-top3 { display: flex; flex-direction: column; gap: 2px; font-size: 13px; white-space: nowrap; }

/* Validación en vivo */
.ayuda { font-size: 13px; min-height: 0; }
.ayuda.ok { color: var(--ok); }
.ayuda.mal { color: var(--rojo); }
input.invalido, select.invalido { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(214, 50, 77, 0.12); }
.aviso-rut { padding: 14px 16px; border-radius: 12px; background: #fffaea; border: 1px solid #d4a017; }

/* Gráficos de efectividad de preguntas: barras finas, una serie morada, correcta en verde con ✓ */
.filtros-graf { align-items: flex-end; }
.graf { display: flex; flex-direction: column; gap: 2px; }
.graf-fila { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; border: 0; background: none; font: inherit; color: inherit; text-align: left; width: 100%; }
.graf-fila:hover, .graf-fila[aria-pressed="true"] { background: rgba(166, 62, 232, 0.08); }
.graf-etiqueta { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.graf-pista { height: 14px; background: rgba(60, 20, 100, 0.07); border-radius: 0 4px 4px 0; overflow: hidden; }
.graf-barra { height: 100%; background: #7701a6; border-radius: 0 4px 4px 0; }
.graf-barra.ok { background: #0f9a64; }
.graf-barra.b { background: #0a8f9e; }
.graf-valor { font: 700 14px var(--mono); text-align: right; color: var(--texto); }
.graf-sin { font-size: 13px; color: var(--tenue); }
.graf-apilada { display: flex; gap: 2px; height: 14px; }
.graf-apilada > div { height: 100%; }
.graf-apilada > div:first-child { border-radius: 0; }
.graf-apilada > div:last-child { border-radius: 0 4px 4px 0; }
.leyenda-punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: middle; }
.tip { position: fixed; z-index: 50; white-space: pre-line; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: #1b1030; color: #fff; font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 24px rgba(27, 16, 48, 0.3); }
.dist { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 640px) {
  .graf-fila { grid-template-columns: minmax(0, 1fr) 56px; }
  .graf-etiqueta { grid-column: 1 / -1; white-space: normal; }
}

/* Selección en el ranking y entrevistas grupales */
.marca-sel { width: 20px; height: 20px; min-height: 0; accent-color: var(--morado-2); cursor: pointer; }
tr.marcada td { background: rgba(166, 62, 232, 0.07); }
/* Ranking: que la tabla quepa en un notebook (1280 px): celdas más justas y textos que pueden partirse en dos líneas. */
.contenedor.ancho { max-width: 1440px; }
.tabla-ranking th, .tabla-ranking td { padding: 10px; }
.tabla-ranking .chip, .tabla-ranking .lista-top3 { white-space: normal; }
.barra-sel.activa { position: sticky; top: 8px; z-index: 5; background: #fff; }
.barra-sel.activa .sel-ayuda { display: none; }
.marca-pre { color: var(--oro); font-size: 16px; cursor: help; }
/* En celular la barra es alta: queda en su lugar para no tapar la tabla. */
@media (max-width: 640px) { .barra-sel { position: static; } }
.segmentado { display: flex; gap: 6px; flex-wrap: wrap; }
.segmentado button { min-width: 52px; min-height: 46px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 700 16px var(--mono);
  background: #fff; color: var(--lila); border: 1px solid rgba(60, 20, 100, 0.2); box-shadow: 0 4px 12px rgba(119, 1, 166, 0.08); }
.segmentado button.activo { background: linear-gradient(90deg, var(--morado), var(--morado-2)); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(119, 1, 166, 0.25); }
.horarios { padding-top: 12px; border-top: 1px solid rgba(60, 20, 100, 0.1); }
.grupos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.grupo { border-top: 3px solid var(--morado-2); }
.grupo.agendado { border-top-color: var(--ok); }
.lista-grupo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.persona-grupo { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(60, 20, 100, 0.08); }
.persona-grupo:last-child { border-bottom: 0; padding-bottom: 0; }

/* Aviso de datos antes de postular */
.aviso-datos { gap: 18px; }
.aviso-punto { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.aviso-punto p { margin: 0; font-size: 17px; line-height: 1.55; }
.aviso-icono { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--mono); color: #fff;
  background: linear-gradient(135deg, var(--morado), var(--morado-2)); box-shadow: 0 6px 16px rgba(119, 1, 166, 0.22); }
.mensaje.aviso { background: #fffaea; border: 1px solid #d4a017; color: #6b4a00; }
.mensaje.plazo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cierre { border: 1px solid rgba(119, 1, 166, 0.3); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 240, 253, 0.95)); }

/* Cuestionario tipo videojuego: preguntas a la izquierda y "HUD" de avance a la derecha */
.juego { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.pregunta { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pregunta legend, .pregunta .leyenda { font-weight: 700; font-size: 17px; line-height: 1.45; margin-bottom: 10px; padding: 0; }
.pregunta .codigo { display: inline-block; font: 700 12px var(--mono); color: var(--lila); background: rgba(166, 62, 232, 0.12); border-radius: 6px; padding: 2px 7px; margin-right: 8px; vertical-align: 2px; }
.opcion-radio .letra { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; font: 700 12px var(--mono); color: var(--lila); background: #f6f0fd; }
.hud { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, #f6f0fd); border: 1px solid rgba(119, 1, 166, 0.25); box-shadow: 0 16px 36px rgba(70, 20, 120, 0.14); }
.hud-cabeza { display: flex; flex-direction: column; gap: 4px; }
.hud-nivel { font: 700 16px var(--titulo); }
.hud-xp { height: 14px; border-radius: 999px; background: rgba(60, 20, 100, 0.10); overflow: hidden; box-shadow: inset 0 1px 3px rgba(60, 20, 100, 0.15); }
.hud-xp span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0f9a64, #2fcf8f, #ffd84d); box-shadow: 0 0 10px rgba(47, 207, 143, 0.6); transition: width 0.4s ease; }
.hud-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hud-niveles button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.hud-niveles button:hover { background: rgba(166, 62, 232, 0.07); }
.hud-niveles li.actual button { border-color: var(--morado-2); background: rgba(166, 62, 232, 0.10); }
.hud-icono { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: #fff; border: 1px solid rgba(60, 20, 100, 0.15); }
.hud-niveles li.listo .hud-icono { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.hud-titulo { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-final { margin: 0; padding: 10px; border-radius: 10px; background: #fffaea; border: 1px solid #d4a017; font-size: 14px; }
@media (max-width: 820px) {
  .juego { grid-template-columns: minmax(0, 1fr); }
  /* En celular queda fijo arriba mientras se responde: solo el nivel, los XP y la barra, para no tapar las preguntas. */
  .hud { order: -1; position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 6px 12px; padding: 8px 14px; border-radius: 12px; }
  .hud-cabeza { grid-column: 1; grid-row: 1; }
  .hud-cabeza .etiqueta, .hud-cifras .tenue, .hud-niveles, .hud-final { display: none; }
  .hud-nivel { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-cifras { grid-column: 2; grid-row: 1; }
  .hud-xp { grid-column: 1 / -1; height: 8px; }
}