/* ════════════════════════════════════════════════════════════════════════
   comun/css/legal.css · Páginas de texto: Privacidad y Libro de reclamaciones
   ------------------------------------------------------------------------
   Usa los colores de tema.css (día y noche) y las piezas de base.css
   (cabecera, friso, botones, pie). Incluye el formulario del Libro de
   reclamaciones, la versión para imprimir la constancia y la página de
   error 404 de los dos sitios (Beta 1.6.2).
   ════════════════════════════════════════════════════════════════════════ */

body { background-color: var(--papel); background-image: var(--fondo-pagina); background-size: var(--fondo-tamano); color: var(--tinta); font-family: var(--texto); font-size: var(--f-m); line-height: 1.55; }
/* La cabecera es la común, al mismo ancho que en las portadas (Beta 1.6: antes 900 px y el logo saltaba) */

/* ---------- Documento ---------- */
.documento { max-width: 820px; margin: 0 auto; padding: 46px 20px 20px; }
.documento .kicker { font-family: var(--display); letter-spacing: .22em; text-transform: uppercase; font-size: var(--f-xs); color: var(--rotulo); }
.documento h1 { font-family: var(--display); font-weight: 400; font-size: clamp(var(--f-2xl), 5vw, var(--f-3xl)); line-height: 1.1; color: var(--contorno); margin: 8px 0 6px; }
.documento .actualizado { color: var(--sepia); font-style: italic; }
.documento h2 { font-family: var(--display); font-weight: 400; font-size: var(--f-l); color: var(--contorno); margin: 34px 0 8px; }
.documento h3 { font-family: var(--display); font-weight: 400; font-size: var(--f-m); color: var(--rotulo); margin: 18px 0 4px; letter-spacing: .03em; }
.documento p, .documento li { color: var(--tinta); }
.documento p + p { margin-top: 10px; }
.documento ul { padding-left: 22px; margin-top: 6px; }
.documento li + li { margin-top: 4px; }
.documento a { color: var(--enlace-activo); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.documento strong { color: var(--tinta); font-weight: 600; }   /* --contorno de noche daba 3,2:1 sobre el aviso */

.tarjeta { background: var(--marfil); border: 1.5px solid var(--contorno); border-radius: 14px; padding: 20px 22px; margin-top: 18px; box-shadow: 0 14px 30px -24px var(--sombra); }   /* antes solo el color: sombra inválida */
.datos-empresa { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; }
.datos-empresa dt { font-family: var(--display); font-size: var(--f-xs); letter-spacing: .04em; color: var(--sepia); }
.datos-empresa dd { margin: 0; }
.falta-dato { color: var(--terracota); font-style: italic; }
.aviso { border-left: 3px solid var(--oro); background: var(--oro-palido); padding: 12px 16px; border-radius: 0 10px 10px 0; margin-top: 16px; }

/* ---------- Formulario ---------- */
.formulario fieldset { border: 1.5px solid var(--contorno); border-radius: 14px; padding: 16px 20px 20px; margin: 22px 0 0; background: var(--marfil); }
.formulario legend { font-family: var(--display); font-size: var(--f-m); color: var(--contorno); padding: 0 8px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label, .campo .rotulo { font-family: var(--display); font-size: var(--f-xs); letter-spacing: .03em; color: var(--sepia); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--f-s); color: var(--tinta); background: var(--papel); border: 1px solid var(--oro); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; padding: 0; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }
.campo small { color: var(--sepia); font-size: var(--f-xs); }
.opciones { display: flex; gap: 18px; flex-wrap: wrap; }
.opcion { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.opcion input { accent-color: var(--terracota); }
.definicion { font-size: var(--f-xs); color: var(--sepia); margin-top: 8px; }
.acepto { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; }
.acepto input { accent-color: var(--terracota); flex: none; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* campo trampa para robots */
.enviar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.estado-envio { color: var(--sepia); font-style: italic; }
.estado-envio.error { color: var(--terracota); font-style: normal; }
.pie-hoja { font-size: var(--f-xs); color: var(--sepia); margin-top: 22px; }
.pie-hoja p + p { margin-top: 6px; }

/* ---------- Constancia (tras registrar) ---------- */
.constancia h2 { margin-top: 0; }
.constancia .numero { font-family: var(--display); font-size: var(--f-xl); color: var(--terracota); letter-spacing: .04em; }
.constancia table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: var(--f-s); }
.constancia th, .constancia td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--oro-claro); }
.constancia th { font-family: var(--display); font-weight: 400; font-size: var(--f-xs); color: var(--sepia); width: 34%; }
.constancia td { white-space: pre-wrap; word-break: break-word; }
.constancia .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Pie ---------- (el común de comun/css/base.css) */

@media (max-width: 640px) {
  .campos { grid-template-columns: 1fr; }
  .datos-empresa { grid-template-columns: 1fr; gap: 0; }
  .datos-empresa dd { margin-bottom: 8px; }
  .formulario fieldset { padding: 12px 14px 16px; }
  .constancia th { width: 40%; }
}

/* ---------- Impresión: solo la constancia, en blanco ---------- */
/* ---------- Página 404 (Beta 1.6.2) ----------
   Un solo bloque centrado: rótulo, título, filete, una frase y el botón de vuelta. */
.error-404 { max-width: 560px; min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-404 .filete { margin-bottom: 18px; }
.error-404 p + p { margin-top: 22px; }

@media print {
  .cabecera, .pie, .formulario, .no-imprimir, .constancia .acciones { display: none !important; }   /* !important: debe ganar a cualquier estado de pantalla */
  body { background: #fff; color: #000; font-size: 11pt; }
  .tarjeta { box-shadow: none; border-color: #000; background: #fff; }
  .documento { padding-top: 0; }
}