/* ZERO · Modo dia
   css/modo-dia.css

   Los cambios de color cuando la app esta en claro. Va DESPUES de todo lo
   anterior a proposito: pisa los colores de noche, y si sube de lugar deja
   de pisarlos.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== modo día (claro) ===== */
body.light{background:#e6ded2;
  --bg:#f7f3ec;--card:rgba(255,255,255,.36);--card2:rgba(255,255,255,.28);--sheet:#fbf8f2;
  --ink:#241f2b;--ink-dim:#5d5766;--line:rgba(20,16,28,.1);color:var(--ink);
  /* El dorado sobre lienzo claro necesita más cuerpo y un borde más oscuro, o
     el tinte se evapora y las 3 tarjetas se ven igual que las demás. */
  --best-glass:rgba(178,148,54,.22);--best-edge:rgba(150,124,40,.38);
  /* El semáforo, otra vez. Los cuatro colores de arriba están calibrados para
     leerse sobre negro: son pasteles luminosos. Sobre el lienzo claro se
     evaporan — "Lo recomienda" en menta pálido sobre blanco era literalmente
     ilegible, y la calificación de un producto también, que es LO que la
     persona vino a ver.
     No se cambia el matiz, se cambia la luminosidad: el mismo verde, el mismo
     ámbar, el mismo rojo, oscurecidos hasta pasar AA (4.5:1) sobre --bg.
     Van como token y no como parche encima de cada chip porque los chips
     escriben var(--good) en su style: redefinir el token aquí arregla de una
     vez las calificaciones, los veredictos, la barra del medidor y lo que
     venga después. */
  --good:#0d6a5c;   /* 5.4:1 sobre #f7f3ec */
  --ok:#8a5a15;     /* 5.0:1 */
  --warn:#a3430f;   /* 5.3:1 */
  --bad:#b3123a}    /* 5.9:1 */
body.light #phone::after{opacity:.05}
body.light #aurora .ab{opacity:.4}
/* El gris del modo día: los degradados apagan su borde exterior mezclando el color
   con #0b0b0e (casi negro). Sobre lienzo oscuro eso lee como profundidad; sobre el
   lienzo claro lee como suciedad gris. En día se aclara en vez de oscurecerse.
   La mezcla va en OKLCH, no en sRGB: aclarar un color mezclándolo en sRGB le come
   el croma y devuelve otro gris, solo que más claro. OKLCH sube la luminosidad
   conservando tono y saturación. */
body.light .g1{background:radial-gradient(circle at 30% 30%,var(--t1),var(--t2) 45%,color-mix(in oklch,var(--t2) 52%,#fff) 80%)}
body.light .g2{background:radial-gradient(circle at 70% 40%,var(--t3),var(--t4) 50%,color-mix(in oklch,var(--t4) 52%,#fff) 85%)}
body.light .g3{background:radial-gradient(circle at 40% 60%,var(--t5),var(--t6) 55%,color-mix(in oklch,var(--t6) 52%,#fff) 85%)}
body.light .g4{background:radial-gradient(circle at 60% 30%,var(--t1),var(--t6) 55%,color-mix(in oklch,var(--t6) 50%,#fff) 85%)}
body.light .g5{background:radial-gradient(circle at 35% 65%,var(--t3),var(--t2) 52%,color-mix(in oklch,var(--t2) 52%,#fff) 85%)}
body.light .ab4{background:radial-gradient(circle at 50% 40%,var(--t6),color-mix(in oklch,var(--t2) 62%,#fff) 58%,transparent 76%)}
body.light #phone{border-color:#e2d8ca}
body.light .meter-card{background:rgba(247,243,236,.9)}
body.light nav{background:rgba(255,255,255,.82);border-color:rgba(20,16,28,.08);box-shadow:0 14px 40px rgba(90,70,100,.18)}
body.light .badge{background:rgba(255,255,255,.92)}
body.light .cartbtn{background:rgba(255,255,255,.85)}
body.light #meterMask{background:rgba(247,243,236,.82)}
body.light .overlay{background:rgba(40,30,50,.5)}
/* acentos sand oscurecidos para que se lean sobre fondo claro */
body.light .fh-title em,body.light .hero h1:not(.comm-title) em,body.light .mega em,
body.light .comm-title em .cw{color:color-mix(in srgb,var(--sand) 40%,#453317)}
body.light .collap-head .chev,body.light .scroll-arrow{color:color-mix(in srgb,var(--sand) 40%,#453317)}
/* La marca del producto reconocido va en versalitas de 10 puntos: es de lo más
   chico que hay en la app, y el oliva claro sobre lienzo claro no se lee. */
body.light .ph-marca{color:color-mix(in srgb,var(--sand) 40%,#453317)}
body.light nav button.active{color:color-mix(in srgb,var(--sand) 45%,#4a3820)}
/* burbujas: en modo día se aclaran (velo blanco) y el texto pasa a tinta oscura */
body.light .bub::after{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.66))}
body.light .bub b{color:#241f2b}
body.light .bub span{color:rgba(36,31,43,.72)}
body.light .bub .tag{color:#7a5426}
body.light .bub .bub-date{color:rgba(36,31,43,.6)}
body.light .bub-ph{background:linear-gradient(150deg,rgba(36,31,43,.10),rgba(36,31,43,.24));
  box-shadow:0 6px 16px rgba(36,31,43,.18),inset 0 0 0 1px rgba(36,31,43,.10)}
body.light .stat.sbub::after{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.58))}
body.light .stat.sbub b{color:#241f2b}
body.light .stat.sbub span{color:rgba(36,31,43,.72)}