/* ============================================
   Legal pages — Design System v2.0 styling
   Aplicado sobre el marcado existente de las 5 páginas legales
   (contenido intacto; solo presentación).
   ============================================ */

.legal-page {
  background:
    radial-gradient(860px 360px at 8% -8%, rgba(56, 93, 152, 0.08), transparent 58%),
    radial-gradient(860px 360px at 92% -10%, rgba(45, 212, 191, 0.08), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #ffffff 100%);
  color: var(--color-text-primary, #1e293b);
  font-family: var(--font-body, Inter, sans-serif);
}

/* Contenedores grises sueltos (no cajas internas con p-6) */
.legal-page .min-h-screen.bg-gray-50,
.legal-page .bg-gray-50:not(.p-6) {
  background: transparent !important;
}

/* Header de página */
.legal-page > main > header h1,
.legal-page header h1 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #0f172a);
}

.legal-page > main > header p {
  color: var(--color-text-secondary, #64748b);
}

/* Tarjetas principales (border-gray-200 rounded-lg bg-white shadow-sm) */
.legal-page .border-gray-200.rounded-lg,
.legal-page .border-gray-200.rounded-xl {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.06) !important;
}

/* Cajas internas (bg-gray-50 p-6 rounded-lg border-gray-200) */
.legal-page .bg-gray-50.p-6.rounded-lg {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  border-radius: 0.75rem !important;
}

/* Encabezados de sección */
.legal-page h2 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 700 !important;
  color: var(--color-text-primary, #0f172a) !important;
}

.legal-page h3 {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;
  color: var(--color-text-primary, #0f172a) !important;
}

/* Numeración circular de secciones */
.legal-page .bg-gray-700.text-white.rounded-full {
  background: linear-gradient(135deg, var(--color-primary, #385D98), var(--color-secondary, #2DD4BF)) !important;
}

/* Enlaces */
.legal-page a {
  color: var(--color-primary, #385D98);
}

/* Paneles de aviso (teal/ámbar): mantienen semántica, se alinean radios */
.legal-page [style*="linear-gradient"] {
  border-radius: 1rem !important;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.06) !important;
}

/* Sidebar (hojas de reclamaciones) */
.legal-page .bg-white.rounded-2xl {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.06) !important;
}

/* Accordion headers de términos */
.legal-page .accordion-header {
  border-radius: 0.5rem;
}

/* --------------------------------------------
   DARK MODE
   -------------------------------------------- */
[data-theme="dark"] .legal-page {
  background:
    radial-gradient(860px 360px at 8% -8%, rgba(56, 93, 152, 0.12), transparent 58%),
    radial-gradient(860px 360px at 92% -10%, rgba(45, 212, 191, 0.08), transparent 56%),
    linear-gradient(180deg, #0a0f1c 0%, #111827 52%, #0a0f1c 100%);
  color: #e2e8f0;
}

[data-theme="dark"] .legal-page .border-gray-200.rounded-lg,
[data-theme="dark"] .legal-page .border-gray-200.rounded-xl {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .legal-page .bg-gray-50.p-6.rounded-lg {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .legal-page h1,
[data-theme="dark"] .legal-page h2,
[data-theme="dark"] .legal-page h3 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .legal-page p,
[data-theme="dark"] .legal-page li,
[data-theme="dark"] .legal-page div {
  color: #cbd5e1;
}

[data-theme="dark"] .legal-page a {
  color: #60a5fa;
}

[data-theme="dark"] .legal-page .bg-white.rounded-2xl {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}