/* Asistencia de cuadrillas: diseño de vidrio y neón (marcar, registro, tablero y reporte).
   Foto de fondo a pantalla completa, tarjetas y botones de vidrio (backdrop-filter), luz neón que
   sigue al puntero, onda neón al presionar, clave del coordinador como verificación OTP,
   asistencia por día en el tablero y reporte con indicadores. Se activa con <html class="vn-app">.
   No cambia ninguna regla de marcación: solo cómo se ve. */
:root {
  --vn-ambar: #ffb41f;
  --vn-cian: #3fd0ff;
  --vn-noche: #060a14;
}
/* ===================================================================
   Pantallas de la app (marcar, registro y panel): la foto del guardia de fondo
   y todo en VIDRIO tipo espejo ("liquid glass", aproximación web con
   backdrop-filter: no es el material oficial de Apple) con luz NEÓN donde
   está el puntero y onda neón donde se presiona (neon.js).
   La guía (index.html) no lleva la clase vn-app y queda igual.
   =================================================================== */
.vn-app body {
  --neon: 63, 208, 255;            /* cian */
  --neon2: 255, 180, 31;           /* ámbar de chaleco */
  --tarjeta: rgba(255, 255, 255, .07);
  --texto: #f3f6ff;
  --suave: #c3cde4;
  --borde: rgba(255, 255, 255, .2);
  --fondo: rgba(255, 255, 255, .06);
  --marca: #3fd0ff;
  --ok: #45e39a; --ok-fondo: rgba(69, 227, 154, .16);
  --aviso: #ffc457; --aviso-fondo: rgba(255, 196, 87, .16);
  --mal: #ff7070; --mal-fondo: rgba(255, 112, 112, .16);
  --sombra: 0 10px 34px rgba(0, 0, 0, .38);
  color-scheme: dark;              /* calendarios y listas nativas en oscuro */
  color: var(--texto);
  background: transparent;
  min-height: 100dvh;
}
html.vn-app { background: var(--vn-noche); }
/* la foto, nítida, con un velo apenas para que el texto respire (capa fija: también en iPhone) */
.vn-app body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 18, .18) 0%, rgba(4, 8, 18, .32) 60%, rgba(4, 8, 18, .5) 100%),
    url("img/fondo.jpg") center 40% / cover no-repeat,
    var(--vn-noche);
}

/* ---------- vidrio: tarjetas, cajas, tablas y barras ---------- */
.vn-app body .tarjeta, .vn-app body .kpi, .vn-app body table, .vn-app body .casilla, .vn-app body .consentimiento,
.vn-app body .caja-aut, .vn-app body .herramientas-demo, .vn-app body #solicitudes, .vn-app body #reinicio,
.vn-app body .aviso-capa, .vn-app body .ok-aut, .vn-app body .error, .vn-app body .foto {
  --tono: var(--neon);
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(var(--tono), .16), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%),
    rgba(14, 22, 44, .24) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--texto);
  transition: border-color .25s, box-shadow .25s;
}
.vn-app body .casilla, .vn-app body .consentimiento, .vn-app body .aviso-capa, .vn-app body .ok-aut { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.vn-app body #solicitudes, .vn-app body .caja-aut, .vn-app body .herramientas-demo { --tono: var(--neon2); border-color: rgba(var(--neon2), .45) !important; }
.vn-app body #reinicio, .vn-app body .error { --tono: 255, 112, 112; border-color: rgba(255, 112, 112, .45) !important; }
.vn-app body .ok-aut { color: var(--ok); }
.vn-app body .error { color: #ffd0d0; }
.vn-app body .aviso-capa { color: #cfe6ff; }
.vn-app body .caja-aut h3, .vn-app body .kpi.aviso .n { color: var(--aviso); }
/* el vidrio donde está el puntero: borde neón */
.vn-app body .vn-encendido:is(.tarjeta, .kpi, table, .casilla, .consentimiento, .caja-aut) {
  border-color: rgba(var(--tono), .7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(var(--tono), .35), 0 0 26px rgba(var(--tono), .28), var(--sombra);
}

/* barras de arriba: vidrio oscuro, la cinta de seguridad se queda */
.vn-app body .barra, .vn-app body .cabeza {
  background: linear-gradient(180deg, rgba(8, 14, 30, .55), rgba(8, 14, 30, .3)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
.vn-app body .demo {
  background: rgba(255, 180, 31, .16); color: #ffd98a; border-bottom: 1px solid rgba(255, 180, 31, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vn-app body .volver-demo { background: rgba(6, 10, 20, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* tablas del panel */
.vn-app body th { background: rgba(255, 255, 255, .06); color: var(--suave); border-bottom-color: rgba(255, 255, 255, .14); }
.vn-app body td { border-bottom-color: rgba(255, 255, 255, .1); }
.vn-app body tr.fila:hover td { background: rgba(var(--neon), .1); }
.vn-app body .panel {
  background: rgba(8, 14, 30, .72);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.vn-app body .e-gris { background: rgba(255, 255, 255, .1); color: var(--suave); }
.vn-app body a { color: rgb(var(--neon)); }

/* campos de texto: vidrio y foco neón */
.vn-app body input:not([type="checkbox"]):not([type="radio"]), .vn-app body select, .vn-app body textarea {
  --tono: var(--neon);
  background: rgba(255, 255, 255, .08) !important;
  color: var(--texto); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, box-shadow .2s;
}
.vn-app body ::placeholder { color: rgba(220, 230, 250, .55); }
.vn-app body input:focus, .vn-app body select:focus, .vn-app body textarea:focus {
  border-color: rgb(var(--neon)); box-shadow: 0 0 0 1px rgb(var(--neon)), 0 0 18px rgba(var(--neon), .55);
}
.vn-app body input.vn-encendido, .vn-app body select.vn-encendido, .vn-app body textarea.vn-encendido { border-color: rgba(var(--neon), .6); }

/* ---------- botones de vidrio líquido con neón ---------- */
.vn-app body .boton {
  --tono: var(--neon);
  position: relative;
  color: #fff;
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--tono), var(--brillo, 0)), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 60%),
    rgba(var(--tono), .22) !important;
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transition: box-shadow .2s, border-color .2s, transform .12s;
}
.vn-app body .boton.verde { --tono: 69, 227, 154; }
.vn-app body .boton.naranja { --tono: var(--neon2); }
.vn-app body .boton.claro { --tono: 200, 214, 240; }
.vn-app body .boton[style*="--mal"] { --tono: 255, 112, 112; }
.vn-app body .cabeza .boton.mini { background: rgba(255, 255, 255, .1) !important; }
.vn-app body .boton:not(:disabled):hover, .vn-app body .boton.vn-encendido:not(:disabled) {
  --brillo: .6;
  border-color: rgba(var(--tono), .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(var(--tono), .6),
    0 0 18px rgba(var(--tono), .7), 0 0 44px rgba(var(--tono), .35), 0 8px 24px rgba(0, 0, 0, .35);
}
.vn-app body .boton:not(:disabled):active {
  --brillo: .9;
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 2px rgba(var(--tono), .9), 0 0 26px rgba(var(--tono), .9), 0 0 70px rgba(var(--tono), .5);
}
.vn-app body .boton:focus-visible { outline: 2px solid rgb(var(--tono)); outline-offset: 3px; }
.vn-app body .boton:disabled { opacity: .45; }
.vn-app body .cargando { border-color: rgba(var(--neon), .25); border-top-color: rgb(var(--neon)); }

/* ---------- luz que sigue al puntero y onda donde se presiona ---------- */
.vn-luz {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 208, 255, .26), rgba(177, 77, 255, .12) 38%, transparent 68%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .35s;
  will-change: transform;
}
.vn-luz.ver { opacity: 1; }
.vn-onda {
  position: fixed; z-index: 60; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid rgb(63, 208, 255);
  box-shadow: 0 0 12px rgba(63, 208, 255, .9), inset 0 0 8px rgba(63, 208, 255, .6);
  animation: vn-onda .6s ease-out forwards;
}
@keyframes vn-onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(7); opacity: 0; } }

/* accesibilidad: sin transparencia o sin movimiento si el equipo lo pide */
@media (prefers-reduced-transparency: reduce) {
  .vn-app body .tarjeta, .vn-app body .kpi, .vn-app body table, .vn-app body .boton, .vn-app body .panel,
  .vn-app body .barra, .vn-app body .cabeza { background: rgba(12, 18, 36, .94) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-app body .boton, .vn-app body .tarjeta, .vn-app body .kpi { transition: none; }
}

/* ===================================================================
   Clave del coordinador como verificación OTP (otp.js): un "mazo" de
   tarjetas de vidrio con una casilla por dígito.
   =================================================================== */
.vn-app body .vn-otp {
  text-align: center; max-width: 440px !important; padding: 26px 22px 20px !important;
  /* dos tarjetas que asoman debajo: el mazo */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 0 -6px rgba(255, 255, 255, .1), 0 24px 0 -12px rgba(255, 255, 255, .06), var(--sombra) !important;
  animation: otp-entra .5s cubic-bezier(.16, 1, .3, 1) both;
}
.vn-app body .vn-otp h2 { margin: 0; font-size: 22px; }
.otp { display: grid; justify-items: center; gap: 10px; margin-top: 10px; }
.otp-candado {
  order: -1; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: rgb(var(--neon)); background: rgba(var(--neon), .1); border: 1px solid rgba(var(--neon), .45);
  box-shadow: 0 0 22px rgba(var(--neon), .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.otp-sub { margin: 0; color: var(--suave); font-size: 14px; }
.otp-casillas { display: flex; gap: 12px; justify-content: center; margin: 6px 0 2px; }
.vn-app body input.otp-d {
  width: 58px !important; height: 66px; padding: 0 !important; text-align: center;
  font-size: 28px !important; font-weight: 800; border-radius: 14px; caret-color: rgb(var(--neon));
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
.vn-app body input.otp-d:focus { transform: translateY(-2px); }
.vn-app body input.otp-d.lleno { border-color: rgba(var(--neon), .85); box-shadow: 0 0 14px rgba(var(--neon), .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.vn-app body .otp.enviando input.otp-d { border-color: rgb(69, 227, 154); box-shadow: 0 0 18px rgba(69, 227, 154, .6); }
.vn-app body .otp.mal .otp-casillas { animation: otp-temblor .45s; }
.vn-app body .otp.mal input.otp-d { border-color: rgb(255, 112, 112); box-shadow: 0 0 16px rgba(255, 112, 112, .6); }
.vn-app body .otp-otra { font-size: 13px; color: var(--suave); padding: 4px 0; }
.vn-otp:not(.otp-libre) label[for="clave"], .vn-otp:not(.otp-libre) #clave { display: none; }
.vn-otp.otp-libre .otp-casillas, .vn-otp.otp-libre .otp-otra { display: none; }
@keyframes otp-temblor { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes otp-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (max-width: 380px) { .vn-app body input.otp-d { width: 50px !important; height: 58px; } }

/* ---------- verificación correcta: el mazo se abre y se va (otp.js → celebrar) ---------- */
.otp-exito {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none;
  background: rgba(4, 8, 18, .38);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  animation: otp-velo-entra .25s ease-out both;
  transition: opacity .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.otp-exito.sale { opacity: 0; }
.otp-mazo { position: relative; width: 250px; height: 300px; }
.otp-carta {
  position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 60%), rgba(14, 22, 44, .45);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 50px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.otp-carta.c3 { transform: translateY(16px) scale(.92); opacity: .55; }
.otp-carta.c2 { transform: translateY(8px) scale(.96); opacity: .8; }
.otp-carta.c1 {
  display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: #eafff4;
  border-color: rgba(69, 227, 154, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(69, 227, 154, .45), 0 0 46px rgba(69, 227, 154, .45), 0 20px 50px rgba(0, 0, 0, .45);
  animation: otp-carta-entra .45s cubic-bezier(.16, 1, .3, 1) both;
}
.otp-carta.c1 b { font: 800 22px/1 var(--display, system-ui); letter-spacing: .02em; text-shadow: 0 0 14px rgba(69, 227, 154, .7); }
.otp-visto {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #45e39a;
  background: rgba(69, 227, 154, .12); border: 2px solid rgba(69, 227, 154, .85);
  box-shadow: 0 0 26px rgba(69, 227, 154, .6), inset 0 0 18px rgba(69, 227, 154, .3);
  animation: otp-visto-pop .5s .1s cubic-bezier(.34, 1.56, .64, 1) both;
}
.otp-visto .trazo { stroke-dasharray: 22; stroke-dashoffset: 22; animation: otp-trazo .35s .35s ease-out forwards; }
.otp-puntos { display: flex; gap: 10px; }
.otp-puntos i { width: 10px; height: 10px; border-radius: 50%; background: #45e39a; box-shadow: 0 0 10px #45e39a; }
.otp-exito.abre .c3 { transform: translate(-70px, 10px) rotate(-12deg) scale(.95); opacity: .7; }
.otp-exito.abre .c2 { transform: translate(70px, 10px) rotate(12deg) scale(.95); opacity: .85; }
.otp-exito.sale .otp-carta { transform: translateY(-70px) scale(.9); opacity: 0; }
.otp-exito.sale .c3 { transform: translate(-150px, -40px) rotate(-24deg) scale(.85); }
.otp-exito.sale .c2 { transform: translate(150px, -40px) rotate(24deg) scale(.85); }
/* después de verificar, el contenido entra (solo opacidad y movimiento: liviano en el celular) */
body.otp-revelado main > :not(.oculto) { animation: otp-contenido-entra .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes otp-velo-entra { from { opacity: 0; } }
@keyframes otp-carta-entra { from { transform: translateY(30px) scale(.9) rotate(-3deg); opacity: 0; } }
@keyframes otp-visto-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes otp-trazo { to { stroke-dashoffset: 0; } }
@keyframes otp-contenido-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* ===================================================================
   Panel: asistencia por día (panel-dia.js)
   =================================================================== */
.vn-app body .vn-dias { margin-top: 18px; }
.dias-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dias-cab h2 { margin: 0; }
.dias-rango { display: flex; gap: 6px; }
.vn-app body .dias-rango .boton { width: auto; margin: 0; min-height: 38px; padding: 6px 12px; font-size: 13px; }
.vn-app body .dias-rango .boton[aria-pressed="true"] { --brillo: .5; border-color: rgba(var(--neon), .9); box-shadow: 0 0 14px rgba(var(--neon), .5); }
.dias-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.dk { border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.dk b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.dk span { font-size: 12px; color: var(--suave); }
.k-c b { color: rgb(63, 208, 255); } .k-p b { color: #45e39a; } .k-t b { color: #ffc457; } .k-s b { color: #ff8a8a; } .k-a b { color: rgb(63, 208, 255); } .k-r b { color: #ff8a8a; }
.dias-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.dia { cursor: pointer; outline: none; }
.dia .zona { fill: transparent; }
.dia:hover .zona, .dia:focus-visible .zona { fill: rgba(63, 208, 255, .08); }
.dia.sel .zona { fill: rgba(63, 208, 255, .14); }
.b-p { fill: #45e39a; } .b-a { fill: rgb(63, 208, 255); } .b-t { fill: #ffc457; } .b-s { fill: rgba(255, 112, 112, .75); }
.dia:hover rect:not(.zona), .dia.sel rect:not(.zona) { filter: drop-shadow(0 0 6px rgba(63, 208, 255, .55)); }
.dia text { fill: var(--suave); font-size: 11px; text-anchor: middle; }
.dia .d2 { font-size: 9.5px; opacity: .8; }
.dia.finde text { opacity: .45; }
.dias-leyenda, .crm-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--suave); margin-top: 8px; }
.l-p { --c: #45e39a; } .l-a { --c: rgb(63, 208, 255); } .l-t { --c: #ffc457; } .l-s { --c: #ff8a8a; }
.dias-leyenda span::before, .crm-leyenda span::before, .crm-reparto li::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px;
  background: var(--c); box-shadow: 0 0 6px var(--c);
}
@media (max-width: 640px) { .dias-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================================================================
   Reporte: tablero de vidrio estilo CRM (reporte-crm.js) y la hoja
   =================================================================== */
.vn-crm { margin-top: 14px; display: grid; gap: 14px; }
.crm-cab h2 { margin: 0; font-size: 22px; }
.crm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.crm-kpi, .crm-panel {
  position: relative; overflow: hidden; border-radius: 16px; padding: 14px 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%),
    rgba(14, 22, 44, .26);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.crm-kpi:hover, .crm-panel:hover { border-color: rgba(63, 208, 255, .6); box-shadow: 0 0 24px rgba(63, 208, 255, .22), var(--sombra); transform: translateY(-2px); }
.crm-kpi .t { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; }
.crm-kpi b { display: block; font-size: 28px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.crm-kpi small { display: block; color: var(--suave); font-size: 12px; }
.chispa { display: block; width: 100%; height: 34px; margin-top: 8px; }
.chispa .linea { fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 3px currentColor); }
.chispa .area { fill: currentColor; opacity: .14; }
.c-c { color: rgb(63, 208, 255); } .c-p { color: #45e39a; } .c-t { color: #ffc457; } .c-s { color: #ff8a8a; } .c-a { color: rgb(63, 208, 255); }
.crm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.crm-curvas { grid-column: span 2; }
.crm-panel h3 { margin: 0 0 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.crm-curvas svg { width: 100%; height: auto; display: block; }
.crm-curvas .guia { stroke: rgba(255, 255, 255, .08); }
.crm-curvas .eje { fill: var(--suave); font-size: 10px; text-anchor: end; }
.crm-curvas .eje.f { text-anchor: middle; }
.crm-curvas .area { opacity: .16; } .crm-curvas .area.c-p { fill: #45e39a; } .crm-curvas .area.c-t { fill: #ffc457; } .crm-curvas .area.c-s { fill: #ff8a8a; opacity: .08; }
.crm-curvas .linea { fill: none; stroke-width: 2.2; }
.crm-curvas .linea.c-p { stroke: #45e39a; filter: drop-shadow(0 0 4px rgba(69, 227, 154, .8)); }
.crm-curvas .linea.c-t { stroke: #ffc457; filter: drop-shadow(0 0 4px rgba(255, 196, 87, .8)); }
.crm-curvas .linea.c-s { stroke: #ff8a8a; stroke-dasharray: 4 4; }
.crm-curvas .punto { fill: #0b1324; stroke-width: 2; }
.crm-curvas .punto.c-p { stroke: #45e39a; } .crm-curvas .punto.c-t { stroke: #ffc457; } .crm-curvas .punto.c-s { stroke: #ff8a8a; }
.crm-dona { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; }
.crm-dona h3 { grid-column: 1 / -1; }
.dona circle { fill: none; stroke-width: 16; }
.dona .c-p { stroke: #45e39a; } .dona .c-a { stroke: rgb(63, 208, 255); } .dona .c-t { stroke: #ffc457; } .dona .c-s { stroke: rgba(255, 112, 112, .8); }
.dona-n { fill: var(--texto); font-size: 20px; font-weight: 800; text-anchor: middle; }
.dona-t { fill: var(--suave); font-size: 9px; text-anchor: middle; }
.crm-reparto { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.crm-reparto b { float: right; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.rn small { display: block; color: var(--suave); font-size: 12px; }
.rb { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rb i { display: block; height: 100%; border-radius: 99px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.vn-crm.entra .crm-kpi, .vn-crm.entra .crm-panel { animation: crm-entra .55s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes crm-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 1000px) { .crm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-grid { grid-template-columns: minmax(0, 1fr); } .crm-curvas { grid-column: auto; } }
@media (max-width: 560px) { .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-dona { grid-template-columns: 110px minmax(0, 1fr); } }

/* la hoja imprimible, en vidrio en pantalla */
.vn-app body .hoja {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%), rgba(14, 22, 44, .3) !important;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--texto);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.vn-app body .hoja h3 { color: var(--suave); }
.vn-app body .titulo-rep { border-bottom-color: rgb(63, 208, 255); }
.vn-app body tr.cuadrilla td { background: rgba(255, 255, 255, .06); }
.vn-app body .atraso { color: #ffc457; } .vn-app body .autorizado { color: #45e39a; } .vn-app body .falta { color: #ff8a8a; }
.vn-app body .nota-rep { background: rgba(255, 196, 87, .14); color: #ffd98a; }
.vn-app body .firmas div { border-top-color: var(--suave); }

@media (prefers-reduced-motion: reduce) {
  .vn-app body .vn-otp, .vn-crm.entra .crm-kpi, .vn-crm.entra .crm-panel, .vn-app body .otp.mal .otp-casillas { animation: none; }
  .crm-kpi, .crm-panel { transition: none; }
}

/* ===================================================================
   Celular y pantallas táctiles: sin desenfoque de fondo (backdrop-filter es
   lo que más pesa en el teléfono y lo vuelve lento). El vidrio pasa a ser
   un vidrio oscuro sólido que se lee igual; sin luz que sigue al dedo.
   =================================================================== */
@media (hover: none), (pointer: coarse) {
  .vn-app body *, .vn-app body *::before, .vn-app body *::after, .otp-exito, .otp-exito * {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .vn-app body .tarjeta, .vn-app body .kpi, .vn-app body table, .vn-app body .caja-aut, .vn-app body .herramientas-demo,
  .vn-app body #solicitudes, .vn-app body #reinicio, .vn-app body .hoja, .vn-app body .crm-kpi, .vn-app body .crm-panel,
  .vn-app body .panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 55%), rgba(10, 16, 34, .78) !important;
  }
  .vn-app body .casilla, .vn-app body .consentimiento, .vn-app body .aviso-capa, .vn-app body .ok-aut, .vn-app body .error {
    background: rgba(255, 255, 255, .07) !important;
  }
  .vn-app body .barra, .vn-app body .cabeza { background: rgba(8, 14, 30, .82) !important; }
  .vn-app body .demo { background: rgba(60, 44, 10, .9); }
  .vn-app body .boton { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%), rgba(var(--tono), .38) !important; }
  .otp-exito { background: rgba(4, 8, 18, .78); }
  .otp-carta { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%), rgb(16, 24, 46); }
  .vn-luz { display: none; }
  .vn-app body .tarjeta, .vn-app body .kpi, .vn-app body .crm-kpi, .vn-app body .crm-panel { transition: none; }
}

/* al imprimir: hoja blanca de siempre, sin foto, vidrio ni neón */
@media print {
  html.vn-app { background: #fff; }
  .vn-app body {
    --texto: #14202e; --suave: #5b6878; --borde: #dde3ea; --ok: #138a4b; --mal: #c62828; --aviso: #b26a00; --marca: #0b5cad;
    color: #14202e; background: #fff;
  }
  .vn-app body::before, .vn-luz, .vn-onda, .vn-crm { display: none !important; }
  .vn-app body .hoja, .vn-app body .kpi, .vn-app body table, .vn-app body .tarjeta {
    background: #fff !important; color: #14202e; box-shadow: none !important; border-color: #dde3ea !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .vn-app body th { background: #eef3f9; color: #5b6878; }
  .vn-app body tr.cuadrilla td { background: #f6f8fb; }
  .vn-app body .hoja h3 { color: #1e3a8a; }
  .vn-app body .titulo-rep { border-bottom-color: #0b5cad; }
  .vn-app body .atraso { color: #d35400; } .vn-app body .autorizado { color: #1e8449; } .vn-app body .falta { color: #c62828; }
  .vn-app body .kpi.aviso .n { color: #d35400; }
}