/* Modos de manejo: reglas que pintan piezas del portal en cada modo que el cliente elige en Configuración (modos.js).
   Las variables de cada modo viven en tokens.css (también la cargan las páginas aparte). Sin atributo (o data-modo="emir") es «EMIR», negro;
   «EMIR Verde» (data-modo="verde") es el menta sobre negro de siempre (:root de tokens.css). */
/* islas que siguen oscuras en EV (portada con foto, licencias, historias, tarjetas con foto): verde brillante sobre negro */
html[data-modo="ev"] :is(.portada-esc,.es-lic,.es-mini,.cm-hist,.es-fiesta,.tj,.banner,.cm-reels){color-scheme:dark;--menta:#3FE07A;--menta-rgb:63,224,122;--menta-osc:rgba(63,224,122,.13);--sobre-menta:#000;
  --negro:#000;--fondo:#07090C;--sup:#0F141B;--sup2:#151B24;--panel:#0B0F14;--linea:rgba(255,255,255,.09);--linea2:rgba(255,255,255,.16);
  --texto:#EEF1F5;--texto2:#C9D0D9;--gris:#9AA3B0;--gris2:#848D99;--tinta:#fff;--tinta-rgb:255,255,255;--logo-txt:#fff;--vidrio-rgb:9,13,21;
  --ambar:#6FA8FF;--ambar-osc:rgba(111,168,255,.14);--rojo:#FF5A4E;color:var(--texto)}
/* islas que siguen oscuras (portada con foto, licencias, historias, tarjetas con foto): son EMIR tal cual, blanco sobre negro */
html[data-modo="claro"] :is(.portada-esc,.es-lic,.es-mini,.cm-hist,.es-fiesta,.tj,.banner,.cm-reels){color-scheme:dark;--menta:#EEF1F5;--menta-rgb:238,241,245;--menta-osc:rgba(255,255,255,.08);--sobre-menta:#0B0F14;
  --negro:#000;--fondo:#07090C;--sup:#0F141B;--sup2:#151B24;--panel:#0B0F14;--linea:rgba(255,255,255,.09);--linea2:rgba(255,255,255,.16);
  --texto:#EEF1F5;--texto2:#C9D0D9;--gris:#9AA3B0;--gris2:#848D99;--tinta:#fff;--tinta-rgb:255,255,255;--logo-txt:#fff;--vidrio-rgb:9,13,21;
  --plata-rgb:206,214,224;--dt1:#EEF1F5;--dt2:#CED6E0;--ambar:#6FA8FF;--ambar-osc:rgba(111,168,255,.14);--rojo:#FF5A4E;color:var(--texto)}


:is(html:not([data-modo]),html[data-modo="emir"]) .cm-cab .avatar.emir{background:#000}

/* avatar y botón de ayuda: verde fijo → tono oscuro del color del modo */
html:not([data-modo="verde"]) .avatar:not(.c){background:linear-gradient(135deg,color-mix(in srgb,var(--menta) 62%,#000),color-mix(in srgb,var(--menta) 42%,#000))}
/* EMIR (negro): con el blanco del modo el gris salía claro y las iniciales blancas daban 4.1:1; un tono más oscuro da 6:1 */
:is(html:not([data-modo]),html[data-modo="emir"]) .avatar:not(.c){background:linear-gradient(135deg,color-mix(in srgb,var(--menta) 48%,#000),color-mix(in srgb,var(--menta) 32%,#000))}
/* EV: el circuito de fondo es para negro; en claro se quita dentro del portal */
:is(html[data-modo="ev"],html[data-modo="claro"]) body{background:var(--fondo)}
:is(html[data-modo="ev"],html[data-modo="claro"]) body.portal #circuito{display:none}
/* EV: piezas con fondo oscuro fijo */
:is(html[data-modo="ev"],html[data-modo="claro"]) main.pg :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){background:#fff;border-color:var(--linea2)}
:is(html[data-modo="ev"],html[data-modo="claro"]) :is(input,textarea)::placeholder{color:var(--gris2)}
:is(html[data-modo="ev"],html[data-modo="claro"]) input[type=date]{color-scheme:light}
:is(html[data-modo="ev"],html[data-modo="claro"]) .marca img,:is(html[data-modo="ev"],html[data-modo="claro"]) a.marca:hover img{filter:brightness(0);opacity:.85}
:is(html[data-modo="ev"],html[data-modo="claro"]) :is(.ct-fotos figure,.ce-eq,.ce-marcas .pas:not(.on)){background-color:var(--sup)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .ce-eq:hover{background-color:var(--sup2)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .constancia::before,:is(html[data-modo="ev"],html[data-modo="claro"]) .constancia::after{background:var(--fondo)}
:is(html[data-modo="ev"],html[data-modo="claro"]) header.top{box-shadow:0 1px 0 var(--linea)}
/* EV: la barra de abajo la pinta barra-pinta.js (vidrio blanco); aquí solo sombras suaves y el velo de la hoja */
@media(max-width:900px){
  :is(html[data-modo="ev"],html[data-modo="claro"])[data-barra] nav.abajo{box-shadow:0 10px 30px rgba(14,23,19,.16),inset 0 0 0 1px rgba(14,23,19,.1)!important}
  :is(html[data-modo="ev"],html[data-modo="claro"]) .pl-cuello path{stroke:rgba(14,23,19,.12)}
  :is(html[data-modo="ev"],html[data-modo="claro"])[data-barra] .pl-cuello{filter:drop-shadow(0 -8px 22px rgba(14,23,19,.18))}
  :is(html[data-modo="ev"],html[data-modo="claro"]) body.ng-hoja-abierta .ng-velo{background:rgba(14,23,19,.28)}}
/* EV: menús desplegables de arriba (PC), pestañas de El Club y fondo de las tarjetas de producto en Mis productos / Soporte */
:is(html[data-modo="ev"],html[data-modo="claro"]) .ng-menu{background:#fff;border-color:var(--linea2);box-shadow:0 18px 40px rgba(14,23,19,.16)}
:is(html[data-modo="ev"],html[data-modo="claro"]) :is(.cm-post .cm-fotos,.cm-post .cm-fotos.n1){background:var(--sup2)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .cm-cab .avatar.emir{background:#fff}
:is(html[data-modo="ev"],html[data-modo="claro"]) .cm-tabs{background:rgba(255,255,255,.94);border-color:var(--linea2);box-shadow:0 6px 18px rgba(14,23,19,.08)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-img.contiene{background:radial-gradient(120% 120% at 80% 30%,#FFFFFF,#E3EAE6 70%)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-img.contiene::after{background:linear-gradient(90deg,rgba(242,245,243,.96) 0%,rgba(242,245,243,.7) 45%,transparent 70%)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-tj:has(.hub-img.contiene){color:var(--texto);border-color:var(--linea)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-tj:has(.hub-img.contiene) .hub-tx b{color:var(--texto);text-shadow:none}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-tj:has(.hub-img.contiene) .hub-tx small{color:var(--gris)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .hub-tj:has(.hub-img.contiene) .hub-ir{color:var(--menta);background:rgba(var(--menta-rgb),.1);border-color:rgba(var(--menta-rgb),.3)}
/* EV: Novedades y Exclusivos en tarjeta clara (dentro del portal; en la portada siguen oscuras) */
:is(html[data-modo="ev"],html[data-modo="claro"]) main .nv-tj{background:var(--sup);border-color:var(--linea)}
:is(html[data-modo="ev"],html[data-modo="claro"]) main .nv-exc .nv-tj{background:linear-gradient(135deg,rgba(var(--menta-rgb),.08),var(--sup) 55%)}
/* EV: guía del piloto en burbuja clara (en los modos oscuros sigue la fibra de carbono) */
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-globo{background:#fff!important;background-image:none!important;box-shadow:0 18px 40px rgba(14,23,19,.18)!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-globo::before{background:#fff!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-globo b,:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-otra span b{color:var(--texto)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-globo p,:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-otra span{color:var(--texto2)!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-no{color:var(--texto);border-color:var(--linea2)!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) :is(.gp-atras,.gp-nomas){color:var(--gris)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-puntos i:not(.on){background:rgba(14,23,19,.18)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-x{color:var(--texto)!important;background:#fff!important;border-color:var(--linea2)!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-x:hover{background:var(--sup2)!important}
:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-oyes,:is(html[data-modo="ev"],html[data-modo="claro"]) .gp-oyes::after{background:#fff;color:var(--texto)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .guia-piloto .gp-foco{box-shadow:0 0 0 9999px rgba(14,23,19,.45),0 0 0 2px color-mix(in srgb,var(--dt2) 70%,transparent),0 0 24px color-mix(in srgb,var(--dt2) 55%,transparent)}

/* etiqueta «Nuevo» del menú: letra y destello del color del modo */
html:not([data-modo="verde"]) .ng-op:has(> .burbuja.punto) > b::after{color:var(--sobre-menta);animation-name:mdNuevo}
@keyframes mdNuevo{0%,100%{box-shadow:0 0 0 0 rgba(var(--menta-rgb),0)}50%{box-shadow:0 0 12px 2px rgba(var(--menta-rgb),.55)}}

/* botón de WhatsApp del pie y de la portada: toma el color del modo (en Original sigue el verde de WhatsApp) */
html:not([data-modo="verde"]) .redes a.r-wa{background:var(--menta);border-color:var(--menta);color:var(--sobre-menta)}
html:not([data-modo="verde"]) .redes a.r-wa:hover{filter:brightness(1.08);color:var(--sobre-menta)}
/* triángulo del ícono de YouTube: del color del fondo del botón (en EV era negro sobre negro) */
#r-yt path{fill:var(--panel)}

/* EMIR: botones como la bienvenida (.rc-blanco / .rc-negro). Principal blanco → plata con letra casi negra (17.0:1 y 13.1:1);
   al tocar, plata más honda (10.1:1); secundario negro con borde fino; enfocado con anillo blanco; deshabilitado gris con letra gris (6.0:1) */
:is(html:not([data-modo]),html[data-modo="emir"]) .btn:not(.sec):hover{filter:brightness(1.03)}
:is(html:not([data-modo]),html[data-modo="emir"]) .btn:not(.sec):active{filter:none;background:linear-gradient(120deg,#CED6E0,#B4BDC9)!important}
:is(html:not([data-modo]),html[data-modo="emir"]) .btn.sec{background:#000;border:1px solid rgba(255,255,255,.16);color:#EEF1F5;box-shadow:none}
:is(html:not([data-modo]),html[data-modo="emir"]) .btn.sec:hover{border-color:rgba(255,255,255,.32)}
:is(html:not([data-modo]),html[data-modo="emir"]) .btn.sec:active{background:#0F141B}
:is(html:not([data-modo]),html[data-modo="emir"]) .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
:is(html:not([data-modo]),html[data-modo="emir"]) :is(.btn:disabled,.btn[aria-disabled=true]){background:#1F2630!important;color:#9AA3B0!important;opacity:1;filter:none;border-color:transparent}

/* globo del mapa de talleres: el texto viene con verde fijo en el código */
:is(html:not([data-modo]),html[data-modo="emir"]) .leaflet-popup .meta[style*="89FF9E"]{color:var(--menta)!important}

/* EMIR Claro: lo que en EV vive en otras hojas (pulido, barra, comunidad, avatar) y los botones al revés de EMIR.
   Principal negro tinta → grafito con letra blanca (19.0:1 / 13.4:1); secundario blanco con borde fino; anillo de foco negro */
html[data-modo="claro"] .hub-img.contiene{background:radial-gradient(120% 120% at 80% 30%,#FFFFFF,#E6E8EC 70%)}
html[data-modo="claro"] .hub-img.contiene::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.7) 45%,transparent 70%)}
html[data-modo="claro"] main .btn:not(.sec):not(.wa):not(.listo){color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(11,15,20,.2),0 8px 18px -10px rgba(11,15,20,.55)}
html[data-modo="claro"] .btn:not(.sec):not(.wa):not(.listo),html[data-modo="claro"] .cm-fab{color:#fff}
html[data-modo="claro"] .btn.sec{background:#fff;border:1px solid var(--linea2);color:var(--texto);box-shadow:0 1px 2px rgba(11,15,20,.06)}
html[data-modo="claro"] .btn.sec:hover{border-color:rgba(11,15,20,.4);background:#fff}
html[data-modo="claro"] .btn.sec:active{background:var(--sup)}
html[data-modo="claro"] .btn:focus-visible{outline:2px solid #0B0F14;outline-offset:3px}
html[data-modo="claro"] :is(.btn:disabled,.btn[aria-disabled=true]){background:#E3E6EA!important;color:#59616D!important;opacity:1;filter:none;box-shadow:none;border-color:transparent}
html[data-modo="claro"] main .pl-luz i{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%)}
html[data-modo="claro"] main :is(label,.check,.ct-check,.ct-guardar-cli) > input[type=checkbox]:checked{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(120deg,var(--dt1),var(--dt2))}
html[data-modo="claro"] main :is(label,.check,.ct-check) > input[type=radio]:checked{box-shadow:inset 0 0 0 4px #fff}
html[data-modo="claro"] main select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2359616D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
html[data-modo="claro"] .bb-mini{background:linear-gradient(135deg,#E6E8EC,#F4F5F7 60%,#ECEDF1)}
html[data-modo="claro"] :is(.cm-chip-logo,.cm-hash-ico,.cm-tag-logo){filter:brightness(0)}
/* VIN: los segmentos VDS y VIS traen colores pensados para fondo oscuro; en los modos claros van en azul y gris con AA */
:is(html[data-modo="claro"],html[data-modo="ev"]) .cob-seg.b{color:#0B5CAD;border-color:rgba(11,92,173,.45);background:rgba(11,92,173,.08)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .cob-seg.c{color:#5B6573;border-color:rgba(91,101,115,.45);background:rgba(91,101,115,.08)}
html[data-modo="claro"] #cmReels :is(.cm-tag-logo,.cm-hash-ico,.cm-chip-logo){filter:none}   /* Videos es oscuro aunque el modo sea claro */
html[data-modo="claro"] #perfil .avatar.g::after{filter:brightness(0)}
html[data-modo="claro"] .cm-cab .avatar.emir{background:#0B0F14}
:is(html[data-modo="claro"],html[data-modo="ev"]) .leaflet-popup .meta[style*="89FF9E"]{color:var(--texto)!important}
:is(html[data-modo="claro"],html[data-modo="ev"]) body .ng-panel-btn{color:var(--sobre-menta)}   /* body: navegacion.js pinta el de Panel abierto con letra casi negra fija */
/* bienvenida: los logos de marca van en negro (en EMIR van en blanco) */
html[data-modo="claro"] .rc-marca img{filter:brightness(0)}
html[data-modo="claro"] #rcBienvenida .rc-logo img{filter:brightness(0)}   /* y el de EMIR también: en blanco no se veía sobre el fondo blanco */
:is(html[data-modo="claro"],html[data-modo="ev"]) .ci-video .ci-tag{color:var(--sobre-menta)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .tp-arma-pop{color:var(--ambar)}
/* auditoría de uso, 3 nov: el aviso de instalar y el de «Pronto» eran un panel negro con letras de tinta (negras en claro).
   Desde el 5 nov estas reglas (y las de Cobertura, mapa, errores, Panel y «Más popular») cubren también EV, que también es claro */
:is(html[data-modo="claro"],html[data-modo="ev"]) .ng-pronto-panel{background:var(--panel);border-color:var(--linea2)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .ins-paso{border-color:var(--linea2);background:var(--sup)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .ins-paso.tuyo{border-color:rgba(var(--menta-rgb),.45);background:rgba(var(--menta-rgb),.04)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .ins-paso h4 em{color:var(--sobre-menta)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .ins-x{background:var(--sup)}
/* Cobertura de tu equipo: las cajas sólidas eran casi negras (por el circuito, que en claro no corre) y «¿De dónde salen los datos?» no se leía */
:is(html[data-modo="claro"],html[data-modo="ev"]) :is(.ce-pie,.ce-sin,.ce-eqsel){background:var(--sup)}
:is(html[data-modo="claro"],html[data-modo="ev"]) .ce-eq.on{background:linear-gradient(var(--menta-osc),var(--menta-osc)),var(--sup)}
/* Directorio: el mapa va claro, sin invertir los mosaicos */
:is(html[data-modo="claro"],html[data-modo="ev"]) .leaflet-tile-pane{filter:none}
:is(html[data-modo="claro"],html[data-modo="ev"]) :is(.mapa,.leaflet-container){background:var(--sup)}
/* errores: el coral del modo oscuro (#FF8A80) da 2.3:1 sobre blanco; en claro van en su rojo. El atributo cubre los que pinta el JS */
:is(html[data-modo="claro"],html[data-modo="ev"]) :is(.rc-msg.mal,.cob-msg,.es-mov em.neg),
:is(html[data-modo="claro"],html[data-modo="ev"]) :is([style*="FF8A80" i],[style*="255, 138, 128"]){color:var(--rojo)!important}

/* ---- selector en Configuración, como el de modos de un tablero ---- */
.md-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:420px){.md-lista{grid-template-columns:repeat(2,1fr)}}
.md-op{--c:#89FF9E;--f:#07090C;--t:#EEF1F5;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 12px;border-radius:var(--radio-2);
  border:1.5px solid var(--linea2);background:var(--f);color:var(--t);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:border-color var(--dur-1),transform var(--dur-1)}
.md-op:active{transform:scale(.97)}
.md-op.on{border-color:var(--menta);box-shadow:0 0 0 2px rgba(var(--menta-rgb),.35)}
.md-op svg{width:100%;height:38px;display:block}
.md-op b{font:800 italic var(--t-4)/1 'Barlow Condensed',Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.md-op small{font-size:var(--t-1);line-height:1.25;opacity:.75}
.md-op i{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--c);color:var(--f);display:none;place-items:center;font:800 var(--t-1)/1 Arial,sans-serif;font-style:normal}
.md-op.on i{display:grid}
/* registro y alta en modos claros (2 nov 2026): barra de avance, logos de marca y botones del último paso se leen sobre blanco */
:is(html[data-modo="ev"],html[data-modo="claro"]) .rc-progreso i{background:var(--texto)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .ac-marcas button img{filter:brightness(0)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .ac-ante{color:var(--gris)}
:is(html[data-modo="ev"],html[data-modo="claro"]) .rc-fin-bts .rc-blanco{background:#0B0F14;color:#fff}
:is(html[data-modo="ev"],html[data-modo="claro"]) .rc-fin-bts .rc-negro{background:#fff;color:#0B0F14;border:1px solid var(--linea2)}
/* bienvenida: «Crear cuenta» es el botón fuerte (negro) e «Iniciar sesión» el claro, igual que al final del registro */
:is(html[data-modo="ev"],html[data-modo="claro"]) #rcBienvenida .rc-blanco{background:#0B0F14;color:#fff}
:is(html[data-modo="ev"],html[data-modo="claro"]) #rcBienvenida .rc-negro{background:#fff;color:#0B0F14;border:1px solid var(--linea2)}

/* crédito del mapa (Leaflet / OpenStreetMap): caja del panel del modo con letra legible, en todos los modos */
.leaflet-container .leaflet-control-attribution{background:rgba(var(--vidrio-rgb),.9)!important;color:var(--texto2)!important;border-radius:6px 0 0 0}
.leaflet-container .leaflet-control-attribution a{color:var(--texto)!important}
/* interruptores apagados en los modos claros: el carril al 15 % casi no se distinguía de la bolita blanca (1.3:1); al 48 % da 3.5:1 */
:is(html[data-modo="claro"],html[data-modo="ev"]) .sw:not(.on){background:rgba(var(--tinta-rgb),.48)}