/* =====================================================================
   VetUy · ajustes 3b.5 (pedido de Jorge, 25/10/2026). Se carga DESPUÉS de app_v3.css y acentos_v3.css
   (templates/_v3_head.html). Todo va en el MODO NOCHE: en el modo día no cambia nada.
   1. Las cajas y tarjetas con formularios usan el azul de las tarjetas del panel (sección Clínica), con
      transparencia, y el texto de los tokens del modo noche (claro, AA). Se acaban los fondos claros fijos
      (blanco, beige, celeste, verde claro) sobre el tema oscuro. Los colores con significado (verde OK, rojo
      peligro, amarillo aviso) quedan como borde o acento suave, no como fondo claro.
   2. El fondo de huellas "de más lejos": la mitad del tamaño que tenía, en mosaico que empalma
      (img/fondo_huellas_lejos.webp, con .jpg de respaldo), con la misma capa oscura del 55 %.
   Quedan claros a propósito: los comprobantes (.ticket, son el papel que se imprime) y el recuadro de la firma
   (.canvas-wrap, la tinta es oscura).
   ===================================================================== */

/* ---------- 0. Tokens de las cajas (modo noche) ---------- */
html:not([data-modo="dia"]) {
  /* la tarjeta del panel (app_v3.css: .tarjeta-hub / .etiqueta) con un 18 % de transparencia */
  --caja-azul: linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 30%, var(--sup)) 82%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--marca-azul) 10%, var(--sup-2)) 82%, transparent) 100%);
  --caja-azul-borde: color-mix(in srgb, var(--marca-azul) 42%, transparent);
  /* una caja dentro de otra: un velo azul más suave */
  --caja-interna: color-mix(in srgb, var(--marca-azul) 14%, rgba(8, 13, 25, .35));
  --caja-interna-borde: color-mix(in srgb, var(--marca-azul) 36%, transparent);
}

/* ---------- 1. El papel claro (.hoja-clara) de las fichas de socio y mascota, en el modo noche ---------- */
/* vuelve a los tokens del modo elegido (los del tema, que hereda del <html>) */
html:not([data-modo="dia"]) .hoja-clara {
  --fondo: inherit; --fondo-alto: inherit; --sup: inherit; --sup-2: inherit; --sup-3: inherit; --sup-hundida: inherit;
  --borde: inherit; --borde-2: inherit; --linea: inherit;
  --tx: inherit; --tx-2: inherit; --tx-3: inherit; --acc-tx: inherit; --azul-tx: inherit;
  --c-critica: inherit; --c-alta: inherit; --c-media: inherit; --c-info: inherit; --c-ok: inherit; --c-neutra: inherit;
  --sobre-acc: inherit;
  color-scheme: dark; color: var(--tx);
}
html:not([data-modo="dia"]) body:has(.app) .ficha-card.hoja-clara {
  background: var(--caja-azul) !important; border-color: var(--caja-azul-borde) !important;
}
/* la pestaña activa se pega a la tarjeta: el mismo azul (opaco, para que no se vea la línea de abajo) */
html:not([data-modo="dia"]) body:has(.app) .nav-tabs-vida .nav-link.active {
  background: color-mix(in srgb, var(--marca-azul) 30%, var(--sup)) !important;
  border-color: var(--caja-azul-borde) !important;
  border-bottom-color: color-mix(in srgb, var(--marca-azul) 30%, var(--sup)) !important;
}

/* ---------- 2. Tarjetas que contienen formularios ---------- */
html:not([data-modo="dia"]) body:has(.app) :is(.card, .tarjeta:not(.tarjeta--destacada), .kpi-card, .chart-card, .archivo-card):has(form, input:not([type="hidden"]), select, textarea) {
  background: var(--caja-azul) !important; border-color: var(--caja-azul-borde) !important; color: var(--tx);
}

/* ---------- 3. Cajas con fondo claro fijo (estilo en línea de las pantallas viejas) ---------- */
/* neutras (celeste, gris, beige) -> velo azul */
html:not([data-modo="dia"]) body:has(.app) :is([style*="#EFF8FC" i], [style*="#f8f9fa" i], [style*="#F9FAFB" i], [style*="#FDF3E7" i]) {
  background: var(--caja-interna) !important; color: var(--tx) !important;
  border: 1px solid var(--caja-interna-borde) !important;
}
/* con significado: el color queda en el borde (y apenas en el fondo) */
html:not([data-modo="dia"]) body:has(.app) [style*="#f0fff4" i] {           /* verde: listo, OK */
  background: color-mix(in srgb, var(--c-ok) 7%, var(--caja-interna)) !important; color: var(--tx) !important;
  border: 1.5px solid color-mix(in srgb, var(--c-ok) 60%, transparent) !important;
}
html:not([data-modo="dia"]) body:has(.app) :is([style*="#fff8ec" i], [style*="#fff3cd" i]) {   /* amarillo: aviso */
  background: color-mix(in srgb, var(--c-media) 7%, var(--caja-interna)) !important; color: var(--tx) !important;
  border: 1.5px solid color-mix(in srgb, var(--c-media) 60%, transparent) !important;
}
html:not([data-modo="dia"]) body:has(.app) [style*="#FFF7ED" i] {           /* naranja: medicamento activo */
  background: color-mix(in srgb, var(--c-alta) 7%, var(--caja-interna)) !important; color: var(--tx) !important;
  border: 1.5px solid color-mix(in srgb, var(--c-alta) 60%, transparent) !important;
}
html:not([data-modo="dia"]) body:has(.app) [style*="#eff6ff" i] {           /* azul: información */
  background: color-mix(in srgb, var(--c-info) 7%, var(--caja-interna)) !important; color: var(--tx) !important;
  border: 1.5px solid color-mix(in srgb, var(--c-info) 55%, transparent) !important;
}
html:not([data-modo="dia"]) body:has(.app) [style*="#f0fdfa" i] {           /* turquesa: referidos, planes */
  background: color-mix(in srgb, var(--acc) 6%, var(--caja-interna)) !important; color: var(--tx) !important;
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent) !important;
}
/* lo de adentro de esas cajas: títulos y textos con los tokens (no el azul oscuro ni el gris fijos) */
html:not([data-modo="dia"]) body:has(.app) :is([style*="#EFF8FC" i], [style*="#f8f9fa" i], [style*="#F9FAFB" i], [style*="#FDF3E7" i], [style*="#f0fff4" i], [style*="#fff8ec" i], [style*="#fff3cd" i], [style*="#FFF7ED" i], [style*="#eff6ff" i], [style*="#f0fdfa" i]) :is(h5, h6, strong, label, p, li, td, th, span:not(.badge)) {
  color: inherit;
}
html:not([data-modo="dia"]) body:has(.app) :is([style*="#EFF8FC" i], [style*="#f8f9fa" i], [style*="#F9FAFB" i], [style*="#FDF3E7" i], [style*="#f0fff4" i], [style*="#fff8ec" i], [style*="#fff3cd" i], [style*="#FFF7ED" i], [style*="#eff6ff" i], [style*="#f0fdfa" i]) :is(.text-muted, small.text-muted, .form-text) {
  color: var(--tx-2) !important;
}

/* ficha del socio: línea de tiempo y próximos eventos (colores fijos pensados para el papel claro) */
html:not([data-modo="dia"]) body:has(.app) .timeline-fecha { color: var(--tx-2); }
html:not([data-modo="dia"]) body:has(.app) .timeline-titulo { color: var(--azul-tx); }
html:not([data-modo="dia"]) body:has(.app) .timeline-detalle { color: var(--tx-2); }
html:not([data-modo="dia"]) body:has(.app) .evento-item { background: var(--caja-interna); border-color: var(--caja-interna-borde); color: var(--tx); }
html:not([data-modo="dia"]) body:has(.app) .evento-urgente { background: color-mix(in srgb, var(--c-critica) 14%, transparent); color: var(--c-critica); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-critica) 45%, transparent); }
html:not([data-modo="dia"]) body:has(.app) .evento-pronto { background: color-mix(in srgb, var(--c-alta) 14%, transparent); color: var(--c-alta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-alta) 45%, transparent); }
html:not([data-modo="dia"]) body:has(.app) .evento-lejano { background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ok) 45%, transparent); }
/* ficha del socio: tarjetas de las mascotas (blancas) */
html:not([data-modo="dia"]) body:has(.app) .mascota-card { background: var(--caja-interna) !important; border-color: var(--caja-interna-borde) !important; color: var(--tx); }
html:not([data-modo="dia"]) body:has(.app) .mascota-nombre { color: var(--tx) !important; }
html:not([data-modo="dia"]) body:has(.app) .mascota-tags { color: var(--tx-2) !important; }
html:not([data-modo="dia"]) body:has(.app) .mascota-chip { background: var(--acc-suave) !important; color: var(--tx) !important; }
/* texto azul oscuro fijo (#134E73, pensado para fondo blanco) dentro de las pantallas: el azul claro del tema */
html:not([data-modo="dia"]) .app__main [style*="color:#134E73" i] { color: var(--azul-tx) !important; }
/* formulario de consulta: la etiqueta "Seguimiento en domicilio" (verde azulado fijo) */
html:not([data-modo="dia"]) body:has(.app) [style*="color:#0f766e" i] { color: var(--acc-tx) !important; }

/* ---------- 4. Utilidades de Bootstrap con fondo claro ---------- */
html:not([data-modo="dia"]) body:has(.app) :is(.bg-light, .bg-white, .bg-body, .bg-body-tertiary) {
  background-color: var(--caja-interna) !important; color: var(--tx);
}
html:not([data-modo="dia"]) body:has(.app) :is(.table-light, .table-light > tr > *, thead.table-light > tr > *) {
  --bs-table-bg: transparent; --bs-table-color: var(--tx-2); background-color: transparent !important; color: var(--tx-2);
}
/* rojo, verde y amarillo de Bootstrap (más oscuros) fuera de las pantallas con puente, por ejemplo en las ventanas:
   los del tema, que dan AA sobre el azul */
html:not([data-modo="dia"]) body:has(.app) .text-danger { color: var(--c-critica) !important; }
html:not([data-modo="dia"]) body:has(.app) .text-success { color: var(--c-ok) !important; }
html:not([data-modo="dia"]) body:has(.app) .text-warning { color: var(--c-media) !important; }
html:not([data-modo="dia"]) body:has(.app) :is(.text-muted, .text-secondary, .text-body-secondary) { color: var(--tx-2) !important; }
html:not([data-modo="dia"]) body:has(.app) .text-dark:not(.badge) { color: var(--tx) !important; }
html:not([data-modo="dia"]) body:has(.app) code { color: var(--c-alta); }
html:not([data-modo="dia"]) body:has(.app) .input-group > .form-control[readonly] { background: var(--sup-hundida); color: var(--tx); }
html:not([data-modo="dia"]) body:has(.app) .badge.bg-warning.text-dark { color: var(--c-media) !important; }
html:not([data-modo="dia"]) body:has(.app) .badge.bg-info.text-dark { color: var(--c-info) !important; }

/* botón turquesa fijo con texto blanco (3,3:1): un turquesa más oscuro (5:1) */
html:not([data-modo="dia"]) body:has(.app) .btn[style*="background:#2A9D8F" i] { background: #1F7A70 !important; border-color: #1F7A70 !important; }
/* contador rojo dentro de un filtro activo (fondo de acento): rojo lleno con texto blanco */
html:not([data-modo="dia"]) body:has(.app) .filtro .badge.bg-danger { background: #B42318 !important; color: #fff !important; border-color: #B42318 !important; }

/* insignias del estado de la cuota (ficha del socio): acento suave en vez de pastilla clara */
html:not([data-modo="dia"]) body:has(.app) .estado-pill { border: 1px solid; }
html:not([data-modo="dia"]) body:has(.app) .estado-al_dia { background: color-mix(in srgb, var(--c-ok) 14%, transparent); color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); }
html:not([data-modo="dia"]) body:has(.app) .estado-por_vencer { background: color-mix(in srgb, var(--c-alta) 14%, transparent); color: var(--c-alta); border-color: color-mix(in srgb, var(--c-alta) 45%, transparent); }
html:not([data-modo="dia"]) body:has(.app) .estado-vencida { background: color-mix(in srgb, var(--c-critica) 14%, transparent); color: var(--c-critica); border-color: color-mix(in srgb, var(--c-critica) 45%, transparent); }

/* Laboratorio: el valor fuera de rango queda en rojo suave (el texto, rojo claro: AA) */
html:not([data-modo="dia"]) body:has(.app) .fila-fuera-rango { background: color-mix(in srgb, var(--c-critica) 12%, transparent) !important; box-shadow: inset 3px 0 0 var(--c-critica); }
html:not([data-modo="dia"]) body:has(.app) .fila-fuera-rango td { color: var(--c-critica) !important; background: transparent; }

/* Uso de la App del Socio: el KPI principal (verde fuerte con texto blanco, 2,3:1) pasa al azul de las tarjetas con
   el verde como borde */
html:not([data-modo="dia"]) body:has(.app) .kpi-card.kpi-principal {
  background: var(--caja-azul) !important; border: 1.5px solid color-mix(in srgb, var(--c-ok) 60%, transparent) !important;
}
html:not([data-modo="dia"]) body:has(.app) .kpi-principal :is(.valor, .label) { color: var(--tx) !important; }
html:not([data-modo="dia"]) body:has(.app) .kpi-principal .sub { color: var(--c-ok) !important; }
html:not([data-modo="dia"]) body:has(.app) .kpi-principal .kpi-icono { background: linear-gradient(135deg, #198754, #28a745) !important; }

/* "Tip" de Modificaciones y de Mantenimiento: la caja del contenido (no el aviso flotante) */
html:not([data-modo="dia"]) .app__main .aviso.mx-auto {
  position: static; transform: none; animation: none; display: block; max-width: 700px;
  background: var(--caja-azul) !important; color: var(--tx) !important;
  border: 1px solid var(--caja-azul-borde); box-shadow: var(--sh-1) !important; font-weight: 400;
}

/* ---------- 5. Fondo de huellas "de más lejos" ---------- */
/* La mitad del tamaño que tenía: antes la imagen cubría la pantalla (cover); ahora el mosaico mide la mitad de eso
   (ancho = el mayor entre 50 % del ancho y 34,3 % del alto, que es la mitad de lo que daba cover con la proporción
   de la imagen) y se repite. La imagen nueva está hecha para empalmar en los cuatro lados. Misma capa oscura (55 %).
   Con alto contraste no hay imagen (como en app_v3.css). */
html:not([data-modo="dia"]):not(.alto-contraste):not([class*="a11y-hc-"]) body:has(.app)::before {
  background-image: linear-gradient(rgba(11, 19, 34, .55), rgba(11, 19, 34, .55)), url("/img/fondo_huellas_lejos.jpg");
  background-image: linear-gradient(rgba(11, 19, 34, .55), rgba(11, 19, 34, .55)),
    image-set(url("/img/fondo_huellas_lejos.webp") type("image/webp"), url("/img/fondo_huellas_lejos.jpg") type("image/jpeg"));
  background-size: auto, max(50%, 34.3vh) auto;
  background-position: 0 0, center bottom;
  background-repeat: no-repeat, repeat;
}

/* ---------- 6. Panel de Mantenimiento (/dashboard/mantenimiento): tarjetas como las de Clínica ---------- */
/* Antes: degradados fuertes (turquesa, violeta, naranja, rojo), 200 px de alto y filas de 4, 3 y 4 centradas con
   otro ancho. Ahora: el azul y el turquesa de la marca con transparencia (como .tarjeta-hub en app_v3.css), el mismo
   tamaño que las de Clínica (170 px, 3 por fila en la PC) y la grilla pareja, todas las filas alineadas. */
html:not([data-modo="dia"]) .app--personal .row:has(> * > .tarjeta-mant) { justify-content: flex-start !important; }
@media (min-width: 992px) {
  html:not([data-modo="dia"]) .app--personal .row:has(> * > .tarjeta-mant) > [class*="col-lg-"] { flex: 0 0 auto; width: 33.33333333%; }
}
html:not([data-modo="dia"]) .app--personal .tarjeta-mant {
  --et: var(--marca-azul);
  background: linear-gradient(135deg,
      color-mix(in srgb, color-mix(in srgb, var(--et) 30%, var(--sup)) 82%, transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--et) 10%, var(--sup-2)) 82%, transparent) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--et) 42%, transparent) !important;
  box-shadow: var(--sh-1); height: 170px; border-radius: 18px; padding: 1.5rem 1.3rem;
}
html:not([data-modo="dia"]) .app--personal .tarjeta-mant:hover {
  border-color: color-mix(in srgb, var(--et) 70%, transparent) !important;
  box-shadow: var(--sh-1), 0 14px 30px -18px color-mix(in srgb, var(--et) 80%, transparent);
}
html:not([data-modo="dia"]) .app--personal .tarjeta-mant :is(h4, p, span, strong) { color: var(--tx) !important; opacity: 1; }
html:not([data-modo="dia"]) .app--personal .tarjeta-mant .icono { color: color-mix(in srgb, var(--et) 55%, var(--tx)) !important; opacity: 1; font-size: 2.1rem; margin-bottom: .4rem; }
html:not([data-modo="dia"]) .app--personal .tarjeta-mant h4 { font-size: 1.05rem; margin-bottom: .3rem; }
html:not([data-modo="dia"]) .app--personal .tarjeta-mant p { font-size: .82rem; }
html:not([data-modo="dia"]) .app--personal .row > :nth-child(3n+2) > .tarjeta-mant { --et: color-mix(in srgb, var(--marca-azul) 50%, var(--acc)); }
html:not([data-modo="dia"]) .app--personal .row > :nth-child(3n+3) > .tarjeta-mant { --et: var(--acc); }
html:not([data-modo="dia"]) .app--personal .row > * > .tarjeta-mant[href*="/emergencias"] { --et: var(--c-critica); }   /* rojo: acento suave */
/* "Modo demo: solo lectura": sigue llamativo (rojo a naranja) pero más oscuro, así el texto blanco da AA (5:1 o más) */
html:not([data-modo="dia"]) body:has(.app) .alert[style*="#DC2626"][style*="#F59E0B"] {
  background: linear-gradient(135deg, #B42318 0%, #B54708 100%) !important; color: #fff !important;
}
html:not([data-modo="dia"]) body:has(.app) .alert[style*="#DC2626"][style*="#F59E0B"] :is(h5, p) { color: #fff !important; opacity: 1 !important; }