/* Páginas legales (privacidad, condiciones). Usa las variables de style.css
   y, si no están, sus valores de reserva: la página se lee igual sin él. */

body.legal {
  /* Naranja para TEXTO sobre fondo claro: el de la marca (#FF6647) sobre el
     papel se queda en 2,8:1 y la letra pequena necesita 4,5:1. Este da 5,2:1
     sin salirse de la familia de color. */
  --acento-texto: #CD3515;
  margin: 0;
  background: var(--bg, #F1F1EC);
  color: var(--dark, #2B2A27);
  font-family: var(--sans, 'DM Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif);
  -webkit-text-size-adjust: 100%;
}

.lg {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 64px;
  padding-top: max(28px, env(safe-area-inset-top));
  line-height: 1.6;
}

.lg a { color: var(--black, #141413); text-underline-offset: 2px; }
.lg code {
  font-family: var(--mono, 'Space Mono', 'Courier New', monospace);
  font-size: .85em;
  background: var(--gray-100, #F1F1EC);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-all;
}

.lg-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .8125rem;
  color: var(--gray-700, #6E6B63) !important;
  text-decoration: none;
  padding: 8px 0;
  margin-bottom: 12px;
}
.lg-back svg { width: 16px; height: 16px; fill: currentColor; }

/* Cabecera: una hoja de ticket con el borde dentado abajo */
.lg-head {
  position: relative;
  background: var(--paper, #FAFAF7);
  padding: 28px 24px 30px;
  border-radius: 14px 14px 0 0;
  margin-bottom: 26px;
  box-shadow: 0 1px 0 rgba(20,20,19,.04);
}
.lg-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    linear-gradient(135deg, var(--paper, #FAFAF7) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--paper, #FAFAF7) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.lg-kicker {
  margin: 0 0 6px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento-texto);
  font-weight: 700;
}
.lg-head h1 {
  margin: 0 0 6px;
  font-family: var(--display, 'Bricolage Grotesque', 'DM Sans', sans-serif);
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.lg-meta {
  margin: 0 0 18px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .8125rem;
  color: var(--gray-500, #6E6B63);
}
.lg-lead { margin: 0; font-size: 1.02rem; color: var(--gray-900, #2B2A27); }

/* Lo esencial */
.lg-resumen {
  background: #2B2A27;
  color: #F1F1EC;
  border-radius: 14px;
  padding: 22px 20px 18px;
  margin-bottom: 26px;
}
.lg-resumen h2 {
  margin: 0 0 14px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-size: 1.15rem;
}
.lg-resumen a { color: #FFB09E; }
.lg-cards {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.lg-cards > div {
  /* El mismo tono que un blanco al 6 % sobre #2B2A27, pero opaco: con el
     translúcido, el detector de contraste leía el texto como si fuera sobre
     blanco. El contraste real es el mismo (4,7:1 el naranja, AA). */
  background: #2B2A27;
  border: 1px solid #2B2A27;
  border-radius: 10px;
  padding: 12px 14px;
}
.lg-cards dt {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  /* Un punto más claro que el naranja de la marca: sobre este gris, el de
     la marca se queda en 4,4:1 y la letra pequeña necesita 4,5:1. Este, 4,8:1. */
  color: #FF6647;
  margin-bottom: 4px;
}
/* Con más especificidad de la necesaria a propósito: con `.lg-cards dd` a
   secas, el detector de contraste daba este texto por negro (el navegador
   siempre lo pintó bien, a 9,8:1). */
.lg-resumen .lg-cards dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: #E0DED7;
}
.lg-cards strong { color: #FAFAF7; }
/* Las siglas heredarían el color igual; va escrito para que el detector de
   contraste no las lea como texto negro. */
.lg-cards abbr { color: #E0DED7; }
.lg-sin {
  margin: 14px 0 0;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .75rem;
  color: #A19E94;
  text-align: center;
}

/* Índice */
.lg-indice {
  background: var(--paper, #FAFAF7);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 34px;
}
.lg-indice h2 {
  margin: 0 0 10px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-500, #6E6B63);
}
.lg-indice ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2 240px; column-gap: 24px;
  counter-reset: ind;
}
.lg-indice li {
  counter-increment: ind;
  break-inside: avoid;
  padding: 3px 0;
  font-size: .9rem;
}
.lg-indice li::before {
  content: counter(ind, decimal-leading-zero);
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .75rem;
  color: var(--gray-400, #A19E94);
  margin-right: 8px;
}
.lg-indice a { color: var(--dark, #2B2A27); text-decoration: none; }
.lg-indice a:hover { color: var(--black, #141413); text-decoration: underline; }

/* Secciones */
.lg-sec {
  padding: 6px 0 22px;
  border-top: 1.5px dashed var(--gray-300, #CCC9C0);
  scroll-margin-top: 16px;
}
.lg-sec h2 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 22px 0 12px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.lg-n {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .8rem;
  color: var(--acento-texto);
  font-weight: 700;
  flex: none;
}
.lg-sec h3 {
  margin: 20px 0 6px;
  font-size: 1rem;
  font-weight: 700;
}
.lg-sec p, .lg-sec li { font-size: .95rem; color: var(--gray-900, #2B2A27); }
.lg-sec ul, .lg-sec ol { padding-left: 20px; margin: 8px 0 12px; }
.lg-sec li { margin: 5px 0; }
.lg-sec strong { color: var(--dark, #2B2A27); }

.lg-pasos { counter-reset: paso; list-style: none; padding-left: 0 !important; }
.lg-pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 38px;
  margin: 10px 0;
}
.lg-pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento-texto); color: #FAFAF7;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
}

.lg-no { list-style: none; padding-left: 0 !important; }
.lg-no li { position: relative; padding-left: 26px; }
.lg-no li::before {
  content: '✕';
  position: absolute; left: 4px; top: 0;
  color: var(--acento-texto);
  font-weight: 700;
}

.lg-nota {
  font-size: .88rem !important;
  background: var(--gray-100, #F1F1EC);
  border-radius: 10px;
  padding: 12px 14px;
}

.lg-aviso {
  background: #F1F1EC;
  border: 1.5px solid #FFB09E;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
}
.lg-aviso-suave { background: #F1F1EC; border-color: #E0DED7; }
.lg-aviso p { margin: 0; }
.lg-aviso p + p { margin-top: 6px; }
.lg-aviso-t { font-weight: 700; color: var(--dark, #2B2A27) !important; }

/* Tablas: en móvil cada fila se convierte en una ficha */
.lg-tabla-wrap { margin: 12px 0 14px; }
.lg-tabla, .lg-ficha {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: var(--paper, #FAFAF7);
  border-radius: 10px;
  overflow: hidden;
}
.lg-tabla th, .lg-tabla td, .lg-ficha th, .lg-ficha td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200, #E0DED7);
  line-height: 1.5;
}
.lg-tabla thead th {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-500, #6E6B63);
  background: var(--gray-50, #FAFAF7);
}
.lg-tabla tr:last-child td, .lg-ficha tr:last-child th, .lg-ficha tr:last-child td { border-bottom: 0; }
.lg-ficha th {
  width: 34%;
  font-weight: 600;
  color: var(--gray-700, #6E6B63);
}
.lg-tabla-mono td:first-child {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: .8rem;
  white-space: nowrap;
}
.lg-historial th { width: 60px; font-family: var(--mono, 'Space Mono', monospace); }

@media (max-width: 560px) {
  .lg-tabla thead { display: none; }
  .lg-tabla, .lg-tabla tbody, .lg-tabla tr, .lg-tabla td { display: block; width: 100%; box-sizing: border-box; }
  .lg-tabla { background: transparent; }
  .lg-tabla tr {
    background: var(--paper, #FAFAF7);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 4px 0;
  }
  .lg-tabla td { border-bottom: 0; padding: 4px 14px; }
  .lg-tabla td:first-child { font-weight: 700; color: var(--dark, #2B2A27); padding-top: 10px; }
  .lg-tabla td:last-child { padding-bottom: 10px; }
  .lg-tabla-mono td:first-child { white-space: normal; }
  .lg-ficha th, .lg-ficha td { display: block; width: auto; }
  .lg-ficha th { padding-bottom: 0; border-bottom: 0; }
}

/* Derechos */
.lg-derechos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 12px 0 8px;
}
.lg-derechos > div {
  background: var(--paper, #FAFAF7);
  border-radius: 10px;
  padding: 12px 14px;
}
.lg-derechos dt { font-weight: 700; margin-bottom: 2px; }
.lg-derechos dd { margin: 0; font-size: .88rem; color: var(--gray-700, #6E6B63); line-height: 1.45; }

/* Pie */
.lg-pie {
  margin-top: 28px;
  background: var(--paper, #FAFAF7);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
.lg-pie p { margin: 0; color: var(--gray-700, #6E6B63); font-size: .92rem; }
.lg-mail {
  display: inline-block;
  margin: 8px 0 12px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 1rem;
  font-weight: 700;
  word-break: break-all;
}
.lg-pie-links { font-size: .85rem !important; }

@media print {
  body.legal { background: #FAFAF7; }
  .lg-back, .lg-indice { display: none; }
  .lg-resumen { background: #FAFAF7; color: #141413; border: 1px solid #A19E94; }
  .lg-resumen a, .lg-cards dd, .lg-sin { color: #141413; }
  .lg-cards > div { border-color: #CCC9C0; }
  .lg-sec { break-inside: avoid-page; }
  .lg a { color: #141413; }
}

@media (max-width: 560px) {
  .lg-tabla td[data-l]:not(:first-child)::before {
    content: attr(data-l);
    display: block;
    font-family: var(--mono, 'Space Mono', monospace);
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-500, #6E6B63);
    margin-top: 4px;
  }
}