/**
 * ventas.css — WTF Publicidad Panel Interno
 * Módulo "Ventas y Prospección": tabla de ofertas con edición rápida,
 * tablero por etapa, ficha lateral, contactos, catálogo e importación.
 *
 * Mismo lenguaje visual del panel: variables de color de base.css,
 * tarjetas, chips, claro y oscuro, íconos Tabler. El verde es acento,
 * nunca fondo de superficies grandes, y sobre verde el texto va en negro.
 */

.vta-main {
  max-width: 1420px;
  margin: 0 auto;
}
/* Los colores del módulo también para lo que vive fuera de .vta-main (la
   ficha en ventana y el pago a proveedor, assets/js/ventas-ficha.js). */
.vta-main, .vta-vars {
  --vta-verde: var(--go);
  --vta-rojo:  #B42318;
  --vta-ambar: #8A5A0F;
  --vta-azul:  #1F5F9E;
  --vta-morado:#6D3F9E;
}
[data-theme="dark"] .vta-main, [data-theme="dark"] .vta-vars {
  --vta-verde: var(--g);
  --vta-rojo:  #f87171;
  --vta-ambar: #EF9F27;
  --vta-azul:  #85B7EB;
  --vta-morado:#c4b5fd;
}
.vta-main [hidden], .vta-vars [hidden], .vta-vars[hidden] { display: none !important; }

/* ── Encabezado ── */
.vta-main .breadcrumb { display:flex; align-items:center; gap:.35rem; font-size:11px; color:var(--ts); margin-bottom:.75rem; }
.vta-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.85rem; flex-wrap:wrap; }
.vta-tit { font-size:18px; font-weight:700; color:var(--t); }
.vta-sub { font-size:12px; color:var(--ts); margin-top:.2rem; max-width:70ch; line-height:1.5; }
.vta-hdr-btns { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

.vta-seg { display:inline-flex; background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); padding:.2rem; gap:.15rem; }
.vta-seg button { padding:6px 12px; border:none; background:transparent; border-radius:var(--r); font-size:11px; font-weight:600; color:var(--ts); cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:.3rem; }
.vta-seg button:hover { color:var(--t); }
.vta-seg button[aria-pressed="true"] { background:var(--c1); color:var(--t); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.vta-seg button[aria-pressed="true"] i { color:var(--vta-verde); }

.vta-btn { padding:7px 14px; background:var(--c2); color:var(--ts); border:1px solid var(--br); border-radius:var(--r2); font-size:11px; font-weight:600; cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; text-decoration:none; }
.vta-btn:hover { background:var(--c1); color:var(--t); border-color:var(--brh); }
.vta-btn.prim { background:var(--g); border-color:var(--g); color:#000; font-weight:700; }
.vta-btn.prim:hover { background:var(--gd); border-color:var(--gd); }
.vta-btn.rojo { background:transparent; color:var(--vta-rojo); border-color:var(--red-br); }
.vta-btn.rojo:hover { background:var(--red-bg); }
.vta-btn.chico { padding:4px 9px; font-size:10.5px; }
.vta-btn:disabled { opacity:.55; cursor:wait; }
.vta-main button:focus-visible, .vta-main select:focus-visible, .vta-main input:focus-visible, .vta-main [tabindex]:focus-visible { outline:2px solid var(--g); outline-offset:2px; }

.vta-sin-permiso { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); padding:2rem 1.25rem; text-align:center; color:var(--ts); font-size:12px; box-shadow:var(--shadow-card); }
.vta-sin-permiso i { font-size:28px; color:var(--tm); display:block; margin-bottom:.5rem; }
.vta-cargando { padding:2rem; text-align:center; color:var(--ts); font-size:12px; }
.vta-vacio { padding:1.75rem 1rem; text-align:center; color:var(--ts); font-size:12px; line-height:1.6; }

/* ── Totales de lo filtrado ── */
.vta-totales { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; margin-bottom:.75rem; }
.vta-tot { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); padding:.6rem .8rem; }
.vta-tot-lbl { font-size:10.5px; color:var(--ts); font-weight:600; display:flex; align-items:center; gap:.3rem; }
.vta-tot-val { font-size:20px; font-weight:700; color:var(--t); line-height:1.25; }
.vta-tot-sub { font-size:10.5px; color:var(--ts); }
.vta-tot.ok   .vta-tot-val { color:var(--vta-verde); }
.vta-tot.alerta .vta-tot-val { color:var(--vta-rojo); }

/* ── Barra de filtros ── */
.vta-barra { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.65rem; }
.vta-buscar { position:relative; flex:0 1 260px; }
.vta-buscar i { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); font-size:14px; color:var(--tm); }
.vta-buscar input { width:100%; padding:7px 10px 7px 2rem; border:1px solid var(--brh); border-radius:var(--r); background:var(--c1); color:var(--t); font-size:12px; font-family:var(--font); outline:none; }
.vta-buscar input:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(117,184,42,.12); }
.vta-sel { padding:6px 8px; border:1px solid var(--brh); border-radius:var(--r); background:var(--c1); color:var(--t); font-size:11px; font-family:var(--font); outline:none; cursor:pointer; max-width:100%; }
.vta-chip-f { padding:5px 10px; border-radius:20px; border:1px solid var(--br); background:var(--c2); font-size:10.5px; font-weight:600; color:var(--ts); cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:.25rem; }
.vta-chip-f:hover { border-color:var(--brh); color:var(--t); }
.vta-chip-f[aria-pressed="true"] { background:var(--g); color:#000; border-color:var(--g); }
.vta-limpiar { background:none; border:none; color:var(--ts); font-size:11px; font-weight:600; cursor:pointer; font-family:var(--font); text-decoration:underline; }
.vta-limpiar:hover { color:var(--t); }
.vta-cuenta { font-size:11px; color:var(--ts); margin-left:auto; }

/* ── Etiquetas ── */
.vta-etapa { display:inline-flex; align-items:center; gap:.3rem; font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:20px; border:1px solid var(--br); background:var(--c2); color:var(--ts); white-space:nowrap; }
.vta-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.vta-prio { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; border:1px solid; white-space:nowrap; }
.vta-prio.alta  { background:var(--red-bg);    border-color:var(--red-br);    color:var(--vta-rojo); }
.vta-prio.media { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.vta-prio.baja  { background:var(--blue-bg);   border-color:var(--blue-br);   color:var(--vta-azul); }
.vta-chip { display:inline-flex; align-items:center; gap:.2rem; font-size:10px; font-weight:600; padding:1px 7px; border-radius:20px; border:1px solid var(--br); background:var(--c2); color:var(--ts); white-space:nowrap; }
.vta-aviso-chip { display:inline-flex; align-items:center; gap:.2rem; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; background:var(--yellow-bg); border:1px solid var(--yellow-br); color:var(--vta-ambar); white-space:nowrap; }
.vta-aviso-chip.rojo { background:var(--red-bg); border-color:var(--red-br); color:var(--vta-rojo); }
.vta-folio { font-family:var(--font-mono); font-size:11px; color:var(--ts); }

/* ── Tabla ── */
.vta-tabla-wrap { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); overflow-x:auto; }
.vta-tabla { width:100%; border-collapse:collapse; min-width:1080px; }
.vta-tabla th { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ts); padding:.65rem .85rem; border-bottom:1px solid var(--br); text-align:left; white-space:nowrap; background:var(--c1); position:sticky; top:0; z-index:2; }
/* Cada encabezado se alinea igual que sus datos: números a la derecha con su
   encabezado a la derecha, texto a la izquierda. Anchos parejos en los números. */
.vta-tabla th.vta-num, .vta-tabla td.vta-num { text-align:right; min-width:104px; }
.vta-tabla th.vta-centro, .vta-tabla td.vta-centro { text-align:center; }
.vta-tabla th.vta-acciones, .vta-tabla td.vta-acciones { text-align:right; width:1%; white-space:nowrap; }
.vta-tabla th.ord { cursor:pointer; user-select:none; }
.vta-tabla th.ord:hover { color:var(--t); }
.vta-tabla th.ord i { font-size:11px; vertical-align:-1px; }
.vta-tabla td { padding:.55rem .85rem; border-bottom:1px solid var(--sep); font-size:12px; vertical-align:middle; color:var(--t); }
.vta-tabla tfoot td { border-top:1px solid var(--br); border-bottom:none; background:var(--c2); }
.vta-tabla tr:last-child td { border-bottom:none; }
.vta-fila:hover td { background:var(--c2); }
/* Franja de color a la izquierda (ronda 2, punto 10): rojo = cobro atrasado;
   amarillo = sin movimiento o anticipo pendiente; sin franja = en orden. */
.vta-fila.alerta-rojo td:first-child { box-shadow:inset 4px 0 0 #E24B4A; }
.vta-fila.alerta-amarillo td:first-child { box-shadow:inset 4px 0 0 #EF9F27; }
.vta-fila-tit { font-weight:600; line-height:1.35; cursor:pointer; }
.vta-fila-tit:hover { text-decoration:underline; }
.vta-fila-sub { font-size:10.5px; color:var(--ts); margin-top:.1rem; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.vta-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vta-util-neg { color:var(--vta-rojo); }

/* Edición rápida dentro de la fila */
.vta-inline { border:1px solid transparent; background:transparent; color:var(--t); font-size:11.5px; font-family:var(--font); border-radius:var(--r); padding:3px 5px; max-width:150px; cursor:pointer; }
.vta-inline:hover { border-color:var(--brh); background:var(--c1); }
.vta-inline:focus { border-color:var(--g); background:var(--c1); outline:none; box-shadow:0 0 0 3px rgba(117,184,42,.12); }
.vta-inline.num { text-align:right; width:92px; font-variant-numeric:tabular-nums; }
.vta-inline.guardando { opacity:.5; }

/* ── Tablero por etapa ── */
.vta-tablero { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:.6rem; overflow-x:auto; padding-bottom:.6rem; align-items:start; }
.vta-col { background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); display:flex; flex-direction:column; min-width:0; transition:border-color .15s, box-shadow .15s; }
.vta-col.sobre { border-color:var(--g); box-shadow:0 0 0 2px rgba(117,184,42,.18); }
.vta-col-hdr { display:flex; align-items:center; gap:.4rem; padding:.55rem .7rem; border-bottom:1px solid var(--br); }
.vta-col-tit { font-size:11.5px; font-weight:700; color:var(--t); flex:1; min-width:0; }
.vta-col-num { font-size:10px; font-weight:700; padding:0 7px; border-radius:10px; background:var(--c1); border:1px solid var(--br); color:var(--ts); }
.vta-col-monto { font-size:10.5px; color:var(--ts); font-variant-numeric:tabular-nums; }
.vta-col-body { padding:.5rem; display:flex; flex-direction:column; gap:.45rem; min-height:90px; }
.vta-col-vacia { font-size:11px; color:var(--tm); text-align:center; padding:1rem .5rem; border:1px dashed var(--br); border-radius:var(--r); }
.vta-hueco { height:62px; border:2px dashed var(--g); border-radius:var(--r); background:var(--green-bg); flex-shrink:0; }
.vta-card { background:var(--c1); border:1px solid var(--br); border-radius:var(--r); padding:.55rem .65rem; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:.35rem; }
.vta-card:hover { border-color:var(--brh); }
.vta-card[draggable="true"] { cursor:grab; }
.vta-card.arrastrando { opacity:.4; }
.vta-card.alerta-rojo { border-left:4px solid #E24B4A; }
.vta-card.alerta-amarillo { border-left:4px solid #EF9F27; }
.vta-card-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.vta-card-cab .vta-card-tit { flex:1; min-width:0; }
.vta-card-fecha { flex-shrink:0; display:inline-flex; flex-direction:column; align-items:flex-end; gap:.1rem; font-size:10.5px; color:var(--ts); white-space:nowrap; font-variant-numeric:tabular-nums; margin-top:.1rem; }
.vta-card-fecha > span { display:inline-flex; align-items:center; gap:.2rem; }
.vta-card-fecha .ti { font-size:12px; }
.vta-card-fecha .cierre { color:var(--t); font-weight:600; }
.vta-card-tit { font-size:12px; font-weight:600; color:var(--t); line-height:1.4; word-break:break-word; }
.vta-card-chips { display:flex; flex-wrap:wrap; gap:.25rem; }
/* El pie queda pegado abajo aunque las tarjetas midan distinto */
.vta-card-pie { display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:10.5px; color:var(--ts); flex-wrap:wrap; margin-top:auto; }
.vta-card-monto { font-weight:700; color:var(--t); font-variant-numeric:tabular-nums; }
.vta-card-mover { display:none; width:100%; padding:5px 6px; border:1px solid var(--brh); border-radius:var(--r); background:var(--c2); color:var(--t); font-size:11px; font-family:var(--font); }
.vta-main.tactil .vta-card-mover { display:block; }

/* ── Ficha lateral ── */
.vta-velo { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:550; display:flex; justify-content:flex-end; }
.vta-panel { background:var(--c1); color:var(--t); width:100%; max-width:760px; height:100%; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.35); }
.vta-panel-hdr { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--br); flex-shrink:0; }
.vta-panel-tit { font-size:13px; font-weight:700; display:flex; align-items:center; gap:.45rem; min-width:0; flex-wrap:wrap; }
.vta-x { background:none; border:none; cursor:pointer; color:var(--ts); font-size:18px; width:30px; height:30px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vta-x:hover { background:var(--c2); color:var(--t); }
.vta-panel-body { overflow-y:auto; flex:1; }
.vta-panel-pie { display:flex; align-items:center; gap:.4rem; padding:.75rem 1rem; border-top:1px solid var(--br); flex-shrink:0; flex-wrap:wrap; }
.vta-panel-pie .der { margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap; }
.vta-tabs { display:flex; gap:.2rem; padding:.5rem 1rem 0; border-bottom:1px solid var(--br); }
.vta-tab { padding:6px 12px; border:1px solid transparent; border-bottom:none; background:transparent; color:var(--ts); border-radius:var(--r) var(--r) 0 0; font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font); }
.vta-tab[aria-selected="true"] { background:var(--c1); color:var(--t); border-color:var(--br); margin-bottom:-1px; }
.vta-tab-body { padding:1rem; }

.vta-campo { margin-bottom:.7rem; }
.vta-lbl { display:block; font-size:11px; font-weight:600; color:var(--t); margin-bottom:.3rem; }
.vta-lbl span { font-weight:400; color:var(--ts); }
.vta-inp, .vta-txt, .vta-campo select { width:100%; padding:8px 10px; border:1px solid var(--brh); border-radius:var(--r); background:var(--c1); color:var(--t); font-size:12px; font-family:var(--font); outline:none; }
.vta-txt { min-height:90px; resize:vertical; line-height:1.55; }
.vta-inp:focus, .vta-txt:focus, .vta-campo select:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(117,184,42,.12); }
.vta-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .6rem; }
.vta-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 .6rem; }
.vta-ayuda { font-size:10.5px; color:var(--ts); margin-top:.3rem; line-height:1.45; }
.vta-utilidad { background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.5rem .7rem; font-size:12px; color:var(--t); display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.vta-utilidad b { font-size:14px; font-variant-numeric:tabular-nums; }
.vta-nota { display:flex; gap:.5rem; background:var(--yellow-bg); border:1px solid var(--yellow-br); border-left:3px solid #EF9F27; border-radius:var(--r); padding:.55rem .7rem; margin-bottom:.7rem; font-size:11.5px; color:var(--t); line-height:1.5; }
.vta-nota > i { color:#EF9F27; font-size:15px; margin-top:1px; flex-shrink:0; }
.vta-nota.verde { background:var(--green-bg); border-color:var(--green-br); border-left-color:var(--g); }
.vta-nota.verde > i { color:var(--vta-verde); }
.vta-nota.rojo { background:var(--red-bg); border-color:var(--red-br); border-left-color:#E24B4A; }
.vta-nota.rojo > i { color:var(--vta-rojo); }

/* Seguimiento e historial */
.vta-lista-sec { display:flex; flex-direction:column; gap:.45rem; }
.vta-item { background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.55rem .65rem; }
.vta-item-cab { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:10.5px; color:var(--ts); margin-bottom:.25rem; }
.vta-item-cab b { color:var(--t); font-weight:600; }
.vta-item-txt { font-size:12px; color:var(--t); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.vta-paso { display:flex; align-items:flex-start; gap:.45rem; margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--br); font-size:11.5px; color:var(--t); }
.vta-paso i { color:var(--vta-verde); font-size:14px; margin-top:1px; }
.vta-paso.vencido i { color:var(--vta-rojo); }
.vta-paso .fecha { color:var(--ts); font-size:10.5px; }
.vta-hist { font-size:11.5px; color:var(--ts); line-height:1.5; padding:.4rem 0; border-bottom:1px dashed var(--sep); }
.vta-hist:last-child { border-bottom:none; }
.vta-hist b { color:var(--t); font-weight:600; }
.vta-hist-cambios { margin:.2rem 0 0; padding-left:1rem; font-size:11px; }

/* ── Contactos ── */
.vta-contacto-cab { display:flex; align-items:flex-start; gap:.75rem; flex-wrap:wrap; background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); padding:.85rem 1rem; margin-bottom:.75rem; }
.vta-contacto-av { width:40px; height:40px; border-radius:50%; background:var(--green-bg); color:var(--vta-verde); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; }
.vta-contacto-datos { flex:1; min-width:180px; }
.vta-contacto-nom { font-size:15px; font-weight:700; color:var(--t); }
.vta-contacto-sub { font-size:11.5px; color:var(--ts); margin-top:.15rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.vta-contacto-sub a { color:var(--vta-verde); text-decoration:none; }
.vta-contacto-sub a:hover { text-decoration:underline; }

/* ── Configuración e importación ── */
.vta-caja { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); padding:1rem; margin-bottom:.75rem; }
.vta-caja-tit { font-size:13px; font-weight:700; color:var(--t); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.vta-caja-tit .der { margin-left:auto; display:flex; gap:.4rem; }
.vta-drop { border:2px dashed var(--br); border-radius:var(--r2); padding:1.5rem 1rem; text-align:center; color:var(--ts); font-size:12px; line-height:1.6; }
.vta-drop.sobre { border-color:var(--g); background:var(--green-bg); }
.vta-drop i { font-size:26px; color:var(--tm); display:block; margin-bottom:.4rem; }
.vta-resumen-imp { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.5rem; margin:.75rem 0; }
.vta-resumen-imp > div { background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.55rem .7rem; }
.vta-resumen-imp .n { font-size:19px; font-weight:700; color:var(--t); line-height:1.2; }
.vta-resumen-imp .l { font-size:10.5px; color:var(--ts); }
.vta-resumen-imp .n.mal { color:var(--vta-rojo); }
.vta-resumen-imp .n.ojo { color:var(--vta-ambar); }
.vta-detalle-imp { max-height:340px; overflow-y:auto; border:1px solid var(--br); border-radius:var(--r); }
.vta-detalle-imp table { width:100%; border-collapse:collapse; font-size:11.5px; }
.vta-detalle-imp th { font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--ts); padding:.5rem .75rem; border-bottom:1px solid var(--br); text-align:left; }
.vta-detalle-imp td { padding:.4rem .6rem; border-bottom:1px solid var(--sep); color:var(--t); vertical-align:top; }
.vta-detalle-imp tr:last-child td { border-bottom:none; }

/* ── Dinero de la oferta (etapa 2) ───────────────────── */
.vta-dinero-resumen { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.5rem; margin-bottom:.7rem; }
.vta-dinero-resumen > div { background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.45rem .6rem; }
.vta-dinero-resumen span { display:block; font-size:10.5px; color:var(--ts); font-weight:600; }
.vta-dinero-resumen b { font-size:14px; font-variant-numeric:tabular-nums; }
.vta-dinero-fila { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .6rem; border-bottom:1px solid var(--sep); font-size:12px; }
.vta-dinero-fila:last-child { border-bottom:none; }
.vta-dinero-fila b { font-variant-numeric:tabular-nums; }
.vta-dinero-alta { background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); padding:.65rem .75rem; margin:.6rem 0 1rem; }
.vta-dinero-costo { border:1px solid var(--br); border-radius:var(--r2); padding:.65rem .75rem; margin-bottom:.6rem; }
.vta-dinero-costo-pie { display:flex; gap:.4rem; flex-wrap:wrap; }
/* Atajos del porcentaje de anticipo: son sugerencia, no límite. */
.vta-dinero-rapidos { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; margin-top:.3rem; }
.vta-dinero-rapidos .vta-ayuda { margin-top:0; flex:1 1 100%; }

/* ── Celular ── */
@media (max-width: 860px) {
  .vta-grid2, .vta-grid3 { grid-template-columns:1fr; }
  .vta-panel { max-width:100%; }
  .vta-velo { padding:0; }
}
@media (max-width: 760px) {
  .vta-dinero-resumen { grid-template-columns:1fr 1fr; }
  .vta-cuenta { margin-left:0; width:100%; }
  .vta-buscar { flex:1 1 100%; }
  .vta-tablero { grid-auto-columns:minmax(210px,86%); }
  .vta-tabla { min-width:760px; }
}

/* ── Dos carriles: la etiqueta de producción (etapa 4) ─────
   Amarillo esperando anticipo, azul en proceso, rojo atorado, verde
   terminado. Fondo suave y texto oscuro del mismo tono: el verde nunca es
   fondo sólido y sobre él no va texto blanco. */
.vta-prod { display:inline-flex; align-items:center; gap:.3rem; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; border:1px solid; white-space:nowrap; font-family:var(--font); line-height:1.35; }
.vta-prod .vta-dot { width:7px; height:7px; }
.vta-prod i { font-size:11px; opacity:.75; }
button.vta-prod { cursor:pointer; }
button.vta-prod:hover { filter:brightness(.97); box-shadow:0 0 0 2px var(--c2); }
.vta-prod.esperando_anticipo { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.vta-prod.esperando_anticipo .vta-dot { background:#EF9F27; }
.vta-prod.en_proceso { background:var(--blue-bg); border-color:var(--blue-br); color:var(--vta-azul); }
.vta-prod.en_proceso .vta-dot { background:#378ADD; }
.vta-prod.atorado { background:var(--red-bg); border-color:var(--red-br); color:var(--vta-rojo); }
.vta-prod.atorado .vta-dot { background:#E24B4A; }
.vta-prod.terminado { background:var(--green-bg); border-color:var(--green-br); color:var(--vta-verde); }
.vta-prod.terminado .vta-dot { background:var(--g); }
.vta-card-prod { display:flex; }

.vta-prod-menu { position:fixed; z-index:600; background:var(--c1); border:1px solid var(--brh); border-radius:var(--r2); box-shadow:0 10px 30px rgba(0,0,0,.25); padding:.3rem; display:flex; flex-direction:column; gap:.15rem; min-width:190px; }
.vta-prod-menu button { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.35rem .45rem; border:none; background:transparent; border-radius:var(--r); cursor:pointer; font-family:var(--font); color:var(--t); text-align:left; }
.vta-prod-menu button:hover, .vta-prod-menu button:focus-visible { background:var(--c2); outline:none; }
.vta-prod-menu button i { color:var(--vta-verde); font-size:14px; }

/* Ventana centrada (falta el anticipo) */
.vta-velo.centro { justify-content:center; align-items:center; padding:1rem; }
.vta-dialogo { background:var(--c1); color:var(--t); width:100%; max-width:480px; border-radius:var(--r2); box-shadow:0 20px 50px rgba(0,0,0,.4); display:flex; flex-direction:column; max-height:100%; overflow-y:auto; }
.vta-dialogo-txt { font-size:12.5px; line-height:1.6; margin:0 0 .8rem; color:var(--t); }


/* ════════════════════════════════════════════════════════════
   RONDA 2 (etapa 5) — lo que pidió Dirección el 16 sep 2026
   ════════════════════════════════════════════════════════════ */

/* ── Secciones con título y una línea de ayuda ── */
.vta-seccion { display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin:1.1rem 0 .55rem; }
.vta-seccion:first-child { margin-top:0; }
.vta-seccion-tit { font-size:13px; font-weight:700; color:var(--t); display:flex; align-items:center; gap:.4rem; }
.vta-seccion-tit i { font-size:15px; color:var(--ts); }
.vta-seccion-sub { font-size:11px; color:var(--ts); line-height:1.5; margin-top:.1rem; max-width:90ch; }
.vta-seccion .der { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

/* ── Tarjetas de totales con ícono grande en círculo de color suave ── */
.vta-totales.con-ico { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.vta-tot.con-ico { display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; align-items:center; padding:.75rem .9rem; }
.vta-tot.con-ico .vta-tot-ico { grid-row:1 / span 3; }
.vta-tot-ico { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--c2); color:var(--ts); flex-shrink:0; }
.vta-tot-ico.verde  { background:var(--green-bg);  color:var(--vta-verde); }
.vta-tot-ico.azul   { background:var(--blue-bg);   color:var(--vta-azul); }
.vta-tot-ico.ambar  { background:var(--yellow-bg); color:var(--vta-ambar); }
.vta-tot-ico.rojo   { background:var(--red-bg);    color:var(--vta-rojo); }
.vta-tot-ico.morado { background:rgba(155,89,182,.1); color:var(--vta-morado); }
.vta-tot-val { font-variant-numeric:tabular-nums; }
button.vta-tot { font-family:var(--font); text-align:left; cursor:pointer; width:100%; }
button.vta-tot:hover { border-color:var(--brh); }
button.vta-tot[aria-pressed="true"] { border-color:var(--g); box-shadow:0 0 0 2px rgba(117,184,42,.18); }

/* ── Entrada suave escalonada (sin bucles; respeta "reducir movimiento") ── */
@keyframes vtaEntra { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.vta-entra { animation:vtaEntra .34s ease both; animation-delay:calc(var(--i, 0) * 22ms); }
@media (prefers-reduced-motion: reduce) {
  .vta-entra { animation:none; }
  .vta-card, .vta-col, .vta-tabla-wrap, .vfi-caja, .vfi-velo { transition:none !important; }
}

/* ── Arrastre en el tablero: realce ── */
.vta-card { transition:border-color .15s, box-shadow .15s, opacity .15s, transform .15s; }
.vta-card.arrastrando { opacity:.45; transform:scale(.98); }
.vta-tablero.arrastre .vta-col { border-style:dashed; }
.vta-tablero.arrastre .vta-col.sobre { border-style:solid; background:var(--green-bg); }
@media (hover: hover) { .vta-card[draggable="true"]:hover { box-shadow:0 3px 10px rgba(0,0,0,.08); } }

/* ── Etiqueta "Prueba" y leyenda de la franja ── */
.vta-etq-prueba { display:inline-flex; align-items:center; gap:.2rem; font-size:9.5px; font-weight:700; padding:0 6px; border-radius:20px; border:1px dashed var(--brh); color:var(--ts); background:var(--c2); text-transform:uppercase; letter-spacing:.04em; vertical-align:1px; margin-left:.3rem; white-space:nowrap; }
.vta-leyenda { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; font-size:10.5px; color:var(--ts); margin:.45rem 0 .1rem; }
.vta-leyenda span { display:inline-flex; align-items:center; gap:.35rem; }
.vta-leyenda i.franja { display:inline-block; width:4px; height:14px; border-radius:2px; }
.vta-leyenda i.franja.rojo { background:#E24B4A; }
.vta-leyenda i.franja.amarillo { background:#EF9F27; }
.vta-leyenda i.franja.nada { background:var(--br); }

/* ── Estado de la carga: indicador y reintento ── */
.vta-estado { display:flex; align-items:center; gap:.45rem; font-size:11px; color:var(--ts); min-height:22px; margin:-.25rem 0 .45rem; }
.vta-estado.error { color:var(--vta-rojo); }
.vta-estado .vta-giro { width:13px; height:13px; border:2px solid var(--br); border-top-color:var(--g); border-radius:50%; animation:vtaGiro .8s linear infinite; }
@keyframes vtaGiro { to { transform:rotate(360deg); } }
.vta-estado button { background:none; border:none; color:inherit; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:0; }
.vta-atenuado { opacity:.55; transition:opacity .15s; pointer-events:none; }

/* ── Monto en la tabla: con formato y editable al enfocar ── */
.vta-inline.num.dinero { width:112px; }

/* ── Chip de ayuda (explicación al pasar o enfocar) ── */
.vta-ayuda-ico { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--brh); color:var(--ts); font-size:10px; font-weight:700; cursor:help; background:var(--c1); font-family:var(--font); padding:0; }

/* ════════════════════════════════════════════════════════════
   FICHA DE LA OFERTA EN VENTANA (assets/js/ventas-ficha.js)
   Grande y centrada; en celular, pantalla completa. Tapa el menú.
   ════════════════════════════════════════════════════════════ */
.vfi-velo { position:fixed; inset:0; z-index:560; background:rgba(8,10,8,.62); display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.vfi-velo.encima { z-index:580; }
.vfi-caja { background:var(--c1); color:var(--t); width:100%; max-width:1160px; max-height:92vh; height:92vh; border-radius:var(--r3); display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.45); overflow:hidden; }
.vfi-caja.chica { max-width:560px; height:auto; }
.vfi-caja.media { max-width:760px; height:auto; }
.vfi-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; padding:1rem 1.35rem .85rem; border-bottom:1px solid var(--br); flex-shrink:0; }
.vfi-cab-txt { min-width:0; flex:1; }
.vfi-folio { font-family:var(--font-mono); font-size:12px; color:var(--ts); }
.vfi-titulo { font-size:20px; font-weight:700; line-height:1.3; color:var(--t); margin:.1rem 0 .35rem; word-break:break-word; }
.vfi-cab-chips { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.vfi-cab-chips .vta-etapa, .vfi-cab-chips .vta-prod { font-size:12px; padding:3px 11px; }
.vfi-cab-chips .vta-dot { width:9px; height:9px; }
.vfi-cab .vta-x { font-size:20px; width:36px; height:36px; }
.vfi-tabs { display:flex; gap:.25rem; padding:.55rem 1.35rem 0; border-bottom:1px solid var(--br); flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.vfi-tabs .vta-tab { font-size:12px; padding:8px 14px; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.vfi-tabs .vta-tab i { font-size:14px; }
.vfi-cuerpo { overflow-y:auto; flex:1; background:var(--bg, var(--c1)); }
.vfi-cuerpo .vta-tab-body { padding:1.15rem 1.35rem 1.5rem; max-width:1080px; }
.vfi-pie { padding:.8rem 1.35rem; }

/* Campos en rejilla con más aire */
.vfi-rejilla { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.15rem 1.1rem; }
.vfi-rejilla.tres { grid-template-columns:repeat(3, minmax(0,1fr)); }
.vfi-rejilla .ancho { grid-column:1 / -1; }
.vfi-cuerpo .vta-campo { margin-bottom:.85rem; }
.vfi-cuerpo .vta-lbl { font-size:11.5px; margin-bottom:.35rem; }
.vfi-cuerpo .vta-inp, .vfi-cuerpo .vta-txt, .vfi-cuerpo .vta-campo select { padding:9px 11px; font-size:12.5px; background:var(--c1); }

/* Contenedores con título, ícono pequeño y línea de ayuda */
.vfi-sec { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); padding:.95rem 1.05rem 1rem; margin-bottom:.9rem; box-shadow:var(--shadow-card); }
/* Bloque al que se quiere llevar la vista: una oferta recién creada como
   ganada abre en Dinero con "Cómo se cobra" resaltado. El acento va solo en
   el marco, con el verde de marca; el fondo no se pinta de verde. */
.vfi-sec.vfi-resaltada { border-color:var(--vta-verde); box-shadow:0 0 0 3px var(--green-bg); transition:box-shadow .25s ease, border-color .25s ease; }
.vfi-sec-cab { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.75rem; }
.vfi-sec-ico { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--c2); color:var(--ts); flex-shrink:0; }
.vfi-sec-ico.verde { background:var(--green-bg); color:var(--vta-verde); }
.vfi-sec-ico.azul { background:var(--blue-bg); color:var(--vta-azul); }
.vfi-sec-ico.ambar { background:var(--yellow-bg); color:var(--vta-ambar); }
.vfi-sec-ico.morado { background:rgba(155,89,182,.1); color:var(--vta-morado); }
.vfi-sec-tit { font-size:13.5px; font-weight:700; color:var(--t); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.vfi-sec-sub { font-size:11px; color:var(--ts); line-height:1.5; margin-top:.1rem; }
.vfi-sec-cab .der { margin-left:auto; display:flex; gap:.35rem; flex-wrap:wrap; }

/* Resumen del dinero con íconos */
.vfi-resumen { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; }
.vfi-res { display:flex; align-items:center; gap:.6rem; background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); padding:.6rem .7rem; min-width:0; }
.vfi-res .vta-tot-ico { width:36px; height:36px; font-size:18px; }
.vfi-res-lbl { font-size:10.5px; color:var(--ts); font-weight:600; }
.vfi-res-val { font-size:15.5px; font-weight:700; color:var(--t); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Costo con proveedor */
.vfi-costo { border:1px solid var(--br); border-radius:var(--r2); padding:.85rem .9rem .5rem; margin-bottom:.7rem; background:var(--c1); }
.vfi-costo.nuevo { border-style:dashed; }
.vfi-costo-cab { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.6rem; font-size:12px; }
.vfi-costo-cab .der { margin-left:auto; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.vfi-cond { display:inline-flex; align-items:center; gap:.3rem; font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--blue-bg); border:1px solid var(--blue-br); color:var(--vta-azul); }
.vfi-limite { display:inline-flex; align-items:center; gap:.3rem; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; border:1px solid var(--br); background:var(--c2); color:var(--ts); white-space:nowrap; }
.vfi-limite.vencido { background:var(--red-bg); border-color:var(--red-br); color:var(--vta-rojo); }
.vfi-limite.pronto { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.vfi-limite.pagado { background:var(--green-bg); border-color:var(--green-br); color:var(--vta-verde); }

/* Selector de proveedor con búsqueda */
.vfi-prov { position:relative; }
.vfi-prov-lista { position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:20; background:var(--c1); border:1px solid var(--brh); border-radius:var(--r); box-shadow:0 12px 30px rgba(0,0,0,.18); max-height:260px; overflow-y:auto; padding:.25rem; }
.vfi-prov-op { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; padding:.45rem .55rem; border:none; background:transparent; border-radius:var(--r); cursor:pointer; font-family:var(--font); color:var(--t); font-size:12px; text-align:left; }
.vfi-prov-op:hover, .vfi-prov-op:focus-visible, .vfi-prov-op.activo { background:var(--c2); outline:none; }
.vfi-prov-op small { color:var(--ts); font-size:10.5px; }
.vfi-prov-op.crear { color:var(--vta-verde); font-weight:700; border-top:1px dashed var(--br); border-radius:0 0 var(--r) var(--r); }
.vfi-prov-nuevo { background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); padding:.75rem .8rem .2rem; margin:.2rem 0 .8rem; }

/* Cotizaciones */
.vfi-cot { display:flex; align-items:center; gap:.7rem; padding:.6rem .1rem; border-bottom:1px dashed var(--sep); }
.vfi-cot:last-child { border-bottom:none; }
.vfi-cot.archivada { opacity:.6; }
.vfi-cot-ico { width:36px; height:36px; border-radius:var(--r); background:var(--c2); border:1px solid var(--br); display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--ts); flex-shrink:0; }
.vfi-cot-ico.pdf { color:#E24B4A; } .vfi-cot-ico.img { color:#378ADD; } .vfi-cot-ico.xls { color:var(--vta-verde); } .vfi-cot-ico.doc { color:#1F5F9E; }
.vfi-cot-txt { flex:1; min-width:0; }
.vfi-cot-nom { font-size:12.5px; font-weight:600; color:var(--t); word-break:break-word; }
.vfi-cot-sub { font-size:10.5px; color:var(--ts); display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.1rem; }
.vfi-cot-acc { display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end; }
.vfi-subir { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) auto; gap:.5rem; align-items:end; background:var(--c2); border:1px dashed var(--brh); border-radius:var(--r2); padding:.7rem .75rem; margin-bottom:.6rem; }
.vfi-subir .vta-campo { margin-bottom:0 !important; }
.vfi-subir.prov { grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) auto; }

/* Historial con filtro */
.vfi-hist-filtro { margin-bottom:.7rem; display:flex; flex-wrap:wrap; gap:.35rem; }

/* Aviso "Oferta creada · Ver oferta" (botón de la barra superior) */
.vfi-aviso { position:fixed; right:1rem; bottom:1rem; z-index:9990; background:var(--c1); color:var(--t); border:1px solid var(--green-br); border-left:4px solid var(--g); border-radius:var(--r2); box-shadow:0 12px 34px rgba(0,0,0,.22); padding:.7rem .8rem; display:flex; align-items:center; gap:.6rem; font-size:12.5px; max-width:calc(100vw - 2rem); }
.vfi-aviso i.ok { color:var(--vta-verde); font-size:18px; }

/* Pago a proveedor */
.vfi-pago-fila { display:grid; grid-template-columns:minmax(0,1fr) 110px 130px; gap:.6rem; align-items:center; padding:.45rem 0; border-bottom:1px dashed var(--sep); font-size:12px; }
.vfi-pago-fila:last-child { border-bottom:none; }
.vfi-pago-fila .vta-inp { text-align:right; font-variant-numeric:tabular-nums; }
.vfi-pago-total { display:flex; justify-content:space-between; align-items:center; background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.55rem .7rem; margin:.6rem 0 .8rem; font-size:12.5px; }
.vfi-pago-total b { font-size:16px; font-variant-numeric:tabular-nums; }

/* Botón "Nueva Oferta" de la barra superior (junto a Wtfok) */
.tb-nueva-oferta { width:auto; padding:0 .7rem; gap:.35rem; font-size:12px; font-weight:700; font-family:var(--font); color:#000; background:var(--g); border:1px solid var(--g); }
.tb-nueva-oferta:hover { background:var(--gd); border-color:var(--gd); color:#000; }
.tb-nueva-oferta i { font-size:16px; }
.tb-nueva-oferta:focus-visible { outline:2px solid var(--t); outline-offset:1px; }

@media (max-width: 900px) {
  .vfi-resumen { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vfi-subir, .vfi-subir.prov { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .vfi-velo { padding:0; }
  .vfi-caja, .vfi-caja.chica, .vfi-caja.media { max-width:none; height:100%; max-height:none; border-radius:0; }
  .vfi-rejilla, .vfi-rejilla.tres { grid-template-columns:1fr; }
  .vfi-cab { padding:.8rem .9rem .7rem; }
  .vfi-titulo { font-size:17px; }
  .vfi-tabs { padding:.45rem .6rem 0; }
  .vfi-tabs .vta-tab { padding:7px 10px; font-size:11.5px; }
  .vfi-cuerpo .vta-tab-body { padding:.9rem .85rem 1.2rem; }
  .vfi-pie { padding:.65rem .85rem; }
  .vfi-subir, .vfi-subir.prov { grid-template-columns:1fr; }
  .vfi-pago-fila { grid-template-columns:minmax(0,1fr) 110px; }
  .vfi-pago-fila .saldo { display:none; }
  .vta-tot.con-ico { padding:.6rem .7rem; }
  .vta-tot-ico { width:36px; height:36px; font-size:18px; }
  .tb-nueva-oferta span { display:none; }
  .tb-nueva-oferta { width:32px; padding:0; justify-content:center; }
  .vfi-cot { flex-wrap:wrap; }
  .vfi-cot-acc { width:100%; justify-content:flex-start; padding-left:46px; }
}

/* Con la ficha abierta, la página de atrás no se desplaza */
body.vfi-abierta { overflow:hidden; }

/* El resumen del dinero reutiliza .vta-dinero-resumen (la regla vieja pone
   display:block a sus span): el círculo del ícono vuelve a centrarlo. */
.vta-dinero-resumen.vfi-resumen .vta-tot-ico { display:flex; font-weight:400; color:inherit; }
.vta-dinero-resumen.vfi-resumen .vta-tot-ico.azul  { color:var(--vta-azul); }
.vta-dinero-resumen.vfi-resumen .vta-tot-ico.verde { color:var(--vta-verde); }
.vta-dinero-resumen.vfi-resumen .vta-tot-ico.rojo  { color:var(--vta-rojo); }
.vta-dinero-resumen.vfi-resumen .vta-tot-ico.ambar { color:var(--vta-ambar); }
.vta-dinero-resumen.vfi-resumen .vta-tot-ico.morado { color:var(--vta-morado); }
.vta-dinero-resumen.vfi-resumen .vfi-res-lbl { display:block; }

/* Sin nada que decir, el renglón del estado de carga no ocupa lugar */
.vta-estado:empty { min-height:0; margin:0; }

/* La columna del título de la oferta no se aprieta */
.vta-tabla .col-oferta { min-width:260px; }
.vfi-cuerpo .vta-tab-body { max-width:none; }

/* ════════════════════════════════════════════════════════════
   RONDA 3 — segunda revisión de Dirección (17 sep 2026)
   ════════════════════════════════════════════════════════════ */

/* ── Encabezado grande del periodo (Ofertas y Tablero) ── */
.vta-periodo { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); padding:.55rem .75rem; margin-bottom:.8rem; }
.vta-periodo-nav { display:flex; align-items:center; gap:.35rem; min-width:0; }
.vta-periodo-flecha { width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--brh); background:var(--c2); color:var(--t); cursor:pointer; font-size:22px; font-family:var(--font); }
.vta-periodo-flecha:hover { background:var(--c1); border-color:var(--g); }
.vta-periodo-tit { font-size:26px; line-height:1.15; font-weight:800; letter-spacing:.02em; color:var(--g); margin:0 .25rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vta-periodo-der { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.vta-periodo-der .vta-sel { padding:5px 7px; }
.vta-periodo-sub { flex:1 1 100%; font-size:11px; color:var(--ts); margin-top:-.2rem; padding-left:calc(40px + .6rem); }
.vta-periodo-sub b { color:var(--t); }
.vta-periodo .vta-btn.hoy { border-style:dashed; }
.vta-main .vta-periodo-flecha:focus-visible { outline:2px solid var(--g); outline-offset:2px; }

/* ── Franja "N ofertas abiertas de meses anteriores · Ver" ── */
.vta-franja { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; background:var(--blue-bg); border:1px solid var(--blue-br); border-left:4px solid #378ADD; border-radius:var(--r); padding:.5rem .75rem; margin:0 0 .6rem; font-size:12px; color:var(--t); }
.vta-franja > i { font-size:16px; color:var(--vta-azul); }
.vta-franja b { font-variant-numeric:tabular-nums; }
.vta-franja .vta-btn { margin-left:auto; }
.vta-chip-f.quitar[aria-pressed="true"] i.ti-x { margin-left:.15rem; }

/* ════════════════════════════════════════════════════════════
   UN EMBUDO NO TIENE MESES (28 sep 2026)
   El bloque "Vienen de meses anteriores", debajo de las del mes. Viene
   abierto, con su encabezado que dice cuántas son, cuánto suman y los días
   de la más vieja, y con su propio total: NO cuenta en las cifras del mes.
   ════════════════════════════════════════════════════════════ */
.vta-anteriores { margin-top:1.3rem; border:1px solid var(--br); border-left:4px solid #EF9F27; border-radius:var(--r2); background:var(--c1); box-shadow:var(--shadow-card); overflow:hidden; }
.vta-anteriores-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; padding:.7rem .85rem; background:var(--yellow-bg); border-bottom:1px solid var(--br); }
.vta-anteriores-izq { min-width:0; flex:1 1 320px; }
.vta-anteriores-tit { margin:0; font-size:13px; font-weight:700; color:var(--t); display:flex; align-items:center; gap:.4rem; }
.vta-anteriores-tit i { font-size:16px; color:#EF9F27; }
.vta-anteriores-tit:focus-visible { outline:2px solid var(--g); outline-offset:3px; }
.vta-anteriores-res { margin-top:.25rem; font-size:14px; font-weight:700; color:var(--t); font-variant-numeric:tabular-nums; line-height:1.4; }
.vta-anteriores-sub { margin-top:.2rem; font-size:11px; color:var(--ts); line-height:1.5; max-width:92ch; }
.vta-anteriores-sub b { color:var(--t); }
.vta-anteriores .vta-tabla-wrap { border:none; border-radius:0; box-shadow:none; background:transparent; }
.vta-anteriores .vta-tabla { min-width:940px; }
.vta-anteriores .vta-tabla th { background:var(--c1); }
.vta-anteriores .vta-tabla tfoot td { font-size:11.5px; }
/* Los días abiertos: el dato con el que se lee el bloque */
.vta-dias { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px; background:var(--c2); border:1px solid var(--br); color:var(--ts); white-space:nowrap; font-variant-numeric:tabular-nums; }
.vta-dias.medio { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.vta-dias.mucho { background:var(--red-bg); border-color:var(--red-br); color:var(--vta-rojo); }

/* ── Ventana de confirmar (en lugar de window.confirm / prompt) ── */
.vta-conf-velo { z-index:620; }
.vta-conf { max-width:480px; }
.vta-conf .vta-panel-tit i { color:var(--ts); font-size:17px; }
.vta-conf .vta-dialogo-txt { margin-bottom:.7rem; }
.vta-btn.rojo-lleno { background:#B42318; border-color:#B42318; color:#fff; font-weight:700; }
.vta-btn.rojo-lleno:hover { background:#912018; border-color:#912018; }
[data-theme="dark"] .vta-btn.rojo-lleno { background:#f87171; border-color:#f87171; color:#000; }

/* ── Pago a proveedor: pago parcial ── */
.vfi-parcial { background:var(--c2); border:1px solid var(--br); border-radius:var(--r2); padding:.75rem .85rem; margin-bottom:.4rem; }
.vfi-parcial .vta-lbl { font-size:13px; }
.vfi-parcial-fila { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.vfi-parcial-signo { font-size:22px; font-weight:700; color:var(--ts); }
.vfi-parcial-fila .vta-inp { width:210px; max-width:100%; font-size:22px !important; font-weight:700; padding:8px 10px !important; text-align:right; font-variant-numeric:tabular-nums; }
.vfi-parcial-de { font-size:12px; color:var(--ts); }
.vfi-parcial-fila .vta-inp { -moz-appearance:textfield; appearance:textfield; }
.vfi-parcial-fila .vta-inp::-webkit-outer-spin-button, .vfi-parcial-fila .vta-inp::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.vfi-enlace { background:none; border:none; padding:0; font:inherit; color:var(--vta-verde); font-weight:700; text-decoration:underline; cursor:pointer; }
.vfi-pago-fila.reparto { grid-template-columns:minmax(0,1fr) 110px 130px; }
.vfi-pago-etq { font-weight:700; }
.vfi-pago-etq.parcial { display:inline-flex; align-items:center; font-size:11px; padding:1px 9px; border-radius:20px; background:var(--yellow-bg); border:1px solid var(--yellow-br); color:var(--vta-ambar); margin-right:.2rem; }
.vfi-pago-total.parcial { border-color:var(--yellow-br); }

/* ── Menú "Pagar" del resumen por proveedor ── */
.vcp-pagar { position:relative; display:inline-flex; }
.vcp-pagar > .vta-btn i.ti-chevron-down { font-size:12px; margin-left:-.1rem; }
.vcp-menu { position:fixed; z-index:600; min-width:230px; background:var(--c1); border:1px solid var(--brh); border-radius:var(--r2); box-shadow:0 12px 32px rgba(0,0,0,.25); padding:.3rem; display:flex; flex-direction:column; gap:.1rem; }
.vcp-menu button { display:flex; align-items:flex-start; gap:.55rem; width:100%; padding:.5rem .55rem; border:none; background:transparent; border-radius:var(--r); cursor:pointer; font-family:var(--font); color:var(--t); text-align:left; font-size:12px; font-weight:600; }
.vcp-menu button i { font-size:16px; color:var(--ts); margin-top:1px; }
.vcp-menu button small { display:block; font-weight:400; font-size:10.5px; color:var(--ts); margin-top:.05rem; }
.vcp-menu button:hover, .vcp-menu button:focus-visible { background:var(--c2); outline:none; }
.vcp-menu button:focus-visible { box-shadow:inset 0 0 0 2px var(--g); }

@media (max-width: 760px) {
  .vta-periodo { padding:.5rem .55rem; }
  .vta-periodo-nav { width:100%; justify-content:space-between; }
  .vta-periodo-tit { font-size:21px; text-align:center; flex:1; }
  .vta-periodo-der { width:100%; }
  .vta-periodo-sub { padding-left:0; text-align:center; }
  .vfi-pago-fila.reparto { grid-template-columns:minmax(0,1fr) 110px; }
  .vfi-parcial-fila .vta-inp { width:100%; flex:1 1 150px; }
  /* En celular el resumen del bloque tiene que caber sin apretarse */
  .vta-anteriores-hdr { padding:.6rem .6rem; }
  .vta-anteriores-res { font-size:13px; }
  .vta-anteriores-hdr .vta-btn { width:100%; justify-content:center; }
}
.vta-periodo.vta-atenuado-suave .vta-periodo-tit { opacity:.5; }