/* VEN · sistema visual (ADR 0010, aceptado por Liz el 2026-11-03). Fundamentos de la 015: tokens
   «--v-» y componentes «v-». Solo los usan el shell, la barra inferior, «Más» y el Inicio; las demás
   pantallas siguen con app.css hasta que se migren (alcance de la 015). Sin @import ni url() de otro
   origen: la fuente es un archivo propio (static/fuentes, licencia OFL al lado). Sin estilos en línea
   (CSP default-src 'self'). Decoración según L-06: detrás, baja opacidad, aria-hidden, sin bucles.
   La parte de la 015 (hasta el bloque «016») se genera desde specs/015-estetica-inicio/prototipo/
   ven.css: se cambia allí y se vuelve a copiar (también lo que otra funcionalidad cambie en esta
   parte, como la regla S1 de la 020 en la barra). Los bloques 016 a 020 de abajo viven solo aquí.

   Pares de contraste (los lee la prueba automática V11; «texto» ≥ 4.5:1, «borde» ≥ 3:1):
   @par texto  --v-tinta          --v-superficie
   @par texto  --v-tinta-suave    --v-superficie
   @par texto  --v-tinta          --v-fondo-1
   @par texto  --v-tinta-suave    --v-fondo-1
   @par texto  --v-azul-700       --v-superficie
   @par texto  --v-azul-700       --v-azul-100
   @par texto  --v-sobre-azul     --v-azul-600
   @par texto  --v-sobre-azul     --v-azul-700
   @par texto  --v-sobre-azul     --v-azul-800
   @par texto  --v-sobre-azul     --v-brillo-resumen sobre --v-azul-700
   @par texto  --v-sobre-azul     --v-brillo-boton sobre --v-azul-600
   @par texto  --v-tinta-suave    --v-vidrio sobre --v-fondo-1
   @par texto  --v-tinta-suave    --v-azul-50
   @par texto  --v-tinta-suave    --v-barra-fondo sobre --v-fondo-1
   @par texto  --v-azul-700       --v-barra-fondo sobre --v-fondo-1
   @par texto  --v-ambar-tinta    --v-ambar-fondo
   @par texto  --v-verde-tinta    --v-verde-fondo
   @par texto  --v-rojo-tinta     --v-rojo-fondo
   @par texto  --v-neutro-tinta   --v-neutro-fondo
   @par borde  --v-azul-600       --v-superficie
   @par borde  --v-linea-fuerte   --v-superficie
   @par borde  --v-foco           --v-superficie
*/
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fuentes/plus-jakarta-sans-variable.6b68a2205325.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --v-azul-900: #0F2F7A; --v-azul-800: #123C9C; --v-azul-700: #1747B5; --v-azul-600: #1E5FE0;
  --v-azul-500: #3B7BF5; --v-azul-200: #C9DAFF; --v-azul-100: #E3ECFF; --v-azul-50: #F3F7FF;
  --v-tinta: #0E1626; --v-tinta-suave: #4A5468;
  --v-linea: #DCE4F2; --v-linea-fuerte: #7D8AA3;
  --v-fondo-1: #E9F1FF; --v-fondo-2: #CFE0FF;
  --v-superficie: #FFFFFF; --v-vidrio: rgba(255, 255, 255, .66); --v-borde-vidrio: rgba(255, 255, 255, .9);
  --v-sobre-azul: #FFFFFF;
  /* Luces sobre superficies azules (decoración): nunca bajan el texto blanco de AA (pares arriba). */
  --v-brillo-resumen: rgba(120, 170, 255, .35); --v-brillo-boton: rgba(255, 255, 255, .10);
  --v-barra-fondo: rgba(255, 255, 255, .86);
  --v-ambar-fondo: #FFF0D6; --v-ambar-tinta: #6B3F00;
  --v-verde-fondo: #DFF3E9; --v-verde-tinta: #0E6B4D;
  --v-rojo-fondo: #FCE7E5; --v-rojo-tinta: #A52A22;
  --v-neutro-fondo: #EEF1F6; --v-neutro-tinta: #3A4458;
  --v-foco: #1747B5;
  --v-radio-s: 12px; --v-radio-m: 18px; --v-radio-l: 26px; --v-pildora: 999px;
  --v-e1: 4px; --v-e2: 8px; --v-e3: 12px; --v-e4: 16px; --v-e5: 20px; --v-e6: 24px; --v-e7: 32px;
  --v-sombra-1: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 4px 12px rgba(23, 71, 181, .07), 0 18px 40px -20px rgba(23, 71, 181, .30);
  --v-sombra-2: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 30px -10px rgba(23, 71, 181, .55);
  --v-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --v-alto-barra: 80px;
  --v-ancho: 480px;
}

/* ---- Fondo y columna -------------------------------------------------------------------- */
.v-fondo, .v-fondo *, .v-fondo *::before, .v-fondo *::after, .v-barra, .v-barra * { box-sizing: border-box; }
body.v-fondo {
  margin: 0; overflow-wrap: break-word; -webkit-text-size-adjust: 100%;
  color: var(--v-tinta); font-family: var(--v-fuente); font-size: 16px; line-height: 1.45;
  letter-spacing: 0; word-spacing: .06em;
  background-color: var(--v-fondo-1);
  /* Luces de fondo (decoración, L-06): detrás de todo, baja opacidad, familia azul. */
  background-image:
    radial-gradient(60% 34% at 0% 0%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(55% 32% at 100% 4%, rgba(140, 182, 255, .65), transparent 72%),
    linear-gradient(118deg, transparent 52%, rgba(255, 255, 255, .6) 58%, transparent 66%),
    linear-gradient(118deg, transparent 70%, rgba(255, 255, 255, .45) 74%, transparent 80%),
    radial-gradient(70% 40% at 100% 100%, rgba(170, 200, 255, .45), transparent 75%),
    linear-gradient(180deg, var(--v-fondo-2) 0, var(--v-fondo-1) 420px);
  background-attachment: fixed;
}
.v-columna {
  width: 100%; max-width: var(--v-ancho); margin: 0 auto;
  padding: var(--v-e3) var(--v-e4) calc(var(--v-alto-barra) + var(--v-e7) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--v-e3);
}
.v-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v-icono { width: 24px; height: 24px; flex: none; fill: currentColor; }
.v-icono.chico { width: 18px; height: 18px; }
.v-icono.mini { width: 14px; height: 14px; }
.v-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-fondo a:focus-visible, .v-fondo button:focus-visible, .v-fondo input:focus-visible,
.v-barra a:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 2px; }

/* ---- Superficies y baldosas -------------------------------------------------------------- */
.v-vidrio {
  background: var(--v-superficie); border: 1px solid var(--v-linea);
  border-radius: var(--v-radio-l); box-shadow: var(--v-sombra-1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v-vidrio {
    background: var(--v-vidrio); border-color: var(--v-borde-vidrio);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .v-vidrio { background: var(--v-superficie); border-color: var(--v-linea); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.v-baldosa {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px;
  color: var(--v-azul-600);
  background: linear-gradient(150deg, #FFFFFF 0%, var(--v-azul-100) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 14px -4px rgba(23, 71, 181, .25);
}
.v-baldosa .v-icono { width: 26px; height: 26px; }
.v-baldosa.grande { width: 46px; height: 46px; border-radius: 15px; }
.v-baldosa.grande .v-icono { width: 26px; height: 26px; }
.v-baldosa.sobre-azul {
  width: 40px; height: 40px; border-radius: 13px; color: var(--v-sobre-azul);
  background: linear-gradient(150deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .10));
  border-color: rgba(255, 255, 255, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.v-baldosa.sobre-azul .v-icono { width: 22px; height: 22px; }

/* ---- Chips (D5: color solo con texto) --------------------------------------------------- */
.v-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--v-pildora);
  font-size: .85rem; font-weight: 700; line-height: 1.3; background: var(--v-neutro-fondo); color: var(--v-neutro-tinta);
}
.v-chip.ambar { background: var(--v-ambar-fondo); color: var(--v-ambar-tinta); }
.v-chip.verde { background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-chip.rojo { background: var(--v-rojo-fondo); color: var(--v-rojo-tinta); }
.v-chip.azul { background: var(--v-azul-100); color: var(--v-azul-700); }
.v-chip.vidrio { background: rgba(255, 255, 255, .7); color: var(--v-azul-700); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 12px -6px rgba(23, 71, 181, .35); }

/* ---- Cabecera ---------------------------------------------------------------------------- */
.v-cabecera { display: flex; align-items: center; gap: var(--v-e3); }
.v-marca { font-size: 1.875rem; font-weight: 800; letter-spacing: 0; line-height: 1; color: var(--v-azul-700); text-decoration: none; }
.v-separador { width: 1px; height: 30px; background: var(--v-linea-fuerte); opacity: .45; }
.v-cabecera .fin { margin-left: auto; }
.v-perfil {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--v-tinta);
  text-decoration: none;
}
.v-perfil .v-icono { width: 26px; height: 26px; }
.v-titulo { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; } /* único con tracking negativo: ≥ 28 px */
.v-fecha { margin: 2px 0 0; color: var(--v-tinta-suave); font-size: 1.0625rem; font-weight: 500; }
.v-seccion { display: flex; flex-direction: column; gap: var(--v-e2); }
.v-seccion-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--v-e2) var(--v-e3); flex-wrap: wrap; }
.v-h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.v-h3 { margin: 0; font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: var(--v-e2); }
.v-enlace { color: var(--v-azul-700); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.v-enlace:hover { text-decoration: underline; }
.v-nota { margin: 0; font-size: .875rem; color: var(--v-tinta-suave); }

/* ---- Resumen del día (etapa D: como la propuesta A, decisión 5 de Liz) ------------------- */
.v-resumen {
  position: relative; overflow: hidden; container-type: inline-size;
  border-radius: var(--v-radio-l); padding: 18px 18px var(--v-e4); color: var(--v-sobre-azul);
  background-color: var(--v-azul-700);
  background-image:
    radial-gradient(80% 70% at 100% 0%, var(--v-brillo-resumen), transparent 70%),
    linear-gradient(135deg, var(--v-azul-600) 0%, var(--v-azul-700) 55%, var(--v-azul-800) 100%);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: var(--v-sombra-2);
}
.v-resumen-cabeza { position: relative; display: flex; align-items: center; min-height: 36px; }
.v-resumen-titulo { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 800; }
/* El brillo suave del Resumen (L-06 a): sin línea ni punto. La curva de Cobrado hoy (FR-040) se retiró
   por decisión de Liz del 2026-11-03 (etapa E): nada que parezca un gráfico. */
.v-resumen::after {
  content: ""; position: absolute; right: -30%; top: -40%; width: 90%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent);
}
.v-kpis { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--v-e4); }
.v-kpi { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v-kpi:first-child { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.v-kpi dt { display: flex; align-items: center; gap: var(--v-e2); font-size: .9375rem; font-weight: 600; }
.v-kpi .v-baldosa.sobre-azul { width: 44px; height: 44px; border-radius: 14px; }
.v-kpi dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v-kpi .v-cifra { font-size: 1.625rem; font-weight: 800; line-height: 1.1; }
.v-kpi:first-child .v-cifra { font-size: 2.125rem; }
.v-variacion {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: var(--v-pildora);
  background: #FFFFFF; color: var(--v-azul-800); font-size: .875rem; font-weight: 800; line-height: 1.3; word-spacing: 0;
}
.v-variacion.sin { padding-left: 9px; font-weight: 700; }
.v-kpi .detalle { font-size: .9375rem; font-weight: 600; }
.v-resumen-nota { margin: var(--v-e3) 0 0; font-size: .875rem; font-weight: 500; line-height: 1.4; }

/* ---- Acción principal y buscador --------------------------------------------------------- */
.v-boton {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: var(--v-e3); min-height: 50px; width: 100%;
  padding: 8px 20px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--v-pildora); cursor: pointer; text-decoration: none;
  font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--v-sobre-azul);
  background-color: var(--v-azul-600);
  background-image: linear-gradient(90deg, var(--v-azul-700) 0%, var(--v-azul-600) 55%, var(--v-azul-500) 100%);
  box-shadow: var(--v-sombra-2);
}
/* Brillo diagonal (decoración): a la derecha, detrás del texto y por debajo de su contraste. */
.v-boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, transparent 78%, var(--v-brillo-boton) 79%, rgba(255, 255, 255, .04) 92%, transparent 93%);
}
.v-boton .v-icono { width: 22px; height: 22px; }
/* Con flecha al final (Nueva operación, como A): «+» y texto a la izquierda, flecha a la derecha. */
.v-boton .fin { margin-left: auto; }
.v-boton.grande {
  min-height: 60px; padding: 12px 22px; font-size: 1.1875rem;
  background-image: linear-gradient(135deg, var(--v-azul-600) 0%, var(--v-azul-700) 55%, var(--v-azul-800) 100%);
}
.v-boton.grande .v-icono { width: 24px; height: 24px; }
.v-boton.secundario { min-height: 52px; font-size: 1rem; background: var(--v-azul-100); background-image: none; color: var(--v-azul-700); box-shadow: none; border-color: transparent; }
.v-boton.secundario::before { display: none; }
.v-buscador { display: flex; gap: var(--v-e2); margin: 0; }
.v-buscador label { flex: 1; min-width: 0; }
.v-buscador input {
  width: 100%; min-height: 52px; padding: 0 18px; font: inherit; font-size: 1.0625rem; letter-spacing: 0; color: var(--v-tinta);
  background: #FFFFFF; border: 1px solid var(--v-linea-fuerte); border-radius: var(--v-pildora);
}
.v-buscador input::placeholder { color: var(--v-tinta-suave); opacity: 1; }
.v-buscador button {
  flex: none; min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--v-azul-700); background: var(--v-azul-100); border: 0; border-radius: var(--v-pildora);
}

/* ---- Pendientes: el camino del dinero (propuesta C, decisión de Liz ~01:50) -------------------
   Estaciones unidas por una ruta: Por cobrar → Por enviar → Por confirmar → Terminadas hoy.
   Jerarquía: nombre → cuánto falta → avance (cifras reales de D1, dichas en montos). */
.v-subtitulo { margin: 0; display: flex; align-items: center; gap: var(--v-e2); font-size: 1rem; font-weight: 700; color: var(--v-azul-800); }
.v-subtitulo .v-icono { color: var(--v-azul-600); }
.v-camino { list-style: none; margin: 0; padding: var(--v-e2) var(--v-e3) var(--v-e2) var(--v-e2); }
.v-estacion { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--v-e3); padding: 8px 0; }
.v-estacion::before { /* la ruta, detrás de los íconos (decoración) */
  content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--v-azul-200);
}
.v-estacion:first-child::before { top: 30px; }
.v-estacion.fin::before { bottom: auto; height: 30px; }
.v-parada {
  position: relative; z-index: 1; width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
  color: var(--v-sobre-azul); border: 3px solid #FFFFFF;
  background-color: var(--v-azul-600); background-image: linear-gradient(135deg, var(--v-azul-500), var(--v-azul-700));
  box-shadow: 0 6px 14px -6px rgba(23, 71, 181, .6);
}
.v-parada .v-icono { width: 22px; height: 22px; }
.v-estacion.fin .v-parada { background: var(--v-verde-tinta); }
.v-tramo {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: var(--v-e3) var(--v-e4); color: var(--v-tinta); text-decoration: none;
  background: #FFFFFF; border: 1px solid var(--v-linea); border-radius: var(--v-radio-m); box-shadow: 0 2px 8px rgba(23, 71, 181, .06);
}
.v-tramo .nombre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; font-size: 1.2rem; font-weight: 800; }
.v-tramo .nombre .v-icono { color: var(--v-azul-700); }
.v-tramo .falta { font-size: 1rem; font-weight: 600; }
.v-tramo .falta b { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.v-tramo .cuantas { font-size: 1rem; color: var(--v-tinta-suave); }
.v-tramo .avance { margin-top: var(--v-e2); padding-top: var(--v-e2); border-top: 1px solid var(--v-linea); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--v-e3); align-items: center; }
.v-tramo .avance .rotulo { grid-column: 1 / -1; font-size: 1rem; }
.v-tramo .avance .rotulo b { font-weight: 800; }
.v-progreso { display: block; width: 100%; height: 10px; }
.v-progreso .pista { fill: var(--v-azul-100); }
.v-progreso .relleno { fill: var(--v-azul-600); }
.v-pastilla { padding: 1px 10px; border-radius: var(--v-pildora); background: var(--v-azul-100); color: var(--v-azul-800); font-weight: 800; font-size: 1rem; }
.v-estacion.fin .v-tramo { background: var(--v-verde-fondo); border-color: transparent; }
.v-estacion.fin .falta { color: var(--v-verde-tinta); }
.v-accion {
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 4px 8px 4px 14px; border-radius: var(--v-pildora);
  font-size: 1rem; font-weight: 800; color: var(--v-sobre-azul); background: var(--v-azul-600);
}
.v-accion.suave { color: var(--v-verde-tinta); background: #FFFFFF; }
.v-tramo .nombre .v-accion .v-icono { color: inherit; }
.v-tramo:hover .v-accion { background: var(--v-azul-700); }
.v-nota-camino { margin: var(--v-e2) 0 0; font-size: .95rem; color: var(--v-tinta-suave); }

/* ---- Última operación (C): toda la tarjeta lleva al detalle ------------------------------------ */
.v-ultima { display: flex; flex-direction: column; gap: var(--v-e2); padding: var(--v-e4); color: var(--v-tinta); text-decoration: none; }
.v-ultima .fila { display: flex; align-items: center; justify-content: space-between; gap: 6px var(--v-e2); flex-wrap: wrap; }
.v-ultima .cliente { font-size: 1.15rem; font-weight: 800; min-width: 0; }
.v-ultima .importe { font-size: 1.4rem; font-weight: 800; }
.v-ultima .codigo { color: var(--v-tinta-suave); font-size: 1rem; }
.v-seccion > .v-boton { margin-top: var(--v-e1); }
.v-pasos { list-style: none; margin: var(--v-e2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .9rem; font-weight: 600; color: var(--v-tinta-suave); }
.v-paso::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 3px; border-radius: 2px; background: var(--v-azul-200); }
.v-paso:first-child::before { display: none; }
.v-paso .marca { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 2px solid var(--v-linea-fuerte); color: var(--v-sobre-azul); }
.v-paso.hecho .marca { background: var(--v-azul-600); border-color: var(--v-azul-600); box-shadow: 0 4px 10px -3px rgba(30, 95, 224, .6); }
.v-paso.hecho::before, .v-paso.parcial::before { background: var(--v-azul-600); }
.v-paso.parcial .marca { border: 3px solid var(--v-azul-600); }
.v-paso.parcial .marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--v-azul-600); }
.v-paso.parcial { color: var(--v-azul-700); font-weight: 800; }
.v-paso.hecho { color: var(--v-tinta); }

/* ---- Tasa de hoy ------------------------------------------------------------------------- */
.v-tasa { padding: var(--v-e3) var(--v-e4); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--v-e2) var(--v-e3); align-items: center; }
.v-tasa .datos { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-left: var(--v-e3); border-left: 1px solid var(--v-linea); }
.v-tasa .rotulo { margin: 0; font-size: 1rem; color: var(--v-tinta-suave); font-weight: 600; }
.v-tasa .valor { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.v-tasa .estado { margin: 2px 0 0; color: var(--v-tinta); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.v-tasa .estado .v-icono { color: var(--v-tinta-suave); }
.v-tasa .estado.hora { flex-wrap: nowrap; align-items: flex-start; }
.v-tasa .estado.hora span { min-width: 0; }
.v-tasa .pie { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--v-e2) var(--v-e3); align-items: center; }
.v-tasa .pie .grafico { grid-column: 1 / -1; }
.v-tasa .pie .v-boton-chico { grid-column: 1 / -1; justify-content: center; }
.v-tasa .grafico { margin: 0; min-width: 0; }
.v-tasa .grafico svg { display: block; width: 100%; height: 56px; overflow: visible; }
.v-tasa .grafico .linea { fill: none; stroke: var(--v-azul-600); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-tasa .grafico .punto { fill: none; stroke: var(--v-azul-600); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-tasa .grafico figcaption { margin-top: 4px; font-size: .9rem; color: var(--v-tinta-suave); }
.v-boton-chico {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 16px; border-radius: var(--v-pildora);
  color: var(--v-azul-700); font-weight: 800; text-decoration: none; background: rgba(255, 255, 255, .85);
  border: 1px solid var(--v-azul-200); box-shadow: 0 6px 14px -8px rgba(23, 71, 181, .4); white-space: nowrap;
}
.v-tasa .acciones { grid-column: 1 / -1; margin: var(--v-e2) 0 0; }
.v-tasa .pie > .v-boton, .v-tasa .pie > form { grid-column: 1 / -1; }
.v-renovar { margin: 0; }
.v-renovar .v-boton { width: 100%; }

/* ---- Vacíos ------------------------------------------------------------------------------ */
.v-vacio { margin: 0; color: var(--v-tinta-suave); }

/* ---- Barra inferior (shell) -------------------------------------------------------------- */
.v-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 8px max(var(--v-e2), calc((100% - var(--v-ancho)) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF; border-top: 1px solid var(--v-linea); border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 30px -8px rgba(23, 71, 181, .18);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v-barra { background: var(--v-barra-fondo); border-top-color: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
@media (prefers-reduced-transparency: reduce) {
  .v-barra { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.v-barra ul { list-style: none; margin: 0 auto; padding: 0 var(--v-e2); max-width: var(--v-ancho); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; align-items: end; }
/* 020 (S1 del STOP A): las pantallas viejas heredan «overflow-wrap: anywhere» del body de app.css,
   que partía las palabras de la barra en cualquier letra («Oper/a-/cione/s»). Aquí solo corta el
   guion suave, como en el Inicio («Opera-ciones»). */
.v-barra a {
  overflow-wrap: normal; word-break: normal;
  -webkit-hyphens: manual; hyphens: manual; letter-spacing: 0; word-spacing: .06em; font-family: var(--v-fuente);
  min-height: 60px; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 20px; color: var(--v-tinta-suave); text-decoration: none; font-size: .8rem; font-weight: 700; text-align: center; line-height: 1.15;
}
.v-barra .v-icono { width: 26px; height: 26px; }
.v-barra a[aria-current="page"] { background: linear-gradient(160deg, #FFFFFF, var(--v-azul-100)); color: var(--v-azul-700); font-weight: 800; box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 14px -8px rgba(23, 71, 181, .45); }
.v-barra .nueva a { color: var(--v-azul-700); font-weight: 800; justify-content: flex-end; }
.v-barra .nueva .circulo {
  width: 66px; height: 66px; margin-top: -40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--v-sobre-azul); border: 4px solid #FFFFFF;
  background-color: var(--v-azul-600); background-image: radial-gradient(circle at 35% 30%, var(--v-azul-500), var(--v-azul-700) 75%);
  box-shadow: 0 12px 24px -6px rgba(30, 95, 224, .65);
}
.v-barra .nueva .circulo .v-icono { width: 32px; height: 32px; }

/* ---- «Más» ------------------------------------------------------------------------------- */
.v-menu { list-style: none; margin: 0; padding: var(--v-e2) var(--v-e4); display: flex; flex-direction: column; }
.v-menu li + li { border-top: 1px solid var(--v-linea); }
.v-menu a, .v-menu button {
  width: 100%; min-height: 64px; display: flex; align-items: center; gap: var(--v-e3); padding: 8px 0;
  color: var(--v-tinta); text-decoration: none; font: inherit; font-weight: 700; background: none; border: 0; cursor: pointer; text-align: left;
}
.v-menu a > span:not(.v-baldosa), .v-menu button > span:not(.v-baldosa) { flex: 1; min-width: 0; }
.v-menu small { display: block; font-weight: 500; color: var(--v-tinta-suave); font-size: .85rem; }
.v-menu .fin { color: var(--v-tinta-suave); }
.v-menu form { margin: 0; }

/* ---- Pantallas angostas (360 px) y muy angostas (zoom 200 % o texto grande) --------------- */
@media (max-width: 400px) {
  .v-kpi:first-child .v-cifra { font-size: 2rem; }
  /* El aviso de demo de la 003 («DEMO · datos ficticios») es más largo que el de A: cabe en una línea. */
  .v-cabecera { gap: var(--v-e2); }
  .v-separador { display: none; }
}
@media (max-width: 320px) {
  .v-columna { padding-left: var(--v-e3); padding-right: var(--v-e3); }
  .v-titulo { font-size: 1.8rem; }
  .v-marca { font-size: 1.6rem; }
  .v-kpis { grid-template-columns: 1fr; }
  .v-kpi .v-cifra, .v-kpi:first-child .v-cifra { font-size: 1.4rem; }
  .v-num { white-space: normal; }
  .v-boton { font-size: 1rem; padding: 10px 12px; }
  .v-boton .fin { display: none; }
  .v-boton.grande { min-height: 56px; font-size: 1.05rem; }
  .v-estacion { grid-template-columns: minmax(0, 1fr); }
  .v-camino { padding: var(--v-e2); }
  .v-tramo { padding: var(--v-e2) var(--v-e3); }
  .v-estacion::before, .v-parada { display: none; }
  .v-buscador { flex-wrap: wrap; }
  .v-buscador label { flex-basis: 100%; } /* etapa D: el campo no se aplasta con zoom 200 % */
  .v-buscador button { flex: 1; justify-content: center; }
  .v-kpi dt { flex-wrap: wrap; } /* etapa D: «Operaciones» no se corta con zoom 200 % */
  .v-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--v-e3); overflow: hidden; }
  .v-paso:nth-child(3)::before { display: none; }
  .v-tasa { grid-template-columns: minmax(0, 1fr); }
  .v-tasa .datos { padding-left: 0; border-left: 0; }
  .v-tasa .pie { grid-template-columns: minmax(0, 1fr); }
  .v-tasa .valor { font-size: 1.2rem; }
  .v-barra a { font-size: .66rem; padding: 4px 0; }
  .v-barra .v-icono { width: 22px; height: 22px; }
  .v-barra .nueva .circulo { width: 48px; height: 48px; margin-top: -24px; }
  .v-perfil { width: 44px; height: 44px; }
  .v-cabecera { flex-wrap: wrap; }
  .v-separador { display: none; }
  .v-chip { white-space: normal; flex-wrap: wrap; }
}

/* ========================================================================================== */
/* ==== 016 · Guía de VEN (specs/016-tutorial-guiado; research R2, R3 revisado, R10). ======== */
/* Bloque agregado al final por la 016: solo clases «v-guia-», las anclas «#guia-…» del         */
/* contrato (contracts/pasos.md) y los tokens «--v-» de la 015. Sin animaciones, sin estilos en  */
/* línea, sin recursos externos. Sirve en las pantallas nuevas (body.v-fondo) y en las viejas.   */
/*                                                                                              */
/* Pares de contraste nuevos de la guía (los lee test_contraste, igual que los de arriba):       */
/*   @par texto  --v-azul-700       --v-azul-50                                                 */
/*   @par texto  --v-sobre-azul     --v-azul-700                                                */
/*   @par texto  --v-tinta          --v-superficie                                              */
/*   @par borde  --v-azul-600       --v-superficie                                              */
/*   @par borde  --v-foco           --v-fondo-1                                                 */
/*   @par borde  --v-foco           --v-fondo-2                                                 */
/* ========================================================================================== */

.v-guia-lugar, .v-guia-lugar *, .v-guia-lugar *::before, .v-guia-lugar *::after { box-sizing: border-box; }

/* El lugar único (R2): pegado arriba de la barra mientras se baja y con su propio espacio al final
   de la página, para que nada quede tapado. El «+ 40px» deja libre el círculo de «Nueva». */
.v-guia-lugar {
  position: sticky; z-index: 9;
  bottom: calc(var(--v-alto-barra) + 40px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: var(--v-ancho);
  margin: 0 auto calc(var(--v-alto-barra) + 48px + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--v-e4);
  font-family: var(--v-fuente); font-size: 16px; line-height: 1.4; color: var(--v-tinta);
  letter-spacing: 0; word-spacing: .06em;
}
.v-guia-lugar .v-icono { width: 24px; height: 24px; flex: none; fill: currentColor; }
.v-guia-lugar .v-icono.chico { width: 18px; height: 18px; }
.v-guia-lugar form { margin: 0; }

/* ---- Tarjeta del paso ------------------------------------------------------------------- */
.v-guia-tarjeta {
  display: flex; flex-direction: column; gap: var(--v-e3);
  padding: var(--v-e4); background: var(--v-superficie);
  border: 2px solid var(--v-azul-600); border-radius: var(--v-radio-l);
  box-shadow: 0 18px 40px -14px rgba(23, 71, 181, .55);
}
.v-guia-cabeza { display: flex; align-items: center; gap: var(--v-e3); }
.v-guia-cabeza .v-baldosa { width: 44px; height: 44px; }
.v-guia-cabeza form { margin-left: auto; flex: none; }
.v-guia-cabeza .v-guia-saltar { padding: 0 var(--v-e1); }
.v-guia-titulo { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 1rem; }
.v-guia-titulo .palabra { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.v-guia-titulo .cuenta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-guia-puntos { width: 76px; height: 10px; flex: none; }
.v-guia-puntos .hecho { fill: var(--v-azul-600); }
.v-guia-puntos .ahora { fill: var(--v-azul-700); }
.v-guia-puntos .falta { fill: none; stroke: var(--v-linea-fuerte); stroke-width: 1.4; }
.v-guia-frase { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.v-guia-frase b { color: var(--v-azul-700); }
.v-guia-donde {
  margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--v-e2);
  font-size: .95rem; font-weight: 700; color: var(--v-tinta-suave);
}
.v-guia-donde .ruta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--v-pildora); background: var(--v-azul-50); color: var(--v-azul-700); }

/* El botón dibujado (pasos 6 a 8): se ve como el de la app, pero es un dibujo, no un control. */
.v-guia-dibujo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.v-guia-dibujo figcaption { font-size: .85rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-guia-dibujo .boton-dibujado {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px;
  border-radius: 12px; background: var(--v-azul-600); color: var(--v-sobre-azul); font-weight: 700; cursor: default;
  outline: 2px dashed var(--v-linea-fuerte); outline-offset: 4px;
}

/* La leyenda de la barra (paso 2). */
.v-guia-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-guia-leyenda li { display: flex; align-items: center; gap: var(--v-e3); min-height: 32px; }
.v-guia-leyenda .nombre { font-weight: 800; min-width: 7.2em; }
.v-guia-leyenda .que { color: var(--v-tinta-suave); font-weight: 600; }

/* Controles: «Atrás» y «Siguiente» en una fila. Todos de 48 px o más (FR-017). */
.v-guia-acciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--v-e2); }
.v-guia-acciones.solo { grid-template-columns: minmax(0, 1fr); }
.v-guia-acciones.parejas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v-guia-acciones form, .v-guia-acciones button { width: 100%; }
.v-guia-control {
  display: flex; align-items: center; justify-content: center; gap: var(--v-e2);
  min-height: 52px; padding: 8px 14px; border-radius: var(--v-pildora);
  font: inherit; font-weight: 800; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  border: 2px solid var(--v-azul-600); background: var(--v-superficie); color: var(--v-azul-700);
}
.v-guia-control.principal { background: var(--v-azul-700); border-color: var(--v-azul-700); color: var(--v-sobre-azul); }
.v-guia-saltar {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font: inherit; font-weight: 700; color: var(--v-tinta-suave); text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer;
}
.v-guia-lugar a:focus-visible, .v-guia-lugar button:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 2px; }

/* ---- Tira (la guía en curso, en otra pantalla) ------------------------------------------ */
.v-guia-tira {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--v-e2);
  padding: var(--v-e2) var(--v-e2) var(--v-e2) var(--v-e4);
  background: var(--v-superficie); border: 2px solid var(--v-azul-600); border-radius: var(--v-pildora);
  box-shadow: 0 10px 24px -12px rgba(23, 71, 181, .55);
}
.v-guia-tira .texto { flex: 1; min-width: 9em; display: flex; align-items: center; gap: var(--v-e2); font-weight: 800; }
.v-guia-tira .v-guia-control { min-height: 48px; font-size: 1rem; padding: 6px 16px; }
.v-guia-tira .v-guia-saltar { min-height: 48px; padding: 0 var(--v-e3); }

/* ---- Aviso de una sola vez -------------------------------------------------------------- */
.v-guia-aviso {
  margin: 0; display: flex; align-items: center; gap: var(--v-e2); min-height: 48px;
  padding: var(--v-e2) var(--v-e4); border-radius: var(--v-pildora);
  background: var(--v-azul-50); border: 1px solid var(--v-azul-200); color: var(--v-azul-700); font-weight: 700;
}

/* ---- Marca «Aquí» sobre el objetivo (R3, revisado para el paralelo con la 017 y la 018) -------
   Las plantillas solo llevan el ancla fija (id="guia-…"). Con la guía en un paso, la base pone
   <html class="v-guia-marca" data-guia-paso="clave"> y estas reglas dibujan el contorno (más de un color: 3 px) y la
   insignia «Aquí», que va antes del contenido del objetivo y se anuncia. Sin la guía, nada cambia. */
.v-guia-marca[data-guia-paso="tasa"] #guia-tasa-publicar,
.v-guia-marca[data-guia-paso="cliente"] #guia-clientes-buscar,
.v-guia-marca[data-guia-paso="cliente"] #guia-clientes-registrar,
.v-guia-marca[data-guia-paso="cobrar"] #guia-camino-cobrar,
.v-guia-marca[data-guia-paso="enviar"] #guia-camino-enviar,
.v-guia-marca[data-guia-paso="confirmar"] #guia-camino-confirmar {
  position: relative; outline: 3px solid var(--v-foco); outline-offset: 4px; border-radius: 14px;
  scroll-margin-top: 64px; scroll-margin-bottom: 320px;
}
.v-guia-marca[data-guia-paso="tasa"] #guia-tasa-publicar::before,
.v-guia-marca[data-guia-paso="cliente"] #guia-clientes-buscar::before,
.v-guia-marca[data-guia-paso="cobrar"] #guia-camino-cobrar > .v-tramo::before,
.v-guia-marca[data-guia-paso="enviar"] #guia-camino-enviar > .v-tramo::before,
.v-guia-marca[data-guia-paso="confirmar"] #guia-camino-confirmar > .v-tramo::before {
  content: "Aquí"; content: "↓ Aquí" / "Aquí";
  position: absolute; z-index: 2; top: -16px; right: 8px; left: auto; bottom: auto;
  display: inline-flex; align-items: center; width: max-content; height: auto; min-height: 26px;
  margin: 0; padding: 2px 12px; border: 0; border-radius: var(--v-pildora);
  background: var(--v-azul-700); color: var(--v-sobre-azul); box-shadow: none;
  font-family: var(--v-fuente); font-size: .9rem; font-weight: 800; line-height: 1.2; letter-spacing: 0;
  pointer-events: none;
}
/* El botón «Publicar»: la insignia va arriba, a la izquierda, en un espacio propio. */
.v-guia-marca[data-guia-paso="tasa"] #guia-tasa-publicar { margin-top: 34px; overflow: visible; }
.v-guia-marca[data-guia-paso="tasa"] #guia-tasa-publicar::before { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
/* En el camino del Inicio, el ::before de la etapa es la línea que une las paradas: la insignia
   va dentro del enlace de la etapa (se anuncia con él), en su esquina. */
.v-guia-marca[data-guia-paso="cobrar"] #guia-camino-cobrar > .v-tramo,
.v-guia-marca[data-guia-paso="enviar"] #guia-camino-enviar > .v-tramo,
.v-guia-marca[data-guia-paso="confirmar"] #guia-camino-confirmar > .v-tramo { position: relative; }
/* En la barra no hay lugar arriba (está la tarjeta): el contorno va en toda la barra (paso 2) o en
   el círculo de «Nueva» (paso 5), y la palabra «Aquí abajo» va en la tarjeta. */
.v-guia-marca[data-guia-paso="barra"] #guia-barra { outline: 3px solid var(--v-foco); outline-offset: -4px; }
.v-guia-marca[data-guia-paso="nueva"] #guia-barra-nueva .circulo { outline: 4px solid var(--v-foco); outline-offset: 3px; }

/* ---- Índice (/guia) --------------------------------------------------------------------- */
.v-guia-formulario { margin: 0; }
.v-guia-indice { list-style: none; margin: 0; padding: var(--v-e2) var(--v-e4); display: flex; flex-direction: column; }
.v-guia-indice li + li { border-top: 1px solid var(--v-linea); }
.v-guia-indice form { margin: 0; }
.v-guia-indice button {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: var(--v-e3); padding: 8px 0;
  color: var(--v-tinta); font: inherit; font-weight: 700; background: none; border: 0; cursor: pointer; text-align: left;
}
.v-guia-indice .num { min-width: 1.6em; font-weight: 800; color: var(--v-tinta-suave); }
.v-guia-indice .palabra { flex: 1; min-width: 0; }
.v-guia-indice .fin { color: var(--v-tinta-suave); }

/* ---- Movimiento y transparencia: la guía nunca anima ni usa vidrio ----------------------- */
@media (prefers-reduced-motion: reduce) { .v-guia-lugar * { transition: none; animation: none; } }
@media (prefers-reduced-transparency: reduce) { .v-guia-tarjeta, .v-guia-tira { box-shadow: none; } }

/* ---- Pantallas angostas: zoom 200 % o texto grande (R2) ---------------------------------- */
@media (max-width: 400px) {
  .v-guia-lugar { padding: 0 var(--v-e3); }
  .v-guia-tarjeta { padding: var(--v-e3); gap: var(--v-e2); }
  .v-guia-frase { font-size: 1.1rem; }
}
@media (max-width: 320px) {
  .v-guia-lugar { position: static; margin-top: var(--v-e4); }
  .v-guia-puntos { display: none; }
  .v-guia-cabeza { flex-wrap: wrap; }
  .v-guia-cabeza form { margin-left: 0; width: 100%; }
  .v-guia-cabeza .v-guia-saltar { justify-content: flex-start; }
  .v-guia-acciones, .v-guia-acciones.parejas { grid-template-columns: minmax(0, 1fr); }
  .v-guia-leyenda .nombre { min-width: 0; }
  .v-guia-leyenda li { flex-wrap: wrap; }
  .v-guia-indice .num { display: none; }
  .v-guia-indice .v-baldosa { width: 40px; height: 40px; }
}
/* ==== fin 016 ============================================================================== */
/* ==== 018 · Clientes y Tasa (specs/018-clientes-tasa, research R11) ===========================
   Solo componentes nuevos, con los tokens de la 015 (sin tokens nuevos: la prueba de contraste V11
   sigue cubriendo todos los pares). Bloque propio para que juntar las ramas 017/018 sea fácil. */

/* ---- Encabezado de pantalla y vuelta ------------------------------------------------------ */
.v-volver {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px;
  border-radius: var(--v-pildora); color: var(--v-azul-700); font-weight: 800; text-decoration: none;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--v-azul-200);
}
.v-volver:hover { background: #FFFFFF; }
.v-encabezado { display: flex; flex-direction: column; gap: 4px; }
.v-encabezado .v-nota { font-size: 1rem; }

/* ---- Avisos (D5: color con ícono y texto) ------------------------------------------------- */
.v-aviso {
  margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--v-radio-m);
  font-weight: 600; background: var(--v-neutro-fondo); color: var(--v-neutro-tinta);
}
.v-aviso .v-icono { margin-top: 1px; }
.v-aviso.ok { background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-aviso.error { background: var(--v-rojo-fondo); color: var(--v-rojo-tinta); }
.v-aviso.atencion { background: var(--v-ambar-fondo); color: var(--v-ambar-tinta); }
.v-aviso.info { background: var(--v-azul-100); color: var(--v-azul-700); }
.v-aviso > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-aviso > span { min-width: 0; }
.v-aviso p { margin: 0; }
.v-aviso a { color: inherit; font-weight: 800; }

/* ---- Tarjetas y listas -------------------------------------------------------------------- */
.v-tarjeta { padding: var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-tarjeta > h2, .v-tarjeta > .v-seccion-cabeza { margin: 0; }
.v-pila { display: flex; flex-direction: column; gap: var(--v-e2); }
.v-fila-botones { display: flex; flex-wrap: wrap; gap: var(--v-e2); }
.v-fila-botones > * { flex: 1 1 auto; }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v-e2); }
.v-boton-chico { font: inherit; cursor: pointer; }
.v-boton-chico .v-icono { width: 18px; height: 18px; }
button.v-boton-chico { font-weight: 800; }
.v-boton-chico.lleno { color: var(--v-sobre-azul); background: var(--v-azul-600); border-color: var(--v-azul-600); }
.v-form-linea { margin: 0; display: inline-flex; }
.v-form-linea > button { width: 100%; }

/* ---- Tarjeta de cliente (lista y búsqueda) ------------------------------------------------ */
.v-cliente { padding: var(--v-e3) var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-cliente .nombre { margin: 0; font-size: 1.15rem; font-weight: 800; }
.v-cliente .nombre a { color: var(--v-tinta); text-decoration: none; }
.v-cliente .nombre a:hover { text-decoration: underline; }
.v-cliente .dato { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--v-tinta-suave); }
.v-cliente .dato .v-icono { color: var(--v-azul-600); }

/* ---- Ficha del cliente -------------------------------------------------------------------- */
.v-ficha { padding: var(--v-e4); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--v-e2) var(--v-e3); align-items: start; }
.v-ficha > .cuerpo { min-width: 0; display: flex; flex-direction: column; gap: var(--v-e2); }
.v-ficha .v-titulo { font-size: 1.6rem; letter-spacing: 0; overflow-wrap: anywhere; }
.v-ficha > .v-boton, .v-ficha > .v-aviso, .v-ficha > .v-fila-botones { grid-column: 1 / -1; }
/* `dl.v-datos.filas`, no `.v-datos`: la 017 define después `.v-datos` como grilla de dos columnas
   (pares dt/dd sueltos) y, sin más prioridad, ponía los datos de la ficha lado a lado; a 360 px la
   columna de la cartera cortaba las palabras (revisión de las capturas, 2026-11-05). */
dl.v-datos.filas { margin: 0; display: flex; flex-direction: column; }
.v-datos > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px var(--v-e2); align-items: center; padding: 10px 0; }
.v-datos > div + div { border-top: 1px solid var(--v-linea); }
.v-datos dt { grid-column: 2; font-size: .875rem; color: var(--v-tinta-suave); font-weight: 600; }
.v-datos dd { grid-column: 2; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.v-datos .v-icono { grid-row: 1 / span 2; color: var(--v-azul-600); }
.v-datos .accion { grid-column: 3; grid-row: 1 / span 2; }

/* ---- Beneficiarios y destinos ------------------------------------------------------------- */
.v-beneficiario { padding: var(--v-e3) var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-beneficiario .cabeza { display: flex; align-items: center; gap: var(--v-e3); }
.v-beneficiario .cabeza .v-baldosa { width: 44px; height: 44px; border-radius: 14px; }
.v-beneficiario .cabeza > div { min-width: 0; flex: 1; }
.v-beneficiario .quien { margin: 0; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.v-beneficiario .detalle { margin: 0; color: var(--v-tinta-suave); }
/* Con alcance: «v-destino» es también la clase de cada destino de la barra inferior (015,
   inicio/_barra.html). Sin «.v-beneficiario» delante, esta caja celeste se pintaba en la barra de
   todas las pantallas (converge 015r CV-14 = 018 CV-43; tests/inicio/test_css_alcance.py). */
.v-beneficiario .v-destino {
  display: flex; flex-direction: column; gap: 6px; padding: var(--v-e3); border-radius: var(--v-radio-m);
  background: var(--v-azul-50); border: 1px solid var(--v-linea);
}
.v-beneficiario .v-destino .linea { margin: 0; display: flex; align-items: center; gap: var(--v-e2); font-weight: 700; flex-wrap: wrap; }
.v-beneficiario .v-destino .linea .v-icono { color: var(--v-azul-600); }
.v-beneficiario .v-destino .sub { margin: 0; color: var(--v-tinta-suave); overflow-wrap: anywhere; }
/* «¿Cómo se le paga?» (FR-021): dos baldosas grandes, `div.v-opciones` con `a.v-opcion`. La 017
   usa las mismas clases en `fieldset`/`label` (filas de 52 px): cada bloque lleva su elemento
   para no pisarse (converge 018 CV-27; tests/inicio/test_css_alcance.py). */
div.v-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-e3); }
a.v-opcion {
  min-height: 132px; padding: var(--v-e4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--v-e2);
  color: var(--v-tinta); text-decoration: none; font-weight: 800; font-size: 1.05rem; text-align: center;
}
a.v-opcion:hover { border-color: var(--v-azul-600); }

/* ---- «Administrar» (plegable, sin JavaScript) --------------------------------------------- */
.v-administrar { padding: 0; overflow: hidden; }
.v-administrar > summary {
  min-height: 56px; padding: 0 var(--v-e4); display: flex; align-items: center; gap: var(--v-e3); cursor: pointer; list-style: none;
  font-weight: 800; color: var(--v-tinta);
}
.v-administrar > summary::-webkit-details-marker { display: none; }
.v-administrar > summary .v-icono { color: var(--v-azul-600); }
.v-administrar > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--v-tinta-suave);
  border-bottom: 2px solid var(--v-tinta-suave); transform: rotate(45deg);
}
.v-administrar[open] > summary::after { transform: rotate(-135deg); }
.v-administrar > summary:focus-visible { outline: 3px solid var(--v-foco); outline-offset: -3px; }
.v-administrar > .contenido { padding: 0 var(--v-e4) var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-administrar .v-menu { padding: 0; }

/* ---- Formularios -------------------------------------------------------------------------- */
.v-form { margin: 0; display: flex; flex-direction: column; gap: var(--v-e4); }
.v-campo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-campo > label, .v-campo > .rotulo { font-weight: 700; font-size: 1rem; }
.v-form input[type="text"], .v-form input[type="tel"], .v-form input[type="number"], .v-form input[type="search"],
.v-form input[type="password"], .v-form select, .v-form textarea {
  width: 100%; max-width: 100%; min-width: 0; min-height: 52px; padding: 10px 16px; font: inherit; font-size: 1.0625rem; color: var(--v-tinta);
  background: #FFFFFF; border: 1px solid var(--v-linea-fuerte); border-radius: 14px;
}
.v-form textarea { min-height: 96px; }
.v-form input:focus-visible, .v-form select:focus-visible, .v-form textarea:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 1px; }
.v-form .v-boton { margin-top: var(--v-e1); }
.v-error { margin: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--v-rojo-tinta); font-weight: 700; }
.v-ayuda { margin: 0; color: var(--v-tinta-suave); font-size: .9375rem; }
.v-casilla { display: flex; align-items: center; gap: var(--v-e3); min-height: 44px; font-weight: 700; cursor: pointer; }
.v-casilla input, .v-titular-grupo > input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--v-azul-600); }
.v-titular-grupo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--v-e2) var(--v-e3); }
.v-titular-grupo > .v-titular { grid-column: 1 / -1; }
/* FR-023 (R4): con «El titular es el mismo beneficiario» marcado, los campos del titular no se ven
   (la casilla es hermana anterior del grupo; sin JavaScript). */
#id_titular_es_beneficiario:checked ~ .v-titular { display: none; }
.v-titular { display: flex; flex-direction: column; gap: var(--v-e4); padding: var(--v-e3); border-radius: var(--v-radio-m); background: var(--v-azul-50); }
.v-actual { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--v-tinta-suave); }

/* ---- Pasos numerados (Tasa: 1 Calcular → 2 Publicar) ------------------------------------- */
.v-paso-num { display: flex; align-items: center; gap: var(--v-e3); margin: 0; font-size: 1.15rem; font-weight: 800; }
.v-paso-num .numero {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  color: var(--v-sobre-azul); background: var(--v-azul-600); font-size: 1rem;
}
.v-dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-e3); }

/* ---- Tasa de hoy en /tasa ----------------------------------------------------------------- */
.v-tasa-hoy { padding: var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-tasa-hoy .cabeza { display: flex; align-items: center; gap: var(--v-e3); }
.v-tasa-hoy .rotulo { margin: 0; color: var(--v-tinta-suave); font-weight: 600; }
.v-tasa-hoy .valor { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.v-tasa-hoy .valor small { font-size: 1rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-tasa-hoy .estado { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--v-e2); }
.v-tasa-hoy .estado .v-icono { color: var(--v-tinta-suave); }
.v-tasa-hoy .v-renovar .v-boton { width: 100%; }
.v-grafico { margin: 0; min-width: 0; }
.v-grafico svg { display: block; width: 100%; height: 64px; overflow: visible; }
.v-grafico .linea { fill: none; stroke: var(--v-azul-600); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-grafico .punto { fill: none; stroke: var(--v-azul-600); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-grafico figcaption { margin-top: 4px; font-size: .9rem; color: var(--v-tinta-suave); }
.v-enlaces { display: flex; flex-wrap: wrap; gap: var(--v-e2); }

/* ---- Historial de tasas ------------------------------------------------------------------- */
.v-historia { padding: var(--v-e3) var(--v-e4); display: flex; flex-direction: column; gap: 6px; }
.v-historia.vigente { border: 2px solid var(--v-azul-600); }
.v-historia .fila { display: flex; align-items: center; justify-content: space-between; gap: 6px var(--v-e2); flex-wrap: wrap; }
.v-historia .valor { margin: 0; font-size: 1.25rem; font-weight: 800; }
.v-historia .sub { margin: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--v-tinta-suave); overflow-wrap: anywhere; }
.v-historia .sub .v-icono { margin-top: 2px; color: var(--v-azul-600); }
.v-paginas { display: flex; justify-content: space-between; gap: var(--v-e2); flex-wrap: wrap; }

@media (max-width: 400px) {
  a.v-opcion { min-height: 112px; }
}
@media (max-width: 320px) {
  .v-ficha { grid-template-columns: minmax(0, 1fr); }
  .v-ficha > .v-baldosa { display: none; }
  .v-datos > div { grid-template-columns: minmax(0, 1fr); }
  .v-datos dt, .v-datos dd, .v-datos .accion { grid-column: 1; grid-row: auto; }
  .v-datos .v-icono { display: none; }
  div.v-opciones, .v-dos-campos { grid-template-columns: minmax(0, 1fr); }
  .v-paso-num { font-size: 1.05rem; }
  .v-tasa-hoy .valor { font-size: 1.5rem; white-space: normal; }
  .v-tasa-hoy .cabeza { flex-wrap: wrap; }
  .v-tasa-hoy .cabeza > div { min-width: 0; }
  .v-boton-chico { white-space: normal; max-width: 100%; text-align: left; }
  .v-form-linea { display: flex; max-width: 100%; }
  .v-aviso, .v-tarjeta, .v-ficha, .v-beneficiario, .v-cliente, .v-historia { overflow-wrap: anywhere; }
  .v-aviso { padding: 10px; gap: 6px; }
}
/* ==== fin 018 ============================================================================== */
/* ==== 017 · Operaciones y pagos simples: componentes nuevos con los tokens existentes (ADR 0010,
   decisión 2). Se cambia aquí y en specs/017-operaciones-pagos-simples/prototipo/ (gen.py del scratch).
   @par texto  --v-verde-tinta    --v-verde-fondo
   @par texto  --v-ambar-tinta    --v-ambar-fondo
   @par texto  --v-tinta          --v-azul-50
   @par borde  --v-linea-fuerte   --v-superficie
*/
.v-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--v-azul-700); font-weight: 800; text-decoration: none; }
.v-volver .v-icono { transform: scaleX(-1); }
.v-tarjeta { padding: var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-tarjeta > h2, .v-tarjeta > .v-seccion-cabeza > h2 { margin: 0; display: flex; align-items: center; gap: var(--v-e2); font-size: 1.15rem; font-weight: 800; }
.v-tarjeta > h2 .v-baldosa, .v-seccion-cabeza .v-baldosa { width: 40px; height: 40px; border-radius: 13px; }
.v-tarjeta > h2 .v-baldosa .v-icono, .v-seccion-cabeza .v-baldosa .v-icono { width: 22px; height: 22px; }

/* Avisos: siempre con ícono y texto (D5) */
.v-aviso { margin: 0; display: flex; align-items: flex-start; gap: var(--v-e2); padding: var(--v-e3) var(--v-e4); border-radius: var(--v-radio-m); font-weight: 700; line-height: 1.35; background: var(--v-neutro-fondo); color: var(--v-neutro-tinta); }
.v-aviso .v-icono { margin-top: 1px; }
.v-aviso.ok { background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-aviso.atencion { background: var(--v-ambar-fondo); color: var(--v-ambar-tinta); }
.v-aviso.error { background: var(--v-rojo-fondo); color: var(--v-rojo-tinta); }
.v-aviso small { display: block; font-weight: 500; font-size: .9375rem; }

/* Cabecera de la operación */
.v-op { padding: var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-op .fila { display: flex; align-items: center; justify-content: space-between; gap: 6px var(--v-e2); flex-wrap: wrap; }
.v-op .codigo { color: var(--v-tinta-suave); font-weight: 700; }
.v-op h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; font-weight: 800; }
/* `.fila` y `.cifras` también existen en app.css (borde arriba, columna): aquí no. */
.v-op .fila, .v-hecho .fila, .v-lista-op .fila { border-top: 0; }
.v-op .cifras { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 4px var(--v-e2); font-size: 1.25rem; font-weight: 800; }
.v-op .cifras .v-icono { color: var(--v-tinta-suave); width: 20px; height: 20px; }
.v-op .cifras .bs { color: var(--v-tinta-suave); font-weight: 700; font-size: 1.05rem; }
.v-op .marca-tasa { align-self: flex-start; }

/* Siguiente: una acción principal (FR-008) */
.v-siguiente { display: flex; flex-direction: column; gap: var(--v-e2); }
.v-siguiente .rotulo { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 800; color: var(--v-azul-800); text-transform: none; }
.v-boton .textos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.v-boton .textos small { font-size: .9375rem; font-weight: 600; opacity: .95; }
.v-boton.grande .textos small { font-size: 1rem; }
.v-siguiente form { margin: 0; }
.v-siguiente .porque { margin: 0; font-size: .95rem; color: var(--v-tinta-suave); }

/* Filas de cifras con ícono (más símbolos que texto) */
.v-cifras { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-e2); }
.v-cifras div { min-width: 0; padding: var(--v-e2) var(--v-e3); border-radius: var(--v-radio-s); background: var(--v-azul-50); }
.v-cifras dt { font-size: .875rem; font-weight: 700; color: var(--v-tinta-suave); display: flex; align-items: center; gap: 4px; }
.v-cifras dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; }
.v-cifras .falta { background: var(--v-ambar-fondo); }
.v-cifras .falta dt, .v-cifras .falta dd { color: var(--v-ambar-tinta); }
.v-cifras .listo { background: var(--v-verde-fondo); }
.v-cifras .listo dt, .v-cifras .listo dd { color: var(--v-verde-tinta); }

/* Listas de hechos (pagos, salidas) */
.v-hechos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v-e2); }
.v-hecho { padding: var(--v-e3); border: 1px solid var(--v-linea); border-radius: var(--v-radio-m); background: var(--v-superficie); display: flex; flex-direction: column; gap: 4px; }
.v-hecho .fila { display: flex; align-items: center; justify-content: space-between; gap: 6px var(--v-e2); flex-wrap: wrap; }
.v-hecho .monto { font-size: 1.1rem; font-weight: 800; }
.v-hecho .mut { margin: 0; color: var(--v-tinta-suave); font-size: .95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v-hecho.anulado { background: var(--v-neutro-fondo); border-color: transparent; }
.v-hecho.anulado .monto { text-decoration: line-through; color: var(--v-tinta-suave); }
.v-vacio-linea { margin: 0; color: var(--v-tinta-suave); display: flex; align-items: center; gap: 6px; }

/* Destino dentro de «Envío» */
.v-destino-op { display: flex; flex-direction: column; gap: var(--v-e2); padding: var(--v-e3); border: 1px solid var(--v-linea); border-radius: var(--v-radio-m); background: var(--v-superficie); }
.v-destino-op .cabeza { display: flex; justify-content: space-between; align-items: center; gap: 6px var(--v-e2); flex-wrap: wrap; }
.v-destino-op .quien { font-weight: 800; font-size: 1.05rem; }
.v-datos { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--v-e3); font-size: .95rem; }
.v-datos dt { color: var(--v-tinta-suave); font-weight: 600; }
.v-datos dd { margin: 0; font-weight: 700; }
.v-revelado { padding: var(--v-e3); border-radius: var(--v-radio-m); background: var(--v-azul-50); border: 2px solid var(--v-azul-600); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-revelado .grande { font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; }
.v-boton-borde { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 16px; border-radius: var(--v-pildora); border: 2px solid var(--v-azul-600); background: var(--v-superficie); color: var(--v-azul-700); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.v-enlace-chico { color: var(--v-azul-700); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: underline; }

/* Formularios */
.v-form { margin: 0; display: flex; flex-direction: column; gap: var(--v-e4); }
.v-campo { display: flex; flex-direction: column; gap: 6px; }
.v-campo > label, .v-campo > .etiqueta { font-weight: 800; }
.v-campo .ayuda { margin: 0; font-size: .95rem; color: var(--v-tinta-suave); }
.v-campo input, .v-campo select, .v-campo textarea {
  width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 1.0625rem; color: var(--v-tinta);
  background: var(--v-superficie); border: 1px solid var(--v-linea-fuerte); border-radius: var(--v-radio-s);
}
.v-campo textarea { min-height: 96px; }
.v-campo .con-moneda { display: flex; align-items: center; gap: var(--v-e2); }
.v-campo .con-moneda span { font-weight: 800; font-size: 1.1rem; }
.v-campo .error { margin: 0; color: var(--v-rojo-tinta); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.v-campo.con-error input { border: 2px solid var(--v-rojo-tinta); }
.v-fondo select:focus-visible, .v-fondo textarea:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 2px; }
fieldset.v-opciones { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--v-e2); }
fieldset.v-opciones legend { padding: 0; margin-bottom: 6px; font-weight: 800; }
label.v-opcion { display: flex; align-items: center; gap: var(--v-e3); min-height: 52px; padding: 8px 14px; border: 1px solid var(--v-linea-fuerte); border-radius: var(--v-radio-s); background: var(--v-superficie); font-weight: 700; cursor: pointer; }
label.v-opcion > span { min-width: 0; flex: 1; }
label.v-opcion input { width: 22px; height: 22px; margin: 0; accent-color: var(--v-azul-600); }
label.v-opcion:has(input:checked) { border: 2px solid var(--v-azul-600); background: var(--v-azul-50); }
/* Depositante tercero: solo si eligió «otra persona o empresa» (FR-027, sin JavaScript) */
.v-form:has(input[name="deposito_de"][value="cliente"]:checked) .v-tercero:not(.con-datos) { display: none; }
.v-tercero { margin: 0; padding: var(--v-e3); border: 1px dashed var(--v-linea-fuerte); border-radius: var(--v-radio-m); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-tercero legend { padding: 0 6px; font-weight: 800; }

/* Operación nueva: «Publicar otra vez» se ve junto a la tasa, pero en el documento va después de
   «Revisar», que sigue siendo el botón de Enter (009; analyze U1). */
.v-alta > * { order: 3; }
.v-alta > .v-alta-tasa { order: 1; display: flex; flex-direction: column; gap: var(--v-e4); }
.v-alta > .v-renovar-tasa { order: 2; }

/* Consecuencia antes de anular (FR-020) */
.v-consecuencia { margin: 0; padding: var(--v-e3) var(--v-e4); border-radius: var(--v-radio-m); background: var(--v-ambar-fondo); color: var(--v-ambar-tinta); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-consecuencia h2 { margin: 0; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.v-consecuencia ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.v-consecuencia li { display: flex; gap: var(--v-e2); align-items: flex-start; }

/* Plegables chicos (comprobantes de un pago, SC-003): el resumen mide 44 px. */
.v-plegable > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; color: var(--v-azul-700); font-weight: 700; }
.v-plegable > summary::-webkit-details-marker { display: none; }
.v-plegable > summary .fin { margin-left: auto; transform: rotate(90deg); }
.v-plegable[open] > summary .fin { transform: rotate(-90deg); }

/* Corregir o cancelar (FR-018, FR-019) */
.v-corregir { padding: 0; }
.v-corregir > summary { list-style: none; cursor: pointer; min-height: 60px; padding: var(--v-e3) var(--v-e4); display: flex; align-items: center; gap: var(--v-e3); font-weight: 800; font-size: 1.05rem; }
.v-corregir > summary::-webkit-details-marker { display: none; }
.v-corregir > summary .fin { margin-left: auto; transform: rotate(90deg); color: var(--v-tinta-suave); }
.v-corregir[open] > summary .fin { transform: rotate(-90deg); }
.v-corregir .cuerpo { padding: 0 var(--v-e4) var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e3); }
.v-pasos-corregir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v-e2); counter-reset: paso; }
.v-pasos-corregir li { counter-increment: paso; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--v-e3); align-items: start; padding: var(--v-e3); border-radius: var(--v-radio-m); border: 1px solid var(--v-linea); background: var(--v-superficie); }
.v-pasos-corregir li::before { content: counter(paso); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--v-neutro-fondo); color: var(--v-neutro-tinta); }
.v-pasos-corregir li.ahora { border: 2px solid var(--v-azul-600); }
.v-pasos-corregir li.ahora::before { background: var(--v-azul-600); color: var(--v-sobre-azul); }
.v-pasos-corregir li.hecho::before { content: "✓"; background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-pasos-corregir .que { margin: 0; font-weight: 800; }
.v-pasos-corregir .mut { margin: 2px 0 0; color: var(--v-tinta-suave); font-size: .95rem; }
.v-pasos-corregir .v-boton { margin-top: var(--v-e2); min-height: 48px; font-size: 1rem; }

/* Lista de operaciones y filtros (FR-028) */
.v-filtros-nav { min-width: 0; max-width: 100%; }
/* Liz, 2026-11-11: «ese slider no va». Los filtros bajan de línea en vez de desplazarse de lado. */
.v-filtros { display: flex; flex-wrap: wrap; gap: var(--v-e2); padding: 2px 2px 6px; margin: 0; list-style: none; }
.v-filtros a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: var(--v-pildora); background: var(--v-superficie); border: 1px solid var(--v-linea-fuerte); color: var(--v-tinta); font-weight: 700; text-decoration: none; white-space: nowrap; }
.v-filtros a[aria-current="true"] { background: var(--v-azul-700); border-color: var(--v-azul-700); color: var(--v-sobre-azul); }
.v-filtros .cuenta { min-width: 24px; padding: 0 6px; border-radius: var(--v-pildora); background: var(--v-azul-100); color: var(--v-azul-800); font-size: .85rem; font-weight: 800; text-align: center; }
.v-filtros a[aria-current="true"] .cuenta { background: var(--v-superficie); }
.v-lista-op { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v-e2); }
.v-lista-op a { display: flex; flex-direction: column; gap: 6px; padding: var(--v-e3) var(--v-e4); color: var(--v-tinta); text-decoration: none; border-radius: var(--v-radio-m); background: var(--v-superficie); border: 1px solid var(--v-linea); box-shadow: 0 2px 8px rgba(23, 71, 181, .06); }
.v-lista-op .fila { display: flex; align-items: center; justify-content: space-between; gap: 4px var(--v-e2); flex-wrap: wrap; }
.v-lista-op .cliente { font-weight: 800; font-size: 1.05rem; min-width: 0; }
.v-lista-op .importe { font-weight: 800; }
.v-lista-op .mut { color: var(--v-tinta-suave); font-size: .95rem; }
.v-paginas { display: flex; justify-content: space-between; align-items: center; gap: var(--v-e2); }

button.v-enlace-chico { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; }
.v-siguiente .porque .v-enlace-chico { min-height: 0; display: inline; }
fieldset.v-opciones, .v-tercero { min-width: 0; }
.v-aviso > span, .v-hecho .fila > * { min-width: 0; }
@media (max-width: 340px) {
  .v-cifras { grid-template-columns: 1fr; }
  .v-datos { grid-template-columns: minmax(0, 1fr); }
  .v-tarjeta > h2 { flex-wrap: wrap; }
  .v-tarjeta > h2 .v-baldosa, .v-corregir > summary .v-baldosa { display: none; }
  .v-corregir > summary, .v-plegable > summary { flex-wrap: wrap; }
  .v-corregir > summary > span { min-width: 0; }
  label.v-opcion { padding: 8px 10px; gap: var(--v-e2); }
  .v-op .cifras .v-icono { display: none; }
}

/* ==== 019 · Reportes como tablero de celular (specs/019-reportes-dashboard, propuesta R) ===========
   Solo componentes «v-r-» con los tokens de la 015 (sin tokens nuevos: la prueba de contraste sigue
   cubriendo todos los pares). Sin estilos en línea (CSP): el largo de las barras va por clases de 5 en
   5 % (plan D-3). Las barras son de dibujo (aria-hidden); el texto dice la cifra exacta. */

/* ---- Selector de tiempo: tres botones grandes con ícono y palabra (FR-002) ------------------ */
.v-r-tiempo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px;
  background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-pildora);
}
.v-r-tiempo a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: var(--v-pildora);
  font-size: .95rem; font-weight: 800; color: var(--v-neutro-tinta); text-decoration: none; white-space: nowrap;
}
.v-r-tiempo a:hover { background: var(--v-azul-50); }
.v-r-tiempo a[aria-current="page"] { color: var(--v-sobre-azul); background: var(--v-azul-700); }
.v-r-cuando { margin: -4px 0 0; text-align: center; font-size: .9rem; color: var(--v-tinta-suave); }

/* ---- Tarjeta-pregunta (FR-003) ------------------------------------------------------------- */
.v-r-pregunta { padding: var(--v-e4); display: flex; flex-direction: column; gap: var(--v-e2); }
.v-r-pregunta.atencion { border: 2px solid var(--v-linea-fuerte); }
.v-r-q { margin: 0; display: flex; align-items: center; gap: var(--v-e3); font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.v-r-cifra { margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: var(--v-azul-700); }
.v-r-aclara { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .95rem; color: var(--v-tinta-suave); }
.v-r-aclara b { color: var(--v-tinta); }
.v-r-ver { align-self: flex-end; }
.v-r-vacio { color: var(--v-tinta-suave); }

/* ---- Desglose y filas ---------------------------------------------------------------------- */
.v-r-desglose, .v-r-cierres, .v-r-saldos, .v-r-columnas, .v-r-hechos, .v-r-dias { list-style: none; margin: 0; padding: 0; }
.v-r-desglose { display: flex; flex-direction: column; border-top: 1px solid var(--v-linea); }
.v-r-desglose li { border-bottom: 1px solid var(--v-linea); }
.v-r-desglose li, .v-r-desglose li > a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--v-e3); min-height: 48px; padding: 6px 0; font-size: .95rem;
}
.v-r-desglose li > a { flex: 1; color: var(--v-azul-700); font-weight: 700; text-decoration: none; }
.v-r-desglose li.sub { padding-left: var(--v-e4); min-height: 40px; color: var(--v-tinta-suave); }
.v-r-desglose small, .v-r-saldos small, .v-r-hechos small { display: block; font-size: .875rem; font-weight: 500; color: var(--v-tinta-suave); }
.v-r-desglose b { font-size: 1rem; }
.v-r-cierres { display: flex; flex-direction: column; gap: 10px; }
.v-r-cierres li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .95rem; }
.v-r-hechos { display: flex; flex-direction: column; border-top: 1px solid var(--v-linea); }
.v-r-hechos li { display: flex; gap: var(--v-e3); padding: 10px 0; border-bottom: 1px solid var(--v-linea); font-size: .95rem; }
.v-r-hechos li > span:last-child { min-width: 0; }
.v-r-hora { flex: none; min-width: 3.2em; white-space: nowrap; font-weight: 700; color: var(--v-tinta-suave); }
.v-r-hechos .v-chip { padding: 2px 10px; }

/* ---- Saldos por moneda (FR-007) y días ----------------------------------------------------- */
.v-r-moneda { margin: 6px 0 0; font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--v-azul-700); }
.v-r-saldos, .v-r-dias { display: flex; flex-direction: column; gap: 10px; }
.v-r-saldos li, .v-r-dias li > a { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--v-e3); align-items: center; font-size: .95rem; }
.v-r-dias li > a { min-height: 48px; color: var(--v-tinta); text-decoration: none; }
.v-r-dias li > a:hover .v-r-nombre { text-decoration: underline; }
.v-r-nombre { min-width: 0; }
.v-r-saldos b { font-size: 1.05rem; }
.v-r-barra { grid-column: 1 / -1; height: 8px; border-radius: var(--v-pildora); background: var(--v-azul-100); overflow: hidden; }
.v-r-barra i { display: block; height: 100%; border-radius: var(--v-pildora); background: var(--v-azul-600); }
.v-r-p0 { width: 0%; } .v-r-p5 { width: 5%; } .v-r-p10 { width: 10%; } .v-r-p15 { width: 15%; } .v-r-p20 { width: 20%; } .v-r-p25 { width: 25%; } .v-r-p30 { width: 30%; } .v-r-p35 { width: 35%; } .v-r-p40 { width: 40%; } .v-r-p45 { width: 45%; } .v-r-p50 { width: 50%; } .v-r-p55 { width: 55%; } .v-r-p60 { width: 60%; } .v-r-p65 { width: 65%; } .v-r-p70 { width: 70%; } .v-r-p75 { width: 75%; } .v-r-p80 { width: 80%; } .v-r-p85 { width: 85%; } .v-r-p90 { width: 90%; } .v-r-p95 { width: 95%; } .v-r-p100 { width: 100%; }

/* ---- Columnas de la semana: alto = monto real sobre 120 px; hoy resaltado y rotulado -------- */
.v-r-columnas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 170px; }
.v-r-columnas li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.v-r-col { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--v-azul-200); }
.v-r-h0 { height: 3px; background: var(--v-linea); }
.v-r-h5 { height: 6.0px; } .v-r-h10 { height: 12.0px; } .v-r-h15 { height: 18.0px; } .v-r-h20 { height: 24.0px; } .v-r-h25 { height: 30.0px; } .v-r-h30 { height: 36.0px; } .v-r-h35 { height: 42.0px; } .v-r-h40 { height: 48.0px; } .v-r-h45 { height: 54.0px; } .v-r-h50 { height: 60.0px; } .v-r-h55 { height: 66.0px; } .v-r-h60 { height: 72.0px; } .v-r-h65 { height: 78.0px; } .v-r-h70 { height: 84.0px; } .v-r-h75 { height: 90.0px; } .v-r-h80 { height: 96.0px; } .v-r-h85 { height: 102.0px; } .v-r-h90 { height: 108.0px; } .v-r-h95 { height: 114.0px; } .v-r-h100 { height: 120.0px; }
.v-r-columnas .hoy .v-r-col { background: var(--v-azul-700); }
.v-r-dia { font-size: .875rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-r-columnas .hoy .v-r-dia { color: var(--v-azul-700); font-weight: 800; }

/* ---- Legibilidad de las cifras y del texto secundario (011 T050, decisión de Liz del 2026-11-08) --
   Una cifra (`.v-num`: moneda y monto) es una unidad visual: si no cabe en lo que queda de la línea,
   baja entera a la siguiente, en vez de dejar «Bs» en una línea y «135,000.00» en la otra. Si no
   cabe ni en una línea entera (zoom 200 %), se acomoda sin perder dígitos ni desplazar en
   horizontal (ver «Pantallas angostas»). El texto secundario mide al menos 14 px (.875rem). */
.v-r .v-num { display: inline-block; max-width: 100%; }
/* Una línea con varias cifras («Saldo de VEN S/ … · saldo externo S/ …») se parte entre ellas, nunca
   dentro de una: cada monto lleva un espacio fijo entre el símbolo y la cifra (filtro `monto`). */
.v-r small.v-num { display: block; white-space: normal; }
.v-r .v-vidrio .v-chip { font-size: .875rem; }
.v-r-recibido { display: block; margin-top: 2px; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---- Elegir fecha ------------------------------------------------------------------------- */
.v-r-elegir input[type="date"] {
  font: inherit; font-size: 1.05rem; min-height: 50px; padding: 8px 14px; color: var(--v-tinta);
  background: var(--v-superficie); border: 1px solid var(--v-linea-fuerte); border-radius: var(--v-radio-s);
}
.v-r-elegir input[type="date"]:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 1px; }
.v-r-otra { align-self: center; }
.v-r-otra > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; color: var(--v-azul-700); font-weight: 800; }
.v-r-otra[open] { align-self: stretch; padding: var(--v-e4); background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-radio-l); }
.v-r-atajo {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px; border-radius: var(--v-pildora);
  font-weight: 800; color: var(--v-azul-700); background: var(--v-azul-100); text-decoration: none;
}

/* ---- Pantallas angostas (360 px) y zoom 200 % -------------------------------------------- */
@media (max-width: 400px) {
  .v-r-tiempo a { font-size: .875rem; gap: 4px; }
  .v-r-cifra { font-size: 1.9rem; }
}
@media (max-width: 320px) {
  .v-r-tiempo { grid-template-columns: 1fr; border-radius: var(--v-radio-l); }
  .v-r-tiempo a { white-space: normal; }
  .v-r-cifra { font-size: 1.5rem; }
  .v-r-q { font-size: 1.05rem; }
  .v-r-q .v-baldosa { display: none; }
  .v-r-columnas { gap: 2px; }
  .v-r .v-num { white-space: normal; }
  .v-r-desglose li, .v-r-desglose li > a { flex-wrap: wrap; }
  .v-r-hechos li { flex-direction: column; gap: 2px; }
  .v-r-saldos li, .v-r-dias li > a { grid-template-columns: minmax(0, 1fr); }
  .v-r-saldos b, .v-r-desglose b, .v-r-cifra { overflow-wrap: anywhere; white-space: normal; }
}
/* ==== fin 019 ============================================================================== */
/* ==== 020 · Primeros pasos (specs/020-primeros-pasos; research R1, R3, R6, R7) ============== */
/* Bloque agregado al final por la 020, sobre el motor de la 016: solo clases «v-guia-» y «v-pp-», */
/* las anclas «#guia-…» del contrato (contracts/pasos.md) y los tokens «--v-» de la 015.          */
/* Sin animaciones, sin estilos en línea, sin recursos externos.                                  */
/*                                                                                              */
/* Pares de contraste: los mismos de la 015 y la 016 (sin pares nuevos).                         */
/* ========================================================================================== */

/* El camino en íconos (invitación y «Te faltan N pasos»): más símbolos que texto. */
.v-pp-ruta { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 4px; }
.v-pp-ruta li {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 1 34px; height: 34px; min-width: 0;
  border-radius: 10px; background: var(--v-azul-50); color: var(--v-azul-700);
}
.v-pp-ruta li.hecho { background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-pp-ruta .v-icono { width: 20px; height: 20px; }

/* «✓ Hecho» en el título de la tarjeta. */
.v-pp-hecho {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--v-pildora);
  background: var(--v-verde-fondo); color: var(--v-verde-tinta); font-weight: 800; font-size: .85rem;
}
.v-guia-lugar .v-pp-hecho .v-icono { width: 16px; height: 16px; }

/* Paso 1: las tres cajas sugeridas en una fila de baldosas (ícono arriba, palabra abajo). */
.v-pp-cajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-e2); }
.v-pp-caja {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; padding: 6px 4px; border-radius: 14px; text-align: center;
  font: inherit; font-weight: 800; font-size: .95rem; line-height: 1.15; text-decoration: none; overflow-wrap: anywhere;
  border: 2px solid var(--v-azul-600); background: var(--v-superficie); color: var(--v-azul-700);
}
.v-pp-caja.hecha { border-color: transparent; background: var(--v-verde-fondo); color: var(--v-verde-tinta); }
.v-pp-caja.no-usa { border-style: dashed; border-color: var(--v-linea-fuerte); color: var(--v-tinta-suave); background: none; }
.v-pp-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--v-e3); }
.v-pp-fila form { margin: 0; }
.v-pp-nota { margin: 0; font-size: .95rem; font-weight: 600; color: var(--v-tinta-suave); }
.v-guia-lugar .v-pp-caja:focus-visible { outline: 3px solid var(--v-foco); outline-offset: 2px; }

/* Marca «Aquí» de Primeros pasos: las mismas reglas de la 016, con las claves «pp-…». */
.v-guia-marca[data-guia-paso="pp-cajas"] #guia-cajas-nueva,
.v-guia-marca[data-guia-paso="pp-tasa"] #guia-tasa-publicar,
.v-guia-marca[data-guia-paso="pp-cliente"] #guia-clientes-registrar,
.v-guia-marca[data-guia-paso="pp-cliente"] #id_agente,
.v-guia-marca[data-guia-paso="pp-beneficiario"] #guia-ficha-falta,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-revisar,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-registrar,
.v-guia-marca[data-guia-paso="pp-pago"] #guia-operacion-siguiente,
.v-guia-marca[data-guia-paso="pp-salida"] #guia-operacion-siguiente,
.v-guia-marca[data-guia-paso="pp-recibida"] #guia-operacion-siguiente {
  position: relative; outline: 3px solid var(--v-foco); outline-offset: 4px; border-radius: 14px;
  scroll-margin-top: 64px; scroll-margin-bottom: 320px;
}
.v-guia-marca[data-guia-paso="pp-cajas"] #guia-cajas-nueva,
.v-guia-marca[data-guia-paso="pp-tasa"] #guia-tasa-publicar,
.v-guia-marca[data-guia-paso="pp-cliente"] #guia-clientes-registrar,
.v-guia-marca[data-guia-paso="pp-beneficiario"] #guia-ficha-falta,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-revisar,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-registrar,
.v-guia-marca[data-guia-paso="pp-pago"] #guia-operacion-siguiente,
.v-guia-marca[data-guia-paso="pp-salida"] #guia-operacion-siguiente,
.v-guia-marca[data-guia-paso="pp-recibida"] #guia-operacion-siguiente { margin-top: 34px; overflow: visible; }
.v-guia-marca[data-guia-paso="pp-cajas"] #guia-cajas-nueva::before,
.v-guia-marca[data-guia-paso="pp-tasa"] #guia-tasa-publicar::before,
.v-guia-marca[data-guia-paso="pp-cliente"] #guia-clientes-registrar::before,
.v-guia-marca[data-guia-paso="pp-beneficiario"] #guia-ficha-falta::before,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-revisar::before,
.v-guia-marca[data-guia-paso="pp-operacion"] #guia-operacion-registrar::before,
.v-guia-marca[data-guia-paso="pp-pago"] #guia-operacion-siguiente::before,
.v-guia-marca[data-guia-paso="pp-salida"] #guia-operacion-siguiente::before,
.v-guia-marca[data-guia-paso="pp-recibida"] #guia-operacion-siguiente::before {
  content: "Aquí"; content: "↓ Aquí" / "Aquí";
  position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 0; top: auto; right: auto;
  display: inline-flex; align-items: center; width: max-content; height: auto; min-height: 26px;
  margin: 0; padding: 2px 12px; border: 0; border-radius: var(--v-pildora);
  background: var(--v-azul-700); color: var(--v-sobre-azul); box-shadow: none;
  font-family: var(--v-fuente); font-size: .9rem; font-weight: 800; line-height: 1.2; letter-spacing: 0;
  pointer-events: none;
}

@media (max-width: 320px) {
  .v-pp-cajas { grid-template-columns: minmax(0, 1fr); }
  .v-pp-caja { flex-direction: row; min-height: 48px; }
  .v-pp-ruta { flex-wrap: wrap; justify-content: flex-start; }
}

/* El lugar fijo en pantallas viejas: no heredar «overflow-wrap: anywhere» de app.css (S1). */
.v-guia-lugar { overflow-wrap: break-word; }

/* El aviso de una sola vez: con zoom 200 % la frase pasa a la línea de abajo (sin desplazamiento). */
.v-guia-aviso { flex-wrap: wrap; }

/* S2 del STOP A: en el Inicio, la invitación y «Te faltan N pasos» van en el flujo, después del
   Resumen: no flotan ni tapan nada. */
.v-guia-lugar.en-flujo { position: static; margin: 0; padding: 0; max-width: none; }
.v-pp-caja small { font-size: .78rem; font-weight: 700; }

/* Índice /primeros-pasos: filas sin botón (no se salta a un paso: el paso sale de los datos). */
.v-pp-indice li { min-height: 60px; display: flex; align-items: center; gap: var(--v-e3); padding: 8px 0; font-weight: 700; }
.v-pp-indice li.hecho .v-baldosa { color: var(--v-verde-tinta); }
.v-pp-indice .v-pp-hecho { margin-left: auto; }

/* ==== fin 020 ============================================================================== */

/* ==== 008 merge B: los comprobantes de un pago (en el plegable del detalle) ===========
   Cada regla nombra su elemento (como CV-14, CV-27 y `.v-datos`): las clases son nuevas y propias. */
div.v-cpb { display: flex; flex-direction: column; gap: var(--v-e2); padding-top: var(--v-e2); }
ul.v-cpb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v-e3); }
li.v-cpb-item { display: flex; flex-direction: column; gap: var(--v-e2); padding: var(--v-e3); border: 1px solid var(--v-linea); border-radius: var(--v-radio-m); min-width: 0; }
div.v-cpb-acciones { display: flex; flex-wrap: wrap; gap: var(--v-e2); }
/* La imagen de ver y de revisar (T050, T071): nunca más ancha que la columna (360 px, sin desplazamiento). */
div.v-cpb-imagenes { display: flex; flex-direction: column; gap: var(--v-e2); }
img.v-cpb-imagen { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--v-linea); border-radius: var(--v-radio-s); background: var(--v-superficie); }
/* ==== fin 008 ============================================================================== */
=======
/* ==== 021 · Visualización del negocio, prioridad 1 (specs/021-visualizacion-negocio; ADR 0013) =====
   Baldosas, «Para revisar», la barra apilada de operaciones, la cifra como unidad y la grilla ancha
   de escritorio. Solo selectores con prefijo «v-21-» (o dentro de `.v-21-ancho`, que solo pone la
   base de Reportes en sus tableros, ADR 0013); sin tokens nuevos. Nada depende solo del color. */

/* ---- La cifra como unidad (FR-016): nunca partida entre dígitos ------------------------------ */
.v-21-c { display: inline-block; max-width: 100%; }
.v-21-c .v-num { white-space: nowrap; }
.v-21-corta { display: none; }
.v-21-corta > summary { list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; min-height: 44px; display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.v-21-corta > summary::-webkit-details-marker { display: none; }
.v-21-exacta { display: block; margin-top: 2px; max-width: 100%; overflow-x: auto; font-size: .875rem; font-weight: 600; white-space: nowrap; }

.v-21-grilla { display: flex; flex-direction: column; gap: var(--v-e4); }
.v-21-h { margin: 0 0 var(--v-e2); display: flex; align-items: center; gap: var(--v-e2); font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.v-21-h .v-icono { width: 22px; height: 22px; color: var(--v-azul-700); }
.v-21-cuenta { padding: 2px 10px; border-radius: var(--v-pildora); background: var(--v-azul-100); color: var(--v-azul-700); font-size: .9rem; text-align: center; }
.v-21-cuenta.ambar { background: var(--v-ambar-fondo); color: var(--v-ambar-tinta); }
.v-21-nota { margin: 0 0 var(--v-e2); font-size: .875rem; color: var(--v-tinta-suave); }

/* ---- Baldosas (FR-011) ------------------------------------------------------------------- */
.v-21-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-e2); }
.v-21-kpi { display: flex; flex-direction: column; gap: 2px; min-height: 96px; padding: 12px 14px; text-decoration: none; color: var(--v-tinta); }
a.v-21-kpi:hover .v-21-kpi-rot { text-decoration: underline; }
.v-21-kpi.atencion { border: 2px solid var(--v-ambar-tinta); }
.v-21-kpi-rot { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-21-kpi-cifra { font-size: 1.3rem; font-weight: 800; line-height: 1.15; color: var(--v-azul-700); }
.v-21-kpi-cifra .v-21-s { font-size: 1rem; }
.v-21-kpi-sub { font-size: .875rem; color: var(--v-tinta-suave); }

/* ---- Para revisar (FR-010): pendiente ahora (ámbar) y registrado para auditar (neutro) ----- */
.v-21-revisar { padding: var(--v-e4); border: 2px solid var(--v-ambar-tinta); }
.v-21-revisar.solo-registro { border: 1px solid var(--v-linea-fuerte); }
.v-21-revisar .v-21-h .v-icono { color: var(--v-ambar-tinta); }
.v-21-rev-grupo { margin: var(--v-e2) 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; }
.v-21-rev-grupo.info { margin-top: var(--v-e3); padding-top: var(--v-e2); border-top: 1px dashed var(--v-linea-fuerte); color: var(--v-tinta-suave); }
.v-21-rev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-21-rev li + li { border-top: 1px solid var(--v-linea); }
.v-21-rev a, .v-21-rev-fila { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; color: var(--v-tinta); text-decoration: none; }
.v-21-rev a > .v-icono { flex: none; color: var(--v-azul-700); }
.v-21-rev-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.v-21-rev-texto { font-size: 1rem; font-weight: 600; }
.v-21-rev.info .v-chip { background: var(--v-neutro-fondo); color: var(--v-neutro-tinta); }
.v-21-rev.info .v-21-rev-texto { font-weight: 500; }

/* ---- Operaciones: barra apilada con leyenda en texto (FR-012) ------------------------------ */
.v-21-apilada { display: flex; height: 20px; border-radius: var(--v-pildora); overflow: hidden; background: var(--v-azul-50); }
.v-21-apilada i { display: block; flex: none; height: 100%; }
.v-21-apilada i + i { border-left: 2px solid var(--v-superficie); }
.v-21-ley { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; }
.v-21-ley li { display: flex; align-items: center; gap: 6px; }
.v-21-cuadro { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.v-21-e1 { background: var(--v-azul-800); }
.v-21-e2 { background: var(--v-azul-600); }
.v-21-e3 { background: var(--v-azul-500); }
.v-21-e4 { background: var(--v-azul-200); }
.v-21-e5 { background: repeating-linear-gradient(135deg, var(--v-azul-200) 0 5px, var(--v-azul-500) 5px 8px); }
.v-21-e6 { background: var(--v-azul-100); }
.v-21-e7 { background: repeating-linear-gradient(45deg, var(--v-linea-fuerte) 0 4px, var(--v-superficie) 4px 8px); }

/* ---- El dinero por etapas (historia 2, FR-020 a FR-027): numeradas, sin conectores --------- */
.v-21-recorrido { padding: var(--v-e4); }
.v-21-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-21-etapa { padding: 12px 14px; background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-radio-m); }
.v-21-etapa-t { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.v-21-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--v-azul-700); color: var(--v-sobre-azul); font-size: .9rem; }
.v-21-par { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-21-par-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; min-height: 44px; font-size: .95rem; color: var(--v-tinta); text-decoration: none; }
a.v-21-par-fila:hover .v-21-par-rot { text-decoration: underline; }
.v-21-par b { font-size: 1.05rem; }
.v-21-par small { grid-column: 1 / -1; font-size: .875rem; color: var(--v-tinta-suave); }
.v-21-par-vacio { color: var(--v-tinta-suave); }
.v-21-par-barra { grid-column: 1 / -1; height: 10px; border-radius: var(--v-pildora); background: var(--v-azul-50); overflow: hidden; }
.v-21-par-barra i { display: block; height: 100%; border-radius: var(--v-pildora); }
.v-21-par-barra .entra { background: var(--v-azul-600); }
.v-21-par-barra .sale { background: repeating-linear-gradient(135deg, var(--v-azul-200) 0 6px, var(--v-azul-500) 6px 9px); }
.v-21-queda { margin: 8px 0 0; font-size: .875rem; color: var(--v-tinta-suave); }
.v-21-queda b { color: var(--v-tinta); }
.v-21-mini { margin: 10px 0 0; }
.v-21-mini svg { display: block; width: 100%; height: 56px; }
.v-21-col { fill: var(--v-azul-200); }
.v-21-mini figcaption { margin-top: 2px; font-size: .875rem; color: var(--v-tinta-suave); }

/* ---- Otros movimientos (FR-014): una fila compacta con su enlace ---------------------------- */
.v-21-otros { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 56px; padding: 10px 14px; color: var(--v-tinta); text-decoration: none; font-size: .95rem; }
.v-21-otros-t { flex: 1; order: 1; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--v-tinta-suave); }
.v-21-otros-ir { order: 2; color: var(--v-azul-700); }
.v-21-otros-c { order: 3; flex-basis: 100%; min-width: 0; }
.v-21-otros-s { order: 4; flex-basis: 100%; font-size: .875rem; color: var(--v-tinta-suave); }

/* ---- Cómo van las cajas (historia 3, FR-030 a FR-035) --------------------------------------- */
.v-21-cajas-t { padding: var(--v-e4); }
.v-21-cajas { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.v-21-cajas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; font-size: .95rem; }
.v-21-cajas b { font-size: 1.1rem; }
.v-21-caja-n { font-weight: 600; }
.v-21-caja-dif { grid-column: 2; justify-self: end; font-size: .9rem; font-weight: 700; color: var(--v-tinta-suave); }
.v-21-pesas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
.v-21-pesas i { display: block; height: 7px; border-radius: var(--v-pildora); }
.v-21-pesas .ini { background: var(--v-linea-fuerte); }
.v-21-pesas .fin { background: var(--v-azul-600); }
.v-21-cajas small { grid-column: 1 / -1; font-size: .875rem; color: var(--v-tinta-suave); }
.v-21-leyenda { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .875rem; color: var(--v-tinta-suave); }
.v-21-l { display: inline-block; width: 22px; height: 7px; border-radius: var(--v-pildora); vertical-align: middle; }
.v-21-l.ini { background: var(--v-linea-fuerte); }
.v-21-l.fin, .v-21-l.l1 { background: var(--v-azul-700); }
.v-21-l.l2 { height: 0; border-top: 3px dashed var(--v-azul-500); border-radius: 0; }
.v-21-l.l3 { height: 0; border-top: 3px dotted var(--v-azul-800); border-radius: 0; }
.v-21-marca-ley { display: inline-block; width: 12px; height: 12px; background: var(--v-ambar-tinta); transform: rotate(45deg); }
.v-21-cierres { margin: var(--v-e2) 0 0; font-size: .95rem; }
.v-21-graficos { display: flex; flex-direction: column; gap: var(--v-e4); }
.v-21-graf { margin: 0; }
.v-21-graf svg { display: block; width: 100%; height: auto; }
.v-21-eje { stroke: var(--v-linea-fuerte); stroke-width: 1; }
.v-21-guia { stroke: var(--v-linea); stroke-width: 1; stroke-dasharray: 3 4; }
.v-21-cero { stroke: var(--v-tinta-suave); stroke-width: 1.5; }
.v-21-txt { fill: var(--v-tinta-suave); font-size: 16px; font-family: var(--v-fuente); }
.v-21-rango { margin: 4px 0 0; font-size: .875rem; color: var(--v-tinta-suave); }
.v-21-rango b { color: var(--v-tinta); }
.v-21-linea { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.v-21-linea.l1 { stroke: var(--v-azul-700); }
.v-21-linea.l2 { stroke: var(--v-azul-500); stroke-dasharray: 7 5; }
.v-21-linea.l3 { stroke: var(--v-azul-800); stroke-dasharray: 2 5; }
.v-21-punto.l1 { fill: var(--v-azul-700); }
.v-21-punto.l2 { fill: var(--v-azul-500); }
.v-21-punto.l3 { fill: var(--v-azul-800); }
.v-21-marca { fill: var(--v-ambar-tinta); }

/* ---- La semana con zoom (FR-017): 7 filas en vez de 7 columnas ---------------------------- */
.v-21-sem-filas { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; }
.v-21-sem-filas li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 2px 8px; align-items: center; font-size: .95rem; }
.v-21-sem-filas b { grid-column: 1 / -1; }
.v-21-sf-barra { height: 10px; border-radius: var(--v-pildora); background: var(--v-azul-50); overflow: hidden; }
.v-21-sf-barra i { display: block; height: 100%; background: var(--v-azul-600); border-radius: var(--v-pildora); }

/* ---- Las tarjetas de la 019 que siguen, con el encabezado compacto de la 021 (SC-002) ------- */
.v-21-grilla .v-r-q { font-size: 1.15rem; }
.v-21-grilla .v-r-q .v-baldosa { width: 32px; height: 32px; border-radius: 11px; }
.v-21-grilla .v-r-q .v-baldosa .v-icono { width: 20px; height: 20px; }

/* ---- Zoom 200 % y pantallas muy angostas ---------------------------------------------------- */
@media (max-width: 320px) {
  .v-21-kpis { grid-template-columns: minmax(0, 1fr); }
  .v-21-kpi-cifra { font-size: 1.15rem; }
  .v-21-cifra.larga > .v-21-c { display: none; }
  .v-21-cifra.larga > .v-21-corta { display: inline-block; max-width: 100%; }
  .v-21-corta > summary { white-space: normal; }
  .v-21-rev a, .v-21-rev-fila, .v-21-h { flex-wrap: wrap; }
  .v-21-rev .v-chip { white-space: normal; }
  .v-21-revisar { padding: 10px; }
  .v-21-ley li { flex-wrap: wrap; min-width: 0; }
  .v-21-par-fila { grid-template-columns: minmax(0, 1fr); }
  .v-21-recorrido, .v-21-etapa { padding: 10px; }
  .v-21-etapa-t { flex-wrap: wrap; overflow-wrap: break-word; }
  .v-21-cajas li { grid-template-columns: minmax(0, 1fr); }
  .v-21-caja-dif { grid-column: 1; justify-self: start; }
  .v-21-cajas-t { padding: 10px; }
  .v-21-txt { display: none; }
  .v-21-sem-columnas { display: none; }
  .v-21-sem-filas { display: flex; }
}

/* ---- Escritorio: la grilla ancha, solo en los tableros de Reportes (ADR 0013, FR-050 a FR-053) */
.v-21-ancho .v-columna { max-width: 1040px; }
@media (min-width: 900px) {
  .v-21-grilla.ancho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; }
  .v-21-grilla.ancho > * { grid-column: span 6; }
  .v-21-grilla.ancho > .v-21-kpis, .v-21-grilla.ancho > .v-21-t-nada, .v-21-grilla.ancho > .v-21-t-dias { grid-column: span 12; }
  .v-21-grilla.ancho .v-21-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v-21-grilla.ancho > .v-21-revisar { grid-column: span 5; }
  .v-21-grilla.ancho > .v-21-cajas-t, .v-21-grilla.ancho > .v-21-t-operaciones { grid-column: span 7; }
  .v-21-grilla.ancho > .v-21-cajas-t.lineas { grid-column: span 12; }
  .v-21-grilla.ancho .v-21-graficos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-21-grilla.ancho > .v-21-t-semana { grid-column: span 5; }
  .v-21-grilla.ancho > .v-21-recorrido { grid-column: span 12; }
  .v-21-grilla.ancho .v-21-etapas { flex-direction: row; align-items: stretch; }
  .v-21-grilla.ancho .v-21-etapa { flex: 1; min-width: 0; }
  .v-21-grilla.ancho .v-21-par-fila { grid-template-columns: minmax(0, 1fr); }
  .v-21-grilla.ancho > .v-21-otros { grid-column: span 5; }
}
/* ==== fin 021 =============================================================================== */