/* =======================================================================
   Puntos — capa de página sobre el sistema DS.
   Sin literales de color: todo sale de los tokens de colors_and_type.css.
   ======================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg-2); }

body {
  margin: 0;
  background: var(--bg-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Salto al contenido ------------------------------------------------
   Desplazado por su propia altura, no por un top negativo fijo: así no
   asoma cuando cambia el tamaño de letra. */
.saltar {
  position: absolute;
  left: var(--sp-4);
  top: 0;
  z-index: 10;
  /* Desplazado por su altura MÁS un pelo: a translateY(-100%) exacto le
     quedaba una fila de un píxel asomando arriba a la izquierda. */
  transform: translateY(calc(-100% - var(--bw-2)));
  background: var(--ds-rojo);
  color: var(--ds-blanco);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-4);
}
.saltar:focus { transform: translateY(0); color: var(--ds-blanco); }

/* ---- Cabecera --------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-2);
  border-bottom: var(--bw-heavy) solid var(--ds-verde);
}
.cabecera__interior {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cabecera__marca { display: inline-flex; }
.cabecera__marca img { display: block; width: 168px; height: auto; }

.cabecera__nav {
  display: flex;
  gap: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
}
.cabecera__nav a {
  color: var(--fg-1);
  text-decoration: none;
  padding: var(--sp-3) 0;
  border-bottom: var(--bw-2) solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cabecera__nav a:hover { color: var(--ds-rojo); border-bottom-color: var(--ds-rojo); }
.cabecera__nav a[aria-current="page"] { border-bottom-color: var(--ds-verde); }

/* ---- Cuerpo ----------------------------------------------------------- */
.envoltura {
  flex: 1;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}

.portada { margin-bottom: var(--sp-7); }
.portada h1 { margin: 0 0 var(--sp-4); }
.portada p {
  margin: 0;
  max-width: var(--measure);
  color: var(--fg-2);
}

/* ---- Acordeón de temas -------------------------------------------------
   <details> nativo: abre y cierra con teclado y sin JS. */
.temas { display: flex; flex-direction: column; gap: var(--sp-4); }

.tema {
  scroll-margin-top: var(--sp-9);
  background: var(--bg-1);
  border: var(--bw-1) solid var(--ds-verde);
  border-left: var(--bw-banner) solid var(--ds-verde);
  border-radius: var(--radius-0);
}
/* La barra roja marca el tema que está abierto — de lo que se está hablando. */
.tema[open] { border-left-color: var(--ds-rojo); }
.tema:target { border-color: var(--ds-rojo); }

.tema__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.tema__titulo::-webkit-details-marker { display: none; }
.tema__titulo:hover { color: var(--ds-rojo); }

/* Marcador tipográfico, no ícono: + cerrado, − abierto. */
.tema__marca {
  flex: none;
  width: 1em;
  font-weight: 400;
  color: var(--ds-rojo);
}
.tema__marca::before { content: "+"; }
.tema[open] .tema__marca::before { content: "\2212"; }

.tema__nombre { flex: 1; }

.tema__cuenta {
  flex: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  color: var(--fg-3);
  /* El cuerpo va con cifras elzevirianas; en una etiqueta versalita
     desentonan. Aquí van alineadas. */
  font-variant-numeric: lining-nums;
}

.tema__cuerpo { padding: 0 var(--sp-5) var(--sp-5); }

.tema__entradilla {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw-1) solid var(--border-2);
  color: var(--fg-2);
  font-size: var(--fs-small);
  max-width: var(--measure);
}

/* ---- Puntos ----------------------------------------------------------- */
.puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

.punto { display: flex; flex-direction: column; gap: var(--sp-2); }
.punto__texto {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
.punto__nota {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-3);
  max-width: var(--measure);
}
.punto__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-1); }

/* ---- Botones ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  border: var(--bw-2) solid transparent;
  border-radius: var(--radius-2);
  background: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { box-shadow: var(--shadow-press); transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.btn--primario { background: var(--ds-rojo); color: var(--ds-blanco); border-color: var(--ds-rojo); }
.btn--primario:hover:not([disabled]) { background: var(--ds-rojo-dark); border-color: var(--ds-rojo-dark); }

.btn--fantasma { color: var(--ds-verde); border-color: var(--ds-verde); }
.btn--fantasma:hover:not([disabled]) { background: var(--ds-verde); color: var(--ds-cream); }

.btn--pequeno { min-height: 36px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-micro); }

/* Acción de texto al estilo editorial: sin caja, con regla roja debajo.
   Una fila de botones enmarcados idénticos bajo cada punto era puro ruido. */
.btn--enlace {
  padding: var(--sp-3) 0;
  min-height: 44px;
  color: var(--ds-rojo);
  border: 0;
  border-bottom: var(--bw-2) solid var(--ds-rojo);
  border-radius: var(--radius-0);
  font-size: var(--fs-micro);
}
.btn--enlace:hover:not([disabled]) { color: var(--ds-verde); border-bottom-color: var(--ds-verde); }
.btn--enlace:active { box-shadow: none; }

/* Confirmación de copiado: el botón dice lo que pasó, sin globo flotante. */
.btn[data-estado="copiado"] { color: var(--ds-verde); border-color: var(--ds-verde); }

/* ---- Estados vacíos y avisos ------------------------------------------ */
.vacio {
  border: var(--bw-1) solid var(--border-2);
  padding: var(--sp-6);
  text-align: left;
  color: var(--fg-2);
}
.vacio p { margin: 0 0 var(--sp-4); }
.vacio p:last-child { margin-bottom: 0; }

.aviso {
  border-left: var(--bw-heavy) solid var(--ds-rojo);
  background: var(--ds-rojo-20);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-1);
}
.aviso[hidden] { display: none; }

/* ---- Formularios ------------------------------------------------------ */
.campo { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.campo > label {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  color: var(--fg-2);
}
.campo__ayuda { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--fg-3); }

.ds-input {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  background: var(--ds-blanco);
  color: var(--ds-verde);
  border: var(--bw-1) solid var(--ds-verde);
  border-radius: var(--radius-2);
  width: 100%;
}
.ds-input:hover { border-color: var(--ds-verde-80); }
.ds-input::placeholder { color: var(--fg-3); }
textarea.ds-input { resize: vertical; min-height: 88px; line-height: var(--lh-body); }

.formulario {
  border: var(--bw-1) solid var(--ds-verde);
  border-top: var(--bw-banner) solid var(--ds-rojo);
  background: var(--bg-1);
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.formulario h2 { margin: 0 0 var(--sp-5); font-size: var(--fs-h4); text-transform: uppercase; }
.formulario__acciones { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* El formulario de punto vive dentro del tema abierto. */
.tema__anadir { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--bw-1) solid var(--border-2); }

/* ---- Pie -------------------------------------------------------------- */
.pie {
  border-top: var(--bw-1) solid var(--border-2);
  padding: var(--sp-6) var(--sp-4);
}
.pie__interior {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-3);
}
.pie img { width: 20px; height: auto; flex: none; }

@media (max-width: 560px) {
  .cabecera__interior { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .envoltura { padding-top: var(--sp-6); }
  .tema__titulo { padding: var(--sp-4); font-size: var(--fs-ui); }
  .tema__cuerpo { padding: 0 var(--sp-4) var(--sp-4); }
}