/* ═══════════════════════════════════════════════════════════════════════
   VECTRA — Ajustes sobre vectra-ui.css
   Carga DESPUÉS de vectra-ui.css. Aquí van las desviaciones respecto al
   handoff, para no editar su archivo y poder recibir actualizaciones suyas.
   Cada bloque dice qué corrige y por qué.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Aprovechar el ancho de la pantalla ────────────────────────────────
   El handoff fija `max-width:1420px`, pensado para un monitor de ~1440. En
   pantallas anchas dejaba casi un tercio vacío a la derecha. Se libera el
   ancho y solo se pone un tope alto para que las líneas de texto no se
   vuelvan ilegibles en monitores muy grandes. */
.v-page{
  max-width:none;
  width:100%;
  padding:32px clamp(20px,2.4vw,44px) 64px;
}
@media (min-width:2100px){ .v-page{max-width:2000px;} }

/* Las pantallas que aún no se han portado usan .main: mismo criterio */
body.v-app .main{max-width:none;margin:0;}

/* ── 2. Filtros en una sola fila ──────────────────────────────────────────
   Las apps declaran `input,select,textarea{width:100%}` desde su hoja
   original, así que cada filtro ocupaba un renglón entero. */
.v-filters{align-items:center;}
.v-filters .v-input{flex:1 1 260px;width:auto;min-width:220px;}
.v-filters .v-select{flex:0 0 auto;width:auto;min-width:180px;}
.v-filters .v-input,.v-filters .v-select{height:38px;}

/* ── 3. Legibilidad de rótulos y encabezados ──────────────────────────────
   El handoff usa 8.5–9 px con tracking muy abierto en --v-text-5 (#565D57).
   Sobre el fondo real queda por debajo del contraste mínimo. Se sube un paso
   la escala de color y un punto el tamaño; el carácter técnico se mantiene
   porque el tracking abierto no cambia. */
.v-eyebrow{font-size:10px;letter-spacing:.22em;color:var(--v-text-3);}
.v-label{font-size:9.5px;letter-spacing:.18em;color:var(--v-text-3);}
.v-list-head > *{font-size:9.5px;letter-spacing:.16em;color:var(--v-text-3);}
.v-rule > span{font-size:10px;letter-spacing:.22em;color:var(--v-text-3);}
.v-cell-sub{font-size:11px;color:var(--v-text-3);}
.v-muted{font-size:11.5px;color:var(--v-text-3);}
.v-chart-label{font-size:9px;color:var(--v-text-4);}
.v-badge{font-size:9.5px;letter-spacing:.08em;}
.v-num-unit{color:var(--v-text-3);}

/* Sub-pestañas y contadores del menú: mismo problema de contraste */
.v-subnav-item{font-size:12px;color:var(--v-text-3);}
.v-nav-item .v-nav-count,.v-subnav-item .v-nav-count{font-size:10px;color:var(--v-text-4);}

/* ── 4. Tabla más cómoda en pantallas anchas ──────────────────────────── */
.v-list-row{padding:13px clamp(16px,1.4vw,24px);}
.v-list-head{padding:11px clamp(16px,1.4vw,24px);}
.v-cell-title{font-size:13.5px;}

/* ── 5. Indicadores de esquina: que no se pisen entre sí ─────────────── */
#vectra-sync-tag{bottom:20px;}
#vectra-build-tag{bottom:6px;}

/* ── 6. Impresión: el menú lateral no va al papel ─────────────────────── */
@media print{
  #vectra-sidebar{display:none !important;}
  body.v-app{display:block;}
  body.v-app > .v-main{width:100%;}
}

/* ── 7. Tarjeta compuesta de Proyectos ────────────────────────────────────
   `renderProyCard` es la pieza más delicada del sistema (hitos, cuotas, abonos,
   liquidaciones). No se reescribe: se mapea su cromo a los componentes del
   rediseño desde aquí, así el HTML y su lógica quedan intactos. */
#sec-proyectos .card,#sec-resumen .card{
  background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r-lg);
  box-shadow:none;margin-bottom:14px;
}
#sec-proyectos .card:hover{border-color:rgba(39,254,145,.24);}
/* Barra de avance → v-bar */
#sec-proyectos .prog-bg,#sec-resumen .prog-bg{
  height:5px;border-radius:99px;background:var(--v-fill);overflow:hidden;
}
#sec-proyectos .prog-fill,#sec-resumen .prog-fill{
  height:100%;border-radius:99px;background:linear-gradient(90deg,var(--v-verde),var(--v-verde-dim));
}
/* Filas de hito y cuota */
#sec-proyectos .hito-item{border-bottom:1px solid var(--v-line-soft);padding:11px 0;}
#sec-proyectos .hito-item:last-child{border-bottom:0;}
#sec-proyectos .hito-desc{font-size:12.5px;font-weight:600;color:var(--v-text);}
#sec-proyectos .hito-desc.done{color:var(--v-text-4);}
#sec-proyectos .hito-amt{font-variant-numeric:tabular-nums;font-weight:700;}
/* Botones internos de la tarjeta con el estilo del sistema */
#sec-proyectos .btn.xs,#sec-proyectos .btn.sm{
  border-radius:8px;border:1px solid var(--v-line-strong);background:var(--v-fill);
  color:var(--v-text-3);font-weight:600;
}
#sec-proyectos .btn.xs:hover,#sec-proyectos .btn.sm:hover{color:#fff;border-color:rgba(255,255,255,.18);}
#sec-proyectos .btn.primary{background:var(--v-verde);border-color:var(--v-verde);color:var(--v-verde-on);}

/* ── 8. Superficies que quedaban en blanco ───────────────────────────────
   Tres orígenes distintos, todos con texto claro encima (ilegible):
   a) `.tbl-wrap` y otras superficies usaban `var(--white)`, que es token de
      MARCA (texto sobre verde, logo) y debe seguir siendo blanco puro. Como
      FONDO ahora usan `var(--bg)`; corregido en el HTML de las seis apps.
   b) `vectra-premium.css` fuerza `background:#fff !important` en campos y en
      el hover de botones. Se revierte aquí, que carga después.
   c) Tablas y cabeceras que heredaban el blanco del tema claro. */
input,select,textarea,
.filter-bar select,.filter-bar input{
  background:rgba(255,255,255,.035) !important;
  color:var(--v-text) !important;
  border-color:var(--v-line-strong) !important;
  color-scheme:dark;
}
input::placeholder,textarea::placeholder{color:var(--v-text-5) !important;}
select option{background:#131614;color:var(--v-text);}
.btn:hover,button.btn:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;}
.btn.primary:hover{background:var(--v-verde) !important;border-color:var(--v-verde) !important;color:var(--v-verde-on) !important;}

.tbl-wrap,.tw,.tbl,.table,.hon-table,.areas-table{background:var(--v-surface) !important;color:var(--v-text-2) !important;}
.tbl td,.table td,.tw td{color:var(--v-text-2);border-bottom-color:var(--v-line-soft) !important;}
.tbl tr:hover td,.table tr:hover td{background:rgba(255,255,255,.025) !important;}
.tbl th,.table th,.tw th{color:var(--v-text-3) !important;}
.tbl thead th,.table thead th{background:var(--v-fill) !important;color:var(--v-text-3) !important;}
/* Celdas y valores que quedaron con tinta oscura del tema claro */
.tbl strong,.table strong,.tw strong{color:var(--v-text);}
.modal,.modal-body,.mf,.modal-foot{background:var(--v-surface) !important;color:var(--v-text) !important;}
.metric,.mtab{background:var(--v-surface) !important;color:var(--v-text-2) !important;}
.mtab.active{background:var(--v-fill) !important;color:#fff !important;}