/* ============================================================
   legal.css — Páginas de habeas data (HD-1 · 2026-09-04)
   /politica-de-tratamiento-de-datos · /politica-de-tratamiento-de-datos-v2
   /aviso-de-privacidad · /registro-de-acceso · /registro-confirmado
   Cargar DESPUÉS de tokens.css, base.css y components.css.
   Tipografías del spec: Cormorant Garamond (títulos), DM Sans (interfaz),
   Inter (cuerpo). Paleta: #97b32e · #c3d468 · #f7f8f3 · #1a1a1a · #3d8b2f.
   La página de la política debe ser legible e imprimible (ver @media print).
   ============================================================ */

.hd-page {
  max-width: 860px;
  margin-inline: auto;
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
  color: var(--color-ink-legal);
}
.hd-page--ancha { max-width: 960px; }

.hd-migas {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}
.hd-migas a { color: var(--color-gray-600); }
.hd-migas span[aria-current] { color: var(--color-gray-900); font-weight: 500; }

.hd-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-600);
}

.hd-page h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin-block: var(--space-2) var(--space-4);
  color: var(--color-ink-legal);
}

.hd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}
.hd-meta strong { color: var(--color-ink-legal); font-weight: 600; }
.hd-meta time { color: var(--color-ink-legal); }

.hd-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.hd-acciones .btn { font-family: var(--font-ui); }

/* Recuadro de resumen: encima del texto legal, rotulado como no vinculante */
.hd-resumen {
  background: var(--color-paper);
  border: 1px solid var(--color-lime-light);
  border-left: 5px solid var(--color-lime);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-10);
}
.hd-resumen h2 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
}
.hd-resumen ol { padding-left: 1.25rem; }
.hd-resumen li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }
.hd-resumen li:last-child { margin-bottom: 0; }

/* Índice de numerales */
.hd-indice {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-10);
  font-family: var(--font-ui);
}
.hd-indice h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-3); color: var(--color-gray-700); }
.hd-indice ol {
  columns: 1;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.hd-indice li { margin-bottom: var(--space-1); break-inside: avoid; }
@media (min-width: 640px) { .hd-indice ol { columns: 2; column-gap: var(--space-8); } }

/* El texto del documento: sale del DOCX sin cambios (22_generar_politica_html.py) */
.doc-texto { font-size: 1.0625rem; line-height: 1.7; }
.doc-texto > p:first-child {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
}
.doc-texto .doc-titulo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--color-ink-legal);
}
.doc-texto h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: var(--space-10) 0 var(--space-3);
  scroll-margin-top: 96px;
  color: var(--color-ink-legal);
}
.doc-texto p { margin-bottom: var(--space-3); color: var(--color-ink-legal); }
.doc-texto p[id] { scroll-margin-top: 96px; }
.doc-texto a { color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 0.15em; }
.doc-texto strong { font-weight: 600; }

.tabla-scroll { overflow-x: auto; margin-block: var(--space-4) var(--space-6); }
.doc-texto table {
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid var(--color-gray-300);
  min-width: 480px;
}
.doc-texto thead th {
  background: var(--color-paper);
  border-bottom: 2px solid var(--color-lime);
  font-family: var(--font-ui);
  font-weight: 600;
}
.doc-texto th, .doc-texto td { vertical-align: top; border-bottom: 1px solid var(--color-gray-200); padding: var(--space-3) var(--space-4); }
.doc-texto td:first-child { width: 34%; font-weight: 500; }
.doc-texto tbody tr:last-child td { border-bottom: 0; }

.doc-firma {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}
.doc-firma p { margin-bottom: 2px; }
.doc-firma p:first-child { font-weight: 600; }

/* Bloques secundarios de la página (versiones, FAQ) */
.hd-seccion {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-gray-200);
}
.hd-seccion > h2 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.hd-seccion .hd-nota {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-5);
}
.hd-versiones { list-style: none; padding: 0; }
.hd-versiones li {
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: 1fr;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-sm);
}
@media (min-width: 640px) { .hd-versiones li { grid-template-columns: 140px 1fr auto; align-items: center; } }
.hd-versiones .estado {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  display: inline-block;
  width: max-content;
}
.estado--vigente { background: var(--color-brand-50); color: var(--color-brand-700); }
.estado--derogada { background: var(--color-gray-100); color: var(--color-gray-600); }

.hd-faq article { padding-block: var(--space-4); border-bottom: 1px solid var(--color-gray-200); }
.hd-faq h3 { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); }
.hd-faq p { font-size: var(--text-base); color: var(--color-gray-800); }

.hd-aviso-derogada {
  background: #fff8e6;
  border: 1px solid #f2d27a;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* Solo se ve al imprimir: de dónde salió y qué versión es */
.hd-print-solo { display: none; }

/* ============================================================
   AVISO DE PRIVACIDAD (una pantalla)
   ============================================================ */
.aviso-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-block: var(--space-6); }
@media (min-width: 720px) { .aviso-grid { grid-template-columns: 1fr 1fr; } }
.aviso-item {
  background: var(--color-paper);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.aviso-item h2 { font-family: var(--font-ui); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gray-700); margin-bottom: var(--space-2); }
.aviso-item p, .aviso-item li { font-size: var(--text-sm); line-height: 1.55; }
.aviso-item ul { padding-left: 1.1rem; }

/* ============================================================
   REGISTRO DE ACCESO (landing única para todos los edificios)
   Móvil primero: la mayoría llega desde WhatsApp.
   ============================================================ */
.reg-page { max-width: 680px; }
.reg-cabecera { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.reg-cabecera img { height: 40px; width: auto; }
.reg-cabecera .reg-edificio { font-family: var(--font-serif); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; line-height: 1.1; }
.reg-cabecera .reg-sub { font-family: var(--font-ui); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gray-600); }

.reg-estado {
  background: var(--color-paper);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.reg-estado h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-3); }
.reg-estado p { color: var(--color-gray-700); }

.reg-transparencia {
  background: var(--color-paper);
  border: 1px solid var(--color-lime-light);
  border-left: 5px solid var(--color-lime);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}
.reg-transparencia h2 { font-family: var(--font-ui); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gray-700); margin-bottom: var(--space-3); }
.reg-transparencia p { font-size: var(--text-base); margin-bottom: var(--space-2); }
.reg-transparencia .reg-enlaces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.reg-transparencia .reg-enlaces .btn { font-family: var(--font-ui); }

.reg-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-8); min-width: 0; }
.reg-form legend {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  padding: 0;
}
.reg-form .form-grid { gap: var(--space-4); }
.reg-form .form-label { font-family: var(--font-ui); color: var(--color-gray-800); }
.reg-form .form-help { font-size: var(--text-xs); color: var(--color-gray-600); line-height: 1.45; }
.reg-form .form-input, .reg-form .form-select { font-size: 16px; } /* evita el zoom automático de iOS */
.reg-form .form-error { display: none; }
.reg-form .form-field.invalido .form-error { display: block; }
.reg-form .form-field.invalido .form-input, .reg-form .form-field.invalido .form-select { border-color: var(--color-danger); }

.reg-nota-documento {
  font-size: var(--text-xs);
  color: var(--color-gray-700);
  background: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  line-height: 1.5;
}

/* Medios de acceso: cuatro opciones idénticas, ninguna destacada */
.reg-medios { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .reg-medios { grid-template-columns: 1fr 1fr; } }
.reg-medio {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-white);
  cursor: pointer;
  transition: var(--transition-base);
}
.reg-medio:hover { border-color: var(--color-gray-500); }
.reg-medio:has(input:checked) { border-color: var(--color-brand-500); box-shadow: var(--ring-brand); }
.reg-medio input { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--color-brand-500); }
.reg-medio strong { display: block; font-family: var(--font-ui); font-weight: 600; margin-bottom: 2px; }
.reg-medio span { font-size: var(--text-sm); color: var(--color-gray-600); line-height: 1.4; }

.reg-obligatorio {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border-left: 4px solid var(--color-lime);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.reg-foto { margin-top: var(--space-6); }
.reg-foto[hidden] { display: none; }
.reg-foto input[type="file"] { font-size: var(--text-sm); }
.reg-foto-preview { margin-top: var(--space-3); max-width: 160px; border-radius: var(--radius-md); border: 1px solid var(--color-gray-200); display: none; }

.reg-casilla {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  cursor: pointer;
  background: var(--color-white);
}
.reg-casilla[hidden] { display: none; }
.reg-casilla input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-brand-500); }
.reg-casilla .texto { font-size: var(--text-base); line-height: 1.5; }
.reg-casilla .texto small { display: block; font-size: var(--text-xs); color: var(--color-gray-600); margin-top: 4px; line-height: 1.45; }
.reg-casilla.invalido { border-color: var(--color-danger); }
.reg-casilla .obligatoria { font-family: var(--font-ui); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-gray-500); margin-left: var(--space-2); }

.reg-envio { margin-top: var(--space-6); }
.reg-envio .btn { width: 100%; justify-content: center; font-family: var(--font-ui); }
.reg-envio p { font-size: var(--text-xs); color: var(--color-gray-600); margin-top: var(--space-3); line-height: 1.5; }
.reg-error-global {
  display: none;
  background: #fdecec;
  border: 1px solid #f3b4b4;
  color: #8a1f1f;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.reg-error-global.visible { display: block; }

.reg-pie {
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: 1.5;
}

/* ============================================================
   IMPRESIÓN — un administrador va a imprimir la política para el consejo
   ============================================================ */
@media print {
  @page { margin: 18mm 16mm; }
  .site-header, .site-footer, .wa-float, .sc-cookies, .skip-link,
  .hd-migas, .hd-acciones, .hd-indice, .no-print, .reg-enlaces { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hd-page { max-width: none; padding: 0; color: #000; }
  .hd-page h1 { font-size: 20pt; margin-bottom: 4pt; }
  .hd-meta { font-size: 9.5pt; margin-bottom: 8pt; }
  .hd-print-solo { display: block; font-size: 8.5pt; color: #444; margin-bottom: 10pt; }
  .hd-resumen { background: #fff; border: 1px solid #999; border-left-width: 4px; padding: 8pt 10pt; margin-bottom: 12pt; }
  .doc-texto { font-size: 10.5pt; line-height: 1.45; }
  .doc-texto h2 { font-size: 13pt; margin: 12pt 0 4pt; page-break-after: avoid; }
  .doc-texto p { margin-bottom: 5pt; orphans: 3; widows: 3; }
  .doc-texto .doc-titulo { font-size: 15pt; }
  .tabla-scroll { overflow: visible; }
  .doc-texto table { min-width: 0; width: 100%; font-size: 9.5pt; }
  .doc-texto thead { display: table-header-group; }
  .doc-texto tr { page-break-inside: avoid; }
  .doc-texto th, .doc-texto td { border: 1px solid #999; padding: 4pt 6pt; }
  .doc-texto a { color: #000; text-decoration: none; }
  .hd-seccion { margin-top: 16pt; padding-top: 8pt; border-top: 1px solid #999; page-break-before: auto; }
  .hd-faq article { page-break-inside: avoid; }
}