/* ============================================================================
   CYC FACTURACION — legal.css
   Hoja delta para documentos de texto largo: aviso de privacidad, terminos.

   POR QUE UNA HOJA APARTE: el resto del portal son pantallas de aplicacion
   —tarjetas, hojas, formularios— y app.css no estiliza prosa: h2, p, ul, dl y
   table salen con el reset puesto. Un documento legal es exactamente eso,
   prosa, y se lee en movil.

   Todo se apoya en los tokens de tokens.css para funcionar en claro y oscuro
   sin una sola regla extra por tema.
   ========================================================================= */

.legal{
  max-width:44rem;                 /* ~75 caracteres por linea: mas ancho cansa */

  /* WIDTH:100% NO ES DECORATIVO, NO LO QUITES.
     .appmain es un flex de COLUMNA y esto es un flex item con margin lateral
     auto, combinacion que impide el estirado y hace que el elemento se
     dimensione por su CONTENIDO. Con la tabla de terceros dentro
     (min-width 32rem) el documento entero se iba a 546 px en una pantalla de
     375; y como body lleva overflow-x:hidden, el sobrante no se veia NI se
     podia arrastrar: las ultimas columnas de la tabla quedaban recortadas y
     fuera de alcance en cualquier telefono.
     Con width:100% + min-width:0 el documento se ajusta a la pantalla y es la
     tabla —que para eso tiene su .legal__scroll— la que se desplaza sola.
     max-width sigue mandando en pantallas grandes y margin auto la centra. */
  width:100%;
  min-width:0;

  margin:0 auto;
  padding:0 var(--sp-4) var(--sp-12);
  color:var(--text);
  font-size:var(--fs-md);
  line-height:1.65;                /* texto denso: el aire se gana con interlinea */
}

.legal p{ margin:0 0 var(--sp-4); }

.legal strong{ font-weight:var(--fw-semi); color:var(--text); }

.legal a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ text-decoration-thickness:2px; }

/* Fecha de vigencia. Va discreta pero es lo primero que alguien busca para
   saber si esta viendo la version actual. */
.legal__meta{
  margin:0 0 var(--sp-5);
  font-size:var(--fs-xs);
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.legal__lead{
  font-size:var(--fs-lg);
  line-height:1.55;
  color:var(--text-muted);
  margin-bottom:var(--sp-6);
}

/* ==========================================================================
   TITULOS
   ========================================================================== */
.legal h2{
  margin:var(--sp-10) 0 var(--sp-3);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  line-height:1.25;
  letter-spacing:-.01em;
  scroll-margin-top:var(--sp-16);  /* el indice ancla debajo de la appbar fija */
}

.legal h3{
  margin:var(--sp-6) 0 var(--sp-2);
  font-size:var(--fs-md);
  font-weight:var(--fw-semi);
  color:var(--text);
}

.legal section:first-of-type h2{ margin-top:var(--sp-6); }

/* ==========================================================================
   LISTAS
   ========================================================================== */
.legal ul, .legal ol{
  margin:0 0 var(--sp-4);
  padding-left:1.25rem;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}

.legal li{ padding-left:.15rem; }
.legal li::marker{ color:var(--text-soft); }

/* ==========================================================================
   INDICE
   ========================================================================== */
.legal__toc{
  margin:0 0 var(--sp-8);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
}

.legal__toc-title{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.legal__toc ol{ margin:0; gap:var(--sp-2); }
.legal__toc a{ text-decoration:none; color:var(--text); }
.legal__toc a:hover{ color:var(--primary); text-decoration:underline; }

/* ==========================================================================
   PARES DATO / VALOR

   En movil se apilan: dos columnas con una razon social larga a la izquierda
   dejan el valor en una tira de tres palabras por renglon.
   ========================================================================== */
.legal__data{
  margin:0 0 var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:1px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
}

.legal__data > div{
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.legal__data > div:last-child{ border-bottom:0; }

.legal__data dt{
  font-size:var(--fs-xs);
  color:var(--text-soft);
  margin-bottom:2px;
}

.legal__data dd{ margin:0; font-weight:var(--fw-medium); }

@media (min-width:600px){
  .legal__data > div{
    display:grid;
    grid-template-columns:13rem 1fr;
    gap:var(--sp-4);
    align-items:baseline;
  }
  .legal__data dt{ margin-bottom:0; }
}

/* ==========================================================================
   BLOQUES DESTACADOS
   ========================================================================== */

/* Lo que el lector no debe pasar por alto: su derecho a negarse, que no
   vendemos sus datos, que el cobro es gratuito. */
.legal__highlight{
  margin:var(--sp-4) 0;
  padding:var(--sp-4);
  border-left:3px solid var(--primary);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--primary-soft);
  color:var(--primary-ink-soft);
}

/* Matices y advertencias honestas: mas chico, sin gritar. */
.legal__note{
  margin:var(--sp-3) 0 var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--text-muted);
}

/* PENDIENTE DE COMPLETAR.
   A proposito imposible de ignorar: un aviso de privacidad publicado con el
   domicilio a medias es peor que no tenerlo, porque aparenta cumplir. Esto
   tiene que estallar en la cara antes de publicar. */
.legal__todo{
  display:inline-block;
  padding:1px 8px;
  border:1px dashed #B45309;
  border-radius:var(--r-full);
  background:#FEF3C7;
  color:#7C2D12;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  font-style:normal;
}

:root[data-theme="dark"] .legal__todo{
  border-color:#F59E0B;
  background:rgba(245,158,11,.14);
  color:#FCD34D;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .legal__todo{
    border-color:#F59E0B;
    background:rgba(245,158,11,.14);
    color:#FCD34D;
  }
}

/* ==========================================================================
   TABLA

   Envuelta en .legal__scroll: la tabla de terceros no cabe en 360 px y sin el
   contenedor propio es la PAGINA la que se desplaza de lado.
   ========================================================================== */
.legal__scroll{
  margin:0 0 var(--sp-4);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
}

.legal__table{
  width:100%;
  min-width:32rem;
  border-collapse:collapse;
  font-size:var(--fs-sm);
  background:var(--surface);
}

.legal__table th,
.legal__table td{
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border);
}

.legal__table th{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  color:var(--text-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--surface-2, var(--surface));
}

.legal__table tbody tr:last-child td{ border-bottom:0; }

/* Segundo renglon dentro de una celda: el nombre concreto de un tercero que
   hoy es uno y manana puede ser otro (el PAC). Va debajo y en tono menor para
   que se lea como dato de hoy, no como parte del nombre. */
.legal__sub{
  display:block;
  margin-top:2px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  color:var(--text-soft);
}

/* ==========================================================================
   CIERRE
   ========================================================================== */
.legal__accept{
  margin-top:var(--sp-10);
  padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  font-size:var(--fs-sm);
  color:var(--text-muted);
}

.legal code{
  padding:1px 5px;
  border-radius:var(--r-xs);
  background:var(--surface-2, var(--surface));
  border:1px solid var(--border);
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.9em;
}