/* =====================================================================
   VetUy · ajustes 3b.8 (pedido de Jorge, 25/10/2026). Se carga DESPUÉS de ajustes_3b7.css (templates/_v3_head.html).
   Todo va en el MODO NOCHE: en el modo día no cambia nada.
   Jorge quiere MÁS transparencia: tarjetas de vidrio esmerilado (glassmorphism). Mismas tarjetas y mismas exclusiones
   que la 3b.7 (menús, ventanas, avisos, comprobantes, firma, cabeceras de tablas y campos quedan opacos).
   1. Relleno: el azul del panel baja del 78 % al 45 % de opacidad, con un brillo suave arriba (blanco 10 % a 2 %).
   2. Vidrio: desenfoque de 16 px con saturación 140 % detrás de la tarjeta.
   3. Borde de 1 px blanco al 14 %, con el canto de arriba un poco más claro (sombra interna blanca al 10 %) y una sombra
      oscura suave para que la tarjeta flote. Las tarjetas del panel y de Mantenimiento conservan su borde de color
      (acento), y las que tienen raya de color a un lado conservan la raya.
   4. Una tarjeta dentro de otra: vidrio más liviano (velo azul al 12 %, sin desenfoque propio).
   5. Para que el vidrio tenga algo que mostrar, la marca de agua del fondo (3b.6) sube de 10 % a 12 % (el tope de Jorge).
   Las tarjetas con menús, ventanas o avisos adentro siguen sin desenfoque (ver 3b.7). Con alto contraste no hay imagen.

   Contraste (WCAG AA = 4,5:1), peor caso. El punto más claro del fondo, con la imagen al 12 %, es (18, 34, 52); con la
   saturación 140 % del vidrio queda (13, 34, 59). Sobre ese punto, la parte más clara de la tarjeta (acento al 30 % sobre
   --sup, a 45 %, más el brillo blanco al 10 %) queda (44, 67, 102) con el azul de la marca y (42, 80, 96) con el turquesa
   (--acc) de las tarjetas del panel:
     --tx   (#F3EEE3): 8,6:1 sobre el azul, 7,5:1 sobre el turquesa
     --tx-2 (#B7BED2): 5,4:1 sobre el azul, 4,7:1 sobre el turquesa
     --tx-3 (#8E98B3): 3,5:1 sobre el azul y 3,0:1 sobre el turquesa  <- NO llega
   Por eso dentro de las tarjetas --tx-3 es --tx-2 al 97 % sobre --fondo (#B2B9CD): 5,1:1 sobre el azul; en las tarjetas
   del panel (que pueden llevar turquesa) es --tx-2: 4,7:1. Todo AA. (La prueba pruebas_unidad/test_arreglo_3b8.py
   recalcula estos números.)
   ===================================================================== */

/* ---------- 1. Fondo de Jorge: un poco más visible (10 % -> 12 %) ---------- */
html:not([data-modo="dia"]):not(.alto-contraste):not([class*="a11y-hc-"]) body:has(.app)::before {
  opacity: .12;
}

/* ---------- 2. Vidrio en todas las tarjetas ---------- */
html:not([data-modo="dia"]) body:has(.app) :is(.card,
  .tarjeta:not(.tarjeta--plana),
  .kpi-card,
  .chart-card,
  .archivo-card,
  .ficha-card,
  .tarjeta-blanca,
  .card-blanca,
  .stat-card,
  .tarjeta-grafico,
  .tarjeta-mes,
  .producto-card,
  .mascota-card,
  .intern-card,
  .campo-card,
  .fila-tarjeta,
  .tarjeta-servicio,
  .tarjeta-rese,
  .grafico-caja,
  .card-form,
  .card-comprobante,
  .card-pdf,
  .card-estado,
  .pub-card,
  .rol-pill:not(.activo),
  .foto-subida,
  .tarjeta-ruta,
  .kpi-box,
  .pedido-admin,
  .prod-admin-row,
  .item-vc,
  .panel-ia,
  .etiqueta,
  .tarjeta-hub,
  .tarjeta-mod,
  .tarjeta-mant,
  .kpi-gan,
  .kpi-venta):not(.ticket):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--et, var(--marca-azul)) 30%, var(--sup)) 45%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--et, var(--marca-azul)) 10%, var(--sup-2)) 45%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  --tx-3: color-mix(in srgb, var(--tx-2) 97%, var(--fondo));
}
/* las tarjetas del panel pueden llevar el turquesa (el más claro): ahí el texto tenue es el texto medio */
html:not([data-modo="dia"]) body:has(.app) :is(.etiqueta, .tarjeta-hub, .tarjeta-mod, .tarjeta-mant, .kpi-gan, .kpi-venta):not(.ticket):not(#_3b7):not(#_3b8):not(#_3b8b) {
  --tx-3: var(--tx-2);
}
/* con un menú, una ventana o un aviso adentro: sin desenfoque (ver 3b.7) */
html:not([data-modo="dia"]) body:has(.app) :is(.card,
  .tarjeta:not(.tarjeta--plana),
  .kpi-card,
  .chart-card,
  .archivo-card,
  .ficha-card,
  .tarjeta-blanca,
  .card-blanca,
  .stat-card,
  .tarjeta-grafico,
  .tarjeta-mes,
  .producto-card,
  .mascota-card,
  .intern-card,
  .campo-card,
  .fila-tarjeta,
  .tarjeta-servicio,
  .tarjeta-rese,
  .grafico-caja,
  .card-form,
  .card-comprobante,
  .card-pdf,
  .card-estado,
  .pub-card,
  .rol-pill:not(.activo),
  .foto-subida,
  .tarjeta-ruta,
  .kpi-box,
  .pedido-admin,
  .prod-admin-row,
  .item-vc,
  .panel-ia,
  .etiqueta,
  .tarjeta-hub,
  .tarjeta-mod,
  .tarjeta-mant,
  .kpi-gan,
  .kpi-venta):has(.dropdown-menu, .modal, .offcanvas, .popover, .toast, [data-bs-toggle="dropdown"]):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* borde de vidrio y sombra para que floten (las tarjetas del panel y de Mantenimiento conservan su borde de color) */
html:not([data-modo="dia"]) body:has(.app) :is(.card,
  .tarjeta:not(.tarjeta--plana),
  .kpi-card,
  .chart-card,
  .archivo-card,
  .ficha-card,
  .tarjeta-blanca,
  .card-blanca,
  .stat-card,
  .tarjeta-grafico,
  .tarjeta-mes,
  .producto-card,
  .mascota-card,
  .intern-card,
  .campo-card,
  .fila-tarjeta,
  .tarjeta-servicio,
  .tarjeta-rese,
  .grafico-caja,
  .card-form,
  .card-comprobante,
  .card-pdf,
  .card-estado,
  .pub-card,
  .rol-pill:not(.activo),
  .foto-subida,
  .tarjeta-ruta,
  .kpi-box,
  .pedido-admin,
  .prod-admin-row,
  .item-vc,
  .panel-ia):not(.ticket):not(.ficha-eco):not(.ficha-cirugia):not(.ficha-rx):not(.ficha-internado):not(.card-plan):not(.card-benef):not(.card-serv):not(.tarjeta-empleado):not(.pedido-admin):not(.kpi-principal):not(.tarjeta--destacada):not(.rol-pill):not(.kpi-card.dorada):not(.kpi-card.verde):not(.kpi-card.roja):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  border-color: rgba(255, 255, 255, .14) !important;
}
html:not([data-modo="dia"]) body:has(.app) :is(.ficha-eco,
  .ficha-cirugia,
  .ficha-rx,
  .ficha-internado,
  .card-plan,
  .card-benef,
  .card-serv,
  .tarjeta-empleado,
  .pedido-admin):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  border-top-color: rgba(255, 255, 255, .14); border-right-color: rgba(255, 255, 255, .14); border-bottom-color: rgba(255, 255, 255, .14);
}
html:not([data-modo="dia"]) body:has(.app) :is(.kpi-card.dorada,
  .kpi-card.verde,
  .kpi-card.roja):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  border-right-color: rgba(255, 255, 255, .14); border-bottom-color: rgba(255, 255, 255, .14); border-left-color: rgba(255, 255, 255, .14);
}
html:not([data-modo="dia"]) body:has(.app) :is(.card,
  .tarjeta:not(.tarjeta--plana),
  .kpi-card,
  .chart-card,
  .archivo-card,
  .ficha-card,
  .tarjeta-blanca,
  .card-blanca,
  .stat-card,
  .tarjeta-grafico,
  .tarjeta-mes,
  .producto-card,
  .mascota-card,
  .intern-card,
  .campo-card,
  .fila-tarjeta,
  .tarjeta-servicio,
  .tarjeta-rese,
  .grafico-caja,
  .card-form,
  .card-comprobante,
  .card-pdf,
  .card-estado,
  .pub-card,
  .rol-pill:not(.activo),
  .foto-subida,
  .tarjeta-ruta,
  .kpi-box,
  .pedido-admin,
  .prod-admin-row,
  .item-vc,
  .panel-ia,
  .etiqueta,
  .tarjeta-hub,
  .tarjeta-mod,
  .tarjeta-mant,
  .kpi-gan,
  .kpi-venta):not(.tarjeta--destacada):not(:hover):not(.ticket):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 28px -10px rgba(0, 0, 0, .5) !important;
}
/* ---------- 3. Una tarjeta dentro de otra: vidrio liviano ---------- */
html:not([data-modo="dia"]) body:has(.app) :is(.card, .tarjeta:not(.tarjeta--plana), .kpi-card, .chart-card, .archivo-card, .ficha-card, .tarjeta-blanca, .card-blanca, .stat-card, .tarjeta-grafico, .tarjeta-mes, .producto-card, .mascota-card, .intern-card, .campo-card, .fila-tarjeta, .tarjeta-servicio, .tarjeta-rese, .grafico-caja, .card-form, .card-comprobante, .card-pdf, .card-estado, .pub-card, .rol-pill:not(.activo), .foto-subida, .tarjeta-ruta, .kpi-box, .pedido-admin, .prod-admin-row, .item-vc, .panel-ia, .etiqueta, .tarjeta-hub, .tarjeta-mod, .tarjeta-mant, .kpi-gan, .kpi-venta) :is(.card, .tarjeta:not(.tarjeta--plana), .kpi-card, .chart-card, .archivo-card, .ficha-card, .tarjeta-blanca, .card-blanca, .stat-card, .tarjeta-grafico, .tarjeta-mes, .producto-card, .mascota-card, .intern-card, .campo-card, .fila-tarjeta, .tarjeta-servicio, .tarjeta-rese, .grafico-caja, .card-form, .card-comprobante, .card-pdf, .card-estado, .pub-card, .rol-pill:not(.activo), .foto-subida, .tarjeta-ruta, .kpi-box, .pedido-admin, .prod-admin-row, .item-vc, .panel-ia, .etiqueta, .tarjeta-hub, .tarjeta-mod, .tarjeta-mant, .kpi-gan, .kpi-venta):not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b8) {
  background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)),
    color-mix(in srgb, var(--marca-azul) 12%, transparent) !important;
  border-color: rgba(255, 255, 255, .08) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* ---------- 4. Listas (list-group) sueltas ---------- */
html:not([data-modo="dia"]) body:has(.app) .list-group:not(.list-group-flush):not(:is(.card, .tarjeta, .kpi-card, .chart-card, .modal, .dropdown-menu, .popover, .offcanvas, .toast, .ticket, .canvas-wrap) *):not(#_3b7):not(#_3b8) {
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 30%, var(--sup)) 45%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 10%, var(--sup-2)) 45%, transparent) 100%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 28px -10px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
html:not([data-modo="dia"]) body:has(.app) .list-group:not(.list-group-flush):not(:is(.card, .tarjeta, .kpi-card, .chart-card, .modal, .dropdown-menu, .popover, .offcanvas, .toast, .ticket, .canvas-wrap) *):not(#_3b7):not(#_3b8) > .list-group-item {
  --bs-list-group-border-color: rgba(255, 255, 255, .10);
}