/* =====================================================================
   VetUy · ajustes 3b.7 (pedido de Jorge, 25/10/2026). Se carga DESPUÉS de ajustes_3b6.css (templates/_v3_head.html).
   Todo va en el MODO NOCHE: en el modo día no cambia nada.
   Jorge quiere TODAS las tarjetas en el mismo azul de las tarjetas del panel, semitransparentes, para que la marca de
   agua del fondo (3b.6) se asome apenas por detrás.
   1. Tarjetas de todas las pantallas (personal, consultorio, socio, ingreso): el azul del panel (30 % de azul de la marca
      sobre --sup, bajando a 10 % sobre --sup-2) a 78 % de opacidad y un desenfoque suave de 6 px detrás.
   2. Cada tipo de tarjeta conserva lo suyo: rayas de color a un lado, íconos, insignias, rojos/verdes/amarillos,
      el rojo de Emergencias y los acentos de Mantenimiento (3b.5). No cambian letras, tamaños, distribución ni paleta.
   3. Quedan OPACOS (van encima de otras cosas): menús desplegables, ventanas (modales), globos, avisos (toasts), los
      comprobantes para imprimir (.ticket), el cuadro de la firma (.canvas-wrap), las cabeceras fijas de las tablas y los
      campos de escribir (inputs, selects, textarea).
   4. Una tarjeta dentro de otra no se superpone: la de adentro usa el velo suave de la 3b.5 (--caja-interna).
   5. Las tarjetas con menús, ventanas o avisos adentro no llevan desenfoque: el desenfoque crea una capa nueva que
      les cambiaría la posición o los taparía. Siguen azules y semitransparentes.
   Con alto contraste no hay imagen de fondo (3b.6), así que ahí las tarjetas se ven lisas, como siempre.

   Contraste (WCAG AA = 4,5:1), peor caso. El punto más claro del fondo, ya con la imagen al 10 %, queda (17, 31, 49)
   (ver ajustes_3b6.css). Sobre ese punto, la parte más clara de la tarjeta (azul de la marca al 30 % sobre --sup, a 78 %)
   queda (27, 54, 102) y la tarjeta con acento turquesa del panel (--acc, el caso más claro) queda (23, 79, 89):
     --tx   (#F3EEE3): 10,3:1 sobre el azul, 7,9:1 sobre el turquesa
     --tx-2 (#B7BED2):  6,4:1 sobre el azul, 4,9:1 sobre el turquesa
     --tx-3 (#8E98B3):  4,1:1 sobre el azul y 3,2:1 sobre el turquesa  <- NO llegaba
   Por eso dentro de las tarjetas el texto tenue (--tx-3) pasa a ser --tx-2 al 90 % sobre --fondo (#A6ADC0): 5,3:1 sobre
   el azul. En las tarjetas del panel (que pueden llevar turquesa) es --tx-2 (#B7BED2): 4,9:1. Todo AA. (La prueba
   pruebas_unidad/test_arreglo_3b7.py recalcula estos números.)
   ===================================================================== */

/* ---------- 1. Todas las tarjetas: el azul del panel, a 78 %, con el fondo de Jorge asomando ---------- */
/* (el :not(#_3b7) solo sube la prioridad para ganarle a las reglas con !important de la 3b.5 y de las pantallas) */
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) {
  background: linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--et, var(--marca-azul)) 30%, var(--sup)) 78%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--et, var(--marca-azul)) 10%, var(--sup-2)) 78%, transparent) 100%) !important;
  color: var(--tx);
  /* el texto más tenue de la tarjeta se acerca al texto medio: así da AA también sobre la parte más clara (ver arriba) */
  --tx-3: color-mix(in srgb, var(--tx-2) 90%, var(--fondo));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* si adentro hay un menú, una ventana o un aviso (que se posicionan solos), no se desenfoca: el desenfoque los taparía o los movería */
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) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* 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(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7):not(#_3b7b) {
  --tx-3: var(--tx-2);
}
/* borde azul (el de la 3b.5); las tarjetas del panel y de Mantenimiento ya lo traen, y el KPI principal sigue con su borde verde */
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) {
  border-color: var(--caja-azul-borde) !important;
}
/* tarjetas con una raya de color a un lado (rojo, verde, amarillo...): la raya queda; el resto del borde, azul */
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) {
  border-top-color: var(--caja-azul-borde); border-right-color: var(--caja-azul-borde); border-bottom-color: var(--caja-azul-borde);
}
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) {
  border-right-color: var(--caja-azul-borde); border-bottom-color: var(--caja-azul-borde); border-left-color: var(--caja-azul-borde);
}
/* la tarjeta con borde en degradé (.tarjeta--destacada: ingreso, inicio del socio...): el degradé pasa a un anillo de 1 px dibujado
   aparte, así el relleno puede ser transparente sin que el degradé se vea por debajo */
html:not([data-modo="dia"]) body:has(.app) .tarjeta--destacada:not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7) {
  border-color: transparent;
}
html:not([data-modo="dia"]) body:has(.app) .tarjeta--destacada:not(:is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap, .tooltip) *):not(#_3b7)::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* ---------- 2. Una tarjeta dentro de otra: velo azul suave (el de la 3b.5), sin desenfoque propio ---------- */
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) {
  background: var(--caja-interna) !important; border-color: var(--caja-interna-borde) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* ---------- 3. Listas (list-group) usadas como tarjeta ---------- */
/* solo las que están sueltas en la pantalla (no dentro de una tarjeta, ventana o menú) */
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) {
  --bs-list-group-bg: transparent;
  background: linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 30%, var(--sup)) 78%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 10%, var(--sup-2)) 78%, transparent) 100%);
  border: 1px solid var(--caja-azul-borde); border-radius: var(--bs-list-group-border-radius, .5rem);
  --tx-3: color-mix(in srgb, var(--tx-2) 90%, var(--fondo));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
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) > .list-group-item {
  --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--caja-azul-borde);
  background-color: transparent; color: var(--tx);
}

/* ---------- 4. Lo que queda opaco, por las dudas ---------- */
/* (por si una de las tarjetas de arriba aparece dentro de una de estas cajas) */
html:not([data-modo="dia"]) :is(.modal, .dropdown-menu, .popover, .toast, .offcanvas, .ticket, .canvas-wrap) :is(.card, .tarjeta, .kpi-card, .chart-card):not(#_3b7) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}