/* =====================================================================
   LYKOS · ACTA DE VERIFICACION DE DOMICILIO (VERIDOM)

   Homologada al acta que imprime la isla de VERIDOM
 (lykos-veridom/public/index.html, funcion `imprimir`).

   Se porta el formato, NO el juicio: el veredicto que se pinta en la
   banda lo calcula `veridom_dictamen` en el servidor. La isla componia
   su veredicto en la pantalla y encadenaba las reglas de tal modo que
   la distancia al centroide del CP pisaba cualquier otra senal — que es
   exactamente como un expediente correcto salia acusado.

   TRES COSAS QUE NO SE COPIARON DE LA ISLA, A PROPOSITO:

   1. `print-color-adjust:exact`. La isla no lo trae, asi que su banda
      de veredicto solo sale con color si quien imprime trae palomeado
      "Graficos de fondo" en el dialogo de Chrome. Un acta cuyo
      semaforo depende de una casilla no sirve de acta.

   2. La bitacora NO lleva `page-break-inside:avoid`. Un bloque mas
      alto que una hoja con esa regla salta de pagina Y SE DESBORDA
      igual — es el error que partio el mensualizado de la cotizacion.
      Se protege renglon por renglon y el encabezado se repite con
      <thead>, que es lo que de verdad resuelve una tabla larga.

   3. Colores en hexadecimal literal, no `var(--algo)`. Este archivo se
      imprime: un var() que no exista aqui no falla, DESAPARECE.

   Todo cuelga de #vd-acta-ov para no tocar una sola regla del panel.
   ===================================================================== */

#vd-acta-ov{
  position:fixed;inset:0;z-index:9000;background:var(--fondo);
  overflow:auto;padding:18px;
}
#vd-acta-barra{
  position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;max-width:860px;margin:0 auto 14px;padding:12px 14px;
  background:var(--superficie-2);border-radius:var(--r-md,10px);color:var(--texto);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
#vd-acta-barra .t{font-weight:800;font-size:14px;letter-spacing:.02em;flex:1;min-width:180px}
#vd-acta-barra .t small{display:block;font-weight:500;opacity:.72;font-size:12px;letter-spacing:0}
#vd-acta-barra button{
  width:auto;min-height:38px;padding:0 16px;border-radius:8px;cursor:pointer;
  font:600 13.5px/1 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;
}
/* ── ESTO ES CONSOLA, NO DOCUMENTO ──
   Estaba en el amarillo de Lykos escrito a mano. La regla madre dice
   que «la Consola entera» va en Orvik «aunque el usuario este
   trabajando en Lykos», y el anexo de diseno prohibe en su regla 1
   escribir un color en una pantalla. La barra y el aviso son el marco
   que mira Capital Humano para dictaminar: pantalla del sistema.
   LA HOJA de mas abajo es otra cosa --documento con efecto legal-- y
   esa SI lleva el color de la operativa que la emite. */
#vd-acta-barra button.pri{background:var(--amar);border-color:var(--amar);
  color:var(--sobre-amar)}
#vd-acta-barra button:hover{filter:brightness(1.08)}
#vd-acta-aviso{
  max-width:860px;margin:0 auto 14px;padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb, var(--amar) 12%, var(--superficie));
  border:1px solid var(--amar);color:var(--texto);
  font:500 13.5px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#vd-acta-aviso b{color:var(--texto)}

/* ── LA HOJA ───────────────────────────────────────────────────────── */
#vd-acta{
  background:#fff;max-width:860px;margin:0 auto;padding:26px 28px;
  box-shadow:0 2px 14px rgba(0,0,0,.14);
  font:9.3pt/1.42 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#0B1B33;
}
#vd-acta table{border-collapse:collapse}
#vd-acta .pg{padding-bottom:26px;margin-bottom:26px;border-bottom:1px dashed #cfd6e0}
#vd-acta .pg:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

#vd-acta .ph{width:100%;border-bottom:2px solid #041E42;margin-bottom:16px}
#vd-acta .ph td{padding:12px 0;vertical-align:middle}
#vd-acta .ph-l{width:44%}
#vd-acta .ph-l img{height:48px;width:auto;display:block}
#vd-acta .ph-r{width:56%;text-align:right}
#vd-acta .ph-k{font-size:11.5pt;font-weight:800;color:#041E42}
#vd-acta .ph-f{font-size:7.4pt;color:#5D6B7E;margin-top:1px}

#vd-acta .pf{width:100%;border-top:1.5px solid #041E42;margin-top:10px}
#vd-acta .pf td{padding-top:6px;font-size:6.7pt;color:#626F7F}
#vd-acta .pf td.der{text-align:right}

#vd-acta .ps{
  border:1px solid #E8ECF1;border-radius:7px;padding:9px 11px;margin-bottom:8px;
  page-break-inside:avoid;break-inside:avoid;
}
#vd-acta .ps-t{
  font-size:8.1pt;font-weight:800;color:#041E42;text-transform:uppercase;
  letter-spacing:.5px;padding-bottom:6px;border-bottom:1.5px solid #041E42;margin-bottom:8px;
}

/* La banda del veredicto. Lleva print-color-adjust para que el color
   salga impreso sin depender del dialogo del navegador. */
#vd-acta .vd{
  border-radius:7px;padding:10px 12px;margin-bottom:8px;border:1.5px solid;display:block;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
#vd-acta .vd-t{font-size:12.3pt;font-weight:800;margin-bottom:3px}
#vd-acta .vd-m{font-size:8.3pt;line-height:1.5;color:#0B1B33}
#vd-acta .vd-p{font-size:7.4pt;margin-top:5px;font-weight:700;opacity:.85}
#vd-acta .v-verde{background:#E9FAF3;border-color:#16C47F;color:#0A7A50}
#vd-acta .v-amarillo{background:#FFFBEE;border-color:#FFC207;color:#8A5A00}
#vd-acta .v-rojo{background:#FFF0F0;border-color:#FF4D4F;color:#B3272A}
#vd-acta .v-gris{background:#F5F7FA;border-color:#9BA8B8;color:#44546A}

#vd-acta .two{width:100%;border-spacing:5px 0;border-collapse:separate}
#vd-acta .two td{vertical-align:top;width:50%}

#vd-acta .idg table{width:100%}
#vd-acta .idg td{
  padding:2.4px 0;border-bottom:1px dotted #E8ECF1;font-size:8.3pt;vertical-align:top;
}
#vd-acta .idg td.k{
  color:#5D6B7E;font-size:6.6pt;text-transform:uppercase;letter-spacing:.4px;
  font-weight:700;width:36%;padding-right:7px;
}
#vd-acta .g{color:#0A7A50;font-weight:700}
#vd-acta .w{color:#8A5A00;font-weight:700}
#vd-acta .r{color:#B3272A;font-weight:700}

/* Tablas de datos: la bitacora y las senales. El encabezado va en
   <thead> para que se repita si la tabla pasa de hoja. */
#vd-acta table.t{width:100%;font-size:7.8pt}
#vd-acta table.t th{
  background:#041E42;color:#fff;padding:4.5px 6px;font-size:6.7pt;
  text-transform:uppercase;letter-spacing:.3px;text-align:center;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
#vd-acta table.t td{padding:3.8px 6px;border-bottom:1px solid #E8ECF1;text-align:center}
#vd-acta table.t .lft{text-align:left}
#vd-acta table.t tr{page-break-inside:avoid;break-inside:avoid}
#vd-acta .ps.larga{page-break-inside:auto;break-inside:auto}
#vd-acta .ps.larga .ps-t{page-break-after:avoid;break-after:avoid}

#vd-acta .ll{
  background:#F5F7FA;border-left:3px solid #FFC207;padding:7px 10px;margin-top:7px;
  font-size:8.1pt;line-height:1.52;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
#vd-acta .ll b{color:#041E42}
#vd-acta .mini{font-size:6.9pt;color:#5D6B7E;line-height:1.48;margin-top:6px;font-style:italic}
#vd-acta .huella{
  font-family:ui-monospace,Menlo,monospace;font-size:7pt;word-break:break-all;color:#041E42;
}

/* Evidencia: 4 por hoja, 2x2. Esquinas poco redondeadas: la vista
   previa de las fotos no las lleva con esquinas tan redondeadas. */
#vd-acta .dib{width:100%;border-spacing:7px 7px;border-collapse:separate;table-layout:fixed}
#vd-acta .dib tr{page-break-inside:avoid;break-inside:avoid}
#vd-acta .dib td{width:50%;text-align:center;vertical-align:top;page-break-inside:avoid;break-inside:avoid}
#vd-acta .dib .cel{
  border:1px solid #E8ECF1;border-radius:4px;padding:5px;background:#fff;
  page-break-inside:avoid;break-inside:avoid;
}
/* 84 mm, no los 92 mm de la isla. Medido: con 92 mm una hoja de 2x2
   suma ~253 mm contra los 257 mm utiles de una carta con margen de
   11 mm — y se desborda a una segunda pagina, que es justo lo que
   rompe el "Pagina N de M". A 84 mm la hoja suma ~240 mm y quedan 17
   mm de holgura, suficientes para que no dependa del redondeo del
   navegador. Comprobado imprimiendo cada hoja por separado. */
#vd-acta .dib img{
  width:100%;height:84mm;object-fit:contain;display:block;background:#F7F9FB;border-radius:3px;
}
#vd-acta .dib .nofoto{
  width:100%;height:84mm;display:flex;align-items:center;justify-content:center;
  background:#F7F9FB;border-radius:3px;color:#626F7F;font-size:8pt;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
#vd-acta .dc{
  font-size:7pt;color:#041E42;margin-top:4px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;
}
#vd-acta .dc small{
  display:block;font-weight:500;color:#5D6B7E;font-size:6.3pt;
  letter-spacing:0;text-transform:none;margin-top:1px;
}
#vd-acta .ps.fotos{page-break-inside:avoid;break-inside:avoid}
#vd-acta .firma{max-height:22mm;max-width:60mm;display:block}

/* ── IMPRESION ─────────────────────────────────────────────────────── */
@media print{
  @page{size:letter;margin:11mm 13mm}
  body.vd-print > *{display:none!important}
  body.vd-print #vd-acta-ov{
    display:block!important;position:static;padding:0;background:#fff;overflow:visible;
  }
  body.vd-print #vd-acta-ov > *{display:none!important}
  body.vd-print #vd-acta-ov #vd-acta{
    display:block!important;max-width:none;margin:0;padding:0;box-shadow:none;
  }
  body.vd-print #vd-acta .pg{
    page-break-after:always;border-bottom:0;margin-bottom:0;padding-bottom:0;
  }
  body.vd-print #vd-acta .pg:last-child{page-break-after:auto}
}

/* =====================================================================
   EL MISMO LENGUAJE, EN PANTALLA
   ---------------------------------------------------------------------

   Tenia razon y el reclamo es de fondo: tener dos disenos para el mismo
   expediente es tener dos documentos. Quien revisa en pantalla y quien
   lee el acta impresa tienen que estar viendo LO MISMO, con la misma
   jerarquia, o la revision y el acta dejan de hablar del mismo caso.

   Por eso las piezas de pantalla viven en ESTE archivo, pegadas a las
   de impresion: el dia que alguien cambie la banda del veredicto, la
   tiene enfrente en las dos versiones.

   DIFERENCIA DELIBERADA CON LA PARTE DE ARRIBA: aqui los colores van en
   `var(--token)` del panel, no en hexadecimal. La hoja impresa siempre
   es blanca; la pantalla tiene modo claro y oscuro, y clavar un #fff
   aqui dejaria texto blanco sobre blanco. Los nombres son los que
   EXISTEN en index.html —`--superficie`, `--text-3`, `--ok-txt`,
   `--amar-dark`, `--danger-txt`—: un var() inventado no truena, se
   salta y el estilo desaparece sin avisar.
   ===================================================================== */

/* ════════════════════════════════════════════════════════════════
   PASO 5 DE ORVIK · EL COLOR · 21 de octubre de 2026

   POR QUE EL TEXTO SALIA INVISIBLE. Esta mitad mezclaba DOS sistemas
   de tokens: `--text` (de panel.css) junto a `--texto` (de
   orvik-tokens.css). Parecen el mismo y NO lo son: se definen bajo
   condiciones de tema distintas.

     panel.css  oscuro -> @media (prefers-color-scheme: dark)
     orvik      claro  -> :root:not([data-tema="oscuro"])

   En AUTOMATICO no hay atributo `data-tema`, asi que la regla de Orvik
   --mas especifica-- gana y pone los FONDOS claros, mientras `--text`,
   que solo existe en panel.css, se queda con su valor de oscuro. El
   resultado es texto casi blanco sobre fondo claro. Reportado por
   Direccion el 21/oct con captura.

   Es el mismo modo de falla que ya nos costo antes: «no claro» no
   significa «oscuro», y en automatico hay CUATRO combinaciones.

   La correccion no es escribir un color: es que el texto y el fondo
   salgan del MISMO sistema. Todo lo de pantalla pasa a los tokens de
   Orvik, que es lo que ya mandan los fondos.

   Y de paso salen dos cosas que el anexo prohibe:
     · el navy #041E42 y el amarillo de Lykos, que son COLOR DE MARCA
       dentro de la consola. Esta pantalla es interna --Capital Humano
       dictaminando un domicilio--, no un documento del cliente, asi
       que su acento es el de Orvik;
     · el AMARILLO DE ALERTA (255,159,28) escrito a mano en las tintas
       de las bandas. Pasa a `--record-ambar`, que es el ambar de aviso
       del sistema y tiene un solo trabajo.

   La mitad del ACTA IMPRESA no se toca: es un documento legal, va con
   la marca de la operativa y en hexadecimal literal porque se imprime.
   ════════════════════════════════════════════════════════════════ */

/* ── La banda del veredicto ── */
/* ── PASO 2 DE ORVIK · LAS TARJETAS ──
   Tabla del 08 §4: radio 20, borde 1 px, relleno 20. Tenia radio 14
   --`--r-lg`, que es el token VIEJO--, borde de 1.5 y relleno 14/16.
   El margen de 12 ya era el del §5 («12 entre tarjetas de un mismo
   bloque») y no se toca. */
.vd-banda{
  border:1px solid;border-radius:var(--r-tarjeta);padding:20px;margin:0 0 12px;
}
.vd-banda .t{font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0 0 5px}
.vd-banda .m{font-size:13px;line-height:18px;color:var(--texto)}
.vd-banda .p{font-size:13px;font-weight:600;margin-top:7px;opacity:.85}
.vd-verde   {background:var(--exito-suave);border-color:var(--exito-texto)}
/* Los titulos se mezclan un 20% hacia `--texto`, que es el color de
   texto de la PAGINA. Mezclar hacia el va SIEMPRE en direccion
   contraria al fondo --oscurece en claro, aclara en oscuro-- asi que
   sube el contraste en los dos temas sin escribir un color.
   Medido: el ambar en claro estaba en 4.35, por debajo del minimo. */
.vd-verde .t{color:color-mix(in srgb, var(--exito-texto) 80%, var(--texto))}
.vd-amarillo{background:color-mix(in srgb, var(--record-ambar) 11%, transparent);
             border-color:color-mix(in srgb, var(--record-ambar) 55%, transparent)}
.vd-amarillo .t{color:color-mix(in srgb, var(--record-ambar) 80%, var(--texto))}
.vd-rojo    {background:var(--peligro-suave);border-color:var(--peligro-borde)}
.vd-rojo .t {color:color-mix(in srgb, var(--peligro-texto) 80%, var(--texto))}
.vd-gris    {background:var(--superficie-2);border-color:var(--linea)}
.vd-gris .t {color:var(--texto-2)}

/* ── La caja de seccion: titulo en versalitas con filete navy, igual
      que la `.ps` del acta ── */
.vd-caja{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-tarjeta);padding:20px;margin:0 0 12px;
}
.vd-caja-t{
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto);padding-bottom:7px;margin:0 0 10px;
  border-bottom:2px solid var(--marca-principal);
}
.vd-caja-t .der{float:right;font-weight:600;color:var(--texto-3);letter-spacing:.04em}

/* ── Etiqueta y dato, con el punteado del acta ── */
.vd-kv{width:100%;border-collapse:collapse}
.vd-kv td{
  padding:7px 0;border-bottom:1px dotted var(--linea);
  font-size:13px;color:var(--texto);vertical-align:top;line-height:18px;
}
.vd-kv tr:last-child td{border-bottom:0}
.vd-kv td.k{
  width:34%;padding-right:12px;font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto-3);line-height:18px;
}
.vd-kv td.vacio,.vd-vacio{color:var(--texto-3);font-style:italic;font-weight:500}
.vd-g{color:var(--exito-texto);font-weight:600}
.vd-w{color:var(--record-ambar);font-weight:600}
.vd-r{color:var(--peligro-texto);font-weight:600}
.vd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}

/* ── Las dos columnas Titular / Domicilio. En telefono se apilan: es
      donde de verdad se revisa. ── */
/* `align-items:start` para que cada caja mida lo suyo. Sin esto el
   grid las estira a la misma altura y, como Domicilio declarado trae
   el doble de renglones que Titular, queda un hueco blanco enorme
   debajo del nombre. */
.vd-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px;align-items:start}
.vd-dos > .vd-caja{margin:0}
@media (max-width:760px){ .vd-dos{grid-template-columns:1fr} }

/* ── Tabla de datos, con el encabezado navy del acta ── */
.vd-tabla{width:100%;border-collapse:collapse;font-size:13px}
.vd-tabla th{
  background:var(--marca-principal);color:var(--marca-sobre-principal);padding:7px 9px;font-size:13px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;text-align:center;white-space:nowrap;
}
.vd-tabla th:first-child,.vd-tabla td:first-child{text-align:left}
.vd-tabla td{padding:8px 9px;border-bottom:1px solid var(--linea);text-align:center;color:var(--texto)}
.vd-tabla tr:last-child td{border-bottom:0}
.vd-tabla td.ancho{text-align:left;line-height:1.45;color:var(--texto-2)}
.vd-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){ .vd-tabla{font-size:13px} .vd-tabla th,.vd-tabla td{padding:7px} }

/* ── La nota al pie de una seccion ── */
.vd-mini{
  font-size:13px;color:var(--texto-3);line-height:18px;margin-top:9px;font-style:italic;
}
/* ── El recuadro legal, con el filete amarillo del acta ── */
.vd-ll{
  background:var(--superficie-2);border-left:3px solid var(--record-ambar);
  padding:10px 12px;margin-top:9px;font-size:13px;line-height:18px;color:var(--texto-2);
}
.vd-ll b{color:var(--texto)}

/* ── La evidencia: misma rejilla y mismo pie que el acta, con esquinas
      poco redondeadas ── */
.vd-fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:520px){ .vd-fotos{grid-template-columns:1fr} }
.vd-foto{
  position:relative;border:1px solid var(--linea);border-radius:var(--r-chico);
  background:var(--superficie);padding:6px;
}
.vd-foto img{
  width:100%;height:210px;object-fit:cover;display:block;
  background:var(--superficie-2);border-radius:var(--r-chico);cursor:zoom-in;
}
.vd-foto .pie{
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texto);margin-top:7px;line-height:18px;
}
.vd-foto .pie small{
  display:block;font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--texto-3);margin-top:2px;
}
.vd-foto.falta{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:210px;border-style:dashed;color:var(--texto-3);text-align:center;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:16px}
.vd-foto .repetir{
  position:absolute;top:12px;right:12px;width:auto;min-height:32px;padding:0 11px;
  font-size:13px;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-control);cursor:pointer;color:var(--texto);font-weight:600;
}
.vd-foto .marca{
  position:absolute;top:12px;left:12px;font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 8px;border-radius:var(--r-control);
  background:rgba(255,77,79,.12);color:var(--peligro-texto);
}

/* ── EL CARRETE, EN PROFUNDIDAD ──
   Las vecinas no van al lado: van DETRAS y giradas, como fotos puestas
   en un riel. Eso le dice a la vista, sin leer nada, que es lo que se
   esta mirando y que viene despues. Las flechas van FUERA de la foto
   porque encima tapaban justo lo que se va a revisar — un numero
   exterior, el borde de una barda caida. */
.fx-lupa-tit{color:#fff;text-align:center;line-height:1.3}
.fx-lupa-tit b{display:block;font-weight:600;font-size:15px}
.fx-lupa-tit span{
  display:block;font-weight:600;font-size:13px;color:rgba(255,255,255,.62);margin-top:2px;
}
.fx-lupa-fila{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}

/* La perspectiva vive en la escena; la pista es la que conserva el 3D
   de sus hijas. Si `preserve-3d` faltara, las tarjetas se aplanarian y
   el giro se veria como un simple encogimiento. */
/* ── EL CARRETE FAVORECE EL ALTO, NO EL ANCHO ──


   Medido antes de tocarlo, a 1440x900: una foto horizontal salia de
   620x349 y una vertical de 309x550. La vertical con LA MITAD de ancho.

   La causa es que la caja era fija y apaisada --620 de ancho por 64vh de
   alto--. Una foto horizontal la llena a lo ancho; una vertical choca
   primero con el alto y se queda angosta. Y resulta que las fotos del
   recorrido son casi todas VERTICALES, porque salen de un telefono: la
   caja estaba optimizada justo para el caso raro.

   Se le da mas alto --con tope para no empujar la tira de miniaturas
   fuera de la pantalla en monitores bajos-- y un poco mas de ancho. Con
   eso las dos orientaciones acaban ocupando un area parecida, que es lo
   que el ojo compara. */
.fx-lupa-escena{
  flex:1 1 auto;min-width:0;
  height:min(78vh, calc(100vh - 190px));
  perspective:1800px;perspective-origin:50% 50%;
}
.fx-lupa-pista{position:relative;width:100%;height:100%;transform-style:preserve-3d}

.fx-lupa-card{
  position:absolute;left:50%;top:50%;margin:0;
  width:min(680px,56vw);height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;backface-visibility:hidden;
  /* Arranca rapido y frena suave: a velocidad constante se siente
     mecanico; asi se siente que la foto tiene peso. */
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.fx-lupa-card img{
  max-width:100%;max-height:calc(100% - 26px);object-fit:contain;display:block;
  border-radius:var(--r-control);background:#0b1b33;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
}
.fx-lupa-card figcaption{
  margin-top:8px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fx-lupa-card.aqui img{
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
}
.fx-lupa-card.aqui figcaption{display:none}

.fx-lupa-f{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:40;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  color:#fff;font-size:24px;line-height:1;
}
.fx-lupa-f:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.fx-lupa-f i{pointer-events:none}

.fx-lupa-tira{
  display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;max-width:min(900px,92vw);
  padding:4px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.fx-lupa-mini{
  flex:0 0 auto;width:58px;height:46px;padding:0;cursor:pointer;overflow:hidden;
  border:2px solid transparent;border-radius:var(--r-chico);background:rgba(255,255,255,.08);
  opacity:.45;transition:opacity .2s, border-color .2s;
}
.fx-lupa-mini img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fx-lupa-mini:hover{opacity:.85}
.fx-lupa-mini.aqui{opacity:1;border-color:var(--marca-principal)}

.fx-lupa-pie{
  color:rgba(255,255,255,.72);font-size:13px;text-align:center;
  max-width:min(900px,92vw);min-height:1em;
}
.fx-lupa-pies{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.fx-lupa-pies span{color:rgba(255,255,255,.5);font-size:13px}

@media (max-width:620px){
  .fx-lupa-f{width:42px;height:42px;font-size:20px}
  .fx-lupa-escena{height:54vh;perspective:1200px}
  .fx-lupa-card{width:72vw}
  .fx-lupa-pies{flex-direction:column;gap:8px}
}
/* Quien pidió menos movimiento en su sistema no tiene por qué marearse
   para revisar diez fotos. */
@media (prefers-reduced-motion:reduce){
  .fx-lupa-card{transition:none}
}

/* ── La firma, en tamaño de firma ──
 Es una prueba: si no se puede
   comparar contra la del contrato, no sirve de nada tenerla. Va en su
   propio recuadro claro —muchas se trazan en negro sobre transparente y
   desaparecen en modo oscuro— y se puede abrir en grande. */
.vd-firma{
  display:block;max-height:120px;max-width:100%;width:auto;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-control);
  padding:8px 10px;cursor:zoom-in;
}

/* ════════════════════════════════════════════════════════════════
   EL ACTA EN ORVIK · 16 de octubre de 2026
   Visto con captura: el botón «Volver», el de «Ver e imprimir el
   acta», la raya bajo el folio y el aviso de «REQUIERE REVISIÓN»
   salían en el amarillo de Lykos.

   Esta pantalla NO es un documento del cliente --ésos sí conservan la
   marca de la operativa que los emite--: es una pantalla interna que
   mira Capital Humano para dictaminar un domicilio. El sistema es
   Orvik, así que sus controles van en el acento de la consola.

   Y hay una distinción que importa: de los cinco amarillos, TRES no
   eran marca sino AVISO --«requiere revisión», el bloque de cambios, el
   recuadro ámbar--. Ésos no se tiñen de teal: pasan al ámbar de
   advertencia del sistema (`--record-ambar`), que es un color con un
   solo trabajo. Teñir un aviso del color de la marca sería borrar la
   diferencia entre «mírame» y «esto es de la casa».
   ════════════════════════════════════════════════════════════════ */

/* Los dos que SÍ eran marca */
#vd-acta-barra button.pri {
  background: var(--marca-principal);
  border-color: var(--marca-principal);
  color: var(--marca-sobre-principal);
}
.fx-lupa-mini.aqui { border-color: var(--marca-principal) }

/* Los tres que eran AVISO, al ámbar del sistema */
#vd-acta .v-amarillo,
#vd-acta .v-aviso {
  background: color-mix(in srgb, var(--record-ambar) 10%, transparent);
  border-color: color-mix(in srgb, var(--record-ambar) 45%, transparent);
  color: var(--record-ambar);
}