/* Estilos base de analisistg.

   Objetivo de accesibilidad WCAG 2.2 AA: contraste suficiente, foco visible,
   tipografía fluida y toque cómodo en móvil. Sin dependencias externas: una
   sola hoja, servible desde el propio dominio.
*/

:root {
  --tinta: #1a1c1e;
  --tinta-suave: #45484c;
  --fondo: #ffffff;
  --fondo-suave: #f3f4f6;
  --linea: #d4d7dc;
  --marca: #14532d;          /* verde gastronómico, contraste AA sobre blanco */
  --marca-clara: #e7f2ea;
  --alta: #8a1c1c;
  --media: #8a5a00;
  --baja: #3a4a5a;
  --ok: #14532d;
  --aviso-warn: #8a5a00;
  --radio: 8px;
  --espacio: 1rem;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
}

/* Accesibilidad: enlace de salto y utilidad de ocultado visual */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marca);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.saltar:focus { left: 0; }

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

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

/* Estructura */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio);
  flex-wrap: wrap;
  padding: 0.75rem var(--espacio);
  border-bottom: 2px solid var(--marca);
}
.cabecera__marca { font-weight: 700; color: var(--marca); }

.contenido {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--espacio);
}

.pie {
  max-width: 48rem;
  margin: 2rem auto 0;
  padding: var(--espacio);
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

/* Idiomas */
.idiomas select {
  font-size: 1rem;
  padding: 0.4rem;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* Avisos */
.avisos { max-width: 48rem; margin: 1rem auto 0; padding: 0 var(--espacio); }
.aviso {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border-left: 4px solid var(--linea);
  background: var(--fondo-suave);
  margin: 0.5rem 0;
}
.aviso--success { border-left-color: var(--ok); background: var(--marca-clara); }
.aviso--warning { border-left-color: var(--aviso-warn); background: #fdf5e6; }
.aviso--error   { border-left-color: var(--alta); background: #fbeaea; }
.aviso--info    { border-left-color: var(--baja); background: var(--fondo-suave); }

/* Barra de progreso */
.barra {
  height: 14px;
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: 999px;
  overflow: hidden;
}
.barra__relleno {
  display: block;
  height: 100%;
  background: var(--marca);
}
.progreso-global, .progreso-tema { margin: 0.5rem 0 1rem; }

/* Índice de temas */
.temas { list-style: none; padding: 0; }
.tema-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio);
  padding: 0.9rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 0.6rem;
}
.tema-item--completo { border-color: var(--ok); background: var(--marca-clara); }
.tema-item--bloqueado { opacity: 0.65; }
.tema-item__codigo {
  display: inline-block;
  min-width: 2rem;
  font-weight: 700;
  color: var(--marca);
}
.tema-item__titulo a { color: var(--tinta); }

.etiqueta {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--fondo-suave);
  white-space: nowrap;
}
.etiqueta--ok { background: var(--ok); color: #fff; }

/* Preguntas */
.subtema {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin: 1.5rem 0;
}
.subtema > legend {
  font-weight: 700;
  color: var(--marca);
  padding: 0 0.4rem;
}
.pregunta {
  border: 0;
  border-top: 1px solid var(--linea);
  padding: 1rem 0 0.5rem;
  margin: 0;
}
.subtema .pregunta:first-of-type { border-top: 0; }
.pregunta__enunciado { font-weight: 600; padding: 0; }
.pregunta__ayuda { color: var(--tinta-suave); font-size: 0.95rem; margin: 0.3rem 0; }

.prioridad {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
  color: #fff;
}
.prioridad--alta  { background: var(--alta); }
.prioridad--media { background: var(--media); }
.prioridad--baja  { background: var(--baja); }

.opciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  flex: 1 1 8rem;
}
.opcion:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-clara);
  font-weight: 600;
}
.opcion input { width: 1.2rem; height: 1.2rem; }

/* Botones */
.boton {
  display: inline-block;
  font-size: 1rem;
  padding: 0.7rem 1.2rem;
  min-height: 44px;
  border: 1px solid var(--marca);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--marca);
  cursor: pointer;
  text-decoration: none;
}
.boton--principal { background: var(--marca); color: #fff; }
.acciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0.5rem;
}
.acciones .boton--principal { margin-left: auto; }
.nota { color: var(--tinta-suave); font-size: 0.9rem; }
.miga { color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 0.5rem; }
.miga a { color: var(--marca); }

/* Modo oscuro por preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e6e8ea;
    --tinta-suave: #b4b8bd;
    --fondo: #17191c;
    --fondo-suave: #22262b;
    --linea: #3a3f45;
    --marca: #7fd39b;
    --marca-clara: #1e2f25;
    --alta: #f19b9b;
    --media: #e6c06b;
    --baja: #9fb6cc;
    --ok: #7fd39b;
  }
  .etiqueta--ok, .boton--principal, .barra__relleno { color: #10231a; }
  .prioridad { color: #10231a; }
}