/* ===================================================================
 *  CARNE DIGITAL EN VIVO — estilos
 *  Ingenieros AVI · CRM   ·  [03/09/2026]
 *
 *  QUE RESUELVE
 *    Un carne en pantalla tiene un problema: una captura guardada en
 *    el telefono se ve exactamente igual. Quien lo revisa en una
 *    porteria no puede distinguir el carne real de una foto vieja.
 *
 *    Esto agrega tres senales que SOLO existen en la pantalla real:
 *      1. un contador de segundos sobre la fotografia,
 *      2. una franja con hora y un punto que late,
 *      3. un anillo que gira y un destello que cruza la tarjeta.
 *
 *    A quien revisa se le pide una sola cosa: mirar dos segundos. Si
 *    nada se mueve, es una foto vieja.
 *
 *  ADAPTADO A ESTE CRM
 *    El documento de origen daba por hecho un carne dibujado en SVG,
 *    con la foto dentro del propio dibujo. Aqui el carne es HTML: la
 *    foto vive en <div class="vc-ring"><img class="vc-photo"></div>.
 *    Eso simplifica las cosas —no hay que calcular coordenadas dentro
 *    de un viewBox, se mide el elemento y ya— y ademas resuelve solo
 *    el peor fallo del original: .vc-ring existe TENGA O NO foto, asi
 *    que el efecto sale igual con la fotografia y con la inicial.
 *
 *  ARCHIVO APARTE, A PROPOSITO
 *    Todo esto vive fuera de crm.css. Si algun dia estorba, se quita
 *    el <link> y el CRM queda exactamente como estaba.
 * =================================================================== */

/* ---- La franja de abajo: hora, fecha y vigencia ---- */
.cv-strip{display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;width:330px;max-width:100%;box-sizing:border-box;margin-top:10px}
.cv-punto{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:cvLatido 1s ease-out infinite}
@keyframes cvLatido{
  0%  {box-shadow:0 0 0 0 rgba(34,197,94,.65);opacity:1}
  70% {box-shadow:0 0 0 9px rgba(34,197,94,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);opacity:1}
}
.cv-txt{line-height:1.3;text-align:left}
.cv-hora{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px;color:var(--txt)}
.cv-fecha{font-size:10.5px;color:var(--muted)}
.cv-vig{display:block;font-size:10.5px;color:#16a34a;margin-top:2px;font-weight:600}
html[data-theme="dark"] .cv-vig{color:#86efac}

/* ---- El destello que cruza la tarjeta ----
   Se aplica sobre .vcarnet, que YA lleva overflow:hidden y sus
   esquinas redondeadas, asi que el destello queda recortado a la
   forma del carne sin anadir nada. */
.vcarnet.cv-live{position:relative}
.vcarnet.cv-live::after{
  /* top/right/bottom/left por separado, NO la forma corta `inset`:
     esa no existe antes de iOS 14.5 y ahi el destello queda de tamano
     cero, sin dar ningun error. Es uno de los cinco fallos que costo
     encontrar en el CRM de origen. */
  content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;right:-60%;
  pointer-events:none;z-index:4;
  background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 58%);
  animation:cvDestello 3.6s linear infinite}
@keyframes cvDestello{ from{transform:translateX(-60%)} to{transform:translateX(60%)} }

/* ---- El anillo, el brillo y el contador, sobre la foto ----
   .cv-foto se coloca por JavaScript encima de .vc-ring. No recorta
   nada: el unico que recorta es .cv-mask, y solo para que el brillo no
   se salga del circulo de la cara. El anillo vive FUERA de esa capa;
   si estuviera dentro, el recorte se lo comeria entero — ese fallo
   dejaba el anillo invisible en TODOS los aparatos, no solo en el
   iPhone. */
.cv-foto{position:absolute;pointer-events:none;z-index:5}
.cv-mask{position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:50%;overflow:hidden}
.cv-brillo{position:absolute;top:-30%;left:-45%;width:42%;height:160%;
  /* `transparent` puro se interpola hacia negro en algunos motores y
     deja una banda gris. Se escribe el blanco transparente a mano. */
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(0)}
/* Un solo lado coloreado hace que el giro se note; uno uniforme
   giraria sin que se viera. */
.cv-anillo{position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;
  border-radius:50%;border:4px solid rgba(34,197,94,.22);
  border-top-color:#22c55e;transform:rotate(0deg);
  /* Fuerza una capa propia en iOS. Sin esto, Safari a veces no
     repinta un elemento cuyo transform cambia por JavaScript. */
  -webkit-backface-visibility:hidden;backface-visibility:hidden}

/* ---- EL CONTADOR DE SEGUNDOS: la pieza que no puede fallar ----
   Es TEXTO que cambia cada segundo con el mismo reloj que ya avanza
   en el iPhone. No depende de animaciones CSS, ni de
   requestAnimationFrame, ni del modo de bajo consumo, ni del ajuste
   «reducir movimiento». Todo lo demas es mejora; esto es la prueba. */
.cv-seg{position:absolute;right:-6px;bottom:-2px;min-width:26px;height:26px;
  box-sizing:border-box;padding:0 5px;border-radius:13px;
  background:#15803d;border:2px solid #dcfce7;color:#fff;
  font-size:13px;font-weight:800;line-height:22px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(0,0,0,.45)}

/* Con «reducir movimiento» se quitan los adornos que se desplazan,
   pero NO la prueba: el anillo sigue latiendo y el reloj avanzando.
   La demostracion de que la pantalla esta viva no puede depender de
   una preferencia del telefono. */
@media(prefers-reduced-motion:reduce){
  .cv-punto{animation:none}
  .vcarnet.cv-live::after,.cv-brillo{display:none}
}

/* ---- La ventana ---- */
#micarnet-overlay .modal{width:380px;max-width:96vw}
#micarnet-carnet{display:flex;flex-direction:column;align-items:center;gap:0}
.cv-nota{font-size:11px;color:var(--muted);line-height:1.45;margin-top:10px;
  text-align:center;max-width:330px}
@media(max-width:420px){
  .cv-strip{width:100%}
  .cv-nota{max-width:100%}
}