/* =====================================================================
   publico/assets/legal.css
   ---------------------------------------------------------------------
   EL CENTRO LEGAL: /terminos/ y cada política (publico/legal.php).

   Usa solo los tokens de tema.css (Plano Vitela / Plano Azul) y las
   piezas del sistema: lámina, cuadrícula, botón ghost. Lo único propio
   es EL CAJETÍN — el recuadro de datos de un plano técnico — y es la
   única pieza con carácter de esta pantalla. Todo lo demás se queda
   quieto para que se pueda leer: una política es texto largo y lo que
   la hace agradable es la medida, el interlineado y el índice, no la
   decoración.

   Se carga solo en estas páginas ($hojasExtra) y la cabecera le agrega
   ?v=SITIO_CSS_VERSION.
   ===================================================================== */

.legal{ padding-bottom:var(--s8); }

/* ---------- La banda de arriba ---------- */
.legal-banda{
  padding:var(--s6) 0 var(--s4);
  border-bottom:1px solid var(--panel-border);
}
.legal-banda-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 370px;
  gap:var(--s6); align-items:end;
}
.legal-banda .miga{ margin-bottom:var(--s3); }
.legal-titulo{
  font-size:clamp(34px, 5vw, 56px); line-height:1.02;
  margin:0 0 var(--s2); max-width:16ch;
}
.legal-grupo-rotulo{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:.04em; color:var(--accent-text); margin:0 0 6px;
}
.legal-lead,
.legal-intro p{
  font-size:18px; line-height:1.6; color:var(--ink-dim);
  max-width:58ch; margin:0 0 var(--s1);
}
.legal-intro p:last-child{ margin-bottom:0; }
.legal-lead a, .legal-intro a{ color:var(--accent-text); text-underline-offset:3px; }

/* ---------- El cajetín ----------
   Doble marco, como el recuadro de un plano: línea gruesa por fuera,
   fina por dentro, celdas separadas por la línea fina. Esquinas casi
   rectas: es dibujo técnico, no una tarjeta. */
.cajetin{
  margin:0;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg-elev);
  border:1px solid var(--line);
  box-shadow:0 0 0 4px var(--bg-elev), 0 0 0 5.5px var(--ink);
  border-radius:2px;
}
.cajetin-celda{
  padding:10px 14px 11px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-width:0;
}
.cajetin-celda:nth-child(2n){ border-right:0; }
.cajetin-ancha{ grid-column:1 / -1; border-right:0; }
.cajetin-celda:last-child{ border-bottom:0; }
.cajetin dt{
  /* Rótulo de cajetín: así se rotula en un plano, por eso va en
     versalita y no como adorno. */
  font-family:var(--font-display); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.cajetin dd{
  margin:3px 0 0; font-size:15px; font-weight:600; color:var(--ink);
  line-height:1.35; overflow-wrap:anywhere;
}
.cifra{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.cajetin dd .cifra{ display:block; font-weight:400; color:var(--ink-dim); font-size:13px; margin-top:2px; }

/* =====================================================================
   LA PORTADA
   ===================================================================== */
.legal-carpeta{ padding-top:var(--s6); }

.legal-grupo{ margin-bottom:var(--s6); }
.legal-grupo-titulo{
  display:flex; align-items:center; gap:var(--s2);
  font-size:20px; margin:0 0 var(--s3);
}
.legal-grupo-titulo::after{
  content:""; flex:1; height:1px; background:var(--panel-border);
}

.legal-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--s3);
}

.legal-tarjeta{
  display:flex; flex-direction:column; gap:10px;
  color:var(--ink); text-decoration:none;
  min-height:190px;
}
.legal-tarjeta-titulo{ font-size:19px; line-height:1.15; }
.legal-tarjeta-resumen{ font-size:15px; line-height:1.55; color:var(--ink-dim); }
.legal-tarjeta-pie{
  margin-top:auto; padding-top:var(--s2);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:13px; color:var(--ink-faint);
  border-top:1px dashed var(--panel-border);
}
.legal-tarjeta-leer{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:.04em; color:var(--accent-text);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px;
}

/* Al pasar o enfocar, solo cambia el borde: dice "esto se abre" sin
   mover nada de lugar. */
.legal-tarjeta, .legal-salida{ transition:border-color var(--dur-ui) ease; }
@media (hover:hover) and (pointer:fine){
  .legal-tarjeta:hover, .legal-salida:hover{ border-color:var(--ink); }
}
.legal-tarjeta:focus-visible, .legal-salida:focus-visible,
.legal-paso:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.legal-salidas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.legal-salida{
  display:flex; gap:var(--s2); align-items:flex-start;
  color:var(--ink); text-decoration:none;
}
.legal-salida > span{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.legal-tarjeta-resumen{ overflow-wrap:anywhere; }
.legal-salida svg{ width:30px; height:30px; flex:none; color:var(--accent-text); margin-top:2px; }

/* =====================================================================
   UNA POLÍTICA
   ===================================================================== */
.legal-doc{
  display:grid; grid-template-columns:250px minmax(0,1fr);
  gap:var(--s6); align-items:start;
  padding-top:var(--s6);
}

/* ---------- El costado: índice y otras políticas ---------- */
.legal-lateral{
  position:sticky; top:calc(var(--cab-alto, 140px) + 18px);
  max-height:calc(100vh - var(--cab-alto, 140px) - 36px); overflow:auto;
  display:flex; flex-direction:column; gap:var(--s3);
  font-size:14px;
}
.legal-lateral summary{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:.03em; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:8px; border-bottom:1.5px solid var(--ink);
}
.legal-lateral summary::-webkit-details-marker{ display:none; }
.legal-lateral summary::after{ content:"+"; font-weight:400; color:var(--ink-faint); font-family:var(--font-body); }
.legal-lateral details[open] > summary::after{ content:"−"; }

.legal-indice ol{ list-style:none; margin:10px 0 0; padding:0; counter-reset:sec; }
.legal-indice li{ counter-increment:sec; }
.legal-indice a{
  display:grid; grid-template-columns:24px 1fr; gap:4px;
  padding:6px 0; color:var(--ink-dim); text-decoration:none; line-height:1.35;
}
/* El índice SÍ es una secuencia: las secciones van en ese orden. */
.legal-indice a::before{ content:counter(sec); font-variant-numeric:tabular-nums; color:var(--ink-faint); }
.legal-indice a:hover{ color:var(--ink); }
.legal-indice a[aria-current]{ color:var(--ink); font-weight:600; }
.legal-indice a[aria-current]::before{ color:var(--accent-text); }

.legal-otras-grupo{ margin:12px 0 4px; font-size:12px; color:var(--ink-faint); }
.legal-otras ul{ list-style:none; margin:0; padding:0; }
.legal-otras a{ display:block; padding:5px 0 5px 12px; color:var(--ink-dim); text-decoration:none; border-left:2px solid transparent; }
.legal-otras a:hover{ color:var(--ink); }
.legal-otras a[aria-current]{ color:var(--ink); font-weight:600; border-left-color:var(--accent); }

/* ---------- El texto ----------
   66 caracteres por línea y 1.7 de interlineado: un texto legal largo
   se lee por párrafos, y esta medida es la que no cansa. */
.legal-texto{ padding:var(--s4) var(--s4) var(--s3); }
.legal-texto > *{ max-width:66ch; }
.legal-texto p, .legal-texto li{ font-size:17px; line-height:1.7; color:var(--ink); }
.legal-texto p{ margin:0 0 var(--s2); }
.legal-texto b, .legal-texto strong{ font-weight:600; }
.legal-texto h3{
  font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.2;
  letter-spacing:.01em; margin:var(--s4) 0 var(--s2);
  padding-top:var(--s3); border-top:1px solid var(--panel-border);
  scroll-margin-top:calc(var(--cab-alto, 140px) + 20px);
}
.legal-texto h3:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-texto ul, .legal-texto ol{ margin:0 0 var(--s2); padding-left:1.3em; }
.legal-texto ul{ list-style:disc; }
.legal-texto ol{ list-style:decimal; }
.legal-texto li{ margin:0 0 8px; padding-left:4px; }
.legal-texto ul li::marker{ color:var(--accent-text); }
.legal-texto ol li::marker{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.legal-firma{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1.5px solid var(--ink);
}
.legal-firma p{ font-size:14px; line-height:1.6; color:var(--ink-dim); }
.legal-firma a{ color:var(--accent-text); text-underline-offset:3px; }
.legal-acciones{ display:flex; gap:var(--s1); flex-wrap:wrap; margin-top:var(--s2); }

/* ---------- Anterior / siguiente ---------- */
.legal-pasos{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
  margin-top:var(--s4);
}
.legal-paso{
  display:flex; flex-direction:column; gap:4px;
  padding:var(--s2) 0; border-top:1.5px solid var(--ink);
  color:var(--ink); text-decoration:none;
}
.legal-paso span{ font-size:13px; color:var(--ink-faint); }
.legal-paso b{ font-family:var(--font-display); font-weight:600; font-size:18px; }
.legal-paso:hover b{ text-decoration:underline; text-underline-offset:4px; }
.legal-paso-sig{ text-align:right; grid-column:2; }

/* =====================================================================
   PANTALLAS CHICAS
   ===================================================================== */
@media (max-width:900px){
  .legal-banda-grid{ grid-template-columns:1fr; gap:var(--s3); }
  .cajetin{ max-width:440px; }
  .legal-doc{ grid-template-columns:1fr; gap:var(--s3); padding-top:var(--s3); }
  .legal-lateral{ position:static; max-height:none; overflow:visible; }
  .legal-salidas{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .legal-banda{ padding:var(--s4) 0 var(--s3); }
  .legal-texto{ padding:var(--s3) var(--s2) var(--s2); }
  .legal-texto p, .legal-texto li{ font-size:16px; }
  .legal-pasos{ grid-template-columns:1fr; }
  .legal-paso-sig{ grid-column:1; text-align:left; }
  .legal-tarjeta{ min-height:0; }
}

@media (prefers-reduced-motion:reduce){
  .legal-tarjeta, .legal-salida{ transition:none; }
}

/* =====================================================================
   IMPRIMIR / GUARDAR EN PDF
   Sale solo el documento: el cajetín arriba, el texto y la firma. Es
   lo que alguien guarda antes de comprar o adjunta a un reclamo.
   ===================================================================== */
@media print{
  .cab, .pie, footer.pie, .flotantes, .legal-lateral, .legal-pasos,
  .legal-acciones, .miga{ display:none !important; }
  body{ background:#fff !important; color:#000; }
  .grid-bg{ background:none !important; }
  .legal-banda{ padding:0 0 12px; border-bottom:1px solid #000; }
  .legal-banda-grid{ grid-template-columns:1fr 280px; gap:24px; }
  .legal-doc{ display:block; padding-top:16px; }
  .lamina, .legal-texto{ box-shadow:none !important; border:0 !important; padding:0 !important; }
  .lamina::before, .lamina::after{ display:none; }
  .legal-texto p, .legal-texto li{ font-size:11pt; line-height:1.5; color:#000; }
  .legal-texto h3{ break-after:avoid; }
  .cajetin{ box-shadow:none; border:1px solid #000; }
}