/* ============================================================
   LA VENTANILLA — reportes con número, sello y respuesta (v4.23)
   ------------------------------------------------------------
   Una ventanilla de oficina pública que, contra toda costumbre,
   contesta: número de trámite, sellos de goma, fojas, carpetas
   con pestaña y el hilo tricolor. Todo sale de tokens.css: los dos
   temas se arreglan solos.

   La única excepción a los tokens está en ventanilla.js y es a
   propósito: lo que se tacha en el editor "Tapar" va en negro
   puro, porque lo tachado no se tiene que leer en ningún tema.

   Índice
     1 · Sellos de estado (todas las vistas)
     2 · El flotante y el "¿Algo raro acá?" del juego
     3 · El diálogo (index.php) y la hoja del formulario
     4 · El formulario
     5 · La constancia
     6 · El editor "Tapar", la pastilla y el aviso
     7 · La página: cabecera, lobby y carpetas
     8 · La página: el trámite
     9 · La página: problemas conocidos
    10 · El panel (admin/bugs.php)
    11 · Movimiento reducido
   ============================================================ */

/* Todo lo que se esconde con el atributo hidden se esconde de
   verdad, aunque una regla de acá le ponga display:flex. */
.vt-raiz [hidden], .vt-pagina [hidden], .vt-editor[hidden] { display: none !important; }

/* Las notas chicas (components.css las pone en --tinta-3, 3,1-3,9:1) dicen
   cosas que importan acá: topes, plazos, "Le pasa a". Y los h3 del panel
   van en el oro de texto (el --py-oro daba 3,1:1). */
.vt-raiz .nota-mini, .vt-pagina .nota-mini, .vta .nota-mini { color: var(--tinta-2); }
.vta .panel-admin h3 { color: var(--py-oro-txt); }

/* ============================================================
   1 · SELLOS DE ESTADO
   El estado siempre es texto dentro de un sello: el color ayuda,
   no informa solo.
   ============================================================ */
/* El estado es lo que hace entendible el seguimiento: todos pasan
   4,5:1 en los dos temas (a 11 px en 800 no cuentan como texto
   grande). Recibido y Archivado van en --tinta-2 (7,4:1; el
   --tinta-3 daba 2,4-3,6) y el taller en el oro de TEXTO (el
   --py-oro queda para bordes y decoración: daba 2,6:1). */
.vt-s-recibido  { color: var(--tinta-2); }
.vt-s-revision  { color: var(--info); }
.vt-s-pregunta  { color: var(--acento); }    /* pide algo al jugador: el rojo de "Nuevo movimiento" */
.vt-s-taller    { color: var(--py-oro-txt); }
.vt-s-arreglado { color: var(--ok); }
.vt-s-proposito { color: var(--py-azul); }
.vt-s-anotada   { color: var(--tinta-2); }
.vt-s-archivado { color: var(--tinta-2); }
.vt-s-seguridad { color: var(--peligro); }

/* index.php y el panel no cargan pagina.css: el sello chico va también acá, igual al de allá.
   Sin la transparencia del de pagina.css (.95): con ella el oscuro no llegaba. */
.vt-raiz .sello-mini, .vta .sello-mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 11px; border: 2px double currentColor; border-radius: var(--r-sm);
  font-size: var(--t-xs); transform: rotate(-2deg); white-space: nowrap;
}
.vt-pagina .sello-mini, .vt-raiz .sello, .vt-pagina .sello, .vta .sello { opacity: 1; }
/* El sello que cae termina opaco (el de components.css queda en .9). */
.vt-raiz .sello-anima, .vt-pagina .sello-anima { animation-name: vt-sello-cae; }
@keyframes vt-sello-cae {
  0%   { opacity: 0; transform: rotate(-16deg) scale(2.4); }
  60%  { opacity: 1; transform: rotate(-2deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* Los sellos de reconocimiento del legajo */
.vt-sello-curso      { color: var(--ok); }
.vt-sello-informante { color: var(--py-oro-txt); }
.vt-sello-contralor  { color: #2a1c02; background: var(--foil-oro); border-color: #7a5608; }

/* ============================================================
   2 · EL FLOTANTE Y EL "¿ALGO RARO ACÁ?"
   El flotante conserva el id y la ubicación de layout.css; acá
   solo se le da el toque de 44 px y el globito.
   ============================================================ */
#btn-bug-flotante { min-height: var(--tap); display: inline-flex; align-items: center; gap: var(--e-2); }
#btn-bug-flotante .vt-globito {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--acento); color: var(--acento-txt);
  font-family: var(--f-dato); font-size: .72rem; letter-spacing: 0;
}
/* Con un evento, un minijuego, el resumen o el final abiertos, el
   flotante se va: adentro del modal está el "¿Algo raro acá?". */
body:has(#modal-evento:not(.oculto), #modal-minijuego:not(.oculto), #modal-mj-fin:not(.oculto), #modal-resumen:not(.oculto), #modal-final:not(.oculto)) #btn-bug-flotante,
body.vt-abierto #btn-bug-flotante,
body.vt-capturando #btn-bug-flotante,
body.vt-minimizado #btn-bug-flotante { display: none; }

/* Con .modal-caja delante: las reglas de botón de los modales del juego le bajaban la altura.
   Con un modal abierto es la ÚNICA entrada (el flotante se esconde): discreta,
   pero legible. Antes: 11 px en --tinta-3 (3,6:1; en oscuro casi no se veía),
   justo para el jugador trabado en un evento, que es a quien le sirve. */
.vt-aca, .modal-caja .vt-aca {
  display: block; width: 100%;
  min-height: var(--tap);
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: none; border: 0;
  border-top: 1px dashed var(--borde);
  color: var(--tinta-2);
  font-size: var(--t-sm);
  text-align: center;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  cursor: pointer;
}
/* El bichito adelante, callado para los lectores de pantalla (el texto ya dice todo). */
.vt-aca::before { content: '🐛'; content: '🐛' / ''; display: inline-block; margin-right: .45em; text-decoration: none; }
.vt-aca:hover { color: var(--tinta); }

/* ============================================================
   3 · EL DIÁLOGO Y LA HOJA
   No es un .modal a propósito (app.js cierra todos los .modal al
   volver a la portada). Va encima de los modales del juego
   (--z-ventanilla), sin cerrarlos: arregla el "estoy trabado en
   un evento y no puedo avisar".
   ============================================================ */
body.vt-abierto { overflow: hidden; }
.vt-capa {
  position: fixed; inset: 0; z-index: var(--z-ventanilla);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-4);
}
.vt-fondo {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--fondo-alt) 78%, transparent);
  backdrop-filter: blur(4px);
}
.vt-hoja {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - 2 * var(--e-4));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie);
  background-image: var(--textura-papel);
  background-size: var(--trama-escala);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-modal);
  padding: var(--e-5) var(--e-5) 0;
}
.vt-hoja::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--hilo);
}
.vt-hoja-embebida {
  max-width: none; max-height: none; overflow: visible;
  box-shadow: none; border-color: var(--borde);
  padding: var(--e-4) var(--e-4) 0;
}

/* Teléfono: hoja a pantalla completa, con el pie pegado abajo. */
@media (max-width: 600px) {
  .vt-capa { padding: 0; align-items: stretch; }
  .vt-capa .vt-hoja {
    max-width: none; max-height: none; height: 100dvh;
    border-radius: 0; border: 0;
    padding: calc(var(--e-4) + env(safe-area-inset-top)) var(--e-4) 0;
  }
}

.vt-cab { position: relative; margin-bottom: var(--e-4); padding-right: 52px; }
.vt-hoja-embebida .vt-cab { padding-right: 0; }
.vt-rotulo {
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--tinta-2);
  margin: 0 0 var(--e-1);
}
.vt-titulo {
  font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 800;
  letter-spacing: var(--track-titulo); line-height: 1.1;
  margin: 0 0 var(--e-2);
}
.vt-bajada { color: var(--tinta-2); font-size: var(--t-sm); margin: 0; }
/* "Hay novedades…" y "Tus trámites" en UNA línea (antes eran dos
   párrafos que empujaban el campo de texto hacia abajo). */
.vt-cab-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-4); font-size: var(--t-sm); }
.vt-cab-links:not(:has(a:not([hidden]))) { display: none; }
/* La X ocupa solo el renglón del título: acá la fila usa todo el ancho. */
.vt-capa .vt-cab-links { margin-right: -52px; }
/* inline-block y no inline-flex: en un flex se pierden los espacios entre
   el texto y el <span> del número ("TrámiteN° 41/2026→"). */
.vt-cab-links a { display: inline-block; min-height: var(--tap); padding: .7rem 0; line-height: 1.3; }
.vt-cab-links .vt-pendiente { color: var(--acento); font-weight: 700; }
/* En la constancia, de la cabecera queda solo la X. */
.vt-cab.vt-cab-min { min-height: var(--tap); margin-bottom: var(--e-2); }
.vt-cab.vt-cab-min > :not(.vt-x) { display: none; }
.vt-hoja-embebida .vt-cab.vt-cab-min { display: none; }
.vt-x {
  position: absolute; top: calc(-1 * var(--e-2)); right: calc(-1 * var(--e-2));
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--tinta-2);
  border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer;
}
.vt-x svg { width: 20px; height: 20px; }
.vt-x:hover { color: var(--tinta); border-color: var(--borde-fuerte); }

/* Mientras se saca la foto de la pantalla, el diálogo no está: la
   foto muestra el juego (con el evento abierto), no el formulario. */
body.vt-capturando .vt-capa { visibility: hidden; }
body.vt-capturando .modal { backdrop-filter: none; }

/* ============================================================
   4 · EL FORMULARIO
   ============================================================ */
.vt-form { display: flex; flex-direction: column; gap: var(--e-4); }
.vt-grupo { border: 0; padding: 0; margin: 0; min-width: 0; }
.vt-grupo legend { padding: 0; }
.vt-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vt-chip { position: relative; display: inline-flex; cursor: pointer; }
.vt-chip input {
  position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.vt-chip > span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm); font-weight: 600;
  background: var(--superficie-2); color: var(--tinta-2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  transition: background var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
.vt-chip:hover > span { border-color: var(--tinta-3); color: var(--tinta); }
.vt-chip input:checked + span {
  background: var(--superficie); color: var(--tinta);
  border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento);
}
.vt-chip-alerta input:checked + span { border-color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); background: var(--alerta-suave); }
.vt-chip input:focus-visible + span { outline: 3px solid var(--py-oro); outline-offset: 2px; }
.vt-ayuda { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.vt-trabado {
  margin: var(--e-3) 0 0; padding: var(--e-3);
  font-size: var(--t-sm);
  background: var(--alerta-suave); border-left: 4px solid var(--alerta);
  border-radius: var(--r-sm);
}
.vt-campo { display: flex; flex-direction: column; }
/* 16 px: con menos, el iPhone hace zoom al tocar el campo. */
.vt-texto { font-size: 16px; }
/* Abajo del campo: "Descartar lo escrito" a la izquierda (lejos de
   "Guardar borrador", en el pie) y el contador a la derecha. */
.vt-campo-pie { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-1) var(--e-3); margin-top: var(--e-1); }
.vt-descartar { min-width: 0; }
.vt-descartar .vt-link { padding-left: 0; }
.vt-descartar-conf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
  background: var(--peligro-suave); border-left: 4px solid var(--peligro); border-radius: var(--r-sm);
}
.vt-descartar-conf > span { flex: 1 1 100%; }
.vt-contador { margin: 0 0 0 auto; min-height: var(--tap); display: flex; align-items: center; font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-2); text-align: right; }

.vt-ya-lo-sabemos, .vt-sugerencias {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3);
  background: var(--superficie-2); border: 1px dashed var(--py-oro);
  border-radius: var(--r-md);
}
.vt-ya-t { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.vt-conocido {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--e-1) var(--e-2);
}
.vt-conocido strong { font-size: var(--t-sm); }
.vt-conocido-n { grid-column: 2; font-size: var(--t-xs); color: var(--tinta-2); }
.vt-conocido .btn { grid-column: 1 / -1; justify-self: start; }
.vt-conocido .btn[aria-pressed="true"] { color: var(--ok); border-color: currentColor; background: var(--superficie); }
/* El "ya lo sabemos" de arriba del formulario: una frase y el botón. */
.vt-conocido-compacto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.vt-conocido-compacto .vt-ya-t { flex: 1 1 16em; font-weight: 400; }
.vt-conocido-compacto .vt-ya-t strong { font-weight: 700; }
.vt-conocido-compacto .btn { flex: none; }
.vt-ya-lo-sabemos:has(.vt-conocido-compacto) { padding: var(--e-2) var(--e-3); }
.vt-sumado {
  margin: 0; padding: var(--e-3); font-size: var(--t-sm);
  background: var(--ok-suave); border-left: 4px solid var(--ok); border-radius: var(--r-sm);
}

.vt-pruebas h3 { margin-bottom: var(--e-2); }
.vt-opcional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta-2); }
.vt-pista-emb { margin: var(--e-2) 0 0; }
.vt-pruebas-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vt-elegir { position: relative; cursor: pointer; }
/* El input vive oculto a la vista pero se enfoca con el teclado:
   el foco se dibuja en el botón que lo contiene. */
.vt-elegir:has(input:focus-visible) { outline: 3px solid var(--py-oro); outline-offset: 2px; }
.vt-elegir:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.vt-pista { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--info); font-weight: 600; }
.vt-limites, .vt-aviso-video { margin: var(--e-2) 0 0; }
.vt-aviso-video { color: var(--alerta); }
.vt-adjuntos { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.vt-adjuntos:empty { display: none; }
.vt-adj {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
  padding: var(--e-2);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-md);
}
.vt-adj img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--borde); }
.vt-adj-ico { width: 64px; height: 64px; display: grid; place-items: center; font-size: 1.8rem; background: var(--superficie-3); border-radius: var(--r-sm); }
.vt-adj-txt { flex: 1 1 8em; font-size: var(--t-sm); font-family: var(--f-dato); }

.vt-contexto {
  font-size: var(--t-sm);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie-2);
}
/* Todo lo que se despliega dice que se despliega. Un <summary> con
   display:flex o block pierde el triángulo (Chrome solo lo dibuja en
   list-item) y quedaba como texto suelto: acá va uno propio, ▸ que pasa
   a ▾, callado para los lectores de pantalla (el summary ya anuncia si
   está abierto). */
:is(.vt-contexto, .vt-ver-errores, .vt-errores-det, .vt-guardamos, .vta-accion, .vta-ua, .vta-errores details) > summary { list-style: none; }
:is(.vt-contexto, .vt-ver-errores, .vt-errores-det, .vt-guardamos, .vta-accion, .vta-ua, .vta-errores details) > summary::-webkit-details-marker { display: none; }
:is(.vt-contexto, .vt-ver-errores, .vt-errores-det, .vt-guardamos, .vta-accion, .vta-ua, .vta-errores details) > summary::before {
  content: '▸'; content: '▸' / ''; display: inline-block; flex: none; width: 1.1em; text-decoration: none;
}
:is(.vt-contexto, .vt-ver-errores, .vt-errores-det, .vt-guardamos, .vta-accion, .vta-ua, .vta-errores details)[open] > summary::before { content: '▾'; content: '▾' / ''; }

/* En bloque y no en flex: "Se adjunta solo:" era un ítem flex aparte y a
   360 px se partía en dos renglones en una columna angosta. */
.vt-contexto summary {
  display: block; min-height: var(--tap);
  padding: .7rem var(--e-3); line-height: 1.4; cursor: pointer; color: var(--tinta-2);
}
.vt-ctx-rot { white-space: nowrap; }
.vt-ctx-res { color: var(--tinta); font-weight: 600; }
.vt-contexto[open] summary { border-bottom: 1px dashed var(--borde); }
.vt-contexto > :not(summary) { margin: var(--e-2) var(--e-3); }
.vt-contexto-lista { padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }

.vt-casillas { display: flex; flex-direction: column; gap: var(--e-1); }
.vt-casilla, .vt-casilla > label {
  display: flex; align-items: flex-start; gap: var(--e-2);
  min-height: var(--tap); padding: var(--e-2) 0;
  font-size: var(--t-sm); cursor: pointer;
}
.vt-casilla:is(div) { flex-direction: column; gap: 0; padding: 0; }
.vt-casilla input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--acento); }
.vt-ver-errores { margin-left: 30px; font-size: var(--t-xs); }
.vt-ver-errores summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--link); }
.vt-errores-lista {
  margin: 0; padding: var(--e-2);
  font-family: var(--f-dato); font-size: var(--t-xs); white-space: pre-wrap; word-break: break-word;
  background: var(--superficie-3); border-radius: var(--r-sm);
}
/* El campo trampa: fuera de la vista y del teclado, a la vista de un bot. */
.vt-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vt-nota-anon { margin: 0; }
.vt-error { margin: 0; }
.vt-error a { margin-left: .3em; font-weight: 700; }
.vt-progreso { margin: 0; font-family: var(--f-dato); font-size: var(--t-sm); color: var(--tinta-2); min-height: 1.2em; }
.vt-progreso:empty { display: none; }
.vt-pie {
  position: sticky; bottom: 0;
  margin: 0 calc(-1 * var(--e-5));
  padding: var(--e-3) var(--e-5) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.vt-hoja-embebida .vt-pie { position: static; margin: 0 calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-4); }
@media (max-width: 600px) { .vt-capa .vt-pie { margin: 0 calc(-1 * var(--e-4)); padding-left: var(--e-4); padding-right: var(--e-4); } }
.vt-pie-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.vt-link {
  min-height: var(--tap); padding: 0 var(--e-2);
  background: none; border: 0; color: var(--link);
  font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ============================================================
   5 · LA CONSTANCIA (reemplaza al toast de 3 segundos)
   ============================================================ */
.vt-constancia { display: flex; flex-direction: column; gap: var(--e-3); padding-bottom: var(--e-5); }
.vt-constancia:focus { outline: none; }
.vt-const-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.vt-sello { font-size: var(--t-md); }
.vt-const-num { font-family: var(--f-dato); font-size: var(--t-xl); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.vt-const-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-3); margin: 0; font-size: var(--t-sm); }
.vt-const-datos div { display: contents; }
.vt-const-datos dt { color: var(--tinta-2); font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: var(--track-etiqueta); font-size: var(--t-xs); align-self: center; }
.vt-const-datos dd { margin: 0; }
.vt-const-txt { margin: 0; padding: var(--e-3); background: var(--superficie-2); border-left: 4px solid var(--ok); border-radius: var(--r-sm); }
.vt-const-link-fila { display: flex; gap: var(--e-2); }
.vt-const-link-fila .campo { flex: 1; min-width: 0; font-family: var(--f-dato); font-size: var(--t-xs); }
.vt-const-fallas { margin: 0; padding: var(--e-3) var(--e-3) var(--e-3) calc(var(--e-3) + 1em); background: var(--peligro-suave); border-radius: var(--r-sm); color: var(--peligro); font-size: var(--t-sm); }
.vt-const-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vt-const-botones .btn { flex: 1 1 12em; }

/* ============================================================
   6 · EL EDITOR "TAPAR", LA PASTILLA Y EL AVISO
   ============================================================ */
.vt-editor {
  position: fixed; inset: 0; z-index: calc(var(--z-ventanilla) + 10);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-3);
  background: color-mix(in srgb, var(--fondo-alt) 92%, transparent);
}
.vt-editor-caja {
  width: 100%; max-width: 760px; max-height: 100%;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4);
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  box-shadow: var(--sombra-modal);
  overflow: auto;
}
.vt-editor-t { margin: 0; font-family: var(--f-titulo); font-size: var(--t-lg); }
.vt-editor-nota { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.vt-editor-lienzo {
  display: grid; place-items: center; min-height: 0;
  background: var(--superficie-3); border-radius: var(--r-sm); padding: var(--e-2);
}
.vt-editor-lienzo canvas {
  max-width: 100%; max-height: 58dvh; width: auto; height: auto;
  touch-action: none; cursor: crosshair;
  border: 1px solid var(--borde);
}
.vt-editor-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vt-editor-botones [data-vt="listo"] { margin-left: auto; }
body.vt-editando { overflow: hidden; }

/* Mientras se saca la captura con los botones del celular: abajo, donde
   estaba el flotante (arriba tapaba "Mes N · Año N", lo que más sirve
   para repetir el problema), con la instrucción fija y en letra chica. */
.vt-minibarra {
  position: fixed; z-index: var(--z-ventanilla);
  left: 50%; bottom: calc(var(--e-3) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: min(calc(100vw - 2 * var(--e-3)), 420px);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--e-1);
  padding: var(--e-2);
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
}
.vt-minibarra-txt { margin: 0; padding: 0 var(--e-1); font-size: var(--t-xs); line-height: 1.35; }
.vt-pastilla {
  min-height: var(--tap); padding: var(--e-2) var(--e-4);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  background: var(--foil-rojo); color: #fff;
  border: 0; border-radius: var(--r-full);
  cursor: pointer;
}
.vt-pastilla:focus-visible { outline: 3px solid var(--py-oro); outline-offset: 2px; }
.vt-aviso-flotante {
  position: fixed; z-index: calc(var(--z-ventanilla) + 20);
  left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 480px);
  margin: 0; padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  background: var(--tinta); color: var(--superficie);
  border-radius: var(--r-md); box-shadow: var(--sombra-3);
}
/* Siempre en el DOM (role=status): vacío no se ve. */
.vt-aviso-flotante:empty { display: none; }

/* ============================================================
   7 · LA PÁGINA: CABECERA, LOBBY Y CARPETAS
   ============================================================ */
.pagina-ventanilla .envoltorio { padding-top: var(--e-4); }
.vt-pagina { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vt-portada {
  position: relative;
  padding: var(--e-5) var(--e-4) 0;
  background: var(--superficie);
  background-image: var(--textura-papel);
  background-size: var(--trama-escala);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.vt-portada::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--hilo); }
.vt-h1 {
  font-family: var(--f-titulo); font-size: var(--t-2xl); font-weight: 800;
  letter-spacing: var(--track-titulo); line-height: 1.05;
  margin: 0 0 var(--e-2);
}
.vt-bajada-pagina { margin: 0; max-width: 60ch; color: var(--tinta-2); }
.vt-sello-atiende {
  position: absolute; top: var(--e-5); right: var(--e-4);
  color: var(--ok); font-size: var(--t-sm);
}
/* El rótulo no pasa por debajo del sello. */
.vt-portada:has(.vt-sello-atiende) .vt-rotulo { padding-right: 7.5rem; }
@media (max-width: 480px) { .vt-sello-atiende { top: var(--e-4); font-size: var(--t-xs); } .vt-portada:has(.vt-sello-atiende) .vt-rotulo { padding-right: 6rem; } }
.vt-pestanas { display: flex; gap: var(--e-1); margin-top: var(--e-4); overflow-x: auto; }
.vt-pestanas a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--e-3);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-2); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.vt-pestanas a:hover { color: var(--tinta); }
.vt-pestanas a[aria-current="page"] { color: var(--tinta); border-image: var(--hilo) 1; border-bottom-width: 3px; border-bottom-style: solid; }

.vt-aviso-pagina {
  margin: 0; padding: var(--e-3) var(--e-4);
  background: var(--ok-suave); border-left: 4px solid var(--ok); border-radius: var(--r-sm);
}
.vt-aviso-alerta { background: var(--alerta-suave); border-left-color: var(--alerta); }

.vt-h2 {
  font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 800;
  letter-spacing: var(--track-titulo);
  margin: 0 0 var(--e-3);
}
.vt-bloque {
  min-width: 0;
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
}
.vt-bloque > :last-child { margin-bottom: 0; }
.vt-vacio { margin: 0; color: var(--tinta-2); font-style: italic; }
.vt-vacio-grande { padding: var(--e-5); text-align: center; font-size: var(--t-lg); }
.vt-remate { margin: var(--e-3) 0 0; font-family: var(--f-serif); font-style: italic; color: var(--tinta-2); }
.vt-mas { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.vt-noscript { margin: var(--e-3) var(--e-4); }

/* El lobby: una columna en el teléfono; en escritorio, tus trámites
   a la izquierda y presentar + lo que ya sabemos a la derecha. */
.vt-lobby { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .vt-lobby { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .vt-mis-tramites { grid-column: 1; grid-row: 1 / span 3; }
  .vt-presentar, .vt-ya-sabemos, .vt-legajo { grid-column: 2; }
}

.vt-presentar {
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  border-top: 4px solid var(--acento);
}
.vt-presentar > summary {
  list-style: none;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--e-3);
  min-height: var(--tap); padding: var(--e-3) var(--e-4);
  cursor: pointer;
}
.vt-presentar > summary::-webkit-details-marker { display: none; }
.vt-presentar > summary::after {
  content: '+'; grid-column: 2; grid-row: 1 / span 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--f-dato); font-size: 1.3rem; font-weight: 700;
  border: 2px solid currentColor; border-radius: 50%; color: var(--acento);
}
.vt-presentar[open] > summary::after { content: '−'; }
.vt-presentar-t { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 800; }
.vt-presentar-sub { grid-column: 1; font-size: var(--t-sm); color: var(--tinta-2); }
.vt-presentar[open] > summary { border-bottom: 1px dashed var(--borde); }
.vt-presentar .vt-raiz { padding: var(--e-3); }
.vt-presentar .vt-hoja-embebida { border: 0; background: none; padding: 0 var(--e-1); }
.vt-presentar .vt-hoja-embebida::before { display: none; }
.vt-presentar .vt-hoja-embebida .vt-pie { margin: 0; padding: var(--e-3) 0 var(--e-2); border-top: 1px dashed var(--borde); background: none; }

.vt-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.vt-filtro {
  min-height: var(--tap); padding: 0 var(--e-3);
  font-size: var(--t-sm); font-weight: 600;
  background: var(--superficie-2); color: var(--tinta-2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-full);
  cursor: pointer;
}
.vt-filtro:hover { color: var(--tinta); }
.vt-filtro[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }

/* La carpeta con pestaña: número arriba, cuerpo abajo. */
.vt-carpetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.vt-carpeta-link { display: block; color: inherit; text-decoration: none; }
.vt-pestana {
  display: inline-block;
  padding: 4px var(--e-3) 2px;
  font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 700;
  background: var(--superficie-3); color: var(--tinta-2);
  border: 1px solid var(--borde-fuerte); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  position: relative; top: 1px;
}
.vt-carpeta-cuerpo {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3);
  background: var(--superficie-2);
  background-image: var(--textura-papel); background-size: var(--trama-escala);
  border: 1px solid var(--borde-fuerte);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  transition: border-color var(--vel-rapida) var(--ease), transform var(--vel-rapida) var(--ease);
}
.vt-carpeta-link:hover .vt-carpeta-cuerpo { border-color: var(--py-oro); transform: translateY(-1px); }
.vt-carpeta-link:focus-visible { outline: none; }
.vt-carpeta-link:focus-visible .vt-carpeta-cuerpo, .vt-carpeta-link:focus-visible .vt-pestana { outline: 3px solid var(--py-oro); outline-offset: 2px; }
.vt-carpeta-nueva .vt-carpeta-cuerpo { border-left: 4px solid var(--acento); }
/* La pestaña con novedad: el rojo va en el borde (en texto, sobre --superficie-3 oscuro no llegaba). */
.vt-carpeta-nueva .vt-pestana { color: var(--tinta); border-top: 3px solid var(--acento); }
.vt-carpeta-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.vt-carpeta-cat { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm); }
.vt-carpeta-txt {
  font-size: var(--t-sm); color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.vt-carpeta-meta { font-size: var(--t-xs); color: var(--tinta-2); }
.vt-punto { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--acento); }
.vt-punto::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

.vt-mios-navegador { margin-top: var(--e-3); }
.vt-mios-lista { margin: var(--e-2) 0; padding-left: 1.1em; }
.vt-mios-lista li { min-height: var(--tap); display: list-item; }
.vt-mio-link { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--f-dato); font-weight: 700; }

.vt-mini-conocidos { list-style: none; margin: var(--e-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.vt-mini-conocidos li { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e-2); align-items: center; }
.vt-mini-t { font-weight: 600; font-size: var(--t-sm); }
.vt-mini-conocidos .nota-mini { grid-column: 2; }

.vt-legajo-nums { display: flex; gap: var(--e-5); margin: 0 0 var(--e-3); }
.vt-legajo-nums div { display: flex; flex-direction: column; }
.vt-legajo-nums dt { font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-2); }
.vt-legajo-nums dd { margin: 0; font-size: var(--t-2xl); font-weight: 700; }
.vt-legajo-barra { margin: var(--e-2) 0; }

/* ============================================================
   8 · LA PÁGINA: EL TRÁMITE
   ============================================================ */
.vt-miga a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.vt-tramite { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vt-caratula {
  position: relative;
  padding: var(--e-5) var(--e-4) var(--e-4);
  background: var(--superficie);
  background-image: var(--textura-papel); background-size: var(--trama-escala);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.vt-caratula::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--hilo); }
.vt-num { font-family: var(--f-dato); letter-spacing: -.02em; font-size: var(--t-xl); }
.vt-sello-grande { font-size: var(--t-lg); margin: var(--e-2) 0 var(--e-3); }
@media (min-width: 700px) {
  .vt-caratula { padding-right: 270px; min-height: 190px; }
  .vt-sello-grande { position: absolute; right: var(--e-5); top: var(--e-6); margin: 0; font-size: var(--t-lg); letter-spacing: .08em; line-height: 1.25; max-width: 230px; text-align: center; }
}
.vt-frase-sello { margin: 0 0 var(--e-3); color: var(--tinta-2); font-style: italic; }
/* Un trámite sin cuenta lo ve cualquiera con el link: la carátula lo dice. */
.vt-aviso-link {
  margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
  background: var(--alerta-suave); border-left: 4px solid var(--alerta); border-radius: var(--r-sm);
}
.vt-abrir-link .nota { max-width: 52ch; margin: 0; }
.vt-abrir-link form { justify-content: center; }
.vt-caratula-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); margin: 0; }
.vt-caratula-datos dt { font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-2); }
.vt-caratula-datos dd { margin: 0; font-size: var(--t-sm); font-weight: 600; }

/* El recorrido: el paso actual se dice en texto ("está acá"), no
   solo con el color. */
.vt-recorrido { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); counter-reset: paso; }
.vt-paso {
  position: relative; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  min-height: 36px; padding-left: 36px;
  font-size: var(--t-sm); color: var(--tinta-2);
}
.vt-paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 700;
  border: 2px solid var(--borde-fuerte); border-radius: 50%; background: var(--superficie);
}
.vt-paso-hecho { color: var(--tinta-2); }
.vt-paso-hecho::before { content: '✓'; border-color: var(--ok); color: var(--ok); }
.vt-paso-actual { color: var(--tinta); font-weight: 700; }
.vt-paso-actual::before { border-color: var(--acento); background: var(--acento); color: var(--acento-txt); }
.vt-paso-aca {
  font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 8px; border: 1px solid var(--acento); color: var(--acento); border-radius: var(--r-full);
}
@media (min-width: 700px) {
  .vt-recorrido { flex-direction: row; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
  .vt-paso + .vt-paso::after { content: ''; position: absolute; left: calc(-1 * var(--e-5) + 4px); top: 50%; width: calc(var(--e-5) - 8px); border-top: 2px dotted var(--borde-fuerte); }
}
.vt-arreglado, .vt-sumado-a { margin: var(--e-3) 0 0; font-size: var(--t-sm); padding: var(--e-3); border-radius: var(--r-sm); }
.vt-arreglado { background: var(--ok-suave); border-left: 4px solid var(--ok); }
.vt-sumado-a { background: var(--superficie-2); border-left: 4px solid var(--py-oro); }

.vt-pregunta {
  padding: var(--e-4);
  background: var(--alerta-suave); border: 1px solid var(--alerta); border-left-width: 5px;
  border-radius: var(--r-md);
}
.vt-pregunta-txt { font-size: var(--t-md); }
.vt-pregunta a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

.vt-fojas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.vt-foja { padding: var(--e-3); border-radius: var(--r-md); min-width: 0; }
.vt-foja p { margin: 0; }
.vt-foja-quien { font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); margin-bottom: var(--e-1) !important; }
.vt-foja-txt { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.vt-foja-jugador { background: var(--superficie-2); border-left: 4px solid var(--py-azul); margin-right: var(--e-5); }
.vt-foja-equipo { background: var(--superficie); border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--acento); margin-left: var(--e-5); box-shadow: var(--sombra-1); }
.vt-foja-equipo .vt-foja-quien { color: var(--acento); }
.vt-foja-sistema { padding: var(--e-1) var(--e-3); font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-2); border-top: 1px dashed var(--borde); border-radius: 0; text-align: center; }
@media (max-width: 480px) { .vt-foja-jugador { margin-right: var(--e-3); } .vt-foja-equipo { margin-left: var(--e-3); } }

.vt-galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3); }
.vt-galeria-item { display: flex; flex-direction: column; gap: var(--e-1); }
.vt-galeria-item img, .vt-galeria-item video {
  width: 100%; height: 120px; object-fit: cover;
  background: var(--superficie-3); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.vt-galeria-item a { display: block; border-radius: var(--r-sm); }

.vt-dato-form { display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start; }
.vt-dato-form .campo { font-size: 16px; }
.vt-dato-form .etiqueta { text-transform: none; letter-spacing: 0; font-family: var(--f-texto); font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.vt-dato-form .vt-adjuntos { width: 100%; }
.vt-dato-form .error-txt:empty { display: none; }

.vt-contexto-dl { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: var(--e-1) var(--e-3); margin: 0; font-size: var(--t-sm); }
.vt-contexto-dl div { display: contents; }
.vt-contexto-dl dt { color: var(--tinta-2); }
.vt-contexto-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .vt-contexto-dl { grid-template-columns: minmax(0, 1fr); } .vt-contexto-dl dd { margin-bottom: var(--e-2); } }
.vt-errores-det { margin-top: var(--e-3); font-size: var(--t-sm); }
.vt-errores-det summary, .vt-guardamos > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--link); font-weight: 600; }
.vt-errores-pag { margin: var(--e-2) 0 0; padding-left: 1.1em; font-size: var(--t-xs); overflow-wrap: anywhere; }
.vt-tabla-plazos { margin: var(--e-3) 0; font-size: var(--t-sm); }
.vt-tabla-plazos th, .vt-tabla-plazos td { text-align: left; padding: var(--e-2); border-bottom: 1px solid var(--borde); vertical-align: top; }
.vt-tabla-plazos th { font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-2); }
.vt-retirar { border-style: dashed; box-shadow: none; }
.vt-confirmar { margin-top: var(--e-3); padding: var(--e-3); background: var(--peligro-suave); border-radius: var(--r-sm); }
.vt-confirmar p { margin: 0 0 var(--e-3); }
.vt-confirmar .error-txt:empty { display: none; }

.vt-no-encontrado { text-align: center; padding: var(--e-6) var(--e-4); display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.vt-no-encontrado .sello { font-size: var(--t-lg); }

/* ============================================================
   9 · LA PÁGINA: PROBLEMAS CONOCIDOS
   ============================================================ */
.vt-termometro { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vt-filtros-conocidos { display: flex; flex-direction: column; gap: var(--e-2); }
.vt-filtros-conocidos .vt-filtros { margin: 0; }
.vt-buscar { display: block; max-width: 420px; }
.vt-buscar .campo { font-size: 16px; }
.vt-problemas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.vt-problema {
  position: relative;
  padding: var(--e-4);
  background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
}
.vt-problema-t { margin: 0; font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; padding-right: 0; }
.vt-problema-det { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.vt-problema-meta { margin: 0; font-size: var(--t-xs); color: var(--tinta-2); }
.vt-sello-problema { font-size: var(--t-xs); }
@media (min-width: 700px) {
  .vt-problema:has(.vt-sello-problema) { padding-right: 170px; }
  .vt-sello-problema { position: absolute; right: var(--e-4); top: var(--e-4); }
}
/* Apretado: verde sobre el papel (5,7:1); sobre --ok-suave no llegaba (4,4). */
.vt-votar[aria-pressed="true"] { color: var(--ok); border-color: var(--ok); background: var(--superficie); }
.vt-problema .error-txt:empty { display: none; }
.vt-sin-cuenta { margin: 0; }
.vt-version + .vt-version { margin-top: var(--e-4); }
.vt-version-t { margin: 0 0 var(--e-2); font-family: var(--f-titulo); font-size: var(--t-md); }
.vt-version-t a { font-size: var(--t-sm); }
.vt-problema-arreglado, .vt-problema-proposito { background: var(--superficie); }
.vt-pie-conocidos { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-4) 0; }
.vt-pie-conocidos p { margin: 0; }

/* ============================================================
   10 · EL PANEL (admin/bugs.php → "Ventanilla")
   Mismo papel y mismos sellos que la página del jugador, con la
   densidad de una bandeja de trabajo.
   ============================================================ */
.vta { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vta-h1 { font-family: var(--f-titulo); font-size: var(--t-xl); margin: 0; }
.vta-h1 small { display: block; font-family: var(--f-texto); font-size: var(--t-sm); font-weight: 400; color: var(--tinta-2); }
.vta-h4 { font-family: var(--f-titulo); font-size: var(--t-sm); margin: var(--e-3) 0 var(--e-2); }
.vta .admin-msj { margin: 0; }
.vta-pestanas { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); border-bottom: 1px solid var(--borde); }
.vta-pestanas a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--e-2);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm); text-decoration: none; color: var(--tinta-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.vta-pestanas a[aria-current="page"] { color: var(--tinta); border-image: var(--hilo) 1; border-bottom-width: 3px; border-bottom-style: solid; }
.vta-pestanas .vta-pestana-ext { margin-left: auto; font-weight: 400; font-family: var(--f-texto); color: var(--link); }
.vta-pico { margin: 0; padding: var(--e-3); background: var(--peligro-suave); border-left: 4px solid var(--peligro); border-radius: var(--r-sm); }

.vta-contadores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vta-contador {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--e-3);
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-sm);
}
.vta-contador strong { font-family: var(--f-dato); color: var(--tinta); }
.vta-contador.caliente { border-color: var(--acento); }
.vta-contador.caliente strong { color: var(--acento); }
.vta-contador.activo { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.vta-contador.activo strong { color: var(--superficie); }

.vta-filtros {
  display: grid; gap: var(--e-2) var(--e-3); align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  padding: var(--e-3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
.vta-filtros > label > span { display: block; font-family: var(--f-titulo); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--tinta-2); margin-bottom: 2px; }
.vta-filtros .campo { min-height: var(--tap); padding: var(--e-2); font-size: var(--t-sm); }
.vta-filtros .vta-buscar { grid-column: span 2; }
@media (max-width: 480px) { .vta-filtros .vta-buscar { grid-column: auto; } }
.vta-checks { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
.vta-checks label, .vta-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--t-sm); cursor: pointer; }
.vta-check input, .vta-checks input, .vta-todos input, .vta-fila-check { width: 20px; height: 20px; accent-color: var(--acento); }
.vta-filtros-bot { display: flex; gap: var(--e-2); }
.vta-filtro-extra { margin: 0; font-size: var(--t-sm); }

.vta-lote-form { display: flex; flex-direction: column; gap: var(--e-2); }
.vta-lote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.vta-todos { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--t-sm); margin-right: auto; }
.vta-lote-sumar { display: inline-flex; gap: var(--e-2); }
.vta-lote-sumar .campo { min-height: var(--tap); max-width: 14rem; font-size: var(--t-sm); padding: var(--e-2); }
.vta-total { margin: 0; }
.vta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.vta-fila {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--e-2) var(--e-3); align-items: start;
  padding: var(--e-3);
  background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--r-md);
}
.vta-fila.vta-nuevo { border-left-color: var(--acento); }
.vta-fila.vta-contesto { border-left-color: var(--alerta); }
.vta-fila.vta-seguridad { border-left-color: var(--peligro); background: var(--peligro-suave); }
/* La casilla de lote: 20 px de casilla adentro de 44 px de blanco táctil. */
.vta-fila-sel { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin: calc(-1 * var(--e-2)) 0 0 calc(-1 * var(--e-2)); cursor: pointer; border-radius: var(--r-sm); }
.vta-fila-sel:hover { background: var(--superficie-2); }
.vta-fila-num {
  display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 6px;
  font-family: var(--f-dato); font-weight: 700; text-decoration: none;
  background: var(--superficie-3); border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm); color: var(--tinta);
}
.vta-fila-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vta-fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e-2); font-size: var(--t-sm); }
.vta-fila-txt { color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.vta-fila-txt:hover { text-decoration: underline; }
.vta-fila-meta { display: flex; flex-wrap: wrap; gap: 2px var(--e-3); font-size: var(--t-xs); color: var(--tinta-2); }
.vta-prio { display: inline-block; padding: 1px 8px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; background: var(--superficie-3); color: var(--tinta-2); }
.vta-prio-1 { background: var(--superficie); color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro); }
.vta-prio-2 { background: var(--info-suave); color: var(--info); }
.vta-prio-3 { background: var(--superficie-3); color: var(--tinta-2); }
.vta-contesto-chip { padding: 0 8px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; background: var(--alerta-suave); color: var(--tinta); border: 1px solid var(--alerta); }
.vta-p { font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 700; color: var(--tinta); padding: 0 6px; border: 1px solid var(--py-oro); border-radius: var(--r-sm); text-decoration: none; }

.vta-miga { margin: 0; font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 0 var(--e-2); align-items: center; }
.vta-miga a { display: inline-block; min-height: var(--tap); padding: .7rem 0; line-height: 1.3; }
.vta-banner-seg { margin: 0; padding: var(--e-3); background: var(--peligro-suave); border: 1px solid var(--peligro); border-left-width: 5px; border-radius: var(--r-sm); color: var(--tinta); }
.vta-ficha { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.vta-ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.vta-ficha-num { margin: 0; font-family: var(--f-dato); font-size: var(--t-xl); }
.vta-ficha-cols { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .vta-ficha-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.vta-ficha-izq, .vta-ficha-der { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.vta-ficha .panel-admin { margin: 0; }
.vta-ficha .panel-admin:hover { transform: none; }
.vta-texto-orig { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; line-height: 1.55; }
.vta-adjuntos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e-3); }
.vta-adjuntos li { display: flex; flex-direction: column; gap: 2px; }
.vta-adjuntos img, .vta-adjuntos video { width: 100%; height: 120px; object-fit: cover; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie-3); }
.vta-fojas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.vta-fojas p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vta-foja-quien { display: block; font-size: var(--t-xs); color: var(--tinta-2); font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .05em; }
.vta-foja-sis { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-2); padding: 2px 0; border-top: 1px dashed var(--borde); }
.vta-foja-jugador { padding: var(--e-2) var(--e-3); background: var(--superficie-2); border-left: 4px solid var(--py-azul); border-radius: var(--r-sm); margin-right: var(--e-5); }
.vta-foja-equipo { padding: var(--e-2) var(--e-3); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--acento); border-radius: var(--r-sm); margin-left: var(--e-5); }
.vta-foja-interna { padding: var(--e-2) var(--e-3); background: var(--alerta-suave); border: 1px dashed var(--alerta); border-radius: var(--r-sm); transform: rotate(-.4deg); }
.vta-foja-interna .vta-foja-quien { color: var(--tinta); }
.vta-redactor form { display: flex; flex-direction: column; gap: var(--e-2); }
.vta-rapidas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.vta-red-opc { display: flex; flex-direction: column; }
.vta-red-opc label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--t-sm); }
.vta-red-opc input { width: 20px; height: 20px; accent-color: var(--acento); }
.vta-accion { border-top: 1px dashed var(--borde); }
.vta-accion > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.vta-accion form, .vta-prio-form, .vta-form-ajustes, .vta-prob-form { display: flex; flex-direction: column; gap: var(--e-2); }
.vta-accion form { padding-bottom: var(--e-3); }
.vta-accion label:not(.vta-check), .vta-form-ajustes label:not(.vta-check), .vta-prob-form label:not(.vta-check) { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); }
.vta-accion fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
.vta-prob-form small { color: var(--tinta-2); font-size: var(--t-xs); }
.vta-sumar { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vta-sumar .campo { flex: 1 1 12rem; min-width: 0; }
.vta-tecnico > summary { list-style: none; cursor: pointer; }
.vta-tecnico > summary::-webkit-details-marker { display: none; }
.vta-tecnico > summary h3 { display: inline-flex; align-items: center; min-height: var(--tap); margin: 0; }
.vta-tecnico > summary h3::after { content: ' ▾'; margin-left: 6px; }
.vta-tecnico:not([open]) > summary h3::after { content: ' ▸'; }
.vta-dl { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px var(--e-3); margin: var(--e-2) 0; font-size: var(--t-sm); }
.vta-dl div { display: contents; }
.vta-dl dt { color: var(--tinta-2); }
.vta-dl dd { margin: 0; overflow-wrap: anywhere; }
.vta-ua summary { display: inline-block; min-height: var(--tap); line-height: var(--tap); padding: 0 var(--e-2); cursor: pointer; color: var(--link); font-size: var(--t-xs); }
.vta-ua code { display: block; font-size: var(--t-xs); word-break: break-all; }
.vta-errores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.vta-errores li { display: flex; flex-direction: column; gap: 2px; padding: var(--e-2); background: var(--superficie-2); border-left: 3px solid var(--peligro); border-radius: var(--r-sm); font-size: var(--t-sm); min-width: 0; }
.vta-err-cab { font-size: var(--t-xs); color: var(--tinta-2); }
.vta-err-cab b { color: var(--peligro); text-transform: uppercase; letter-spacing: .05em; }
.vta-err-msj, .vta-err-donde { overflow-wrap: anywhere; }
.vta-err-donde, .vta-err-firma { font-size: var(--t-xs); color: var(--tinta-2); }
.vta-errores pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-xs); margin: 4px 0 0; }
.vta-errores summary { display: inline-block; min-height: var(--tap); line-height: var(--tap); cursor: pointer; color: var(--link); font-size: var(--t-xs); }
.vta-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); font-size: var(--t-sm); }
.vta-mini li { overflow-wrap: anywhere; }
.vta-mini a { font-family: var(--f-dato); font-weight: 700; }
.vta-inline { display: inline; }
.vta-rojo { color: var(--peligro); }
.vta-alerta { color: var(--alerta); }
.vta-borrar { border-style: dashed; }

.vta-prob-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.vta-prob-cab .nota { margin: 0; }
.vta-tabla-prob td { vertical-align: middle; }
.vta-editor-prob { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .vta-editor-prob { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.vta-prob-grid { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.vta-aviso-titulo { margin: 0; color: var(--alerta); font-size: var(--t-sm); min-height: 0; }
.vta-aviso-titulo:empty { display: none; }
.vta-prob-lado { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.vta-prob-lado .panel-admin { margin: 0; }
.vta-prob-lado form { display: flex; flex-direction: column; gap: var(--e-2); }
.vta-prob-lado label:not(.vta-check) { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); }
.vta-vista-previa h3.vt-problema-t { color: var(--tinta); text-transform: none; font-size: var(--t-md); letter-spacing: 0; margin: 0; }

.vta-ajustes .panel-admin { margin: 0; }
.vta-sim { padding: var(--e-3); background: var(--alerta-suave); border-radius: var(--r-sm); margin-bottom: var(--e-3); }
.vta-sim ul { margin: var(--e-2) 0; padding-left: 1.1em; font-size: var(--t-sm); }
.vta-barras { list-style: none; margin: var(--e-2) 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vta-barras li { display: grid; grid-template-columns: 3.5em 1fr 2.5em; align-items: center; gap: var(--e-2); font-size: var(--t-xs); }
.vta-barra { height: 10px; background: var(--superficie-3); border-radius: var(--r-full); overflow: hidden; }
.vta-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--py-oro)); border-radius: var(--r-full); }
.vta-barras .dato { text-align: right; }

/* ============================================================
   11 · MOVIMIENTO REDUCIDO
   El sello queda quieto, estampado de una.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vt-sello.sello-anima, .vt-sello-grande.sello-anima { animation: none; }
  .vt-carpeta-cuerpo { transition: none; }
  .vt-carpeta-link:hover .vt-carpeta-cuerpo { transform: none; }
}