/* La guía de aprobadoras. Los colores llegan de colores.css de cada comunidad,
   armados desde src/marca.py; aquí solo va la forma. */

@font-face {
  font-family: "Karla";
  src: url("fuentes/karla.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 3px; overflow-wrap: anywhere; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

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

/* --- Cabecera --- */

.mast { padding: 28px 0 22px; border-bottom: 1px solid var(--line); }
.mast-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

/* El logotipo es una máscara alfa: toma el color de la tinta del tema solo. La
   imagen la pone colores.css de cada comunidad, que vive al lado de su logo. */
.logo { display: block; background: var(--ink); }

.kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1 {
  margin: 8px 0 10px;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.marca-resalte { background: var(--accent); color: var(--accent-ink); padding: 0 .18em; }

.stand { margin: 0; color: var(--ink-soft); max-width: 36em; }

.tema {
  font: inherit;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.tema:hover { border-color: var(--brand); }

/* --- Pestañas --- */

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 0 12px;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  position: sticky;
  top: 0;
  background: var(--ground);
  z-index: 5;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
/* En computador caben todas: se envuelven en vez de esconder la última. */
@media (min-width: 700px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
}

.tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.tabs a:hover { border-color: var(--brand); }
.tabs a[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }

.progreso {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--ink-soft);
}
.tabs a[aria-selected="true"] .progreso { background: rgba(255, 255, 255, .22); color: inherit; }
.progreso.completo { background: var(--ok); color: var(--surface); font-weight: 700; }

/* Sin JavaScript se leen todos los capítulos seguidos; con él, uno a la vez. */
.js .panel { display: none; }
.js .panel.activa { display: block; }
.panel { padding: 8px 0 48px; }

h2 { font-size: 1.625rem; line-height: 1.2; margin: 26px 0 12px; }
.subtitulo { font-size: 1.25rem; margin: 36px 0 12px; }
.entrada { font-size: 1.125rem; margin: 0 0 24px; }
.suave { color: var(--ink-soft); }

/* --- Pasos --- */

.paso {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow, none);
  padding: 18px 18px 8px;
  margin: 0 0 18px;
}
.paso > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.paso h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; flex: 1 1 12em; }
.paso .n {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.paso.hecho .n { background: var(--ok); }

.listo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.listo input { width: 18px; height: 18px; accent-color: var(--ok); margin: 0; }
.paso.hecho .listo { border-color: var(--ok); color: var(--ink); font-weight: 700; }

.chequeo { padding-left: 1.2em; margin: 0 0 16px; }
.chequeo li { margin: 6px 0; }

/* --- Capturas con puntos --- */

.captura { margin: 18px 0 20px; }
.lienzo {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  line-height: 0;
}
.captura.telefono .lienzo { max-width: 390px; margin: 0 auto; }
/* En teléfono la captura usa todo el ancho de la tarjeta: con el margen del paso
   encima, la letra de la pantalla quedaba demasiado chica para leerla. */
@media (max-width: 480px) {
  .paso .captura { margin-left: -17px; margin-right: -17px; }
  .paso .captura .lienzo { border-left: 0; border-right: 0; }
  .paso .leyenda { padding: 0 17px; }
}
.lienzo img { width: 100%; height: auto; display: block; }

/* El punto se apoya en la esquina de arriba a la izquierda del objetivo, casi
   todo por fuera, para no tapar la palabra que señala ni el botón de al lado.
   Si el objetivo pega al borde de la captura, entra un poco. */
.punto {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1c5e6a;
  color: #fff;
  font: 700 0.8125rem/1 "Karla", ui-sans-serif, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transform: translate(-96%, -58%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3);
}
.punto.dentro { transform: translate(-15%, -58%); }
/* La zona de toque crece sin agrandar el círculo. */
.punto::after { content: ""; position: absolute; inset: -9px; }
.punto[aria-pressed="true"] { background: #cde463; color: #16210a; border-color: #16210a; }

.leyenda { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: punto; }
.leyenda li {
  counter-increment: punto;
  position: relative;
  padding: 8px 10px 8px 40px;
  margin: 2px 0;
  border-left: 3px solid transparent;
}
.leyenda li::before {
  content: counter(punto);
  position: absolute;
  left: 6px;
  top: 9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leyenda li.activa { background: var(--surface-alt); border-left-color: var(--accent); }

/* --- Notas, tablas y mensajes --- */

.nota {
  border-left: 3px solid var(--accent);
  background: var(--surface-alt);
  padding: 12px 16px;
  margin: 18px 0;
}
.nota.ojo { border-left-color: var(--alerta); }
.nota h4 { margin: 0 0 4px; font-size: 1rem; }
.nota p { margin: 0; }

.pestanas, .preguntas { margin: 12px 0 16px; }
.pestanas div, .preguntas div { padding: 8px 0; border-top: 1px solid var(--line); }
.pestanas dt, .preguntas dt { font-weight: 700; }
.pestanas dd, .preguntas dd { margin: 2px 0 0; color: var(--ink-soft); }

.tabla { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
tr:last-child td { border-bottom: 0; }

.mensaje {
  background: var(--surface-alt);
  border: 1px dashed var(--line);
  padding: 12px 14px;
  margin: 12px 0;
}
.mensaje p { margin: 0 0 8px; font-style: italic; }
.copiar {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.copiar:hover { background: var(--brand); color: var(--brand-ink); }

.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.columna { background: var(--surface); border: 1px solid var(--line); padding: 14px 18px; }
.columna h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.columna ul { margin: 0; padding-left: 1.2em; }
.acuerdos { margin-top: 24px; border: 2px dashed var(--line); padding: 16px 18px; }
.acuerdos h3 { margin: 0; }

.pie { border-top: 1px solid var(--line); padding: 18px 0 32px; font-size: 0.875rem; color: var(--ink-soft); }

/* --- Portada --- */

.portada { padding-top: 12vh; }
.puertas-guia { display: grid; gap: 14px; margin-top: 24px; }
.puerta-guia {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.puerta-guia:hover { border-color: var(--brand); }
.puerta-guia b { font-size: 1.25rem; }
.puerta-guia span { color: var(--ink-soft); }

@media (forced-colors: active) {
  .paso, .nota, .tabs a, .punto, .listo, .columna, .mensaje { border: 1px solid currentColor; }
  .tabs a[aria-selected="true"] { outline: 2px solid currentColor; outline-offset: -3px; }
}

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