/* ============================================================
   DANGOFE OS · LEGIBLE SOBRE LA FOTO DE FONDO · 2026-10-17 · chat de Diseño
   Karla (video): con su foto (neón rosa y azul) «las tarjetas de vidrio dejan ver la foto y no se leen»: en el portal
   del técnico (las órdenes, «Mis órdenes», «Compré piezas con mi dinero») y en el Dashboard (los chips Hoy / Ayer /
   Esta semana / Mes pasado / Personalizado y la franja de abajo «Sistema Online · Premium»). «Mejora eso».
   REGLA: cuando hay una foto de fondo (body[data-wallpaper='set']) todo lo que lleva texto tiene CUERPO: un tinte del
   color del tema con alfa alta (no más desenfoque), sin sombras. Vale para cualquier foto que ponga, clara u oscura.
   El gestor del fondo (background-manager.js) sigue sumando su parte; esta hoja solo pone el PISO.
   Se carga la ÚLTIMA en index.html (después de sin-sombras.css). Solo CSS, sin JS.
   ============================================================ */

/* El color del cuerpo: Noche azul en oscuro, blanco en claro */
:root, [data-theme='dark'] { --leg-rgb: 10, 16, 40; }
[data-theme='light'] { --leg-rgb: 255, 255, 255; }

/* ---------- 1 · Con foto de fondo: piso de cuerpo para todo el vidrio ---------- */
body[data-wallpaper='set'] {
  /* Todos los niveles .glass-* suman este piso a su alfa (el gestor del fondo puede subirlo, nunca bajarlo) */
  --glass-boost: calc(var(--glass-surface-boost, 0) + max(var(--glass-legibility-boost, 0), .42));
  /* Lo que pinta con las variables simples (chips, órdenes, campos, botones) */
  --glass-bg:        rgba(var(--leg-rgb), .56);
  --glass-bg-soft:   rgba(var(--leg-rgb), .46);
  --glass-bg-input:  rgba(var(--leg-rgb), .52);
  --glass-bg-strong: rgba(var(--leg-rgb), .70);
  --glass-bg-hover:  rgba(var(--leg-rgb), .76);
  --glass-bg-active: rgba(var(--leg-rgb), .82);
}
/* La foto misma: un velo mínimo (el gestor del fondo puede poner más, nunca menos) */
body[data-wallpaper='set'] .wallpaper-layer .bg-image::before {
  background: rgba(var(--bg-scrim-rgb, 0, 0, 0), max(var(--bg-scrim-a, 0), .18));
}

/* ---------- 2 · Dashboard: los chips de período ---------- */
body[data-wallpaper='set'] .date-range__chip {
  color: var(--text-primary);
  background: rgba(var(--leg-rgb), .64);
}
body[data-wallpaper='set'] .date-range__chip:hover { background: rgba(var(--leg-rgb), .78); }
/* el activo ya es sólido (action-primary) y se queda igual */

/* ---------- 3 · La franja de abajo (Sistema Online · Premium · fecha y hora) ---------- */
body[data-wallpaper='set'] .footer {
  background: rgba(var(--leg-rgb), .84);
  color: var(--text-secondary);
}
body[data-wallpaper='set'] .footer__brand { color: var(--text-primary); }

/* ---------- 4 · Portal del técnico: órdenes, tarjetas y secciones ---------- */
body[data-wallpaper='set'] .pt-orden,
body[data-wallpaper='set'] .ptx-card,
body[data-wallpaper='set'] .pt-card,
body[data-wallpaper='set'] .pt-ruta,
body[data-wallpaper='set'] .pt-parada {
  background: rgba(var(--leg-rgb), .68);
}
body[data-wallpaper='set'] .ptx { --ptx-superficie: rgba(255, 255, 255, .84); --ptx-suave: rgba(15, 23, 42, .06); }
[data-theme='dark'] body[data-wallpaper='set'] .ptx { --ptx-superficie: rgba(10, 16, 40, .66); --ptx-suave: rgba(255, 255, 255, .07); }

/* ---------- 5 · Portal: la barra «Mi taller / Pedir piezas» pegada arriba ----------
   Karla: al bajar se queda pegada y deja ver debajo los botones de la tarjeta de la ruta (Llamar / WhatsApp / Cómo
   llegar), «como montados sobre ella». Sigue pegada (es útil) pero con cuerpo sólido y su sitio, con y sin foto. */
.ptx .pt-tabs,
.pt-wrap.pm .pt-tabs {
  position: sticky; top: 0; z-index: 40;
  padding: 6px;
  background: rgba(var(--leg-rgb), .94);
  border: 1px solid var(--glass-border);
}
[data-theme='light'] .ptx .pt-tabs,
[data-theme='light'] .pt-wrap.pm .pt-tabs { background: rgba(255, 255, 255, .96); }
/* los botones de la ruta (Llamar / WhatsApp / Cómo llegar / Waze / Google Maps) no se tocan: solo quedan debajo de la barra */