:root {
  --fondo: #faf9f7;
  --superficie: #ffffff;
  --texto: #262324;
  --texto-suave: #5d5d5d;
  --borde: #ebe6df;
  --acento: #028064;
  --acento-texto: #ffffff;
  --acento-suave: #e6f4ef;
  --lima: #e3ff65;
  --lima-texto: #262324;
  --aviso: #8a4b00;
  --aviso-suave: #fff5a8;
  --ok: #028064;
  /* Tarjetas pastel */
  --pastel-1: #fcf35e;
  --pastel-2: #ff9141;
  --pastel-3: #b8e4f5;
  --pastel-4: #ffe9fe;
  --pastel-5: #e0f4fa;
  --pastel-6: #f6f1eb;
  --radio: 24px;
  --radio-peq: 12px;
  --sombra: none;
  --fuente: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1a1918;
    --superficie: #242221;
    --texto: #f3f0ea;
    --texto-suave: #b5afa7;
    --borde: #3a3633;
    --acento: #4cc9a4;
    --acento-texto: #10201b;
    --acento-suave: #173a31;
    --lima: #d4f04a;
    --lima-texto: #1a1918;
    --aviso: #ffd56b;
    --aviso-suave: #3d3618;
    --ok: #4cc9a4;
    --pastel-1: #4a4520;
    --pastel-2: #5a3418;
    --pastel-3: #1f3d4a;
    --pastel-4: #43283f;
    --pastel-5: #1d3640;
    --pastel-6: #2d2a26;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.01em;
}

.contenedor { max-width: 960px; margin: 0 auto; padding: 0 16px; }

a { color: var(--acento); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

h1 { font-size: 2.6rem; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 2rem 0 .6rem; }
h2 { font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .75rem; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.25rem 0 .5rem; }

/* Cabecera y pie */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.marca { font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; text-decoration: none; color: var(--texto); }
.cabecera-acciones { display: flex; gap: .25rem; align-items: center; }
.cabecera-acciones a.boton-texto { text-decoration: none; display: inline-flex; align-items: center; }
.pie { color: var(--texto-suave); font-size: .85rem; border-top: 1px solid var(--borde); margin-top: 3rem; padding: 1rem 0 2rem; }
.pie p { margin: .3rem 0; }

/* Botones */
.boton {
  font: inherit; font-size: .95rem; font-weight: 600;
  background: var(--acento); color: var(--acento-texto);
  border: 1px solid var(--acento); border-radius: 999px;
  padding: .55rem 1.3rem; cursor: pointer; min-height: 44px;
}
.boton:hover:not(:disabled) { filter: brightness(1.08); }
a.boton { display: inline-flex; align-items: center; text-decoration: none; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-secundario { background: transparent; color: var(--acento); }
.boton-texto { font: inherit; font-size: .95rem; background: none; border: 0; color: var(--texto); cursor: pointer; padding: .5rem .75rem; min-height: 44px; border-radius: 999px; }
.boton-texto:hover { background: var(--acento-suave); }

/* Inicio */
.subtitulo { color: var(--texto-suave); margin: 0 0 1.5rem; }
.reglas { background: var(--aviso-suave); border-radius: var(--radio); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.reglas h2 { color: var(--texto); font-size: 1.3rem; }
.reglas ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
.reglas li { margin: .35rem 0; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.tarjeta {
  display: flex; flex-direction: column; gap: .4rem; height: 100%; min-height: 150px;
  background: var(--superficie); border: 0; border-radius: var(--radio);
  padding: 1.4rem 1.5rem; text-decoration: none; color: var(--texto);
  transition: transform .15s ease;
}
.tarjetas li:nth-child(5n+1) a.tarjeta { background: var(--pastel-1); }
.tarjetas li:nth-child(5n+2) a.tarjeta { background: var(--pastel-3); }
.tarjetas li:nth-child(5n+3) a.tarjeta { background: var(--pastel-2); }
.tarjetas li:nth-child(5n+4) a.tarjeta { background: var(--pastel-4); }
.tarjetas li:nth-child(5n+5) a.tarjeta { background: var(--pastel-5); }
a.tarjeta:hover { transform: translateY(-3px); }
.tarjeta strong { font-size: 1.3rem; letter-spacing: -.02em; }
.tarjeta span:not(.etiqueta) { color: var(--texto); opacity: .8; font-size: .95rem; }
.tarjeta.inactiva { background: var(--pastel-6); color: var(--texto-suave); }
.etiqueta { align-self: flex-start; margin-top: auto; font-size: .75rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .15rem .65rem; background: var(--acento); color: var(--acento-texto); }
.etiqueta.gris { background: var(--borde); color: var(--texto-suave); }

/* Pantalla de área */
.barra-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1rem; }
.cronometro { display: flex; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 99px; padding: .2rem .4rem .2rem .9rem; }
.cronometro output { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cronometro.fin output { color: var(--aviso); }

.seccion { background: var(--superficie); border: 0; border-radius: var(--radio); padding: 1.75rem; margin: 1.25rem 0; }
.seccion > h2 { display: flex; align-items: baseline; gap: .5rem; }
.num { color: var(--texto-suave); font-weight: 400; font-size: .95rem; }

.encargo { margin: 0; background: var(--pastel-6); border-radius: var(--radio-peq); padding: 1rem 1.25rem; font-size: 1.05rem; }
.encargo footer { color: var(--texto-suave); font-size: .9rem; margin-top: .5rem; }

.documentos { list-style: none; padding: 0; margin: 0; }
.documentos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: .65rem 0; border-top: 1px solid var(--borde); }
.documentos li:first-child { border-top: 0; }
.doc-nombre { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }
.doc-desc { display: block; color: var(--texto-suave); font-size: .92rem; }

.brief { white-space: pre-wrap; font-family: var(--mono); font-size: .86rem; line-height: 1.5; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-peq); padding: 1rem 1.1rem; margin: 0 0 .75rem; }
.estado-copia { margin-left: .75rem; color: var(--ok); font-size: .9rem; }

.pistas-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.pista { background: var(--pastel-5); border-radius: var(--radio-peq); padding: .85rem 1.1rem; margin: .75rem 0 0; }
.pista strong { color: var(--acento); }
.ver-solucion { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--borde); }

.solucion h3 { border-top: 1px solid var(--borde); padding-top: 1rem; }
.solucion h3:first-child { border-top: 0; padding-top: 0; }
.solucion blockquote { margin: .5rem 0; padding: .5rem 1rem; border-left: 4px solid var(--borde); background: var(--fondo); border-radius: 0 8px 8px 0; }
.solucion .checklist { list-style: none; padding-left: 0; }
.solucion .checklist li { margin: .35rem 0; }


/* Retos por niveles */
.nivel > h2 { align-items: center; }
.nivel > .subtitulo { margin-top: -.4rem; }
.tarea { border-top: 1px solid var(--borde); padding: 1rem 0 .5rem; }
.tarea h3 { margin-top: 0; }
.tarea.extra h3 .num { color: var(--acento); }
.tarea.estrella { background: var(--lima); color: var(--lima-texto); border: 0; border-radius: var(--radio); padding: 1.4rem 1.5rem; margin-top: 1.25rem; }
.tarea.estrella h3 .num, .tarea.estrella .etiqueta-estrella { color: var(--lima-texto); }
.tarea.estrella .aprende, .tarea.estrella .nota-datos { color: var(--lima-texto); opacity: .8; }
.tarea.estrella .comprueba, .tarea.estrella .brief, .tarea.estrella .historia { background: rgba(255, 255, 255, .55); color: var(--lima-texto); border-color: transparent; }
.historia { background: var(--pastel-4); border-radius: var(--radio-peq); padding: .8rem 1.1rem; }
.etiqueta-estrella { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: -.4rem; }
.aprende { color: var(--texto-suave); font-size: .92rem; margin: -.25rem 0 .6rem; }
.pasos { padding-left: 1.25rem; margin: 0 0 .75rem; }
.pasos li { margin: .25rem 0; }
.copiable { margin: .5rem 0 .75rem; }
.comprueba { background: var(--acento-suave); border-radius: var(--radio-peq); padding: .75rem 1rem; margin: .5rem 0; }
.nota-datos { font-size: .9rem; color: var(--texto-suave); border-left: 3px solid var(--aviso); padding-left: .75rem; }
.aviso-alt { background: var(--aviso-suave); border-radius: var(--radio-peq); padding: .75rem 1rem; }
.extras { border-top: 1px dashed var(--borde); margin-top: .75rem; padding-top: .75rem; }
.extras summary { cursor: pointer; font-weight: 600; color: var(--acento); min-height: 44px; display: flex; align-items: center; }
.logros { background: var(--acento); color: var(--acento-texto); border-radius: var(--radio); padding: 1.25rem 1.5rem; margin-top: 1.25rem; }
.logros h3 { margin: 0 0 .4rem; color: var(--acento-texto); }
.logros ul { margin: 0; padding-left: 1.2rem; }
.logros li { margin: .3rem 0; }
.puede-hacer { background: var(--pastel-3); border-radius: var(--radio); padding: 1.25rem 1.5rem; margin-top: 1.25rem; }
.puede-hacer h3 { margin: 0 0 .4rem; }
.puede-hacer ul { padding-left: 1.2rem; }
.puede-hacer li { margin: .35rem 0; }
.puede-hacer q { opacity: .8; }
.capacidad { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--borde); }
.capacidad:first-child { border-top: 0; }
.capacidad input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: none; }
.capacidad small { display: block; color: var(--texto-suave); }

/* Hora 3 · Elige tu proyecto */
.area-proyectos { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin-bottom: .5rem; }
select { font: inherit; padding: .45rem .9rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--texto); min-height: 44px; }
.contenedor.ancho { max-width: 1440px; }
.hoja { border-collapse: collapse; width: 100%; min-width: 1180px; font-size: .9rem; margin: .75rem 0 1rem; }
.hoja th, .hoja td { border: 1px solid var(--borde); padding: 0; vertical-align: middle; }
.hoja thead th { background: var(--fondo); text-align: left; font-weight: 600; padding: .35rem .5rem; white-space: nowrap; position: sticky; top: 0; }
.hoja td input, .hoja td select { width: 100%; min-height: 40px; border: 0; border-radius: 0; background: transparent; color: var(--texto); font: inherit; padding: .35rem .5rem; }
.hoja td input:focus, .hoja td select:focus { outline: 2px solid var(--acento); outline-offset: -2px; background: var(--superficie); }
.hoja td.num-celda input, .hoja td.calc { text-align: right; font-variant-numeric: tabular-nums; }
.hoja td.num-celda { width: 6.5rem; }
.hoja td.tarea-celda { min-width: 20rem; }
.hoja td.notas-celda { min-width: 14rem; }
.hoja td select { min-width: 7rem; }
.hoja td:nth-child(8) select { min-width: 14rem; }
.hoja td.calc { padding: .35rem .6rem; background: var(--fondo); font-weight: 600; }
.hoja td.seleccion-celda { text-align: center; width: 4.5rem; }
.hoja td.seleccion-celda input { width: 1.3rem; height: 1.3rem; min-height: 0; }
.hoja td.etiquetas-celda { padding: .25rem .4rem; width: 7.5rem; }
.hoja td.etiquetas-celda .etiqueta { display: inline-block; margin: .1rem 0; }
.hoja td.acciones-celda { padding: .25rem .4rem; white-space: nowrap; }
.hoja td.acciones-celda .boton { min-height: 36px; padding: .3rem .7rem; }
.hoja tr.elegido td { background: var(--acento-suave); }
.hoja tr.elegido td.calc { background: var(--acento-suave); }
.ordenar { font: inherit; font-weight: 600; background: none; border: 0; color: var(--acento); cursor: pointer; padding: 0; min-height: 32px; }
.ordenar.activo { text-decoration: underline; }
.aviso-celda { display: block; font-size: .78rem; color: var(--texto-suave); padding: 0 .5rem .3rem; }
.aviso-celda.fuerte { color: var(--aviso); font-weight: 600; }
.pasos-eleccion { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.pasos-eleccion li { margin: .2rem 0; }
.leyenda-datos { font-size: .88rem; color: var(--texto-suave); padding-left: 1.1rem; }
.acciones-proyecto { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: .5rem; }
.etiqueta.ok { background: var(--acento); color: var(--acento-texto); }

/* Cuestionario de protección de datos */
.marcador { font-weight: 600; color: var(--texto-suave); margin-top: 0; }
.pregunta { border-top: 1px solid var(--borde); padding: 1rem 0; }
.pregunta:first-of-type { border-top: 0; }
.pregunta h3 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.4; }
.respuestas { display: flex; flex-wrap: wrap; gap: 8px; }
.boton.correcta { background: var(--ok); border-color: var(--ok); color: #fff; opacity: 1; }
.boton.incorrecta { background: var(--aviso); border-color: var(--aviso); color: #fff; opacity: 1; }
.boton.apagada { opacity: .4; }
.explicacion { border-radius: var(--radio-peq); padding: .75rem 1rem; margin-top: .7rem; }
.explicacion.bien { background: var(--acento-suave); }
.explicacion.mal { background: var(--aviso-suave); }
.explicacion p { margin: .2rem 0; }
.explicacion .norma { font-size: .85rem; color: var(--texto-suave); }
.resultado h2 { font-size: 2rem; margin-bottom: .25rem; }

/* Página de acceso (la sirve functions/_middleware.js) */
.acceso { max-width: 480px; margin-top: 10vh; }
.acceso h1 { font-size: 1.5rem; margin-top: 0; }
.acceso form { display: grid; gap: .5rem; margin: 1rem 0; }
.acceso label { font-weight: 600; }
.acceso input { font: inherit; padding: .55rem 1rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--texto); min-height: 44px; }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--borde); }
.seccion .checklist { list-style: none; padding: 0; margin: 0; }
.seccion .checklist li { margin: .5rem 0; }

/* Diálogos */
dialog { border: 0; border-radius: var(--radio); padding: 0; max-width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialogo { padding: 1.75rem; }
.dialogo ul { padding-left: 1.2rem; }
.dialogo dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.dialogo dt { color: var(--texto-suave); }
.dialogo dd { margin: 0; }
.acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 1.9rem; }
  .seccion { padding: 1.1rem; border-radius: 18px; }
  .tarea.estrella { padding: 1.1rem; }
  .dialogo dl { grid-template-columns: 1fr; }
  .dialogo dt { margin-top: .4rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }