/* =====================================================================================
   Sitio (Inicio y, poco a poco, las demás páginas): encabezado y modo claro/oscuro.
   El tema lo pone /assets/js/site-theme.js en <html data-theme="light|dark"> (se recuerda en localStorage "nc_theme").
   El modo claro solo cambia el contenido de la página (encabezado, secciones y pie): las ventanas (planes, mi cuenta,
   login) y los teléfonos de ejemplo se quedan como están.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Encabezado ---------- */
/* Letra: Inter (la de las apps modernas), peso medio y sin mayúsculas */
.sh-links, .sh-drop, .sh-plan, .sh-lang-btn { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.sh-links { display: flex; align-items: center; gap: 2px; text-transform: none; letter-spacing: -.01em; }
.sh-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: #a1a1aa; background: transparent; border: 0; cursor: pointer; transition: color .15s, background-color .15s; white-space: nowrap; }
.sh-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sh-link.is-on { color: #fff; background: rgba(255,255,255,.08); }
.sh-link .fa-chevron-down { font-size: 9px; opacity: .6; transition: transform .2s; }
.sh-more { position: relative; }
.sh-more.open > button .fa-chevron-down { transform: rotate(180deg); }
.sh-more.open > .sh-link { color: #fff; background: rgba(255,255,255,.06); }
/* Menús "Más" e "Idioma": tarjeta con desenfoque, aparece con un pequeño zoom */
.sh-drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -6px) scale(.97); transform-origin: top center; min-width: 250px; padding: 6px; border-radius: 14px; background: rgba(18,18,22,.96); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 50px -12px rgba(0,0,0,.75), 0 8px 20px -8px rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s linear .18s; z-index: 60; text-align: left; }
/* puente invisible entre el botón y el menú: al bajar el mouse no se cierra */
.sh-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sh-more.open .sh-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.sh-dlabel { padding: 8px 10px 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #71717a; }
.sh-dsep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,.07); }
.sh-drop a, .sh-drop button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 6px 10px 6px 6px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: #e4e4e7; text-align: left; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
.sh-drop a:hover, .sh-drop button:hover, .sh-drop a:focus-visible, .sh-drop button:focus-visible { background: rgba(255,255,255,.06); color: #fff; outline: none; }
.sh-drop a > i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #c4b5fd; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); transition: color .12s, background-color .12s, border-color .12s; }
.sh-drop a:hover > i { color: #fff; background: rgba(176,38,255,.25); border-color: rgba(176,38,255,.35); }
.sh-drop a > i.fa-whatsapp { color: #25d366; }
.sh-drop a > i.fa-reddit-alien { color: #ff4500; }
.sh-drop a:hover > i.fa-whatsapp { color: #fff; background: #25d366; border-color: #25d366; }
.sh-drop a:hover > i.fa-reddit-alien { color: #fff; background: #ff4500; border-color: #ff4500; }
.sh-dmeta { margin-left: auto; padding-left: 12px; font-size: 12px; font-weight: 500; color: #71717a; }
.sh-sep { width: 1px; height: 22px; background: rgba(255,255,255,.1); margin: 0 4px; }
.sh-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #d4d4d8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.sh-icon:hover { color: #fff; background: rgba(255,255,255,.1); }
.sh-support { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 11px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.35); text-transform: none; letter-spacing: 0; transition: background-color .15s; white-space: nowrap; }
.sh-support:hover { background: rgba(37,211,102,.22); }
.sh-support i { font-size: 16px; color: #25d366; }
/* Botón sol/luna: muestra el modo al que cambia */
[data-theme-toggle] .fa-sun { display: inline-block; }
[data-theme-toggle] .fa-moon { display: none; }
html[data-theme="light"] [data-theme-toggle] .fa-sun { display: none; }
html[data-theme="light"] [data-theme-toggle] .fa-moon { display: inline-block; }
/* Fila "Tema" del menú del celular */
.sh-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.sh-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #a1a1aa; }
.sh-seg button.on { color: #fff; background: rgba(176,38,255,.35); }
.sh-seg button.on, html[data-theme="light"] .sh-seg button.on { color: #fff; background: linear-gradient(135deg, #b026ff, #7c3aed); }

/* =====================================================================================
   MODO CLARO
   ===================================================================================== */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] { background-color: #f6f6f9; }
/* El fondo va en <html>: así el lienzo de partículas (#bgCanvas, detrás de todo) se ve también en claro */
html[data-theme="light"] body { background-color: transparent !important; color: #0f0f14; }

/* Encabezado */
html[data-theme="light"] .glass-header { background: rgba(255,255,255,.86); border-bottom-color: rgba(15,15,20,.08); }
html[data-theme="light"] #mainNav .text-white { color: #0f0f14; }
html[data-theme="light"] #mainNav .text-gray-400 { color: #52525b; }
html[data-theme="light"] #mainNav img[alt="Namilin Logo"] { filter: invert(1); }
html[data-theme="light"] .sh-link { color: #52525b; }
html[data-theme="light"] .sh-link:hover { color: #0f0f14; background: rgba(15,15,20,.05); }
html[data-theme="light"] .sh-link.is-on { color: #0f0f14; background: rgba(15,15,20,.06); }
html[data-theme="light"] .sh-more.open > .sh-link { color: #0f0f14; background: rgba(15,15,20,.05); }
html[data-theme="light"] .sh-drop { background: rgba(255,255,255,.97); border-color: rgba(15,15,20,.08); box-shadow: 0 22px 50px -12px rgba(15,15,20,.28), 0 8px 20px -8px rgba(15,15,20,.12); }
html[data-theme="light"] .sh-drop a { color: #27272a; }
html[data-theme="light"] .sh-drop a:hover { background: rgba(15,15,20,.05); color: #0f0f14; }
html[data-theme="light"] .sh-dlabel, html[data-theme="light"] .sh-dmeta { color: #71717a; }
html[data-theme="light"] .sh-dsep { background: rgba(15,15,20,.07); }
html[data-theme="light"] .sh-drop a > i { color: #7e22ce; background: #f4f4f5; border-color: rgba(15,15,20,.06); }
html[data-theme="light"] .sh-drop a:hover > i { color: #fff; background: #9333ea; border-color: #9333ea; }
html[data-theme="light"] .sh-drop a > i.fa-whatsapp { color: #16a34a; }
html[data-theme="light"] .sh-drop a > i.fa-reddit-alien { color: #ff4500; }
html[data-theme="light"] .sh-drop a:hover > i.fa-whatsapp { color: #fff; background: #25d366; border-color: #25d366; }
html[data-theme="light"] .sh-drop a:hover > i.fa-reddit-alien { color: #fff; background: #ff4500; border-color: #ff4500; }
html[data-theme="light"] .sh-sep { background: rgba(15,15,20,.12); }
html[data-theme="light"] .sh-icon { color: #3f3f46; background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] .sh-icon:hover { color: #0f0f14; background: #f4f4f5; }
html[data-theme="light"] .sh-support { color: #065f46; background: rgba(37,211,102,.12); border-color: rgba(22,163,74,.35); }
html[data-theme="light"] .sh-support i { color: #16a34a; }
html[data-theme="light"] #nav-login-btn { color: #0f0f14; }
html[data-theme="light"] #nav-user-name { color: #0f0f14; }
html[data-theme="light"] #nav-notif-bell { color: #3f3f46; background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] #mainNav .fa-bars { color: #0f0f14; }
/* Menú del celular */
html[data-theme="light"] #mobile-menu { background: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 24px 60px rgba(15,15,20,.18); }
html[data-theme="light"] #mobile-menu .text-white { color: #0f0f14; }
html[data-theme="light"] #mobile-menu .text-gray-300 { color: #3f3f46; }
html[data-theme="light"] #mobile-menu .text-gray-400, html[data-theme="light"] #mobile-menu .text-gray-500 { color: #71717a; }
html[data-theme="light"] #mobile-menu .bg-white\/5 { background: rgba(15,15,20,.035); }
html[data-theme="light"] #mobile-menu .border-white\/5, html[data-theme="light"] #mobile-menu .border-white\/10 { border-color: rgba(15,15,20,.08); }
html[data-theme="light"] #mobile-menu a:hover, html[data-theme="light"] #mobile-menu button:hover { background-color: rgba(15,15,20,.05); }
html[data-theme="light"] #mobile-upgrade-btn, html[data-theme="light"] #mobile-upgrade-btn:hover { color: #fff; }
html[data-theme="light"] .sh-seg { background: #f4f4f5; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .sh-seg button { color: #52525b; }

/* Contenido de la página: utilidades de color comunes, solo dentro de las secciones y el pie */
html[data-theme="light"] :is(body > section, body > footer, footer) .text-white { color: #0f0f14; }
html[data-theme="light"] :is(body > section, footer) .text-gray-300 { color: #3f3f46; }
html[data-theme="light"] :is(body > section, footer) .text-gray-400 { color: #52525b; }
html[data-theme="light"] :is(body > section, footer) .text-gray-500 { color: #71717a; }
html[data-theme="light"] :is(body > section, footer) .text-gray-600 { color: #8a8a94; }
html[data-theme="light"] :is(body > section, footer) .border-white\/5,
html[data-theme="light"] :is(body > section, footer) .border-white\/10 { border-color: rgba(15,15,20,.09); }
html[data-theme="light"] :is(body > section, footer) .border-gray-800 { border-color: #e4e4e7; }
html[data-theme="light"] :is(body > section, footer) .bg-white\/5 { background-color: rgba(15,15,20,.03); }
html[data-theme="light"] :is(body > section, footer) .bg-white\/10 { background-color: rgba(15,15,20,.05); }
html[data-theme="light"] :is(body > section, footer) :is(.bg-black\/30, .bg-black\/40, .bg-black\/50) { background-color: rgba(15,15,20,.04); }
html[data-theme="light"] footer.bg-black, html[data-theme="light"] footer .bg-black { background-color: #fff; }
html[data-theme="light"] footer.border-gray-800 { border-color: #e4e4e7; }
/* Lo que debe seguir oscuro (teléfonos, botones de color) recupera sus colores */
html[data-theme="light"] [data-keep-dark] .text-white { color: #fff; }

/* Portada */
html[data-theme="light"] .hero2::before { background: radial-gradient(700px 420px at 78% 38%, rgba(176,38,255,.12), transparent 70%), radial-gradient(520px 360px at 10% 0%, rgba(233,0,255,.06), transparent 70%); }
html[data-theme="light"] .hero2-title, html[data-theme="light"] .sec2-title, html[data-theme="light"] .ex2-info h3 { color: #0f0f14; }
html[data-theme="light"] .hero2-title span { color: #9333ea; }
html[data-theme="light"] :is(.hero2-sub, .hero2-points, .sec2-sub, .ex2-info p) { color: #52525b; }
html[data-theme="light"] .sec2-eyebrow { color: #9333ea; }
html[data-theme="light"] .btn2-primary { background: #0f0f14; color: #fff; }
html[data-theme="light"] .btn2-primary:hover { background: #2a1640; }
html[data-theme="light"] .btn2-ghost { color: #0f0f14; border-color: rgba(15,15,20,.16); background: #fff; }
html[data-theme="light"] .btn2-ghost:hover { border-color: rgba(15,15,20,.3); background: #fafafa; }
html[data-theme="light"] .hero2-points i, html[data-theme="light"] .ex2-info li i { color: #16a34a; }
/* (sin sombra en los teléfonos de la portada: en claro se veía como un borde oscuro alrededor) */
/* Secciones */
html[data-theme="light"] .sec2 { border-top-color: rgba(15,15,20,.07); }
html[data-theme="light"] .ex2-tab { color: #3f3f46; border-color: rgba(15,15,20,.09); background: #fff; }
html[data-theme="light"] .ex2-tab:hover { border-color: rgba(15,15,20,.2); }
html[data-theme="light"] .ex2-tab.on { color: #0f0f14; background: rgba(176,38,255,.08); border-color: rgba(147,51,234,.45); }
html[data-theme="light"] .ex2-tab small { color: #71717a; }
html[data-theme="light"] .ex2-info li { color: #3f3f46; }
/* Para qué sirve */
html[data-theme="light"] .lp-use { background: #fff; border-color: rgba(15,15,20,.08); box-shadow: 0 1px 2px rgba(15,15,20,.04); }
html[data-theme="light"] .lp-use h3, html[data-theme="light"] .lp-resp h3 { color: #0f0f14; }
html[data-theme="light"] .lp-use p, html[data-theme="light"] .lp-resp p { color: #52525b; }
html[data-theme="light"] .lp-use-tag { color: #71717a; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] .lp-resp { border-color: rgba(147,51,234,.18); background: linear-gradient(135deg, rgba(176,38,255,.07), #fff 55%); }
html[data-theme="light"] .lp-resp-ic { color: #9333ea; }
html[data-theme="light"] .lp-chips .ok { color: #15803d; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
html[data-theme="light"] .lp-chips .no { color: #be123c; background: rgba(244,63,94,.06); border-color: rgba(244,63,94,.25); }
html[data-theme="light"] .lp-resp-link { color: #27272a; border-color: rgba(15,15,20,.14); background: #fff; }
html[data-theme="light"] .lp-resp-link:hover { color: #0f0f14; background: #f4f4f5; }
html[data-theme="light"] .use-card { background: #fff; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .use-card-title { color: #0f0f14; }
html[data-theme="light"] .use-card-text { color: #52525b; }
/* Cómo funciona */
html[data-theme="light"] .lp-how, html[data-theme="light"] .lp-faq { border-top-color: rgba(15,15,20,.07); }
html[data-theme="light"] .lp-step { background: #fff; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .lp-step:hover { background: #fafafa; }
html[data-theme="light"] .lp-step.on { background: rgba(176,38,255,.06); border-color: rgba(147,51,234,.35); }
html[data-theme="light"] .lp-step-n { color: #52525b; background: #f4f4f5; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .lp-step.on .lp-step-n { color: #fff; }
html[data-theme="light"] .lp-step-tx b, html[data-theme="light"] .lp-step.on .lp-step-tx b { color: #0f0f14; }
html[data-theme="light"] .lp-step-tx small, html[data-theme="light"] .lp-step.on .lp-step-tx small { color: #52525b; }
html[data-theme="light"] .lp-step-bar { background: rgba(15,15,20,.08); }
html[data-theme="light"] .lp-cta span { color: #71717a; }
html[data-theme="light"] .lp-glow { background: radial-gradient(closest-side, rgba(176,38,255,.2), transparent); }
/* Reseñas */
html[data-theme="light"] #reviews { background-color: #f6f6f9 !important; border-top-color: rgba(15,15,20,.07) !important; }
html[data-theme="light"] .review-card { background: rgba(255,255,255,.75); border-color: rgba(15,15,20,.09); box-shadow: 0 10px 30px rgba(15,15,20,.08); }
html[data-theme="light"] .review-card.is-focus { background: #fff; border-color: rgba(147,51,234,.35); }
html[data-theme="light"] .review-card .text-white, html[data-theme="light"] .review-card .text-gray-200, html[data-theme="light"] .review-card .text-gray-300 { color: #18181b; }
html[data-theme="light"] .review-card .text-gray-400, html[data-theme="light"] .review-card .text-gray-500 { color: #52525b; }
html[data-theme="light"] .reviews-blobs span { opacity: .1; }
html[data-theme="light"] .reviews-play { color: #27272a; background: #fff; border-color: rgba(15,15,20,.14); }
html[data-theme="light"] .reviews-track { background: rgba(15,15,20,.08); }
html[data-theme="light"] #reviews :is(.bg-\[\#121212\], .bg-\[\#1a1a1a\], .bg-black\/30, .bg-black\/40) { background-color: #fff; }
/* Preguntas frecuentes */
html[data-theme="light"] .lp-cat { color: #52525b; border-color: rgba(15,15,20,.12); background: #fff; }
html[data-theme="light"] .lp-cat:hover { color: #0f0f14; border-color: rgba(15,15,20,.25); }
html[data-theme="light"] .lp-cat.on { color: #0f0f14; background: rgba(176,38,255,.1); border-color: rgba(147,51,234,.5); }
html[data-theme="light"] .lp-q { background: #fff; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .lp-q.open { background: #fff; border-color: rgba(147,51,234,.4); box-shadow: 0 10px 30px rgba(15,15,20,.06); }
html[data-theme="light"] .lp-q-b { color: #18181b; }
html[data-theme="light"] .lp-q-b i { color: #52525b; background: #f4f4f5; }
html[data-theme="light"] .lp-q.open .lp-q-b i { color: #fff; }
html[data-theme="light"] .lp-a p { color: #52525b; }
html[data-theme="light"] .lp-link { color: #9333ea; }
/* Pie */
html[data-theme="light"] .ft-soc { color: #52525b; background: #fff; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] .ft-soc:hover { color: #9333ea; background: rgba(176,38,255,.08); border-color: rgba(147,51,234,.35); }
html[data-theme="light"] .ft-h { color: #0f0f14; }
html[data-theme="light"] footer a:hover { color: #9333ea !important; }
/* Cambio de tema suave (no en la carga) */
html.theme-anim, html.theme-anim body, html.theme-anim :is(section, footer, nav, .lp-use, .lp-step, .lp-q, .ex2-tab) { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }
/* Aviso "Nuevo" de la portada (lo pinta /assets/js/novedades.js) */
html[data-theme="light"] .news-pill { color: #6b21a8; background: rgba(176,38,255,.08); border-color: rgba(147,51,234,.3); }
html[data-theme="light"] .news-pill-go { color: #9333ea; }
/* "Invítame un café" (/assets/js/cafe-nami.js) */
html[data-theme="light"] [data-cafe-nami] .bg-\[\#0a0a0a\] { background-color: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 18px 50px rgba(15,15,20,.08); }
html[data-theme="light"] [data-cafe-nami] .via-gray-700 { --tw-gradient-stops: transparent, #e4e4e7, transparent; }
/* Menú del celular (sus estilos base están en dashboard.css con !important) */
#mobile-menu > div > .sh-theme-row > span { font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: #a1a1aa !important; font-weight: 500 !important; }
#mobile-menu .sh-seg button { border-radius: 8px !important; font-size: 12.5px !important; padding: 6px 11px !important; }
html[data-theme="light"] #mobile-menu { background: #fff !important; border-color: rgba(15,15,20,.1) !important; box-shadow: 0 24px 60px rgba(15,15,20,.18) !important; }
html[data-theme="light"] #mobile-menu a:hover, html[data-theme="light"] #mobile-menu button:hover { background: rgba(15,15,20,.05) !important; }
html[data-theme="light"] #mobile-menu #mobile-upgrade-btn:hover { background: linear-gradient(90deg, #b026ff, #ff2bd6) !important; }
html[data-theme="light"] #mobile-menu #mobile-login-btn { background: #0f0f14 !important; color: #fff !important; border-color: #0f0f14 !important; }
html[data-theme="light"] #mobile-menu #mobile-login-btn i { color: #fff !important; }
html[data-theme="light"] #mobile-menu #mobile-user-menu { background: #f6f6f9 !important; border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #mobile-menu #mobile-user-menu > div:first-child { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #mobile-menu #mobile-user-menu button { color: #27272a !important; }
html[data-theme="light"] #mobile-menu #mobile-user-menu button i, html[data-theme="light"] #mobile-menu > div > div.flex-col.space-y-1:last-child a i { background: rgba(15,15,20,.05); }
html[data-theme="light"] #mobile-menu #mobile-user-menu-admin-link { color: #a16207 !important; border-color: rgba(202,138,4,.3) !important; background: rgba(250,204,21,.08) !important; }
html[data-theme="light"] #mobile-menu #mobile-user-menu button[onclick="Auth.logout()"] { color: #dc2626 !important; }
html[data-theme="light"] #mobile-menu > div > div.flex-col.space-y-1:last-child a { color: #27272a !important; }
html[data-theme="light"] #mobile-menu > div > div.border-t, html[data-theme="light"] #mobile-menu > div > div.px-4.border-t { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #mobile-menu > div > div.flex.items-center.justify-between > span, html[data-theme="light"] #mobile-menu > div > .sh-theme-row > span { color: #52525b !important; }
html[data-theme="light"] #mobile-menu #mobile-user-name { color: #0f0f14 !important; }

/* ---------- Encabezado v2: Planes, Idioma y el puntito de Novedades ---------- */
.sh-dot { position: absolute; top: 7px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e900ff; box-shadow: 0 0 8px rgba(233,0,255,.8); }
.sh-plan { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 999px; border: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: #1c1300; background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 6px 18px rgba(245,158,11,.28); cursor: pointer; transition: filter .15s, transform .15s; white-space: nowrap; }
.sh-plan:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sh-plan i { font-size: 12px; }
.sh-lang-btn { gap: 7px; }
.sh-lang-btn { color: #e4e4e7; }
.sh-lang-btn .sh-tr { flex-shrink: 0; opacity: .9; }
html[data-theme="light"] .sh-lang-btn { color: #27272a; }
.sh-drop.sh-drop-end { left: auto; right: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; min-width: 200px; }
.sh-more.open .sh-drop.sh-drop-end { transform: none; }
.sh-code { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #c4b5fd; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.sh-drop button.on .sh-code { color: #fff; background: linear-gradient(135deg, #b026ff, #7c3aed); border-color: transparent; }
.sh-chk { margin-left: auto; font-size: 11px; color: #c084fc; visibility: hidden; }
.sh-drop button.on .sh-chk { visibility: visible; }
.sh-drop button.on { color: #fff; }
/* Idioma en PC: el menú sale justo debajo del botón, alineado a su borde izquierdo */
.sh-drop.sh-drop-start { left: 0; right: auto; transform: translateY(-6px) scale(.97); transform-origin: top left; min-width: max(100%, 170px); }
.sh-more.open .sh-drop.sh-drop-start { transform: none; }
.sh-lang .sh-drop button { padding: 9px 12px; }
/* Novedades ▾: el puntito va pegado a la palabra (antes en la esquina) */
.sh-news-btn .sh-dot { position: relative; top: -6px; right: auto; margin: 0 0 0 -4px; flex-shrink: 0; }
/* Discord en "Comunidad" */
.sh-drop a > i.fa-discord { color: #5865f2; }
.sh-drop a:hover > i.fa-discord, html[data-theme="light"] .sh-drop a:hover > i.fa-discord { color: #fff; background: #5865f2; border-color: #5865f2; }
html[data-theme="light"] .sh-drop a > i.fa-discord { color: #5865f2; }
/* Foto de la cuenta: al pasar o tocar solo un anillo suave (antes la letra se volvía rosada y desaparecía) */
.sh-avbtn, .sh-avbtn:hover, .sh-avbtn:focus { color: #fff; }
.sh-avbtn #nav-user-avatar { color: #fff !important; }
.sh-avbtn > div:first-child { transition: box-shadow .15s; }
.sh-avbtn:hover > div:first-child, #nav-user-menu:hover .sh-avbtn > div:first-child { box-shadow: 0 0 0 2px rgba(176,38,255,.45); }
html[data-theme="light"] .sh-avbtn, html[data-theme="light"] .sh-avbtn:hover { color: #0f0f14; }
/* Celular: el botón de idioma es solo el ícono 文A */
.sh-lang-m .sh-lang-btn { padding: 0; gap: 0; }
.sh-lang-m .sh-drop { min-width: 190px; }
html[data-theme="light"] .sh-dot { box-shadow: 0 0 6px rgba(233,0,255,.5); }
html[data-theme="light"] .sh-drop button { color: #27272a; }
html[data-theme="light"] .sh-drop button:hover { background: rgba(15,15,20,.05); color: #0f0f14; }
html[data-theme="light"] .sh-drop button.on { color: #0f0f14; }
html[data-theme="light"] .sh-code { color: #7e22ce; background: #f4f4f5; border-color: rgba(15,15,20,.06); }
html[data-theme="light"] .sh-drop button.on .sh-code { color: #fff; background: linear-gradient(135deg, #b026ff, #7c3aed); border-color: transparent; }
html[data-theme="light"] .sh-chk { color: #9333ea; }
html[data-theme="light"] .sh-lang-m .sh-lang-btn { color: #3f3f46; }
/* PC: en el encabezado solo la foto de la cuenta (sin el nombre) */
#mainNav #nav-user-name { display: none !important; }

/* ---------- Encabezado de las páginas simples (/assets/js/site-header.js) ---------- */
.sh-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; background: rgba(5,5,5,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.05); font-family: 'Inter', 'Montserrat', system-ui, sans-serif; }
.sh-in { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 640px) { .sh-in { padding: 0 24px; } }
.sh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.sh-logo img { height: 32px; width: auto; }
.sh-logo span { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 18px; letter-spacing: -.04em; color: #fff; }
.sh-desk { display: none; align-items: center; gap: 10px; }
.sh-mob { display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .sh-desk { display: flex; } .sh-mob { display: none; } }
.sh-spacer { height: 64px; }
.sh-mob-menu { min-width: 250px; max-height: calc(100dvh - 80px); overflow-y: auto; }
.sh-msep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,.08); }
.sh-mrow { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px 11px; font-size: 13px; font-weight: 600; color: #a1a1aa; }
html[data-theme="light"] .sh-bar { background: rgba(255,255,255,.86); border-bottom-color: rgba(15,15,20,.08); }
html[data-theme="light"] .sh-logo img { filter: invert(1); }
html[data-theme="light"] .sh-logo span { color: #0f0f14; }
html[data-theme="light"] .sh-msep { background: rgba(15,15,20,.08); }
html[data-theme="light"] .sh-mrow { color: #52525b; }

/* ---------- Modo claro: páginas simples ---------- */
/* Utilidades de color también dentro de <main> y de los paneles de las páginas legales */
html[data-theme="light"] :is(main, .glass-panel) .text-white { color: #0f0f14; }
html[data-theme="light"] :is(main, .glass-panel) .text-gray-200, html[data-theme="light"] :is(main, .glass-panel) .text-gray-300 { color: #3f3f46; }
html[data-theme="light"] :is(main, .glass-panel) .text-gray-400 { color: #52525b; }
html[data-theme="light"] :is(main, .glass-panel) .text-gray-500 { color: #71717a; }
html[data-theme="light"] :is(main, .glass-panel) :is(.border-white\/5, .border-white\/10, .border-white\/15, .border-white\/20) { border-color: rgba(15,15,20,.1); }
html[data-theme="light"] :is(main, .glass-panel) :is(.bg-white\/5, .bg-white\/10) { background-color: rgba(15,15,20,.04); }
html[data-theme="light"] body > footer :is(.text-gray-500, .text-gray-600) { color: #71717a; }
/* Novedades */
html[data-theme="light"] .bg-glow { background: radial-gradient(600px 380px at 12% -5%, rgba(176,38,255,.1), transparent 70%), radial-gradient(520px 360px at 95% 10%, rgba(233,0,255,.06), transparent 70%); }
html[data-theme="light"] .card { background: #fff; border-color: rgba(15,15,20,.08); box-shadow: 0 1px 2px rgba(15,15,20,.04); }
html[data-theme="light"] .card:hover { border-color: rgba(147,51,234,.35); }
html[data-theme="light"] .filter { color: #52525b; background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] .filter:hover { color: #0f0f14; }
html[data-theme="light"] .filter.on { color: #0f0f14; background: rgba(176,38,255,.1); border-color: #a855f7; }
html[data-theme="light"] .day-dot { background: #fff; box-shadow: 0 0 8px rgba(176,38,255,.35); }
html[data-theme="light"] .tag-nuevo { color: #7e22ce; background: rgba(176,38,255,.08); }
html[data-theme="light"] .tag-mejora { color: #0369a1; background: rgba(56,189,248,.1); }
html[data-theme="light"] .tag-arreglo { color: #15803d; background: rgba(74,222,128,.1); }
html[data-theme="light"] .app { color: #71717a; }
html[data-theme="light"] .nv-brand { color: #0f0f14; }
/* Contacto (usa variables) */
html[data-theme="light"][data-page="contact"] { --bg: #f6f6f9; --card: #ffffff; --line: rgba(15,15,20,.08); --line2: rgba(15,15,20,.14); --tx: #0f0f14; --mut: #52525b; --dim: #71717a; }
html[data-theme="light"] .form-input, html[data-theme="light"] .form-textarea { background: #fff; color: #0f0f14; }
html[data-theme="light"] .form-input::placeholder, html[data-theme="light"] .form-textarea::placeholder { color: #a1a1aa; }
html[data-theme="light"] .topic { color: #3f3f46; }
html[data-theme="light"] .topic:hover { border-color: rgba(15,15,20,.3); color: #0f0f14; }
html[data-theme="light"] .topic.on { color: #0f0f14; }
html[data-theme="light"] .btn-primary { color: #fff; background: #0f0f14; }
html[data-theme="light"] .btn-primary:hover { background: #27272a; }
html[data-theme="light"] .channel:hover { background: #fafafa; border-color: rgba(15,15,20,.2); }
html[data-theme="light"] .channel .ico { color: #3f3f46; background: #f4f4f5; }
html[data-theme="light"] .channel .chev { color: #a1a1aa; }
html[data-theme="light"] .faq summary { color: #18181b; }
/* Legales y 404 */
html[data-theme="light"] .glass-panel { background: rgba(255,255,255,.85); border-color: rgba(15,15,20,.08); box-shadow: 0 20px 50px rgba(15,15,20,.06); }
html[data-theme="light"] .glass-panel :is(h1, h2, h3, strong) { color: #0f0f14; }
html[data-theme="light"] .glass-panel :is(p, li) { color: #3f3f46; }

/* ---------- Modo claro: panel de la cuenta (dashboard.css y dash.css lo ponen oscuro con !important) ---------- */
html[data-theme="light"] #userDashboardModal { background: rgba(15,15,20,.35) !important; }
html[data-theme="light"] #userDashboardModal .dash-shell { background: #fff !important; border-color: rgba(15,15,20,.1) !important; box-shadow: 0 30px 80px rgba(15,15,20,.25) !important; color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .dash-side { background: #f6f6f9 !important; border-color: rgba(15,15,20,.07) !important; }
html[data-theme="light"] #userDashboardModal #dashboardAvatar, html[data-theme="light"] #userDashboardModal #dashboardAvatarMobile { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(15,15,20,.12) !important; }
html[data-theme="light"] #userDashboardModal #dashboardEmail { color: #52525b !important; }
html[data-theme="light"] #userDashboardModal .dash-side button[data-tab]:not(.dash-m-item) { color: #52525b !important; }
html[data-theme="light"] #userDashboardModal .dash-side button[data-tab]:not(.dash-m-item):hover { background: rgba(15,15,20,.05) !important; color: #0f0f14 !important; }
html[data-theme="light"] #userDashboardModal .dash-side button[data-tab]:not(.dash-m-item).bg-white\/10 { background: #0f0f14 !important; color: #fff !important; }
html[data-theme="light"] #userDashboardModal #dash-tab-admin-btn:not(.bg-white\/10) { color: #a16207 !important; }
html[data-theme="light"] #userDashboardModal .dash-side > div.mt-auto { border-color: rgba(15,15,20,.07) !important; }
html[data-theme="light"] #userDashboardModal .dash-m-list { background: #fff; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] #userDashboardModal .dash-m-item { color: #0f0f14; border-color: rgba(15,15,20,.06); }
html[data-theme="light"] #userDashboardModal .dash-m-txt b { color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .dash-m-txt small { color: #71717a; }
html[data-theme="light"] #userDashboardModal .dash-m-bar { background: rgba(255,255,255,.95) !important; border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #userDashboardModal .dash-shell > button[aria-label="Cerrar"] { color: #52525b !important; }
html[data-theme="light"] #userDashboardModal .dash-shell > button[aria-label="Cerrar"]:hover { background: rgba(15,15,20,.06) !important; color: #0f0f14 !important; }
html[data-theme="light"] #userDashboardModal :is(.text-white, h2, h3, h4) { color: #0f0f14 !important; }
html[data-theme="light"] #userDashboardModal :is(.text-gray-200, .text-gray-300) { color: #3f3f46 !important; }
html[data-theme="light"] #userDashboardModal :is(.text-gray-400, .text-gray-500) { color: #52525b !important; }
html[data-theme="light"] #userDashboardModal .dash-content label.block { color: #27272a !important; }
html[data-theme="light"] #userDashboardModal .dash-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
html[data-theme="light"] #userDashboardModal .dash-content select,
html[data-theme="light"] #userDashboardModal .dash-content textarea { color: #0f0f14 !important; background: #fff !important; border-color: rgba(15,15,20,.16) !important; }
html[data-theme="light"] #userDashboardModal .dash-content input:focus, html[data-theme="light"] #userDashboardModal .dash-content select:focus, html[data-theme="light"] #userDashboardModal .dash-content textarea:focus { border-color: #a855f7 !important; box-shadow: 0 0 0 3px rgba(168,85,247,.15) !important; }
html[data-theme="light"] #userDashboardModal .dash-content select option { background: #fff; color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .dash-content input::placeholder { color: #a1a1aa; }
html[data-theme="light"] #userDashboardModal .dash-content input:disabled { color: #71717a !important; }
html[data-theme="light"] #userDashboardModal .dash-content button.bg-white { background: #0f0f14 !important; border-color: #0f0f14 !important; color: #fff !important; }
html[data-theme="light"] #userDashboardModal .dash-content button.bg-white:hover { background: #27272a !important; }
html[data-theme="light"] #userDashboardModal #btn-manage-paypal { border-color: rgba(15,15,20,.16) !important; }
html[data-theme="light"] #userDashboardModal .dash-content :is(.bg-\[\#121212\], .bg-black\/40, .bg-black\/30, .bg-white\/5) { background: #f6f6f9 !important; border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #userDashboardModal .dash-content :is(.border-white\/5, .border-white\/10) { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #userDashboardModal .dash-content p.uppercase { color: #52525b !important; }
html[data-theme="light"] #userDashboardModal .pref-lang { background: #fff !important; border-color: rgba(15,15,20,.12) !important; }
html[data-theme="light"] #userDashboardModal .pref-lang.is-on { border-color: #0f0f14 !important; background: #f6f6f9 !important; }
html[data-theme="light"] #userDashboardModal #tab-security .border-t { border-color: rgba(15,15,20,.08) !important; }
/* Tarjetas de Estadísticas, Invitaciones y Suscripción (dash.css) */
html[data-theme="light"] #userDashboardModal :is(.dp-card, .dp-banner) { background: #fff; border-color: rgba(15,15,20,.09); }
html[data-theme="light"] #userDashboardModal :is(.dp-mini, .dp-cd) { background: #f6f6f9; border-color: rgba(15,15,20,.07); }
html[data-theme="light"] #userDashboardModal :is(.dp-num, .dp-mini b, .dp-title, .dp-sec h3, .dp-sec small b, .dp-cd-grid b, .dp-cd-hd p, .dp-plan-hd h4, .dp-kv p span:last-child, .dp-banner b) { color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .dp-mini b.prem { color: #b45309; }
html[data-theme="light"] #userDashboardModal :is(.dp-label, .dp-sub, .dp-sec small, .dp-kv p, .dp-banner p, .dp-reward .dp-prog) { color: #52525b; }
html[data-theme="light"] #userDashboardModal :is(.dp-hint, .dp-cd-note, .dp-cd-hd span, .dp-cd-grid small) { color: #71717a; }
html[data-theme="light"] #userDashboardModal .dp-kv p { border-color: rgba(15,15,20,.07); }
html[data-theme="light"] #userDashboardModal .dp-link-box { background: #f6f6f9; border-color: rgba(15,15,20,.1); color: #27272a; }
html[data-theme="light"] #userDashboardModal .dp-cd-grid > div { background: #fff; }
html[data-theme="light"] #userDashboardModal .dp-bar { background: rgba(15,15,20,.07); }
html[data-theme="light"] #userDashboardModal .dp-btn2 { color: #27272a; background: #fff; border-color: rgba(15,15,20,.14); }
html[data-theme="light"] #userDashboardModal .dp-btn2:hover { background: #f4f4f5; color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .dp-pill { color: #52525b; background: #f4f4f5; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] #userDashboardModal .dp-pill.ok { color: #15803d; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
html[data-theme="light"] #userDashboardModal .dp-pill.gold { color: #a16207; background: rgba(250,204,21,.1); border-color: rgba(202,138,4,.3); }
html[data-theme="light"] #userDashboardModal .dp-ic { color: #7e22ce; }
html[data-theme="light"] #userDashboardModal .dp-ic.gold { color: #b45309; }
/* Menú de tu nombre (arriba a la derecha) */
html[data-theme="light"] #nav-user-menu > div.absolute > div { background: #fff !important; border-color: rgba(15,15,20,.1) !important; box-shadow: 0 24px 60px rgba(15,15,20,.16) !important; }
html[data-theme="light"] #nav-user-menu > div.absolute > div > div:first-child { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #nav-user-menu > div.absolute > div > div:first-child p { color: #52525b !important; }
html[data-theme="light"] #nav-user-menu > div.absolute a { color: #27272a !important; }
html[data-theme="light"] #nav-user-menu > div.absolute a:hover { background: rgba(15,15,20,.05) !important; color: #0f0f14 !important; }
html[data-theme="light"] #nav-user-menu > div.absolute a i, html[data-theme="light"] #nav-user-menu > div.absolute a > span > i { background: rgba(15,15,20,.05); }
html[data-theme="light"] #nav-user-menu #nav-user-menu-admin-link { color: #a16207 !important; }
html[data-theme="light"] #nav-user-menu > div.absolute > div > div.border-t { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] #nav-user-menu > div.absolute > div > div.border-t a { color: #dc2626 !important; }

/* =====================================================================================
   MODO CLARO del editor (NamiChats): panel de opciones, caja de descargas y chat global.
   El teléfono de la vista previa NO cambia (tiene su propio modo claro/oscuro de cada app).
   ===================================================================================== */
/* Panel de opciones */
html[data-theme="light"] #nc-panel { background: #fff; border-color: rgba(15,15,20,.08); box-shadow: 0 1px 2px rgba(15,15,20,.04), 0 24px 60px rgba(15,15,20,.08); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-apps, html[data-theme="light"] #nc-panel .nc-nav { border-color: rgba(15,15,20,.07) !important; }
html[data-theme="light"] #nc-panel .nc-app { color: #71717a; }
html[data-theme="light"] #nc-panel .nc-app:hover { background: rgba(15,15,20,.04); color: #27272a; }
html[data-theme="light"] #nc-panel .nc-app.is-active { background: rgba(176,38,255,.07); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-app-ic { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 10px rgba(15,15,20,.15); }
html[data-theme="light"] #nc-panel .nc-nav .tab-btn { color: #52525b; }
html[data-theme="light"] #nc-panel .nc-nav .tab-btn:hover { background: rgba(15,15,20,.04); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-nav .tab-btn.is-active { background: rgba(176,38,255,.07); border-color: rgba(147,51,234,.3); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-ico { color: #71717a; background: #f4f4f5; }
html[data-theme="light"] #nc-panel .nc-nav .tab-btn:hover .nc-ico { color: #27272a; }
html[data-theme="light"] #nc-panel .nc-tx small, html[data-theme="light"] #nc-panel .nc-cur-tx small { color: #71717a; }
html[data-theme="light"] #nc-panel .nc-pane-head { border-bottom-color: rgba(15,15,20,.07); }
html[data-theme="light"] #nc-panel .tab-content label.block.uppercase, html[data-theme="light"] #nc-panel .tab-content .text-xs.font-bold.text-gray-500.uppercase { color: #71717a; }
html[data-theme="light"] #nc-panel :is(.text-white, .text-gray-100, .text-gray-200) { color: #0f0f14; }
html[data-theme="light"] #nc-panel .text-gray-300 { color: #3f3f46; }
html[data-theme="light"] #nc-panel .text-gray-400 { color: #52525b; }
html[data-theme="light"] #nc-panel :is(.text-gray-500, .text-gray-600) { color: #71717a; }
html[data-theme="light"] #nc-panel :is(.border-white\/5, .border-white\/10, .border-white\/20) { border-color: rgba(15,15,20,.1); }
html[data-theme="light"] #nc-panel :is(.bg-white\/5, .bg-white\/10) { background-color: rgba(15,15,20,.04); }
html[data-theme="light"] #nc-panel :is(.bg-black, .bg-\[\#0d0c11\], .bg-\[\#0b0b0e\], .bg-\[\#111\], .bg-\[\#121212\], .bg-\[\#1a1a1a\], .bg-black\/30, .bg-black\/40, .bg-black\/50) { background-color: #fff; }
html[data-theme="light"] #nc-panel .nc-pane :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], select, textarea) { background-color: #fff; color: #0f0f14; border-color: rgba(15,15,20,.14); }
html[data-theme="light"] #nc-panel .nc-pane :is(input, textarea)::placeholder { color: #a1a1aa; }
html[data-theme="light"] #nc-panel .nc-pane select option { background: #fff; color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-pane button.border.border-white\/10 { background-color: #fff; border-color: rgba(15,15,20,.12); color: #3f3f46; }
html[data-theme="light"] #nc-panel .nc-pane button.border.border-white\/10:hover { background-color: #f4f4f5; border-color: rgba(15,15,20,.2); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-pane button.border-neon-purple { background-color: rgba(176,38,255,.08); color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-pane-body { scrollbar-color: rgba(15,15,20,.18) transparent; }
html[data-theme="light"] #nc-panel .nc-pane-body::-webkit-scrollbar-thumb { background: rgba(15,15,20,.18); }
html[data-theme="light"] .nc-split[data-mode="rail"] .nc-sticky-add, html[data-theme="light"] .nc-split[data-mode="wide"] .nc-sticky-add { background: linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 14px); }
html[data-theme="light"] #nc-panel .dev-time-sel { color: #0f0f14; }
html[data-theme="light"] #nc-panel .dev-time-sel option { background: #fff; color: #0f0f14; }
html[data-theme="light"] #nc-panel .dev-time-now:hover { color: #0f0f14; background: rgba(15,15,20,.06); }
html[data-theme="light"] #nc-panel .sb-mini { color: #52525b; }
html[data-theme="light"] #nc-panel .sb-mini-box { border-color: rgba(15,15,20,.3); }
html[data-theme="light"] #nc-panel :is(.nc-intro-row) { background: #fafafa; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] #nc-panel .nc-intro-tx b { color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-switch { background: rgba(15,15,20,.15); }
html[data-theme="light"] #nc-panel .nc-soon { color: #52525b; background: #f4f4f5; border-color: rgba(15,15,20,.1); }
/* Caja "Guardar y exportar" (PC dentro del panel; celular debajo del teléfono) */
html[data-theme="light"] .nc-dl, html[data-theme="light"] #nc-panel .nc-dl { background: #f6f6f9; border-color: rgba(15,15,20,.08); }
html[data-theme="light"] .nc-dl-head { color: #71717a; }
html[data-theme="light"] .nc-dl-tool { color: #3f3f46; background: #fff; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] .nc-dl-tool:hover { color: #0f0f14; background: #f4f4f5; border-color: rgba(15,15,20,.18); }
html[data-theme="light"] .nc-proj-cur { color: #7e22ce; }
html[data-theme="light"] .nc-dm-menu { background: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 24px 60px rgba(15,15,20,.18); }
html[data-theme="light"] .nc-dm-sec { color: #8a8a94; }
html[data-theme="light"] .nc-dm-it { color: #18181b; }
html[data-theme="light"] .nc-dm-it:hover, html[data-theme="light"] .nc-dm-it:focus-visible { background: rgba(15,15,20,.05); }
html[data-theme="light"] .nc-dm-it > i:first-child { color: #7c3aed; }
html[data-theme="light"] .nc-dm-it > span small, html[data-theme="light"] .nc-dm-it > small { color: #71717a; }
html[data-theme="light"] .nc-dm-it > small.nc-dm-pro { color: #a16207; background: rgba(250,204,21,.12); border-color: rgba(202,138,4,.3); }
html[data-theme="light"] .nc-dm-sw { background: rgba(15,15,20,.15); }
html[data-theme="light"] .nc-dm-sep { background: rgba(15,15,20,.08); }
html[data-theme="light"] .nc-dm-share > i:first-child { color: #059669; }
/* Chat global (escritorio y celular) */
html[data-theme="light"] #livechat-panel, html[data-theme="light"] #livechat-drawer > div:last-child { background: #fff !important; border-color: rgba(15,15,20,.1) !important; box-shadow: 0 24px 60px rgba(15,15,20,.12); }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.bg-\[\#141318\], .bg-\[\#141318\]\/95) { background-color: #fff !important; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.border-white\/5, .border-white\/10) { border-color: rgba(15,15,20,.08) !important; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.text-white, .text-gray-100, .text-gray-200) { color: #0f0f14; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.text-gray-300, .text-gray-400) { color: #52525b; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.text-gray-500) { color: #71717a; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.bg-white\/5, .bg-white\/10) { background-color: rgba(15,15,20,.04); }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.hover\:bg-white\/10:hover) { background-color: rgba(15,15,20,.07); }
html[data-theme="light"] #livechat-input, html[data-theme="light"] #livechat-input-m { background: #f6f6f9 !important; color: #0f0f14 !important; border-color: rgba(15,15,20,.12) !important; }
html[data-theme="light"] #livechat-input::placeholder, html[data-theme="light"] #livechat-input-m::placeholder { color: #8a8a94; }
html[data-theme="light"] .chat-head .chat-name { color: #18181b; }
html[data-theme="light"] .chat-head .chat-name.role-admin { color: #e11d48; }
html[data-theme="light"] .chat-head .chat-name.role-premium { background: linear-gradient(90deg, #c026d3, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] #livechat-messages .chat-msg-text, html[data-theme="light"] #livechat-messages-m .chat-msg-text { color: #27272a !important; }
html[data-theme="light"] .chat-meta, html[data-theme="light"] .chat-meta .chat-time, html[data-theme="light"] .chat-compact .chat-ctime { color: #8a8a94; }
html[data-theme="light"] .chat-pres { background: #fff; }
html[data-theme="light"] .chat-av > div { background-color: #e4e4e7 !important; }
html[data-theme="light"] .chat-av > div span { color: #3f3f46 !important; }
html[data-theme="light"] .chat-actions { background: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 4px 12px rgba(15,15,20,.12); }
html[data-theme="light"] .chat-reply-btn { color: #52525b; }
html[data-theme="light"] .chat-reply-btn:hover { background: rgba(15,15,20,.06); color: #0f0f14; }
html[data-theme="light"] .chat-quote { background: rgba(15,15,20,.04); }
html[data-theme="light"] .chat-quote-name { color: #7e22ce; }
html[data-theme="light"] .chat-quote-text { color: #52525b; }
html[data-theme="light"] .chat-mention { color: #7e22ce; background: rgba(176,38,255,.1); }
html[data-theme="light"] .chat-row-mention { background: linear-gradient(90deg, rgba(225,0,255,.08), rgba(225,0,255,0) 85%); }
html[data-theme="light"] .chat-gif-btn { color: #27272a; background: #f4f4f5; border-color: rgba(15,15,20,.1); }
html[data-theme="light"] .chat-gif-pop, html[data-theme="light"] .chat-mention-pop { background: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 14px 34px rgba(15,15,20,.16); }
html[data-theme="light"] .chat-gif-pop .cgp-top input { color: #0f0f14; }
html[data-theme="light"] .chat-gif-pop .cgp-grid button { background: #f4f4f5; }
html[data-theme="light"] .chat-mention-pop button { color: #27272a; }
html[data-theme="light"] .chat-reply-bar { background: rgba(176,38,255,.07); }
html[data-theme="light"] .chat-reply-bar .rb-name { color: #6b21a8; }
html[data-theme="light"] .chat-pin-bar { background: linear-gradient(90deg, rgba(176,38,255,.1), rgba(176,38,255,.03)); border-bottom-color: rgba(147,51,234,.2); }
html[data-theme="light"] .chat-pin-bar .pin-name { color: #6b21a8; }
html[data-theme="light"] .chat-pin-bar .pin-text { color: #3f3f46; }
html[data-theme="light"] .lc-jump { background: #fff; color: #27272a; box-shadow: 0 8px 22px rgba(15,15,20,.15); }
html[data-theme="light"] .lc-sk { background: linear-gradient(90deg, rgba(15,15,20,.05) 25%, rgba(15,15,20,.1) 50%, rgba(15,15,20,.05) 75%); background-size: 200% 100%; }
html[data-theme="light"] .livechat-empty { color: #71717a; }
html[data-theme="light"] .chat-tr { color: #7e22ce; }
html[data-theme="light"] .chat-me { color: #71717a; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) :is(.bg-\[\#1a1822\], .bg-\[\#20202a\]) { background-color: #f6f6f9 !important; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) .text-white\/90 { color: #3f3f46 !important; }
html[data-theme="light"] :is(#livechat-panel, #livechat-drawer) .ring-white\/10 { --tw-ring-color: rgba(15,15,20,.1); }
html[data-theme="light"] #nc-panel .nc-cur-tx b { color: #0f0f14; }
html[data-theme="light"] #nc-panel .nc-tut { color: #7e22ce; background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.35); }
html[data-theme="light"] #nc-panel .nc-clear:not(.nc-tut) { color: #52525b; border-color: rgba(15,15,20,.14); background: #fff; }
html[data-theme="light"] .nci-card b { color: #0f0f14; }
html[data-theme="light"] .nci-card small { color: #52525b; }
html[data-theme="light"] #nc-panel .cm-btn { color: #3f3f46; }
html[data-theme="light"] #nc-panel .cm-btn:hover { color: #0f0f14; }

/* ---------- Modo claro: Pagar y Login (usan variables) ---------- */
html[data-theme="light"][data-page="pagar"] { --bg: #f6f6f9; --panel: #ffffff; --panel-2: #f4f4f5; --line: #e4e4e7; --line-2: #d4d4d8; --text: #0f0f14; --muted: #52525b; --dim: #71717a; --ok: #059669; }
html[data-theme="light"][data-page="pagar"] .co-head { background: rgba(255,255,255,.88); }
html[data-theme="light"][data-page="pagar"] .brand img, html[data-theme="light"][data-page="login"] .brand img { filter: invert(1); }
html[data-theme="light"][data-page="pagar"] .seg button.on { background: #0f0f14; color: #fff; }
html[data-theme="light"][data-page="pagar"] .chip { color: #3f3f46; background: #f4f4f5; border-color: #e4e4e7; }
html[data-theme="light"][data-page="login"] { --bg: #f6f6f9; --fg: #0f0f14; --muted: #52525b; --dim: #71717a; --line: rgba(15,15,20,.14); --line-hi: rgba(15,15,20,.35); }
.co-head-r .sh-icon, .top-right .sh-icon { width: 32px; height: 32px; font-size: 13px; }
html[data-theme="light"][data-page="pagar"] .perks li { color: #27272a; }
html[data-theme="light"][data-page="pagar"] .terms { color: #3f3f46; }
html[data-theme="light"][data-page="pagar"] .btn-primary { background: #0f0f14; color: #fff; }
html[data-theme="light"][data-page="pagar"] .btn-primary:hover:not(:disabled) { background: #27272a; }
html[data-theme="light"][data-page="pagar"] .btn-ghost { background: #fff; color: #0f0f14; border-color: #d4d4d8; }
html[data-theme="light"][data-page="pagar"] .btn-ghost:hover { background: #f4f4f5; }
html[data-theme="light"][data-page="pagar"] .coupon b { color: #0f0f14; }

/* ---------- Modo claro: arreglos del editor ---------- */
/* El teléfono no tiene color propio: en modo oscuro heredaba el blanco de la página. En claro se le deja ese blanco
   (si no, la fecha de la pantalla de bloqueo de iPhone y otros textos del teléfono salían negros). */
html[data-theme="light"] #phone-frame { color: #fff; }
html[data-theme="light"] #nc-panel .nc-chk { background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] #nc-panel .nc-chk-box { border-color: rgba(15,15,20,.3); }
html[data-theme="light"] #nc-panel .nc-chk-tx { color: #27272a; }

/* ---------- Modo claro: Login (y restablecer clave) ---------- */
html[data-theme="light"][data-page="login"] .btn-solid { color: #fff; }
html[data-theme="light"][data-page="login"] .btn-solid:hover { background: #27272a; }
html[data-theme="light"][data-page="login"] .btn-line:hover { background: rgba(15,15,20,.04); }
html[data-theme="light"][data-page="login"] .lang-switch .lang-opt.on { color: #fff !important; }
html[data-theme="light"][data-page="login"] .inp input { background: #fff; }
html[data-theme="light"][data-page="login"] .inp input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.15); }
html[data-theme="light"][data-page="login"] .inp input:-webkit-autofill { -webkit-text-fill-color: #0f0f14; -webkit-box-shadow: 0 0 0 40px #fff inset; caret-color: #0f0f14; }
html[data-theme="light"][data-page="login"] .code-grp { background: #fff; }
html[data-theme="light"][data-page="login"] .code-grp input:focus { background: rgba(176,38,255,.06); }

/* ---------- Contadores: campana del encabezado y burbuja del chat minimizado ---------- */
/* Antes: un punto rojo de 11-16 px con el número casi ilegible. Ahora una pastilla de 18-20 px, número claro y un
   borde del color del fondo para que se despegue del ícono. */
#nav-notif-badge { top: -6px !important; right: -7px !important; min-width: 19px !important; height: 19px !important; padding: 0 5px !important; border-radius: 999px !important; font: 800 10.5px/19px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; background: #ef4444 !important; color: #fff !important; box-shadow: 0 0 0 2.5px #050505, 0 3px 8px rgba(239,68,68,.45) !important; }
#livechat-unread-badge, #livechat-unread-badge-m { top: -5px !important; right: -5px !important; width: auto !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: 999px !important; font: 800 11px/20px Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; background: #ef4444 !important; color: #fff !important; box-shadow: 0 0 0 2.5px #050505, 0 3px 10px rgba(239,68,68,.5) !important; animation: ncBadgePop .35s cubic-bezier(.2,.8,.2,1.3); }
@keyframes ncBadgePop { from { transform: scale(.4); } to { transform: none; } }
html[data-theme="light"] #nav-notif-badge { box-shadow: 0 0 0 2.5px #fff, 0 3px 8px rgba(239,68,68,.35) !important; }
html[data-theme="light"] #livechat-unread-badge, html[data-theme="light"] #livechat-unread-badge-m { box-shadow: 0 0 0 2.5px #f6f6f9, 0 3px 10px rgba(239,68,68,.4) !important; }

/* ---------- Botón flotante de WhatsApp (Inicio) ---------- */
#wa-float { transition: opacity .25s ease, transform .25s ease, bottom .25s ease; }
#wa-float.wa-away { opacity: 0; transform: translateY(14px) scale(.85); pointer-events: none; }
#wa-float .wa-btn { width: 52px !important; height: 52px !important; color: #fff !important; background: #25d366 !important; background-image: none !important; box-shadow: 0 10px 26px rgba(37,211,102,.38), 0 2px 6px rgba(0,0,0,.25) !important; transition: transform .15s; }
#wa-float .wa-btn i { font-size: 27px !important; }
#wa-float .wa-label { padding: 8px 12px; border-radius: 12px; font-size: 13px !important; color: #fff !important; background: #18181b; border: 1px solid rgba(255,255,255,.1); text-shadow: none !important; box-shadow: 0 10px 28px rgba(0,0,0,.35); transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
#wa-float.wa-typing .wa-label, #wa-float:hover .wa-label, #wa-float.wa-open .wa-label { opacity: 1; }
#wa-float .wa-dismiss { box-shadow: 0 0 0 2px #050505 !important; }
html[data-theme="light"] #wa-float .wa-label { color: #18181b !important; background: #fff; border-color: rgba(15,15,20,.1); box-shadow: 0 10px 28px rgba(15,15,20,.15); }
html[data-theme="light"] #wa-float .wa-dismiss { box-shadow: 0 0 0 2px #fff !important; }
html[data-theme="light"] #wa-float.wa-typing .wa-text, html[data-theme="light"] #wa-float:hover .wa-text, html[data-theme="light"] #wa-float.wa-open .wa-text { border-right-color: rgba(15,15,20,.7); }

/* ---------- Modo claro: lo que encontró la revisión de contraste ---------- */
html[data-theme="light"] #nc-panel .sb-tile { color: #52525b; background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] #nc-panel .sb-tile.on { color: #0f0f14; background: rgba(176,38,255,.08); border-color: #a855f7; }
html[data-theme="light"] .ncf-btn { color: #7e22ce; background: rgba(176,38,255,.1); }
html[data-theme="light"] .ncf-name { color: #71717a; }
html[data-theme="light"] #nc-panel .ncx-chip { color: #52525b; background: #fff; border-color: rgba(15,15,20,.12); }
html[data-theme="light"] #nc-panel .ncx-chip:hover { border-color: rgba(15,15,20,.25); }
html[data-theme="light"] #nc-panel .ncx-chip.on { color: #0f0f14; background: rgba(176,38,255,.1); border-color: #a855f7; }
html[data-theme="light"] .lang-switch { background: #fff; border-color: rgba(15,15,20,.14); }
html[data-theme="light"] .lang-switch .lang-opt { color: #52525b; }
html[data-theme="light"] .lang-switch .lang-opt:hover { color: #0f0f14; }
html[data-theme="light"] .lang-switch .lang-opt.on { color: #fff; }
html[data-theme="light"] [data-cafe-nami] .text-purple-400 { color: #7e22ce; }
html[data-theme="light"][data-page="pagar"] .rev-stars { color: #f59e0b; }
html[data-theme="light"] .glass-panel .text-neon-pink { color: #be185d; }
html[data-theme="light"] #userDashboardModal button[onclick="Auth.logout()"] { color: #dc2626 !important; }
html[data-theme="light"] #userDashboardModal .ndl-btn { color: #fff !important; background: #0f0f14 !important; border-color: #0f0f14 !important; }
html[data-theme="light"] #userDashboardModal .dp-reward .dp-prog b { color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .text-red-400 { color: #dc2626 !important; }

/* ---------- Mi cuenta → Preferencias → Tema: 3 opciones simples (como un radio) ---------- */
.pref-radios { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
#userDashboardModal .dash-content button.pref-theme { display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0 !important; background: none !important; border-radius: 8px !important; box-shadow: none !important; font-size: 14px; font-weight: 500; color: #e4e4e7; cursor: pointer; min-height: 0; }
.pref-dot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid #71717a; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; }
.pref-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .15s; }
#userDashboardModal .pref-theme:hover .pref-dot { border-color: #a1a1aa; }
#userDashboardModal .pref-theme.is-on .pref-dot { border-color: #fafafa; }
#userDashboardModal .pref-theme.is-on .pref-dot::after { background: #fafafa; }
html[data-theme="light"] #userDashboardModal .dash-content button.pref-theme { color: #27272a; }
html[data-theme="light"] .pref-dot { border-color: #a1a1aa; }
html[data-theme="light"] #userDashboardModal .pref-theme.is-on .pref-dot { border-color: #0f0f14; }
html[data-theme="light"] #userDashboardModal .pref-theme.is-on .pref-dot::after { background: #0f0f14; }

/* ---------- 404: botón "Ir al inicio" con el color de la marca en modo claro (antes celeste) ---------- */
html[data-theme="light"] .glass-panel a.bg-neon-blue { color: #fff !important; background: linear-gradient(135deg, #b026ff, #7c3aed) !important; box-shadow: 0 10px 24px rgba(176,38,255,.3); }

/* ---------- Íconos y letras sobre fondos de color (avatar de la cuenta, botón enviar del chat, etc.) ---------- */
/* El modo claro oscurece los textos "blancos" de la página; sobre un fondo de color tienen que seguir en blanco */
html[data-theme="light"] :is([class*="from-neon-"], .bg-neon-purple, .bg-neon-fuchsia, .bg-red-500, .bg-green-500):not(.bg-clip-text):not(.text-transparent):not(.bg-neon-blue),
html[data-theme="light"] :is([class*="from-neon-"], .bg-neon-purple, .bg-neon-fuchsia, .bg-red-500, .bg-green-500):not(.bg-clip-text):not(.text-transparent) :is(.text-white, span, i, b):not(.bg-clip-text):not(.text-transparent) { color: #fff !important; }

/* ---------- Aviso de cookies en modo claro (/assets/js/cookie-consent.js) ---------- */
html[data-theme="light"] #cookieBanner { background: #fff; color: #0f0f14; border-color: rgba(15,15,20,.1); box-shadow: 0 24px 60px rgba(15,15,20,.18); }
html[data-theme="light"] #cookieBanner .ck2-body p { color: #52525b; }
html[data-theme="light"] #cookieBanner .ck2-body a { color: #27272a; }
html[data-theme="light"] #cookieBanner .ck2-body a:hover { color: #0f0f14; }
html[data-theme="light"] #cookieBanner .ck2-solid { background: #0f0f14; color: #fff; border-color: #0f0f14; }
html[data-theme="light"] #cookieBanner .ck2-solid:hover { background: #27272a; }
html[data-theme="light"] #cookieBanner .ck2-line { color: #0f0f14; border-color: rgba(15,15,20,.18); }
html[data-theme="light"] #cookieBanner .ck2-line:hover { background: rgba(15,15,20,.05); border-color: rgba(15,15,20,.3); }

/* ---------- Mi etiqueta en modo claro (ventana de /assets/js/nc-label.js, en el panel y en el editor) ---------- */
/* Sus bordes y fondos eran blancos transparentes: sobre blanco no se veían y todo quedaba "flotando" */
html[data-theme="light"] .ncl-card { background: #fff; color: #0f0f14; border-color: rgba(15,15,20,.1); box-shadow: 0 30px 80px rgba(15,15,20,.2); }
html[data-theme="light"] .ncl-embed .ncl-card { background: transparent; border: 0; box-shadow: none; }
html[data-theme="light"] .ncl-back:not(.ncl-embed):not(.dock) { background: rgba(15,15,20,.35); }
html[data-theme="light"] .ncl-x, html[data-theme="light"] .ncl-ib { color: #52525b; }
html[data-theme="light"] .ncl-x:hover, html[data-theme="light"] .ncl-ib:hover { background: rgba(15,15,20,.06); color: #0f0f14; }
html[data-theme="light"] .ncl-sub, html[data-theme="light"] .ncl-tip { color: #52525b; }
html[data-theme="light"] .ncl-tip i, html[data-theme="light"] .ncl-eye.on { color: #9333ea; }
html[data-theme="light"] .ncl-sec { color: #71717a; }
html[data-theme="light"] .ncl-item { border-color: rgba(15,15,20,.1); background: #f6f6f9; }
html[data-theme="light"] .ncl-item.on { border-color: #b026ff; background: rgba(176,38,255,.07); }
html[data-theme="light"] .ncl-item img, html[data-theme="light"] .ncl-ph { background: #e4e4e7; color: #71717a; }
html[data-theme="light"] .ncl-eye { color: #a1a1aa; }
html[data-theme="light"] .ncl-form { border-color: rgba(15,15,20,.1); background: #fafafa; }
html[data-theme="light"] .ncl-pic { background: #f4f4f5; border-color: rgba(15,15,20,.25); color: #71717a; }
html[data-theme="light"] .ncl-in { background: #fff; border-color: rgba(15,15,20,.15); color: #0f0f14; }
html[data-theme="light"] .ncl-in:focus { border-color: #b026ff; }
html[data-theme="light"] .ncl-bdlab, html[data-theme="light"] .ncl-set label { color: #52525b; }
html[data-theme="light"] .ncl-bd { border-color: rgba(15,15,20,.12); background: #fff; color: #71717a; }
html[data-theme="light"] .ncl-bd:hover { border-color: rgba(15,15,20,.25); }
html[data-theme="light"] .ncl-bd.on { border-color: #b026ff; background: rgba(176,38,255,.08); }
html[data-theme="light"] .ncl-btn { border-color: rgba(15,15,20,.14); background: #fff; color: #27272a; }
html[data-theme="light"] .ncl-btn:hover { background: #f4f4f5; color: #0f0f14; }
html[data-theme="light"] .ncl-btn.ncl-pri, html[data-theme="light"] .ncl-btn.ncl-pri:hover { border-color: transparent; color: #fff; background: linear-gradient(135deg, #b026ff, #7c3aed); }
html[data-theme="light"] .ncl-seg button { border-color: rgba(15,15,20,.12); background: #fff; color: #3f3f46; }
html[data-theme="light"] .ncl-seg button.on { border-color: #b026ff; background: rgba(176,38,255,.08); color: #6b21a8; }
html[data-theme="light"] .ncl-empty { color: #71717a; border-color: rgba(15,15,20,.15); }
html[data-theme="light"] .ncl-err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
html[data-theme="light"] .ncl-demo { background: #f4f4f5; color: #0f0f14; }
html[data-theme="light"] .ncl-demo i.fa-user { background: #e4e4e7; color: #52525b; }

/* Editor → Versión → "Marco del dispositivo": el cuadrito sin marcar tenía borde blanco y en claro no se veía */
html[data-theme="light"] #frame-checkbox-visual.border-white\/30,
html[data-theme="light"][data-page="editor"] :is(.w-4.h-4, .w-5.h-5).border-white\/30:not(#phone-frame *) { border-color: rgba(15,15,20,.35); background: #fff; }

/* @usuario: el aviso de debajo solo aparece cuando hay algo que decir (libre, ocupado, error) */
#usernameStatus:empty { display: none; }


/* Preferencias → Correos */
#userDashboardModal .pref-news { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #e4e4e7; cursor: pointer; }
#userDashboardModal .pref-news input { width: 16px; height: 16px; accent-color: #a855f7; cursor: pointer; }
html[data-theme="light"] #userDashboardModal .pref-news { color: #27272a; }