/* ============================================================
   Calculabrico — estilos de las guías (artículos de texto).
   Se carga después de styles.css y reutiliza sus tokens.

   styles.css quita los marcadores de todas las listas porque en
   la landing no hacen falta; aquí hay que devolvérselos, que es
   texto corrido de verdad.
   ============================================================ */

/* --- Cabecera del artículo --- */
.guia-head { padding-block: var(--sp-5) var(--sp-4); }
.guia-head h1 { font-size: clamp(1.875rem, 5.5vw, 2.75rem); margin-bottom: var(--sp-4); }
.guia-head .lead { font-size: 1.125rem; color: var(--ink-soft); margin-bottom: var(--sp-4); }

.guia-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: .875rem; color: var(--ink-soft);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.guia-meta span { display: flex; align-items: center; gap: var(--sp-2); }
.guia-meta svg { width: 16px; height: 16px; }

/* --- Índice --- */
.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
}
.toc h2 {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--sp-3);
}
/* Más específico que ".guia ol", que devuelve el marcador decimal:
   aquí la numeración la pone el contador del ::before, no el navegador */
.guia .toc ol, .toc ol {
  list-style: none; counter-reset: toc; margin: 0;
  display: grid; gap: var(--sp-2);
}
.guia .toc li, .toc li { counter-increment: toc; margin-bottom: 0; padding-left: 0; }
.toc a {
  display: flex; gap: var(--sp-3); align-items: baseline;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.toc a::before { content: counter(toc) "."; color: var(--brand); font-weight: 700; flex: none; }
.toc a:hover { color: var(--brand-dark); text-decoration: underline; }

/* --- Cuerpo del artículo --- */
.guia { padding-bottom: var(--sp-7); }
.guia h2 {
  font-size: clamp(1.375rem, 3.5vw, 1.75rem);
  margin-top: var(--sp-7); margin-bottom: var(--sp-4);
  scroll-margin-top: 80px;                  /* que el ancla no quede bajo la cabecera */
}
.guia h2:first-child { margin-top: 0; }
.guia h3 { font-size: 1.125rem; margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
.guia p { margin-bottom: var(--sp-4); }
.guia p, .guia li { color: var(--ink-soft); }
.guia strong { color: var(--ink); }

/* Listas con marcador, que styles.css se lo quita a todo */
.guia ul, .guia ol { margin: 0 0 var(--sp-4) 1.25rem; }
.guia ul { list-style: disc; }
.guia ol { list-style: decimal; }
.guia li { margin-bottom: var(--sp-2); padding-left: var(--sp-1); }
.guia li::marker { color: var(--brand); }

/* --- Tablas --- */
.guia table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin-bottom: var(--sp-5); }
.guia caption { text-align: left; font-size: .8125rem; color: var(--ink-soft); padding-bottom: var(--sp-2); }
.guia th, .guia td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
.guia th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.guia td:last-child, .guia th:last-child { text-align: right; }
.tabla-scroll { overflow-x: auto; }        /* tablas anchas en móvil */

/* --- Destacados dentro del texto --- */
.dato {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--brand-tint); border: 1px solid #F1D3BC; border-radius: var(--radius);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.dato svg { width: 20px; height: 20px; flex: none; margin-top: .15em; color: var(--brand-dark); }
.dato p { margin: 0; color: #7A4318; font-size: .9375rem; }
.dato strong { color: #5E330F; }

.error {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
}
.error h3 { margin-top: 0; margin-bottom: var(--sp-2); }
.error p:last-child { margin-bottom: 0; }
.error .arreglo { font-size: .9375rem; }
.error .arreglo strong { color: var(--brand-dark); }

/* --- Llamada a la calculadora: el cierre de cada guía --- */
.guia-cta {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5); margin-block: var(--sp-6);
  text-align: center;
}
/* Título en <p>, no en <h2>: estas cajas no son secciones del
   artículo y no deben aparecer en el esquema de encabezados */
.guia-cta-title {
  margin: 0 0 var(--sp-2);
  font-size: 1.375rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: var(--ink);
}
.guia-cta p { margin-bottom: var(--sp-4); }

/* Versión compacta para meter a media guía */
.guia-cta-inline { text-align: left; padding: var(--sp-4) var(--sp-5); }
.guia-cta-inline .guia-cta-title { font-size: 1.125rem; }

/* ------------------------------------------------------------
   PÁGINAS LEGALES
   Los datos identificativos (nombre, NIF, domicilio…) no se
   pueden inventar, así que van marcados. Las dos clases de abajo
   existen para que sea IMPOSIBLE publicar sin darse cuenta.
   Cuando rellenes los huecos, borra el bloque .borrador.
   ------------------------------------------------------------ */
.borrador {
  background: #FFF1E0; border: 2px dashed var(--brand);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.borrador p { margin-bottom: var(--sp-2); color: #7A4318; font-size: .9375rem; }
.borrador p:last-child { margin-bottom: 0; }
.borrador strong { color: #5E330F; }

.pendiente {
  display: inline-block;
  background: #FFE0BF; border: 1px dashed var(--brand-dark); border-radius: 4px;
  padding: .05em .45em; font-weight: 700; font-size: .9em; color: #7A3A08;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
}

/* Bloque de datos identificativos del aviso legal */
.datos-titular { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.datos-titular div {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .9375rem;
}
.datos-titular dt, .datos-titular div > span:first-child {
  color: var(--ink-soft); min-width: 13rem;
}

/* --- Otras guías --- */
.guia-otras { display: grid; gap: var(--sp-3); }
.guia-otras a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); text-decoration: none; color: var(--ink); font-weight: 600;
}
.guia-otras a:hover { border-color: var(--brand); color: var(--brand-dark); }
.guia-otras svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 640px) {
  .guia-otras { grid-template-columns: repeat(2, 1fr); }
}