/* Estilos para documentos legales: se leen largos, así que priorizan legibilidad
   sobre densidad. Reutiliza las variables de color de app.css.                  */

body.legal main { max-width: 720px; padding-bottom: 48px; }

body.legal .top .sub a { color: var(--verde); text-decoration: none; font-weight: 600; }

.legal h1.titulo {
  font-size: 24px; line-height: 1.25; margin: 20px 0 6px; letter-spacing: -.4px;
}
.legal .meta {
  font-size: 12.5px; color: var(--txt2); line-height: 1.6;
  padding-bottom: 18px; border-bottom: 1px solid var(--linea); margin: 0 0 24px;
}

.legal h2 {
  font-size: 17px; margin: 34px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--linea); letter-spacing: -.2px;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: 14.5px; margin: 22px 0 8px; color: var(--verde); }

.legal p, .legal li { font-size: 14.5px; line-height: 1.65; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--bg); border: 1px solid var(--linea); border-radius: 4px; padding: 1px 5px;
}
.legal a { color: var(--verde); }
.legal hr { border: 0; border-top: 1px solid var(--linea); margin: 34px 0 0; }

/* Resumen de arriba: lo único que casi todos van a leer. */
.legal .resumen {
  background: var(--card); border: 1px solid var(--verde);
  border-radius: var(--radio); padding: 18px 20px; margin-bottom: 8px;
}
.legal .resumen h2 { border: 0; padding: 0; margin: 0 0 8px; font-size: 16px; color: var(--verde); }
.legal .resumen ol { margin-bottom: 0; }

/* Bloques que cambian el sentido de lo que se lee: se marcan. */
.legal .destacado {
  background: color-mix(in srgb, var(--verde) 9%, transparent);
  border-left: 3px solid var(--verde);
  border-radius: 0 10px 10px 0; padding: 13px 16px; margin: 0 0 14px;
}
.legal .aviso-sensible {
  background: color-mix(in srgb, var(--naranja) 10%, transparent);
  border-left: 3px solid var(--naranja);
  border-radius: 0 10px 10px 0; padding: 13px 16px; margin: 0 0 16px;
}
.legal .pendiente {
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  border: 1px dashed var(--rojo);
  border-radius: 10px; padding: 13px 16px; margin: 0 0 16px;
}
.legal .destacado p:last-child,
.legal .aviso-sensible p:last-child,
.legal .pendiente p:last-child { margin-bottom: 0; }

/* Tablas: en móvil se desplazan en vez de aplastarse. */
.legal .datos-tabla {
  width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px;
  display: block; overflow-x: auto; white-space: normal;
}
.legal .datos-tabla th, .legal .datos-tabla td {
  border: 1px solid var(--linea); padding: 9px 11px; text-align: left; vertical-align: top;
  line-height: 1.5;
}
.legal .datos-tabla th {
  background: var(--bg); font-weight: 700; font-size: 12.5px; color: var(--txt2);
}
.legal .datos-tabla tr:first-child th { color: var(--txt); }

.legal .pie { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linea); }

@media print {
  body.legal { background: #fff; color: #000; }
  .legal .resumen, .legal .destacado, .legal .aviso-sensible, .legal .pendiente {
    border-color: #999; background: none;
  }
  header.top { display: none; }
  .legal h2 { page-break-after: avoid; }
  .legal .datos-tabla { page-break-inside: avoid; }
}