/* Páginas legales: Términos, Privacidad y Botón de arrepentimiento.
   Se pintan con las variables del tema (--color-primario, --font-*), así que
   los 21 layouts las heredan sin necesidad de un bloque por tema. El ancho de
   lectura es fijo a propósito: es texto largo y una línea de 1200px no se lee.
   Colores propios sólo donde el tema no tiene token (el gris del texto). */

.legal-main {
  padding: 32px 16px 64px;
  background: var(--color-fondo, #fff);
}

.legal-container {
  max-width: 780px;
  margin: 0 auto;
  color: #2c3340;
  line-height: 1.7;
  font-size: 0.98rem;
  font-family: var(--font-body, inherit);
}

.legal-container h1 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--color-primario, #1a1a2e);
}

.legal-intro {
  color: #5b6472;
  font-size: 0.92rem;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.legal-container section { margin-bottom: 28px; }

.legal-container h2 {
  font-family: var(--font-display, inherit);
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--color-primario, #1a1a2e);
}

.legal-container p { margin: 0 0 12px; }
.legal-container ul { margin: 0 0 12px; padding-left: 20px; }
.legal-container li { margin-bottom: 7px; }
.legal-container a { color: var(--color-acento, #0a74a3); }
.legal-container strong { color: #1a2029; }
.legal-container em { color: #5b6472; font-size: .92rem; }

.legal-datos {
  background: rgba(0, 0, 0, .035);
  border-left: 3px solid var(--color-primario, #1a1a2e);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 0 0 14px;
}
.legal-datos ul { margin: 0; padding-left: 18px; }

/* Aviso de datos faltantes: lo ve el comercio, no el cliente — se muestra sólo
   con sesión de admin (body.es-admin). Sin esto, una tienda puede publicar sus
   términos sin CUIT y nunca enterarse de que le falta. */
.legal-faltan { display: none; }
body.es-admin .legal-faltan {
  display: block;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: .88rem;
  color: #7a5200;
}

/* ── Botón de arrepentimiento: el formulario ── */
.legal-form { margin-top: 20px; }
.legal-form label {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #2c3340;
}
.legal-form input,
.legal-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #cfd6df;
  border-radius: 9px;
  /* 16px: menos que eso y iOS hace zoom al enfocar el campo. */
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 15px;
  background: #fff;
  color: #1a2029;
}
.legal-form textarea { min-height: 96px; resize: vertical; }
.legal-form input:focus,
.legal-form textarea:focus {
  outline: 2px solid var(--color-acento, #0a74a3);
  outline-offset: 1px;
  border-color: transparent;
}
.legal-form-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
@media (max-width: 560px) { .legal-form-fila { grid-template-columns: minmax(0, 1fr); } }

.legal-btn {
  background: var(--color-primario, #1a1a2e);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 26px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.legal-btn:disabled { opacity: .55; cursor: default; }

.legal-msg {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: .92rem;
}
.legal-msg.ok    { background: #e8f6ec; border: 1px solid #a5d6b5; color: #1c6b34; }
.legal-msg.error { background: #fdeaea; border: 1px solid #eaacac; color: #9b2226; }

.legal-obligatorio { color: #c0392b; }
.legal-ayuda { font-size: .82rem; color: #5b6472; margin: -10px 0 15px; }