/* ==========================================================================
   SOS Data Recovery — Páginas de audiencia
   Usado por /para-profesionales y /para-empresas/* vía
   partials/audience-page-template.php.
   Requiere variables.css, base.css, components.css, layout.css y service.css.
   ========================================================================== */

/* Aclaración honesta destacada (ej. el límite de peritaje sin licencia).
   Se ve distinta a un párrafo normal para que no pase desapercibida. */
.audience-note {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-cyan);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 760px;
}

/* Bloque de cruce hacia la audiencia correspondiente, insertado al final
   de las páginas de servicio. */
.audience-crosslink {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.audience-crosslink p {
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  min-width: 240px;
}

.audience-crosslink strong {
  color: var(--color-text);
}

.audience-crosslink .cta-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Las etiquetas de estos botones son largas y los .btn usan white-space:nowrap:
   sin esto el contenedor flex los comprime y el texto se desborda del botón. */
.audience-crosslink .btn {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .audience-crosslink {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------
   Bloque opcional de causas de falla
   (primero usados en /para-empresas/data-centers, 2026-10-03).
   --------------------------------------------------------------------- */
.audience-intro {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.audience-failures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.audience-failure {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-cyan);
  border-radius: 0;
  padding: var(--space-5);
}

.audience-failure h3 {
  font-size: var(--text-md);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.audience-failure p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Tono oscuro (body.tema-oscuro), activado con 'theme' => 'oscuro'.
   Solo cambia el contenido de <main>: cabecera y pie quedan iguales para
   no perder la identidad del sitio. Las variables se redefinen dentro de
   main, así cada componente toma los colores oscuros sin tocar su CSS.
   Contrastes comprobados: texto #ede9fe y #c4b5fd sobre #0f0c24 / #17143a
   superan 4,5:1 (WCAG AA).
   --------------------------------------------------------------------- */
.tema-oscuro main {
  --color-text: #ede9fe;
  --color-text-muted: #c4b5fd;
  --color-bg: #17143a;
  --color-bg-alt: #0f0c24;
  --color-border: #3730a3;
  --color-border-light: #2e2a63;
  --color-link: #a5f3fc;
  --color-link-hover: #67e8f9;
  --color-cyan-dark: #67e8f9;
  background: #0b0920;
  color: var(--color-text);
}

.tema-oscuro main .service-banner {
  background: linear-gradient(135deg, #0b0920 0%, #1e1b4b 60%, #0e3a4a 100%);
  border-bottom: 1px solid #2e2a63;
}

.tema-oscuro main .use-case-list li,
.tema-oscuro main .faq-item,
.tema-oscuro main .audience-note {
  background: var(--color-bg);
}

.tema-oscuro main .card {
  border-color: var(--color-border-light);
}

.tema-oscuro main .faq-item summary::after {
  color: #a5f3fc;
}

.tema-oscuro main .final-cta {
  background: linear-gradient(135deg, #0f0c24 0%, #1e1b4b 100%);
}

/* Cabecera en tono oscuro (pedido del cliente el 2026-10-03: "la parte
   superior también debería cambiar un poco"). Mismas variables que main,
   más los fondos que en la cabecera están fijos en blanco. */
.tema-oscuro .header,
.tema-oscuro .mobile-menu-container {
  --color-text: #ede9fe;
  --color-text-muted: #c4b5fd;
  --color-bg-alt: #0f0c24;
  --color-border: #3730a3;
  --color-border-light: #2e2a63;
  --color-cyan-dark: #67e8f9;
}

.tema-oscuro .header,
.tema-oscuro .header-row-1 {
  background: #0b0920;
}

.tema-oscuro .header.is-scrolled {
  background: rgba(11, 9, 32, 0.95);
}

.tema-oscuro .mobile-menu-container {
  background: #0f0c24;
}

.tema-oscuro .logo .recovery {
  color: #a78bfa;
}

.tema-oscuro .main-nav li a {
  background: #17143a;
}

.tema-oscuro .header .btn-secondary:hover {
  color: #0b0920;
}

/* Aviso destacado bajo un bloque de tarjetas (p. ej. emergencias en Procesos y compliance). */
.audience-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-8) auto 0;
  padding: var(--space-5) var(--space-6);
  max-width: 820px;
  border: 2px solid var(--v2-amber, #d97706);
  border-radius: var(--radius-md);
  background: var(--v2-amber-soft, #fff7e8);
  color: var(--v2-ink, #2b2b2b);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.audience-callout__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .audience-callout {
    font-size: 1.05rem;
    padding: var(--space-4);
  }
}

.tema-oscuro main .audience-callout {
  background: var(--color-bg);
  color: var(--color-text, #fff);
}