/* ============================================================
   DANGOFE OS · SERVICIOS · EL VIDRIO DEL SISTEMA (servicios-vidrio.css) · v1.1.0 · 2026-10-23 · chat de Diseño
   Karla (23-oct, con capturas de su iPad): «¿por qué estas sombras no están respetando el liquid glass del sistema? Es uno.»
   Hasta hoy mis pantallas de Servicios traían su PROPIO cristal (--sv-vidrio / --sv-vidrio3: blanco al 72–94 %), no el del sistema; el centro «en la página» quedó sin panel y la hoja
   completa salió blanca opaca, sin dejar ver el fondo. Esta hoja hace que tomen el cuerpo del vidrio del sistema: --leg-rgb (legible.css: blanco en claro, «Noche azul» en oscuro) con
   su borde (--glass-border) y su desenfoque, de modo que dejan ver la foto de fondo y el texto se sigue leyendo (con una foto cargada body[data-wallpaper='set'] sube el cuerpo solo).
   Va LA ÚLTIMA entre las hojas de Servicios (después de servicios-centro, servicios-tarjetas, servicios-ajustes, servicios-checklists, checklist-valor y novedades-modulo). Solo CSS, sin JS.
   Sin sombras. Toca solo: (1) el centro de avisos «en la página» (.svx-c1-centro), (2) la lista de novedades en línea (.nvm--linea), (3) la hoja completa de Ajustes y Portal (.svt-hoja--completa)
   con lo que lleva adentro (las tarjetas de configuración, «Lo que vale el checklist», el editor de checklists).
   v1.1 (23-oct): suma (4) las TARIFAS DEL CHECKLIST (checklist-tarifas.css, que va ANTES de esta hoja): sus hojas a pantalla completa (la tarifa y la categoría nueva) llevaban el cuerpo de la hoja
   al 66 % y, encima de la lista de tarifas, se veía el texto de abajo a través; ahora tienen el mismo cuerpo del editor de checklists (93 %) con su desenfoque. Lo demás de las tarifas ya tomaba el vidrio por los tokens de .sv.
   ============================================================ */
:root {
  --vd-panel: rgba(var(--leg-rgb, 255, 255, 255), .58);        /* el panel que agrupa una pantalla */
  --vd-barra: rgba(var(--leg-rgb, 255, 255, 255), .66);        /* cabecera y pie de la hoja */
  --vd-tarjeta: rgba(var(--leg-rgb, 255, 255, 255), .46);      /* una tarjeta dentro de un panel */
  --vd-fuerte: rgba(var(--leg-rgb, 255, 255, 255), .74);       /* lo que se destaca (la pestaña activa, lo nuevo) */
  --vd-editor: rgba(var(--leg-rgb, 255, 255, 255), .93);       /* el editor de checklists: formularios largos, necesita cuerpo para que no se transparente lo de atrás */
  --vd-campo: rgba(var(--leg-rgb, 255, 255, 255), .5);         /* campos de escribir */
  --vd-suelta: rgba(var(--leg-rgb, 255, 255, 255), .64);       /* una tarjeta que va directo sobre la foto de fondo (con foto cargada necesita más cuerpo) */
  --vd-borde: var(--glass-border, rgba(255, 255, 255, .55));
  --vd-borde-alto: var(--glass-border-top, rgba(255, 255, 255, .8));
  --vd-vidrio: blur(30px) saturate(165%);
  --vd-vidrio-hoja: blur(44px) saturate(170%);
}
[data-theme='dark'] {
  --vd-panel: rgba(var(--leg-rgb, 10, 16, 40), .52);
  --vd-barra: rgba(var(--leg-rgb, 10, 16, 40), .62);
  --vd-tarjeta: rgba(var(--leg-rgb, 10, 16, 40), .42);
  --vd-fuerte: rgba(var(--leg-rgb, 10, 16, 40), .72);
  --vd-campo: rgba(var(--leg-rgb, 10, 16, 40), .48);
  --vd-suelta: rgba(var(--leg-rgb, 10, 16, 40), .6);
  --vd-editor: rgba(var(--leg-rgb, 10, 16, 40), .9);
}

/* ---------- 1 · el centro de avisos «en la página»: ahora lleva su panel de cristal ---------- */
html .svx-c1-centro.svce {
  padding: 16px; border-radius: var(--radius-card, 24px); border: 1px solid var(--vd-borde); border-top-color: var(--vd-borde-alto);
  background: var(--vd-panel); -webkit-backdrop-filter: var(--vd-vidrio); backdrop-filter: var(--vd-vidrio);
  --sv-vidrio: var(--vd-tarjeta); --sv-vidrio3: var(--vd-fuerte); --sv-borde: var(--vd-borde);
}
html .svx-c1-centro.svce .svce-tabs { background: var(--vd-tarjeta); border-color: var(--vd-borde); }
html .svx-c1-centro.svce .svce-tab.is-on { background: var(--vd-fuerte); }

/* ---------- 2 · la lista de novedades en línea: vidrio, no blanco opaco ---------- */
html .nvm.nvm--linea { --nvm-card: var(--vd-tarjeta); --nvm-card2: var(--vd-tarjeta); --nvm-borde: var(--vd-borde); }
html .nvm.nvm--linea .nvm-hoja { background: var(--vd-tarjeta); border-color: var(--vd-borde); border-top-color: var(--vd-borde-alto); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
html .nvm.nvm--linea .nvm-it, html .nvm.nvm--linea .nvm-guia { background: var(--vd-tarjeta); }

/* ---------- 2b · el panel de tarjetas de Ajustes y Portal (la pantalla desde donde se abre la hoja): tarjetas de vidrio, no blancas al 90 % ---------- */
html .svt [data-svt='cab'], html .svt .svt-tar { background: var(--vd-suelta); border-color: var(--vd-borde); border-top-color: var(--vd-borde-alto); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
html .svt .svt-tar:hover { border-color: rgba(var(--sv-celrgb, 53, 146, 207), .6); }

/* ---------- 3 · la hoja completa de Ajustes y Portal: cristal sobre la foto, con barras y tarjetas de vidrio ---------- */
html:root .svt-hoja.svt-hoja--completa {
  background: var(--vd-panel); -webkit-backdrop-filter: var(--vd-vidrio-hoja); backdrop-filter: var(--vd-vidrio-hoja);
  --sv-vidrio: var(--vd-tarjeta); --sv-vidrio3: var(--vd-tarjeta); --sv-borde: var(--vd-borde); --sv-hoja: var(--vd-barra);
}
html:root .svt-hoja--completa .svt-hoja__cab, html:root .svt-hoja--completa .svt-hoja__pie { background: var(--vd-barra); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
html:root .svt-hoja--completa .svt-hoja__cab { border-bottom-color: var(--vd-borde); }
html:root .svt-hoja--completa .svt-hoja__pie { border-top-color: var(--vd-borde); }
/* lo de adentro: las tarjetas de configuración y las piezas de checklists */
html:root .svt-hoja--completa .svm-cuerpo { --aj-vidrio: var(--vd-tarjeta); --aj-borde: var(--vd-borde); --aj-campo: var(--vd-campo); }
html:root .svt-hoja--completa .svm-cuerpo .ru-autocfg, html:root .svt-hoja--completa .svm-cuerpo .cfgx-card { background: var(--vd-tarjeta); border-color: var(--vd-borde); border-top-color: var(--vd-borde-alto); }
html:root .svt-hoja--completa .sv { --sv-vidrio: var(--vd-tarjeta); --sv-vidrio3: var(--vd-tarjeta); --sv-borde: var(--vd-borde); --sv-hoja: var(--vd-barra); }
html:root .svt-hoja--completa .ckv-card, html:root .svt-hoja--completa .ckv-cardc, html:root .svt-hoja--completa .ckv-fila { background: var(--vd-tarjeta); border-color: var(--vd-borde); }
html:root .svt-hoja--completa .ckv-nota { background: rgba(var(--sv-celrgb, 53, 146, 207), .16); }
/* el editor de checklists (también a pantalla completa) y las ventanitas de adentro */
html:root .svt-hoja--completa .cke { --k-hoja: var(--vd-editor); }
html:root .svt-hoja--completa .cke-ed { background: var(--vd-editor); -webkit-backdrop-filter: var(--vd-vidrio-hoja); backdrop-filter: var(--vd-vidrio-hoja); }
html:root .svt-hoja--completa .cke[data-v][data-ancho] .cke-ed-sitio:not(:empty), html:root .svt-hoja--completa .cke[data-v] .cke-ed-sitio:not(:empty) { background: transparent; }
/* ---------- 4 · las tarifas del checklist: sus hojas a pantalla completa necesitan cuerpo (como el editor de checklists) ---------- */
html:root .svt-hoja--completa .ckt { --k-hoja: var(--vd-editor); }
html:root .svt-hoja--completa .ckt-ed { background: var(--vd-editor); -webkit-backdrop-filter: var(--vd-vidrio-hoja); backdrop-filter: var(--vd-vidrio-hoja); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html .svx-c1-centro.svce, html:root .svt-hoja.svt-hoja--completa { background: rgba(var(--leg-rgb, 255, 255, 255), .9); }
}