/* =====================================================================
   Eikove.App · CAPA GLOBAL DE TEMA / PALETA
   ---------------------------------------------------------------------
   Contrato único: el tema (o la paleta) fija --perfil-bg y --perfil-accent y
   tema-social.js / social.js derivan de ahí el resto de tokens
   (--perfil-texto, -suave, -superficie, -superficie-2, -borde,
   -acento-texto, -accent-texto, -acento-tenue, -acento-borde).
   Esta hoja los aplica a TODAS las páginas con barra superior: fondo,
   cabecera, menú del perfil, pie, barra inferior móvil, cajón, tarjetas,
   botones, enlaces y modales. Se carga la última (después del CSS de cada página).
   Sin tema elegido (data-tema-activo="ninguno") rige la base blanco + azul marino.
   ===================================================================== */

/* 1 · Variables históricas ← tokens (solo con tema/paleta; la base de marca queda intacta) */
body[data-tema-activo]:not([data-tema-activo="ninguno"]) {
  --texto: var(--perfil-texto);
  --suave: var(--perfil-suave);
  --tarjeta: var(--perfil-superficie);
  --borde: var(--perfil-borde);
  --fondo: var(--perfil-bg);
  --azul: var(--perfil-accent-texto, var(--perfil-accent));
  --azul-2: var(--perfil-accent-texto, var(--perfil-accent));
  --azul-3: var(--perfil-accent-texto, var(--perfil-accent));
  --azul-claro: var(--perfil-acento-tenue);
  --marca: var(--perfil-accent);
  --marca-2: var(--perfil-acento-borde);
  --oro: var(--perfil-accent);
  --oro-osc: var(--perfil-accent-texto, var(--perfil-accent));
  --aviso-claro: var(--perfil-acento-tenue);
  --aviso: var(--perfil-accent-texto, var(--perfil-accent));
  --ok-claro: var(--perfil-acento-tenue);
  --mal-claro: var(--perfil-acento-tenue);
  --btn-bg: var(--perfil-accent);
  --btn-bg-hover: var(--perfil-acento-borde);
  --btn-texto: var(--perfil-acento-texto);
  color: var(--perfil-texto);
}
body[data-tema-activo]:not([data-tema-activo="ninguno"]) {
  background: var(--feed-fondo, var(--perfil-bg));
  background-attachment: fixed;
}
/* Estados semánticos legibles sobre cualquier fondo (verde/rojo se aclaran u oscurecen con el tono) */

/* Estados semánticos: el rojo/verde se mezclan con el color de texto del tema para ser legibles en claro y oscuro */
body[data-tema-activo]:not([data-tema-activo="ninguno"]) {
  --ok: color-mix(in srgb, #1b9a5a 38%, var(--perfil-texto));
  --mal: color-mix(in srgb, #d92d20 38%, var(--perfil-texto));
}

/* 2 · Títulos, enlaces y botones */
body[data-tema-activo]:not([data-tema-activo="ninguno"]) h1,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) h2,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) h3,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) h4 { color: var(--perfil-texto); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) a:where(:not(.btn, .tb-slot, .nav-link-btn, [class*="deck"], [class*="arc-"], .post-mapa)) { color: var(--perfil-accent-texto, var(--perfil-accent)); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .btn { background: var(--perfil-accent); border-color: var(--perfil-accent); color: var(--perfil-acento-texto); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .btn:hover { background: var(--perfil-acento-borde); color: var(--perfil-texto); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .btn.sec {
  background: var(--perfil-superficie-2);
  color: var(--perfil-texto);
  border-color: var(--perfil-borde);
}
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .btn.sec:hover { background: var(--perfil-acento-tenue); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .btn.oro,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .chip.oro { color: var(--perfil-acento-texto); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) input,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) select,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) textarea {
  background: var(--perfil-superficie-2);
  color: var(--perfil-texto);
  border-color: var(--perfil-borde);
}
body[data-tema-activo]:not([data-tema-activo="ninguno"]) input::placeholder,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) textarea::placeholder { color: var(--perfil-suave); opacity: 1; }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .modal,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .modal-caja,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .hoja { background: var(--perfil-superficie); color: var(--perfil-texto); }

/* 3 · Cabecera superior (todas las páginas) */
body[data-tema-activo] .superapp-header {
  background: var(--perfil-card-bg, #ffffff) !important;
  border-bottom: 1px solid var(--perfil-card-border, #e4e2e1) !important;
  color: var(--perfil-texto, #1a1a1a);
}
body[data-tema-activo] .superapp-header .marca-texto,
body[data-tema-activo] .superapp-header .brand-text,
body[data-tema-activo] .superapp-header .superapp-marca {
  color: var(--perfil-texto, #0F172A);
  font-family: var(--fuente-marca, "JetBrains Mono", "Fira Code", ui-monospace, monospace);
}
body[data-tema-activo] .superapp-header .marca-ek i,
body[data-tema-activo] .superapp-header .brand-text i {
  color: var(--perfil-acento, #E25C50);
}
body[data-tema-activo] .superapp-header .brand-icon {
  background: var(--perfil-acento, #E25C50);
  color: #ffffff;
}
body[data-tema-activo] .superapp-header .icono-logo-svg rect {
  fill: var(--perfil-acento, #E25C50);
}
body[data-tema-activo] .superapp-header .icono-logo-svg text {
  fill: #ffffff;
}
body[data-tema-activo] .superapp-header .nav-link-btn {
  color: var(--perfil-suave, #5f5f63);
}
body[data-tema-activo] .superapp-header .nav-link-btn:hover {
  color: var(--perfil-texto, #1a1a1a);
  background: var(--perfil-superficie, rgba(239, 120, 120, 0.08));
}
body[data-tema-activo] .superapp-header .nav-link-btn.activo {
  background: var(--perfil-acento-tenue, #fdf0f0);
  color: var(--perfil-acento, #ef7878);
  box-shadow: inset 0 0 0 1px var(--perfil-acento-borde, #ef7878);
}
body[data-tema-activo] .superapp-header .btn-icono-circular {
  background: var(--perfil-superficie, #ffffff);
  color: var(--perfil-texto, #1a1a1a);
  border: 1px solid var(--perfil-borde, #e4e2e1);
}
body[data-tema-activo] .superapp-header .btn-icono-circular:hover {
  background: var(--perfil-superficie-2, #fdf0f0);
  color: var(--perfil-acento, #ef7878);
  border-color: var(--perfil-acento, #ef7878);
}
body[data-tema-activo] .superapp-header .buscador-input {
  background: var(--perfil-input-bg, #ffffff);
  color: var(--perfil-texto, #1a1a1a);
  border-color: var(--perfil-input-borde, #e4e2e1);
}
body[data-tema-activo] .superapp-header .buscador-input::placeholder {
  color: var(--perfil-suave, #5f5f63);
}

/* Encabezado blanco y logotipo monoespaciado Eikove App en tema por defecto */
body[data-tema-activo="ninguno"] .superapp-header,
body:not([data-tema-activo]) .superapp-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0F172A !important;
}
body[data-tema-activo="ninguno"] .superapp-header .superapp-marca,
body[data-tema-activo="ninguno"] .superapp-header .marca-texto,
body[data-tema-activo="ninguno"] .superapp-header .brand-text,
body[data-tema-activo="ninguno"] .superapp-header .marca-ek,
body:not([data-tema-activo]) .superapp-header .superapp-marca,
body:not([data-tema-activo]) .superapp-header .marca-texto,
body:not([data-tema-activo]) .superapp-header .brand-text,
body:not([data-tema-activo]) .superapp-header .marca-ek {
  color: #0F172A !important;
}
body[data-tema-activo="ninguno"] .superapp-header .marca-ek i,
body[data-tema-activo="ninguno"] .superapp-header .brand-text i,
body:not([data-tema-activo]) .superapp-header .marca-ek i,
body:not([data-tema-activo]) .superapp-header .brand-text i {
  color: #E25C50 !important;
}
body[data-tema-activo="ninguno"] .superapp-header .brand-icon,
body:not([data-tema-activo]) .superapp-header .brand-icon {
  background: #E25C50 !important;
  color: #ffffff !important;
}
body[data-tema-activo="ninguno"] .superapp-header .icono-logo-svg rect,
body:not([data-tema-activo]) .superapp-header .icono-logo-svg rect {
  fill: #E25C50 !important;
  stroke: none !important;
}
body[data-tema-activo="ninguno"] .superapp-header .icono-logo-svg text,
body:not([data-tema-activo]) .superapp-header .icono-logo-svg text {
  fill: #ffffff !important;
}

/* Footer blanco y letras #EF7878 y negras */
body[data-tema-activo] .footer-institucional {
  background: var(--perfil-card-bg, #ffffff) !important;
  border-top: 1px solid var(--perfil-card-border, #e4e2e1) !important;
  color: var(--perfil-texto, #1a1a1a);
}
body[data-tema-activo] .footer-institucional .footer-col-izq,
body[data-tema-activo] .footer-institucional .footer-col-centro,
body[data-tema-activo] .footer-institucional .footer-separador {
  color: var(--perfil-texto, #1a1a1a);
}
body[data-tema-activo] .footer-institucional a,
body[data-tema-activo] .footer-institucional .footer-link,
body[data-tema-activo] .footer-institucional .footer-col-der span:not(.footer-separador),
body[data-tema-activo] .footer-institucional b {
  color: var(--perfil-acento, #ef7878);
}
body[data-tema-activo] .footer-institucional a:hover,
body[data-tema-activo] .footer-institucional .footer-link:hover {
  color: var(--perfil-texto, #1a1a1a);
}
body[data-tema-activo="ninguno"] .footer-institucional,
body:not([data-tema-activo]) .footer-institucional {
  background: #ffffff !important;
  border-top: 1px solid #e4e2e1 !important;
  color: #1a1a1a !important;
}
body[data-tema-activo="ninguno"] .footer-institucional .footer-col-izq,
body[data-tema-activo="ninguno"] .footer-institucional .footer-col-centro,
body[data-tema-activo="ninguno"] .footer-institucional .footer-separador,
body:not([data-tema-activo]) .footer-institucional .footer-col-izq,
body:not([data-tema-activo]) .footer-institucional .footer-col-centro,
body:not([data-tema-activo]) .footer-institucional .footer-separador {
  color: #1a1a1a !important;
  opacity: 1 !important;
}
body[data-tema-activo="ninguno"] .footer-institucional a,
body[data-tema-activo="ninguno"] .footer-institucional .footer-link,
body[data-tema-activo="ninguno"] .footer-institucional .footer-col-der span:not(.footer-separador),
body[data-tema-activo="ninguno"] .footer-institucional b,
body:not([data-tema-activo]) .footer-institucional a,
body:not([data-tema-activo]) .footer-institucional .footer-link,
body:not([data-tema-activo]) .footer-institucional .footer-col-der span:not(.footer-separador),
body:not([data-tema-activo]) .footer-institucional b {
  color: #ef7878 !important;
  font-weight: 600;
}
body[data-tema-activo]:not(.social-body) .footer-institucional a { color: var(--perfil-suave, rgba(241,245,249,.8)); }

/* 5 · Barra inferior móvil y cajón */
body[data-tema-activo] .tb-shell {
  --shell-fondo: color-mix(in srgb, var(--perfil-card-bg, #ef7878) 97%, transparent);
  --shell-borde: var(--perfil-card-border, rgba(255,255,255,.12));
  --shell-texto: var(--perfil-suave, #93a4bb);
  --shell-activo: var(--perfil-texto, #fff);
  --shell-acento: var(--perfil-accent, #ef7878);
}
body[data-tema-activo] .tb-shell .tb-slot { color: var(--shell-texto); }
body[data-tema-activo] .tb-shell .tb-slot.activo { color: var(--shell-activo); }
body[data-tema-activo] .tb-hoja-opcion { background: var(--perfil-superficie-2); color: var(--perfil-texto); border-color: var(--perfil-borde); }

/* 6 · Elementos con fondo de acento: el texto usa el color calculado para ese fondo */
body[data-tema-activo] .mini-pasos span,
body[data-tema-activo] .desc-avatar,
body[data-tema-activo] .juego-avatar,
body[data-tema-activo] .arc-sorpresa,
body[data-tema-activo] .arc-jugar { color: var(--perfil-acento-texto); }
body[data-tema-activo] .desc-avatar { background: var(--perfil-accent); }
body[data-tema-activo] .arc-sorpresa,
body[data-tema-activo] .arc-jugar { background: var(--perfil-accent); border-color: var(--perfil-accent); text-shadow: none; }

/* 7 · Etiquetas y textos de acento sobre fondos de tema */
body[data-tema-activo] .muro-sug-zona { color: var(--perfil-texto); background: var(--perfil-acento-tenue); }
body[data-tema-activo] .apodo-post { color: var(--perfil-accent-texto, var(--perfil-texto)); }
body[data-tema-activo] #feed .muro-sug .btn.sec {
  color: var(--perfil-texto) !important;
  background: var(--perfil-superficie-2) !important;
  border-color: var(--perfil-borde) !important;
}
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .pie-inst .suerte,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .creditos b { color: var(--perfil-accent-texto, var(--perfil-texto)); }
body[data-tema-activo] .avatar:not(:has(img)),
body[data-tema-activo] .avatar.chico:not(:has(img)) { color: var(--perfil-acento-texto); }
body[data-tema-activo] .post-mapa { background: var(--perfil-acento-tenue); color: var(--perfil-texto); }
body[data-tema-activo] .arc-chip small,
body[data-tema-activo] .arc-carril-n { color: var(--perfil-suave); opacity: 1; }
body[data-tema-activo] a.post-mapa { background: var(--perfil-acento-tenue); color: var(--perfil-texto); }

/* 8 · Pestañas, cápsulas y textos que tenían gris/blanco fijo */
:root { --tg-no-leido: #c62828; }
.chat-no-leidos, [class$="no-leidos"], .tb-nb { background: var(--tg-no-leido) !important; color: #fff !important; }
body[data-tema-activo] .feed-tab,
body[data-tema-activo] .tie-tab,
body[data-tema-activo] .composer-capsula-texto,
body[data-tema-activo] .arc-chip { color: var(--perfil-suave); }
body[data-tema-activo] .feed-tab:hover,
body[data-tema-activo] .arc-chip:hover { color: var(--perfil-texto); }
body[data-tema-activo] .feed-tab.activo { background: var(--perfil-accent); color: var(--perfil-acento-texto); }
body[data-tema-activo] .tie-tab.activa,
body[data-tema-activo] .arc-chip.activo { color: var(--perfil-texto); text-shadow: none; }
body[data-tema-activo] .arc-chip.activo { border-bottom-color: var(--perfil-accent); }
body[data-tema-activo] .arc-chip small { opacity: 1; color: var(--perfil-suave); }
body[data-tema-activo] .playlist-item-info small,
body[data-tema-activo] .desc-datos small,
body[data-tema-activo] .desc-puesto,
body[data-tema-activo] .desc-hero p { color: var(--perfil-suave); }
/* Títulos dentro de la cabecera */
body[data-tema-activo] .superapp-header .tie-titulo,
body[data-tema-activo] .superapp-header .com-titulo,
body[data-tema-activo] .superapp-header [class$="-titulo"] { color: var(--perfil-texto, #fff); }
/* Pies con créditos (redes, jugador) */
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .redes-pie .pie-inst,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .creditos,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .pie-inst { color: var(--perfil-suave); }
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .redes-pie .pie-inst a,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .creditos a,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .creditos b,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .pie-inst b,
body[data-tema-activo]:not([data-tema-activo="ninguno"]) .pie-inst .suerte { color: var(--perfil-accent-texto, var(--perfil-texto)); }
/* Etiquetas sobre fondo de tarjeta */
body[data-tema-activo] a.post-mapa,
body[data-tema-activo] .muro-sug-zona { background: var(--perfil-superficie-2); color: var(--perfil-texto); }
/* Ficha del juego sobre arte oscuro */
.deck-info h2 { color: #fff !important; }

body[data-tema-activo] .tendencia-tag { color: var(--perfil-texto); }

/* Reglas con !important del muro social que fijaban gris: el tema manda */
body[data-tema-activo] .social-layout .feed-tab { color: var(--perfil-suave) !important; }
body[data-tema-activo] .social-layout .feed-tab.activo { color: var(--perfil-texto) !important; }
body[data-tema-activo] .composer-avanzado-toggle .chev,
body[data-tema-activo] .chev { color: var(--perfil-texto); opacity: 1; }
body[data-tema-activo] .estado-pildora-editar { color: var(--perfil-texto); }
body[data-tema-activo] .favorito-avatar-inicial { background: var(--perfil-superficie-2); color: var(--perfil-texto); }

/* Detalles que también deben ser legibles en la base de marca (blanco + azul marino) */
body[data-tema-activo] a.mencion,
body[data-tema-activo] .mencion { color: var(--perfil-accent-texto, var(--perfil-texto)); }
body[data-tema-activo] .muro-sug .btn.sec.siguiendo,
body[data-tema-activo] #feed .muro-sug.siguiendo .btn.sec { color: var(--perfil-texto) !important; }
body[data-tema-activo] .media-embed-fallback,
body[data-tema-activo] a.media-embed-fallback { color: var(--perfil-accent-texto, var(--perfil-texto)); }
body[data-tema-activo] .superapp-body .btn-seguir-mini { color: var(--perfil-texto); }
body[data-tema-activo="ninguno"] .redes-pie .pie-inst .suerte {
  color: #ef7878;
}

/* Medios inmersivos (celular): fondo oscuro fijo, texto siempre claro */
.post-rail-btn, .post-rail-btn b, .post-media-pie, .post-media-pie b,
.post-rail .reaccion, .post-rail .reaccion span { color: #fff !important; }
.post-rail-btn.activo, .post-rail-btn.activo b { color: #5ee08f !important; }
body[data-tema-activo] .tag-tendencia small,
body[data-tema-activo] .tendencia-tag { color: var(--perfil-texto); opacity: 1; }
body[data-tema-activo] .tag-tendencia { background: var(--perfil-superficie-2); border-color: var(--perfil-borde); }

/* ===== Cristal: en los temas con escena de fondo, las tarjetas dejan ver la escena ===== */
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) {
  --tarjeta: color-mix(in srgb, var(--perfil-superficie) 64%, transparent);
}
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) :is(.tarjeta, .post, .muro-sug, .muro-fila, .composer-capsula, .perfil-card, .post-original) {
  background-color: color-mix(in srgb, var(--perfil-superficie) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  border-color: color-mix(in srgb, var(--perfil-accent) 16%, var(--perfil-borde));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .16), inset 0 1px 0 color-mix(in srgb, var(--perfil-texto) 7%, transparent);
}
/* Texto suave sobre cristal: un poco más contrastado para no perderse sobre la escena */
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) {
  --perfil-suave: color-mix(in srgb, var(--perfil-texto) 92%, var(--perfil-bg));
  --suave: var(--perfil-suave);
}
/* Textos secundarios pequeños sobre la escena: casi el color principal, para no perderse donde el arte es más claro */
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) :is(.handle, .perfil-lateral-handle, small) {
  color: color-mix(in srgb, var(--perfil-texto) 90%, var(--perfil-superficie)) !important;
}
/* Barra superior y pie también en cristal sobre la escena */
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .superapp-header,
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .footer-institucional,
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .tb-shell {
  background: color-mix(in srgb, var(--perfil-card-bg) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .tb-shell { background: color-mix(in srgb, var(--perfil-card-bg) 93%, transparent) !important; }
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .superapp-header,
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .footer-institucional { background: color-mix(in srgb, var(--perfil-card-bg) 86%, transparent) !important; }
body[class*="tema-"][data-tema-activo]:not([data-tema-activo="ninguno"]):not([data-tema-activo="custom"]) .social-layout .feed-tab:not(.activo) { color: var(--perfil-texto) !important; opacity: .82; }