/* Cinco paletas del usuario. Sus cinco colores base se conservan exactamente. */
:root {
  --tema-fondo: #f8f5ef;
  --tema-superficie: #fffdf9;
  --tema-texto: #252c27;
  --tema-primario: #315c4b;
  --tema-acento: #b9684d;
  --tema-texto-boton: #ffffff;
  --tema-texto-secundario: color-mix(in srgb, var(--tema-texto) 74%, var(--tema-fondo));
  --tema-borde: color-mix(in srgb, var(--tema-texto) 19%, var(--tema-superficie));
  --tema-suave: color-mix(in srgb, var(--tema-acento) 16%, var(--tema-superficie));
  --tema-primario-hover: color-mix(in srgb, var(--tema-primario) 85%, var(--tema-texto));
  --tema-acento-texto: color-mix(in srgb, var(--tema-primario) 75%, var(--tema-texto));
  color-scheme: light;
}
:root[data-mode="dark"] { color-scheme: dark; --tema-texto-boton: #120924; }
:root[data-theme="original"][data-mode="dark"] {
  --tema-fondo: #101a15; --tema-superficie: #18271f; --tema-texto: #edf3ed;
  --tema-primario: #a8cbb3; --tema-acento: #e5b097;
}
:root[data-theme="mistica"][data-mode="light"] {
  --tema-fondo: #F8F6FC; --tema-superficie: #FFFFFF; --tema-texto: #1E162B;
  --tema-primario: #7C4DFF; --tema-acento: #C084FC;
}
:root[data-theme="mistica"][data-mode="dark"] {
  --tema-fondo: #0F0A19; --tema-superficie: #1B1228; --tema-texto: #F1EAFC;
  --tema-primario: #9D6BFF; --tema-acento: #D8B4FE;
}
:root[data-theme="neon"][data-mode="light"] {
  --tema-fondo: #FAF5FF; --tema-superficie: #FFFFFF; --tema-texto: #120924;
  --tema-primario: #6B21A8; --tema-acento: #A855F7;
}
:root[data-theme="neon"][data-mode="dark"] {
  --tema-fondo: #080312; --tema-superficie: #140A26; --tema-texto: #F5F3FF;
  --tema-primario: #C084FC; --tema-acento: #E9D5FF;
}
:root[data-theme="lavanda"][data-mode="light"] {
  --tema-fondo: #F5F3FF; --tema-superficie: #FFFFFF; --tema-texto: #2E2A38;
  --tema-primario: #8B5CF6; --tema-acento: #DDD6FE;
  --tema-texto-boton: #120924;
  --tema-primario-hover: color-mix(in srgb, var(--tema-primario) 85%, var(--tema-superficie));
}
:root[data-theme="lavanda"][data-mode="dark"] {
  --tema-fondo: #13111C; --tema-superficie: #1F1B2E; --tema-texto: #EDE9FE;
  --tema-primario: #A78BFA; --tema-acento: #C4B5FD;
}
:root[data-theme="royale"][data-mode="light"] {
  --tema-fondo: #FDFBF8; --tema-superficie: #F3EFFC; --tema-texto: #19002E;
  --tema-primario: #4C1D95; --tema-acento: #A855F7;
}
:root[data-theme="royale"][data-mode="dark"] {
  --tema-fondo: #0A0014; --tema-superficie: #18042B; --tema-texto: #F7F4FE;
  --tema-primario: #B57EDC; --tema-acento: #D8B4FE;
}
:root[data-theme="velvet"][data-mode="light"] {
  --tema-fondo: #FAF8FF; --tema-superficie: #FFFFFF; --tema-texto: #180828;
  --tema-primario: #9333EA; --tema-acento: #E879F9;
}
:root[data-theme="velvet"][data-mode="dark"] {
  --tema-fondo: #0D031A; --tema-superficie: #1B0B33; --tema-texto: #FDF4FF;
  --tema-primario: #C084FC; --tema-acento: #F0ABFC;
}

/* Los nombres antiguos son aliases: el PHP y los componentes siguen siendo sencillos. */
:root:not([data-theme="original"][data-mode="light"]) {
  --crema: var(--tema-fondo); --papel: var(--tema-superficie);
  --tinta: var(--tema-texto); --verde: var(--tema-acento-texto);
  --verde2: var(--tema-suave); --terracota: var(--tema-acento-texto);
  --muted: var(--tema-texto-secundario); --linea: var(--tema-borde); --lila: var(--tema-suave);
}

/* Selector compacto, disponible en el navbar de todas las páginas. */
.topbar { flex-wrap: wrap; }
.topbar > nav { flex: 1; min-width: 0; justify-content: flex-end; gap: clamp(10px, 1.6vw, 22px); }
.theme-menu { position: relative; flex: 0 0 auto; max-width: none; color: var(--tema-texto); }
.theme-menu > summary { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; list-style: none; border: 1px solid var(--tema-borde); border-radius: 999px; background: var(--tema-superficie); color: var(--tema-texto); font-size: 12px; cursor: pointer; white-space: nowrap; }
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--tema-primario); box-shadow: 4px 0 0 var(--tema-acento); margin-right: 4px; }
.theme-menu[open] > summary { border-color: var(--tema-primario); }
.theme-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 12px); width: min(285px, calc(100vw - 32px)); padding: 20px; background: var(--tema-superficie); color: var(--tema-texto); border: 1px solid var(--tema-borde); border-radius: 18px; box-shadow: 0 15px 45px #0003; }
.theme-panel .theme-titulo { font-size: 14px; font-weight: 700; margin: 0 0 18px; color: var(--tema-texto); }
.theme-panel label { display: block; font-size: 11px; font-weight: 700; margin: 14px 0 7px; }
.theme-panel select { display: block; width: 100%; min-width: 0; padding: 10px 9px; font: inherit; font-size: 12px; border-radius: 9px; border: 1px solid var(--tema-borde); color: var(--tema-texto); background: var(--tema-fondo); }
.theme-muestras { display: flex; height: 23px; gap: 5px; margin-top: 18px; }
.theme-muestras span { flex: 1; border-radius: 6px; border: 1px solid var(--tema-borde); }
.theme-muestras span:nth-child(1) { background: var(--tema-fondo); }
.theme-muestras span:nth-child(2) { background: var(--tema-superficie); }
.theme-muestras span:nth-child(3) { background: var(--tema-texto); }
.theme-muestras span:nth-child(4) { background: var(--tema-primario); }
.theme-muestras span:nth-child(5) { background: var(--tema-acento); }
.theme-panel .theme-ayuda { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--tema-texto-secundario); }
.theme-menu summary:focus-visible, .theme-panel select:focus-visible { outline: 2px solid var(--tema-primario); outline-offset: 3px; }

/* Colores fijos del diseño original: las variantes nuevas cubren todos los componentes. */
html:not([data-theme="original"][data-mode="light"]) .topbar { background: color-mix(in srgb, var(--tema-fondo) 94%, transparent); }
html:not([data-theme="original"][data-mode="light"]) nav,
html:not([data-theme="original"][data-mode="light"]) .formulario label,
html:not([data-theme="original"][data-mode="light"]) input,
html:not([data-theme="original"][data-mode="light"]) select,
html:not([data-theme="original"][data-mode="light"]) textarea { color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) input,
html:not([data-theme="original"][data-mode="light"]) select,
html:not([data-theme="original"][data-mode="light"]) textarea { background: var(--tema-superficie); border-color: var(--tema-borde); accent-color: var(--tema-primario); }
html:not([data-theme="original"][data-mode="light"]) input::placeholder,
html:not([data-theme="original"][data-mode="light"]) textarea::placeholder { color: var(--tema-texto-secundario); opacity: 1; }
html:not([data-theme="original"][data-mode="light"]) .nav-cta,
html:not([data-theme="original"][data-mode="light"]) .boton,
html:not([data-theme="original"][data-mode="light"]) .buscador button,
html:not([data-theme="original"][data-mode="light"]) .pagina-actual,
html:not([data-theme="original"][data-mode="light"]) .home-atajos a:hover,
html:not([data-theme="original"][data-mode="light"]) .dashboard-tabs a[aria-current="page"],
html:not([data-theme="original"][data-mode="light"]) .dashboard-tabs a:hover { background: var(--tema-primario); color: var(--tema-texto-boton); }
html:not([data-theme="original"][data-mode="light"]) .boton:hover,
html:not([data-theme="original"][data-mode="light"]) .nav-cta:hover,
html:not([data-theme="original"][data-mode="light"]) .buscador button:hover { background: var(--tema-primario-hover); }
html:not([data-theme="original"][data-mode="light"]) .boton-claro,
html:not([data-theme="original"][data-mode="light"]) .boton-mini,
html:not([data-theme="original"][data-mode="light"]) .estado,
html:not([data-theme="original"][data-mode="light"]) .resenas { background: var(--tema-suave); color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) .formulario input:focus,
html:not([data-theme="original"][data-mode="light"]) .formulario textarea:focus,
html:not([data-theme="original"][data-mode="light"]) .formulario select:focus,
html:not([data-theme="original"][data-mode="light"]) .filtros input:focus,
html:not([data-theme="original"][data-mode="light"]) .filtros select:focus { outline-color: var(--tema-primario); }
html:not([data-theme="original"][data-mode="light"]) .ranking-item,
html:not([data-theme="original"][data-mode="light"]) .panel-negocio .formulario,
html:not([data-theme="original"][data-mode="light"]) .perfil-form,
html:not([data-theme="original"][data-mode="light"]) .bloque-panel,
html:not([data-theme="original"][data-mode="light"]) .estadistica,
html:not([data-theme="original"][data-mode="light"]) .evento-card { background: var(--tema-superficie); border-color: var(--tema-borde); }
html:not([data-theme="original"][data-mode="light"]) th,
html:not([data-theme="original"][data-mode="light"]) td { border-color: var(--tema-borde); }
html:not([data-theme="original"][data-mode="light"]) th,
html:not([data-theme="original"][data-mode="light"]) .ranking-item small,
html:not([data-theme="original"][data-mode="light"]) .ranking-visitas,
html:not([data-theme="original"][data-mode="light"]) .nota-pequena,
html:not([data-theme="original"][data-mode="light"]) .estadistica span,
html:not([data-theme="original"][data-mode="light"]) .formulario small,
html:not([data-theme="original"][data-mode="light"]) .evento-info small,
html:not([data-theme="original"][data-mode="light"]) .home-ofertas-intro p { color: var(--tema-texto-secundario); }
html:not([data-theme="original"][data-mode="light"]) .estrellas,
html:not([data-theme="original"][data-mode="light"]) .rating-grande,
html:not([data-theme="original"][data-mode="light"]) .ranking-numero,
html:not([data-theme="original"][data-mode="light"]) .estadistica strong,
html:not([data-theme="original"][data-mode="light"]) .evento-fecha { color: var(--tema-acento-texto); }
html:not([data-theme="original"][data-mode="light"]) .tarjeta-imagen,
html:not([data-theme="original"][data-mode="light"]) .home-ofertas { background: var(--tema-suave); }
html:not([data-theme="original"][data-mode="light"]) .corazon { background: var(--tema-superficie); color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) .home-oferta-etiqueta { background: var(--tema-primario); color: var(--tema-texto-boton); }
html:not([data-theme="original"][data-mode="light"]) .vacio { border-color: var(--tema-borde); }
/* Comunidad usa superficie teñida, con texto legible también en modo oscuro. */
html:not([data-theme="original"][data-mode="light"]) .home-comunidad { background: var(--tema-suave); color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) .home-comunidad .etiqueta,
html:not([data-theme="original"][data-mode="light"]) .home-comunidad h2 em,
html:not([data-theme="original"][data-mode="light"]) .resenador-puesto { color: var(--tema-acento-texto); }
html:not([data-theme="original"][data-mode="light"]) .home-comunidad-intro p,
html:not([data-theme="original"][data-mode="light"]) .resenador-identidad small,
html:not([data-theme="original"][data-mode="light"]) .resenador-total small,
html:not([data-theme="original"][data-mode="light"]) .home-comunidad .nota-pequena,
html:not([data-theme="original"][data-mode="light"]) .home-comunidad .home-vacio p { color: var(--tema-texto-secundario); }
html:not([data-theme="original"][data-mode="light"]) .resenador-avatar { background: var(--tema-acento); color: #120924; }
html:not([data-theme="original"][data-mode="light"]) .resenador-item { border-color: var(--tema-borde); }
html:not([data-theme="original"][data-mode="light"]) .home-comunidad .home-vacio { background: var(--tema-superficie); border-color: var(--tema-borde); }
html:not([data-theme="original"][data-mode="light"]) .aviso { background: color-mix(in srgb, #3f9d69 15%, var(--tema-superficie)); color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) .alerta,
html:not([data-theme="original"][data-mode="light"]) .boton-peligro { background: color-mix(in srgb, #d75b68 18%, var(--tema-superficie)); color: var(--tema-texto); }
html:not([data-theme="original"][data-mode="light"]) .tarjeta:hover,
html:not([data-theme="original"][data-mode="light"]) .evento-card:hover,
html:not([data-theme="original"][data-mode="light"]) .ranking-item:hover,
html:not([data-theme="original"][data-mode="light"]) .home-oferta:hover { border-color: var(--tema-primario); }
@media (max-width: 800px) {
  .topbar > nav { width: 100%; justify-content: flex-start; }
  .theme-menu { margin-left: auto; }
}