/* src/css/components/cards.css */

/* ===== Cards unificadas (sin duplicar hover/tema) ===== */
/* Archivo: src/css/components/cards.css */

/* Variables locales de cards (alineadas con tokens globales de hover de “bloques”) */
:root {
  --card-radius: 1rem;

  --card-border: rgba(148, 163, 184, 0.45);
  --card-bg: var(--c-surface, #f9fafb);
  --card-fg: var(--c-text, #0f172a);
  --card-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);

  /* Hover (usa tokens globales definidos en base.css) */
  --card-hover-bg: var(--block-hover-bg, #ffffff);
  --card-hover-border: var(--block-hover-border, rgba(37, 99, 235, 0.35));
  --card-hover-shadow: var(--block-hover-shadow, var(--shadow-soft));
  --card-hover-translate-y: var(--block-hover-translate-y, -3px);
  --card-hover-scale: var(--block-hover-scale, 1.01);
  --card-hover-transition: var(
    --block-hover-transition,
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out
  );

  /* Estado “open/expanded” (por defecto, igual que base) */
  --card-open-bg: var(--card-bg);
}

/* Override de variables en modo oscuro */
[data-theme="dark"] {
  --card-border: #1f2937;
  --card-bg: #020617;
  --card-fg: #e5e7eb;
  --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);

  /* En dark, mantenemos el open coherente con el fondo oscuro */
  --card-open-bg: #020617;

  /* En dark, el hover de cards sigue tokens globales; fallback para coherencia */
  --card-hover-bg: var(--block-hover-bg, var(--card-bg));
  --card-hover-border: var(--block-hover-border, rgba(96, 165, 250, 0.9));
  --card-hover-shadow: var(
    --block-hover-shadow,
    0 22px 50px rgba(0, 0, 0, 0.9)
  );
}

/* ===== Core de card (sube especificidad frente a overrides posteriores) ===== */
.card {
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--card-fg);
  box-shadow: var(--card-shadow);
}

/*
  Compat: elementos "tipo card" que pueden existir sin la clase .card
  (o que reciben estilos propios y queremos normalizarlos).
*/
:where(
  .diagnostic-form,
  .diagnostic-visual-card,
  .fast-media,
  .service-item,
  .step-item,
  .info-card,
  .fit-card,
  .faq-item,
  .metric-card,
  .hero-panel,
  .hero-panel-card,
  .diag-output,
  .diag-plan
) {
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--card-fg);
  box-shadow: var(--card-shadow);
}

/* ===== OPT-OUT: bloques que NO deben comportarse como “card” (sin hover, sin borde visible) =====
   Úsalo en el 1er bloque/cabecera de cada sección (título + texto).
   Importante: además de quitar el hover, evita que el hover unificado “reviva” bordes/fondos.
*/
.no-card-hover {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hover unificado (solo puntero fino) */
/* Importante: lo aplicamos a TODOS los “card-like” EXCEPTO los que llevan .no-card-hover */
@media (hover: hover) and (pointer: fine) {
  :is(
      .card,
      .diagnostic-form,
      .diagnostic-visual-card,
      .fast-media,
      .service-item,
      .step-item,
      .info-card,
      .fit-card,
      .faq-item,
      .metric-card,
      .hero-panel,
      .hero-panel-card,
      .diag-output,
      .diag-plan
    ):not(.no-card-hover) {
    transition: var(--card-hover-transition);
  }

  :is(
      .card,
      .diagnostic-form,
      .diagnostic-visual-card,
      .fast-media,
      .service-item,
      .step-item,
      .info-card,
      .fit-card,
      .faq-item,
      .metric-card,
      .hero-panel,
      .hero-panel-card,
      .diag-output,
      .diag-plan
    ):not(.no-card-hover):hover {
    transform: translateY(var(--card-hover-translate-y))
      scale(var(--card-hover-scale)) !important;
    box-shadow: var(--card-hover-shadow);

    /* Clave: forzamos border/background para que no lo pisen hovers de secciones */
    border-color: var(--card-hover-border) !important;
    background: var(--card-hover-bg) !important;
  }

  /* Blindaje extra: si alguien pasa por encima de un bloque opt-out, no debe cambiar nada */
  .no-card-hover:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
  }
}

/* ===== FIX CRÍTICO: FAQs cuando se despliegan (especialmente en dark) =====
   Defensivo contra reglas más específicas (p.ej. .faq-item[open]) que “blanquean” el fondo.
*/
.faq-item[open],
.faq-item.is-open,
.faq-item[aria-expanded="true"] {
  background: var(--card-open-bg);
  color: var(--card-fg);
}

/* En modo oscuro, reforzamos bg/border/fg para evitar overrides por especificidad */
[data-theme="dark"] .faq-item[open],
[data-theme="dark"] .faq-item.is-open,
[data-theme="dark"] .faq-item[aria-expanded="true"] {
  background: var(--card-open-bg);
  border-color: var(--card-border);
  color: var(--card-fg);
}

/* Evita “parches” internos (summary/answer) con fondos claros heredados */
[data-theme="dark"] .faq-item[open] .faq-question,
[data-theme="dark"] .faq-item.is-open .faq-question,
[data-theme="dark"] .faq-item[aria-expanded="true"] .faq-question,
[data-theme="dark"] .faq-item[open] .faq-answer,
[data-theme="dark"] .faq-item.is-open .faq-answer,
[data-theme="dark"] .faq-item[aria-expanded="true"] .faq-answer {
  background: transparent;
  color: inherit;
}

/* Versión no agresiva: solo fija el color del bloque FAQ (no todo *) */
[data-theme="dark"] .faq-item .faq-question,
[data-theme="dark"] .faq-item .faq-answer {
  color: inherit;
}