/* ============================================================
   DANGOFE OS · TALLER POWER WAVE: «CAJA ROJA» (prefijo tid-) · v1.0.4 · 2026-11-02 · chat de Diseño · CSS
   Karla (fotos 41 y 42): «no me siento complacida como se ve el taller, puedes hacerme 5 versiones diferentes con liquid glass…
   que me ayuden con la identidad visual del taller de Power Wave… el rojo y los colores del logo». De 5 (1 Cristal claro · 2 Vidrio
   ahumado · 3 Caja roja · 4 Esmerilado · 5 Borde prisma) dijo «me gusta tu recomendación, puedes mandar a ejecutarla» y eligió
   «3 · Caja roja».
   Como el logo: la caja roja de «POWER» con letra blanca y «WAVE» sobre blanco.
     · En vidrio rojo (#EC3237 al 82 %, desenfoque 18 px) y letra blanca: el nombre del Taller y su línea, los botones de arriba
       (Novedades, actualizar, Cobros, Mantenimientos, Configuración, Guía), el cuadrito de cada sección (Notificaciones, El día de
       los técnicos, Lo pendiente, Servicios) y las bolitas de la derecha (Caja, Retiros, Compras…). El cuadrito del Taller, blanco
       con el maletín rojo.
     · En vidrio blanco (58 %, desenfoque 20 px, un brillo arriba que se apaga): las tarjetas, «El día de los técnicos» y lo que se
       despliega. Lo de adentro (la lista, los cuadros de «Lo pendiente», botones, chips, buscador, pastillas) en una capa blanca.
     · Los números de «Lo pendiente» en rojo; los tickets en rojo como siempre; «Todos» y los botones principales, rojos llenos.
     · «Noche azul»: el vidrio blanco pasa a azul noche (80 %) y el rojo a uno más hondo (#C8191F al 72 %).
   Se queda: todo en su sitio (solo cambia cómo se ve), los colores de cada estado y de cada cuadro de «Lo pendiente», sin sombras
   (el brillo es un degradado), nada se mueve. Solo el Taller: la cabecera con data-mcab-modulo="taller" y lo que está dentro de
   .tal-wrap.tp. Eso incluye la ficha (#tal-detzone) y «Recepcionar equipo» (#tal-recepzone, dentro de Servicios): Karla decidió que lleve la
   Caja roja. Las ventanas que tapan la pantalla viven en <body>, fuera de .tal-wrap: no cambian. El panel del técnico no cambia.
   v1.0.1: las reglas llevan :not(#tal-modalzone *) y los valores van en los hijos de .tal-wrap.tp menos #tal-modalzone, por si algo se
   pinta ahí algún día; hoy esa zona siempre está vacía.
   v1.0.2 (orden de Karla, medido por Dangofe en la réplica): en claro, la línea bajo el nombre del Taller se lee sobre foto clara (la caja
   del nombre en rojo hondo al 86 % y la línea en blanco entero); en Noche azul, los cuadros de escribir vuelven a su fondo azul noche
   al 72 % y su texto de ejemplo es claro: se leen con foto clara y con foto oscura.
   v1.0.3 (orden de Karla, medido por Dangofe; todo en Noche azul, para que se lea con foto clara; en claro no cambia nada): el vidrio azul
   noche al 80 %, lo de adentro en azul noche (--tid-dentro) y no en blanco al 6 %, el panel de la ficha oscuro (--tp-card2, --tp-card3,
   --tp-tile), rojo y letra de apoyo más claros, y los nombres bajo las bolitas en su propia cápsula de vidrio.
   v1.0.4 (Karla: «sí, corrígelos»): en claro, los botones de arriba llevan el mismo rojo hondo de la caja del nombre; en Noche azul, la línea bajo el nombre en blanco entero.
   Va DESPUÉS de taller-cristal.css (lo usa de base: le cambia sus valores --tgl-* y le gana donde hace falta).
   Se enciende sola al cargarse. <html data-tid="no"> la apaga (vuelve el cristal de hoy).
   ============================================================ */

/* ---------- los valores (claro) ---------- */
html:not([data-tid='no']) .tal-wrap.tp, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] {
  --tid-rojo: #ec3237; --tid-rojo-txt: #c8191f; --tid-txt: #0b1020; --tid-txt2: #3d4458; --tid-txt3: #5f6678;
  --tid-bg: rgba(255, 255, 255, .58); --tid-brillo: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%);
  --tid-bd: rgba(255, 255, 255, .85); --tid-filtro: blur(20px) saturate(1.6);
  --tid-dentro: rgba(255, 255, 255, .55); --tid-dentro-bd: rgba(11, 16, 32, .08); --tid-raya: rgba(11, 16, 32, .08); --tid-toca: rgba(255, 255, 255, .35);
  --tid-caja: rgba(236, 50, 55, .82); --tid-caja-bd: rgba(255, 140, 143, .9); --tid-caja-filtro: blur(18px) saturate(1.5);
  --tid-caja-brillo: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  --tid-nombre: rgba(200, 25, 31, .86); --tid-linea: #fff; }
/* ---------- Noche azul ---------- */
html:not([data-tid='no'])[data-theme='dark'] .tal-wrap.tp, html:not([data-tid='no'])[data-theme='dark'] .mcab[data-mcab-modulo='taller'] {
  --tid-rojo-txt: #ff8f93; --tid-txt: #eef1ff; --tid-txt2: #b6bfdf; --tid-txt3: #c9d3ea;
  --tid-bg: rgba(10, 18, 46, .8); --tid-brillo: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 50%); --tid-bd: rgba(255, 255, 255, .14);
  --tid-dentro: rgba(14, 24, 66, .58); --tid-dentro-bd: rgba(255, 255, 255, .12); --tid-raya: rgba(255, 255, 255, .1); --tid-toca: rgba(255, 255, 255, .05);
  --tid-caja: rgba(200, 25, 31, .72); --tid-caja-bd: rgba(255, 120, 124, .55);
  --tid-nombre: var(--tid-caja); --tid-linea: #fff; }

/* el cristal de hoy (taller-cristal.css) con estos valores: así lo que él pinta (las novedades en línea, la lista) sale igual.
   v1.0.1: van en cada hijo de .tal-wrap.tp menos #tal-modalzone (hoy siempre vacía); la ficha (#tal-detzone) y «Recepcionar equipo»
   (#tal-recepzone) son parte del Taller y llevan la caja roja. */
html:not([data-tid='no']) .tal-wrap.tp > :not(#tal-modalzone) { --tgl-bg: var(--tid-bg); --tgl-bd: var(--tid-bd); --tgl-filtro: var(--tid-filtro); --tgl-dentro: var(--tid-dentro);
  --tgl-dentro-bd: var(--tid-dentro-bd); --tgl-raya: var(--tid-raya); --tgl-toca: var(--tid-toca);
  --tp-txt: var(--tid-txt); --tp-txt2: var(--tid-txt2); --tp-txt3: var(--tid-txt3); --tp-borde: var(--tid-raya); --tp-borde2: var(--tid-dentro-bd);
  --tp-card2: var(--tid-dentro); --tp-card3: var(--tid-dentro); --tp-tile: var(--tid-dentro); color: var(--tid-txt); }
html:not([data-tid='no'])[data-theme='dark'] .tal-wrap.tp > :not(#tal-modalzone) { --tp-card2: rgba(14, 24, 66, .72); --tp-card3: rgba(18, 30, 78, .72); --tp-tile: rgba(59, 130, 246, .24); } /* v1.0.3: el panel de la ficha */

/* ---------- los bloques: vidrio blanco con su brillo ---------- */
html:not([data-tid='no']) body .tal-wrap.tp .tal-card:not(#tal-modalzone *), html:not([data-tid='no']) body .tal-wrap.tp .tal-cierre,
html:not([data-tid='no']) body .tal-wrap.tp .tal-head, html:not([data-tid='no']) body .tal-wrap.tp .tp-plegable__cuerpo:not(#tal-modalzone *) {
  background-color: var(--tid-bg) !important; background-image: var(--tid-brillo) !important; border: 1px solid var(--tid-bd) !important;
  -webkit-backdrop-filter: var(--tid-filtro) !important; backdrop-filter: var(--tid-filtro) !important; box-shadow: none !important; color: var(--tid-txt) !important; }
html:not([data-tid='no']) body .tal-wrap.tp .tal-card:not(#tal-modalzone *), html:not([data-tid='no']) body .tal-wrap.tp .tal-cierre { border-radius: 20px !important; }

/* ---------- la caja roja: el nombre, los botones de arriba, los cuadritos de cada sección y las bolitas ---------- */
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab__t { padding: 10px 16px; border-radius: 18px; background: var(--tid-nombre); border: 1px solid var(--tid-caja-bd);
  -webkit-backdrop-filter: var(--tid-caja-filtro); backdrop-filter: var(--tid-caja-filtro); }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab__nom { color: #fff; }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab__linea { color: var(--tid-linea); }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab__tile { background: #fff !important; color: var(--tid-rojo) !important; }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda,
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .tal-refrescar {
  background-color: var(--tid-nombre) !important; background-image: var(--tid-caja-brillo) !important; border: 1px solid var(--tid-caja-bd) !important;
  -webkit-backdrop-filter: var(--tid-caja-filtro) !important; backdrop-filter: var(--tid-caja-filtro) !important; box-shadow: none !important; color: #fff !important; }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda,
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn { border-radius: 16px !important; }
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn svg, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn svg,
html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda svg, html:not([data-tid='no']) .mcab[data-mcab-modulo='taller'] .tal-refrescar svg { color: #fff !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-notif__cab > svg, html:not([data-tid='no']) .tal-wrap.tp .tal-cierre > summary > svg, html:not([data-tid='no']) .tal-wrap.tp .tal-lista-head__ico:not(#tal-modalzone *) {
  background: var(--tid-caja) !important; border: 1px solid var(--tid-caja-bd); color: #fff !important; }
html:not([data-tid='no']) body .tal-wrap.tp .tp-bolita {
  background-color: var(--tid-caja) !important; background-image: var(--tid-caja-brillo) !important; border: 1px solid var(--tid-caja-bd) !important;
  -webkit-backdrop-filter: var(--tid-caja-filtro) !important; backdrop-filter: var(--tid-caja-filtro) !important; box-shadow: none !important; color: #fff !important; }
html:not([data-tid='no']) .tal-wrap.tp .tp-bolita__t { color: var(--tid-txt) !important; }

/* ---------- lo de adentro: una capa blanca ---------- */
/* v1.0.1: todo con :not(#tal-modalzone *) (esa zona hoy siempre está vacía) */
html:not([data-tid='no']) .tal-wrap.tp .tal-kpi:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-chip:not(.tal-chip--on):not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-facpill:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-srv__go:not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-pag-btn:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-foot__sel:not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-btn:not(.tal-btn--pri):not(.tal-btn--primary):not(.tal-btn--danger):not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-notif__chev:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-srv__eqico:not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-ing__vacio:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-buscador__inp:not(#tal-modalzone *),
html:not([data-tid='no']) body .tal-wrap.tp .tal-card input:not([type='checkbox']):not([type='radio']):not(#tal-modalzone *) {
  background-color: var(--tid-dentro) !important; background-image: none !important; border-color: var(--tid-dentro-bd) !important; box-shadow: none !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-kpi:not(#tal-modalzone *) { border-radius: 14px !important; color: var(--tid-txt) !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-kpi__glow:not(#tal-modalzone *) { display: none !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-kpi__num:not(#tal-modalzone *) { color: var(--tid-rojo-txt) !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-kpi__ttl:not(#tal-modalzone *) { color: var(--tid-txt2) !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-lista-card .tal-srv-lista { border-radius: 14px; }
html:not([data-tid='no']) .tal-wrap.tp .tal-chip--on:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-btn--pri:not(#tal-modalzone *),
html:not([data-tid='no']) .tal-wrap.tp .tal-btn--primary:not(#tal-modalzone *) {
  background: var(--tid-rojo) !important; background-image: none !important; border-color: var(--tid-rojo) !important; color: #fff !important; }
html:not([data-tid='no']) .tal-wrap.tp .tal-srv__num:not(#tal-modalzone *), html:not([data-tid='no']) .tal-wrap.tp .tal-mono:not(#tal-modalzone *) { color: var(--tid-rojo-txt) !important; }

/* v1.0.2 · Noche azul: los cuadros de escribir (ficha, Recepcionar equipo, buscadores) con fondo azul noche y su texto de ejemplo claro */
html:not([data-tid='no'])[data-theme='dark'] body .tal-wrap.tp :is(input:not([type='checkbox']):not([type='radio']), textarea, select):not(#tal-modalzone *) { background-color: rgba(18, 30, 78, .72) !important; }
html:not([data-tid='no'])[data-theme='dark'] body .tal-wrap.tp :is(input, textarea):not(#tal-modalzone *)::placeholder { color: #c3cbe6 !important; opacity: 1; }

/* v1.0.3 · Noche azul: los nombres bajo las bolitas van sobre la foto, sin nada debajo: su propia cápsula de vidrio */
html:not([data-tid='no'])[data-theme='dark'] body .tal-wrap.tp .tp-bolita__t { padding: 2px 8px; border-radius: 999px; background: rgba(10, 18, 46, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }