/* =====================================================
   Comunidad — Tema claro (vista previa)
   Se activa con <html class="tema-claro"> (ver inc/tema.php).

   Cómo funciona:
   1. Se invierten las variables del sistema: --ink pasa a ser el fondo
      claro y --paper el texto oscuro. Los grises se reordenan igual.
   2. Las "islas oscuras" vuelven a la paleta original. Son las zonas
      pensadas para fondo negro: logos blancos de asociados, partners
      y festivales, el hero con foto, el llamado a asociarse y el footer.
   3. Los acentos se oscurecen lo justo para leerse sobre crema (AA).
   ===================================================== */

html.tema-claro {
  --ink: #FBF7F1;
  --paper: #141414;
  --cream: #F0DEC1;
  --grey-900: #F4ECE0;
  --grey-800: #FFFFFF;
  --grey-700: #F1E9DD;
  --grey-600: #DDD2C2;
  --grey-500: #8A8177;
  --grey-400: #5C554D;   /* textos secundarios: 7:1 sobre el fondo */
  --grey-300: #47413A;
  --grey-200: #2C2824;
  --grey-100: #1A1816;
  --magenta: #C8158F;    /* Pantone 225 C oscurecido: 5,3:1 sobre blanco (el #DF1AA0 queda en 4,4 y no llega a AA en texto chico) */
  --yellow: #8A6800;
  --lime: #2E7D16;
  --orange: #B53A0A;     /* 1655 C oscurecido para texto */
  --line-rgb: 20,20,20;
  --bg-rgb: 251,247,241;
  color-scheme: light;
}

/* ---------- Islas oscuras: vuelven a la paleta original ---------- */
html.tema-claro :is(
  .site-footer,
  .page-hero--bg,
  .cta-block,
  .asoc-card .logo-wrap,
  .asoc-logo-card,
  .fest-card,
  .doc-portada,
  .reel,
  .junta-card .avatar--logo,
  .a11y-panel,
  .cookies-inner
) {
  --ink: #010101;
  --paper: #FFFFFF;
  --grey-900: #0a0a0a;
  --grey-800: #141414;
  --grey-700: #1c1c1c;
  --grey-600: #2a2a2a;
  --grey-500: #4a4a4a;
  --grey-400: #a8a8a8;
  --grey-300: #b5b5b5;
  --grey-200: #e5e5e5;
  --grey-100: #f5f5f5;
  --magenta: #DF1AA0;
  --yellow: #FAE100;
  --orange: #FC4D0F;
  --lime: #8EDF6D;
  --line-rgb: 255,255,255;
  --bg-rgb: 0,0,0;
  color: var(--paper);
  color-scheme: dark;
}
html.tema-claro .page-hero--bg { background: #000; }
html.tema-claro .site-footer { background: #0b0b0b; }

/* ---------- Encabezados de página: crema, como las piezas de Academy ---------- */
html.tema-claro .page-hero:not(.page-hero--bg) { background: linear-gradient(180deg, var(--cream) 0%, var(--ink) 100%); }

/* ---------- Header y logo ---------- */
html.tema-claro .site-header { background: rgba(var(--bg-rgb),.88); }
html.tema-claro .site-header .logo-brand:not(.logo-brand--negro) { display: none; }
html.tema-claro .site-header .logo-brand--negro { display: block; }

/* ---------- Botones y chips sobre fondo claro ---------- */
html.tema-claro .btn-primary,
html.tema-claro .cta-asociarme,
html.tema-claro .mobile-nav .m-cta,
html.tema-claro .filter-chip.active,
html.tema-claro .fluentform .ff-btn-submit { color: #fff !important; }
html.tema-claro .btn-primary::after { background: var(--paper); }
html.tema-claro .btn-primary:hover { color: #fff !important; }
html.tema-claro .cta-asociarme::before { background: var(--paper); }
html.tema-claro :is(.cta-asociarme, .mobile-nav .m-cta):hover { color: #fff !important; }
html.tema-claro .fluentform .ff-btn-submit:hover { background: var(--paper) !important; color: #fff !important; }
html.tema-claro .section--cream,
html.tema-claro .section--white { color: #141414; }

/* ---------- Tarjetas: blancas con borde suave sobre el fondo crema claro ---------- */
html.tema-claro :is(.card, .asoc-card, .news-card, .ben, .junta-card, .acad-item) { box-shadow: 0 1px 2px rgba(20,20,20,.04); }

/* ---------- Detalles ---------- */
html.tema-claro .timeline-photo--logo img { border: 1px solid rgba(20,20,20,.08); }
html.tema-claro .timeline-photo img { filter: none; }
html.tema-claro .fluentform .ff-message-success { background: #fff; }
html.tema-claro .fluentform .error,
html.tema-claro .fluentform .ff-el-is-error .text-danger { color: #B0105F; }
html.tema-claro ::selection { background: rgba(223,26,160,.18); color: inherit; }

/* ---------- Alto contraste (panel de accesibilidad) en versión clara ---------- */
html.tema-claro.a11y-contraste { --grey-200: #000; --grey-300: #000; --grey-400: #111; --magenta: #A0005A; }
html.tema-claro.a11y-contraste body,
html.tema-claro.a11y-contraste .section--alt,
html.tema-claro.a11y-contraste .page-hero:not(.page-hero--bg) { background: #fff !important; }
html.tema-claro.a11y-contraste :is(.asoc-card, .card, .ben, .junta-card, .news-card, .acad-item) { border: 1px solid #000 !important; background: #fff !important; }
html.tema-claro.a11y-contraste .btn-ghost { border-color: #000; color: #000; }

/* ---------- Ajustes tras revisar páginas ---------- */
/* Hero en crema de marca (Pantone 7506 C) con el isotipo en negro: versión permitida en la guía (1.9). */
html.tema-claro .hero { background: var(--cream); }
html.tema-claro .isotipo .letra { fill: #010101; }
html.tema-claro .isotipo .letra--o { fill: #DF1AA0; }
/* Cifras grandes (texto grande, 3:1): acentos un poco más vivos que en texto chico. */
html.tema-claro .bignum[style*="--yellow"] { color: #A67C00 !important; }
html.tema-claro .bignum[style*="--lime"] { color: #3A8F1E !important; }