/* ============================================================
   DANGOFE OS · TALLER: TODO EN EL CRISTAL DE LA BANDEJA, POR CAPAS (prefijo tgl-) · v1.0.1 · 2026-10-29 · chat de Diseño · CSS
   v1.0.1 (foto 38, Karla: «esa división no se ve bien… y en negro esto tiene que tomar otro norte»; eligió «una sola capa»
   y después: «aún no me agrada el cambio de color en el liquid glass»; de 3 eligió «sobre el borde» → 1 · Solo el borde):
     · NADA cambia de color dentro del cristal: lo de adentro lleva el mismo tinte que su bloque y se distingue solo por su borde
       (--tgl-dentro = --tgl-bg y --tgl-dentro-bd = --tgl-bd). Antes iba en una capa más clara (34 % blanco / 7 % en Noche azul).
     · La lista de Servicios es UNA sola capa del mismo cristal con borde fino y esquinas de 16 px; las filas ya no son cuadros
       sueltos (sin fondo, sin radio, sin la rayita pegada a las esquinas): las separa una rayita fina que empieza en el texto
       (12 px), oscura tenue en claro y blanca tenue en Noche azul. Al tocar una fila se ilumina apenas.
   Karla: «ese liquid glass que tú utilizaste en la cabecera del taller justo en Novedades y Cobros es el mismo que quiero para todo
   ese módulo, hazme 3 variantes». De 3 (1 Igual que la bandeja · 2 Más desenfoque · 3 Por capas) ELIGIÓ «por capas» → 3.
   Ese cristal es el de la bandeja de botones de la cabecera: casi transparente (7 % de tinte en claro, 8 % blanco en Noche azul),
   su borde claro y desenfoque 18 px con saturación 1.5. Las tarjetas del Taller eran otro cristal (lechoso al 76 %, o azul noche
   al 70 %, desenfoque 14 px). Los valores van escritos porque dentro del Taller --glass-bg-strong está cambiada al lechoso.
   Por capas: los bloques (tarjetas, «El día de los técnicos», las bolitas de la derecha, lo que se despliega) con ese cristal; lo de
   adentro (botones, chips, buscador, selector, píldoras, flechas, la lista) en su propia capa encima, del mismo cristal (v1.0.1).
   La letra gris de apoyo (--tp-txt3) un punto más de contraste para leerse sobre el cristal.
   Solo dentro del Taller (.tal-wrap.tp); lo que tapa la pantalla (#tal-modalzone) se queda como está. Sin sombras. Los botones
   rojos y llenos, los colores de cada estado y de cada cuadro de «Lo pendiente del taller» no cambian. Nada se mueve.
   Se enciende sola al cargarse. <html data-tgl="no"> la apaga. Va después de taller.css, taller-panel.css, novedades-modulo.css y taller-rojo.css.
   ============================================================ */

/* los tokens: --tgl-bg/--tgl-bd/--tgl-filtro = la bandeja tal cual (--glass-bg-strong y --glass-border de :root);
   --tgl-dentro/--tgl-dentro-bd = lo de adentro: el MISMO cristal (sin cambio de color); --tgl-raya = la rayita entre filas */
html:not([data-tgl='no']) .tal-wrap.tp { --tgl-bg: rgba(30, 32, 40, .07); --tgl-bd: rgba(180, 205, 230, .42); --tgl-filtro: blur(18px) saturate(1.5);
  --tgl-dentro: var(--tgl-bg); --tgl-dentro-bd: var(--tgl-bd); --tgl-raya: rgba(15, 23, 42, .10); --tgl-toca: rgba(255, 255, 255, .16); }
html:not([data-tgl='no'])[data-theme='dark'] .tal-wrap.tp { --tgl-bg: rgba(255, 255, 255, .08); --tgl-bd: rgba(255, 255, 255, .14);
  --tgl-raya: rgba(255, 255, 255, .10); --tgl-toca: rgba(255, 255, 255, .05); }

/* los bloques: tarjetas, «El día de los técnicos», las bolitas de la derecha (Caja, Retiros, Compras…) y lo que se despliega */
html:not([data-tgl='no']) .tal-wrap.tp .tal-card:not(#tal-modalzone *),
html:not([data-tgl='no']) .tal-wrap.tp .tal-cierre,
html:not([data-tgl='no']) .tal-wrap.tp .tal-head,
html:not([data-tgl='no']) .tal-wrap.tp .tp-bolita,
html:not([data-tgl='no']) .tal-wrap.tp .tp-plegable__cuerpo:not(#tal-modalzone *) {
  background-color: var(--tgl-bg) !important; background-image: none !important; border-color: var(--tgl-bd) !important;
  -webkit-backdrop-filter: var(--tgl-filtro) !important; backdrop-filter: var(--tgl-filtro) !important; }

/* lo de adentro: botones, chips, buscador, selector, píldoras y flechas de cada fila (sin desenfoque propio: ya lo da su bloque) */
html:not([data-tgl='no']) .tal-wrap.tp .tal-btn:not(.tal-btn--pri):not(.tal-btn--primary):not(#tal-modalzone *),
html:not([data-tgl='no']) .tal-wrap.tp .tal-chip:not(.tal-chip--on):not(#tal-modalzone *),
html:not([data-tgl='no']) .tal-wrap.tp .tal-refrescar,
html:not([data-tgl='no']) .tal-wrap.tp .tal-buscador__inp,
html:not([data-tgl='no']) .tal-wrap.tp .tal-foot__sel,
html:not([data-tgl='no']) .tal-wrap.tp .tal-pag-btn,
html:not([data-tgl='no']) .tal-wrap.tp .tal-facpill,
html:not([data-tgl='no']) .tal-wrap.tp .tal-srv__go,
html:not([data-tgl='no']) .tal-wrap.tp .tal-srv__eqico,
html:not([data-tgl='no']) .tal-wrap.tp .tal-ing__vacio,
html:not([data-tgl='no']) .tal-wrap.tp .tal-card input:not([type='checkbox']):not([type='radio']):not(#tal-modalzone *) {
  background-color: var(--tgl-dentro) !important; border-color: var(--tgl-dentro-bd) !important; }

/* las novedades en línea (dentro de Notificaciones) con el mismo cristal */
html:not([data-tgl='no']) .tal-wrap.tp .nvm-hoja--linea { background-color: transparent !important; border-color: var(--tgl-bd) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html:not([data-tgl='no']) .tal-wrap.tp .nvm-hoja--linea .nvm-it,
html:not([data-tgl='no']) .tal-wrap.tp .nvm-hoja--linea .nvm-guia,
html:not([data-tgl='no']) .tal-wrap.tp .nvm-hoja--linea .nvm-b--mini { background-color: var(--tgl-dentro) !important; border-color: var(--tgl-dentro-bd) !important; }

/* la lista de Servicios: una sola capa del mismo cristal con su borde; las filas sin cuadro, separadas por una rayita desde el texto */
html:not([data-tgl='no']) .tal-wrap.tp .tal-lista-card .tal-srv-lista { background: var(--tgl-dentro); border: 1px solid var(--tgl-dentro-bd); border-radius: 16px; overflow: hidden; }
html:not([data-tgl='no']) .tal-wrap.tp .tal-lista-card .tal-srv { background-color: transparent; border-bottom: 0; border-radius: 0; position: relative; }
html:not([data-tgl='no']) .tal-wrap.tp .tal-lista-card .tal-srv + .tal-srv::before { content: ''; position: absolute; top: 0; left: 12px; right: 0; height: 1px; background: var(--tgl-raya); pointer-events: none; }
html:not([data-tgl='no']) .tal-wrap.tp .tal-lista-card .tal-srv:hover,
html:not([data-tgl='no']) .tal-wrap.tp .tal-lista-card .tal-srv:focus-visible { background-color: var(--tgl-toca); }

/* en el cristal transparente la letra gris se pierde con la foto detrás: un punto más de contraste para la letra de apoyo */
html:not([data-tgl='no']) .tal-wrap.tp { --tp-txt3: #3b4663; }
html:not([data-tgl='no'])[data-theme='dark'] .tal-wrap.tp { --tp-txt3: #c9d3ea; }