/* biwEZ Web: lo poco que cambia respecto a la extensión. Mismos colores (variables de app.css). */
.bwchip.on{border-color:rgba(var(--glow),.45)}
.bwchip.on .ico,.bwchip.on svg:first-child{color:var(--ok)}
.bwchip.off,.bwchip.bad{border-color:var(--bad)}
.bwchip.off svg:first-child,.bwchip.bad svg:first-child{color:var(--bad)}
.bwbad{color:var(--bad)}
.bwcard{width:min(480px,100%)}
.bwcard .close{position:absolute;top:14px;right:14px}
.bwpts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;color:var(--mut);font-size:13px;line-height:1.45}
.bwpts li{display:flex;gap:10px;align-items:flex-start}
.bwpts svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--brass)}
.bwopt{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
@media (max-width:600px){#bwBox .bt-txt{display:none}}

/* ---- Móviles con «modo oscuro forzado» del navegador (visto el 13/11 en un Android): el navegador oscurece los
   colores claros, y el degradado cian-violeta de las cifras salía azul marino, casi invisible. La página ya es oscura
   (lo dice también la etiqueta color-scheme de index.html); además, las cifras importantes van en un color sólido
   brillante, que se lee aunque el navegador insista en oscurecer. */
html.webapp .title .ez,html.webapp .kpi.me .v{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#8be9ff;-webkit-text-fill-color:#8be9ff;text-shadow:0 0 18px rgba(56,214,255,.45)}
html.webapp .dbig{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--brass);-webkit-text-fill-color:var(--brass)}
html.webapp .bar{height:8px}
html.webapp[data-theme=dark] .bar i{background:linear-gradient(90deg,#5fe1ff,#b48cff)}

/* ---- El círculo de adorno de la tarjeta «Tu saldo» asomaba por la derecha y en el móvil la página se podía
   arrastrar de lado (encontrado con tests/web-mobile.ps1): se recorta dentro de la tarjeta. */
html.webapp .kpi.me{overflow:hidden}
html.webapp body{overflow-x:clip}

/* ---- Tablas en el móvil: el nombre del mánager empujaba el saldo fuera de la pantalla. Nombre más corto (con «…»)
   y columna del dinero más estrecha, para que el saldo se vea sin arrastrar la tabla. */
@media (max-width:600px){
  html.webapp .who .nm{max-width:92px}
  html.webapp .who{gap:6px}
  html.webapp .moneycell{min-width:118px}
  html.webapp .tablewrap th,html.webapp .tablewrap td{padding-left:8px;padding-right:8px}
  html.webapp .rank{width:22px}
}

/* ---- Menús en pantallas estrechas: a lo ancho de la pantalla, sin salirse por ningún lado. */
@media (max-width:760px){
  html.webapp .menu{position:static}
  html.webapp .menu-list{position:fixed;left:12px;right:12px;min-width:0;max-width:none;max-height:min(70vh,520px);overflow:auto;z-index:60}
  html.webapp .menu-list button{white-space:normal}
}