/* Esperaloya Control Empresarial — vpaq.css (pantalla Venta por paquete) */
#screen-vpaq .vp-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: var(--white); border: 1.5px solid var(--g200); border-radius: 14px; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
#screen-vpaq .vp-tabs button { flex: 1 0 auto; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--g500); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#screen-vpaq .vp-tabs button.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .25); }
#screen-vpaq .vp-panel { display: none; }
#screen-vpaq .vp-panel.active { display: block; }

/* Formulario */
#screen-vpaq .vp-form { background: var(--white); border: 1px solid var(--g100); border-radius: 16px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); margin-bottom: 18px; }
#screen-vpaq .vp-form label, #screen-vpaq .vp-filtros label, .vp-modal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g400); }
#screen-vpaq .vp-form input, #screen-vpaq .vp-form select, #screen-vpaq .vp-filtros input, #screen-vpaq .vp-filtros select {
  height: 46px; padding: 0 12px; border: 1.5px solid var(--g200); border-radius: 10px; font-size: 16px; background-color: var(--white); color: var(--navy); min-width: 0; width: 100%; letter-spacing: 0; text-transform: none; font-weight: 500; }
#screen-vpaq .vp-form select, #screen-vpaq .vp-filtros select { padding-right: 36px; font-weight: 600; }
#screen-vpaq .vp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vp-row3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
#screen-vpaq .vp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g400); margin-bottom: -6px; }
#screen-vpaq .vp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#screen-vpaq .vp-chips button { flex: 1 1 auto; height: 42px; padding: 0 12px; border: 1.5px solid var(--g200); border-radius: 10px; background: var(--white); color: var(--g500); font-size: 14px; font-weight: 700; cursor: pointer; }
#screen-vpaq .vp-chips button.active { border-color: var(--blue); background: #EFF6FF; color: var(--blue); }
#screen-vpaq .vp-aviso { margin: 0; font-size: 12.5px; color: var(--orange); }
#screen-vpaq .vp-guia { display: flex; gap: 8px; }
#screen-vpaq .vp-guia input { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
#screen-vpaq .vp-guia button { flex: 0 0 auto; height: 46px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
#screen-vpaq .vp-info { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; margin-bottom: 6px; }
#screen-vpaq .vp-info--ok { background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D; }
#screen-vpaq .vp-info--warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
#screen-vpaq .vp-info--neutral { background: #F8FAFC; border: 1px solid var(--g200); color: var(--g700); }
#screen-vpaq .vp-cands { display: grid; gap: 6px; margin-top: 8px; }
#screen-vpaq .vp-cand { text-align: left; padding: 10px 12px; border: 1.5px solid var(--g200); border-radius: 10px; background: var(--white); font-size: 13.5px; cursor: pointer; }

/* Lista de lo registrado */
#screen-vpaq .vp-hoy-res { padding: 14px 16px 6px; }
.vp-lista { padding: 4px 8px 8px; }
.vp-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--g100); }
.vp-item:last-child { border-bottom: 0; }
.vp-item__main { min-width: 0; font-size: 14px; word-break: break-all; }
.vp-item__der { text-align: right; font-size: 14px; }
.vp-item__acc { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
.vp-item__acc:empty { display: none; }

/* Filtros */
#screen-vpaq .vp-filtros { display: grid; gap: 10px; margin: 0 0 14px; }
#screen-vpaq .vp-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#screen-vpaq .vp-ayuda { font-size: 13.5px; color: var(--g700); line-height: 1.5; margin: 0 0 14px; padding: 10px 12px; background: var(--white); border: 1px solid var(--g100); border-radius: 12px; }
#screen-vpaq .vp-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
#screen-vpaq .vp-tabla { min-width: 760px; }
#screen-vpaq .vp-tabla th, #screen-vpaq .vp-tabla td { white-space: nowrap; }
#screen-vpaq .vp-tabla td:nth-child(2) { white-space: normal; min-width: 150px; }
#screen-vpaq .action-btns { display: flex; gap: 6px; }
  .vp-check { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--g700) !important; }
  .vp-check input { width: 20px; height: 20px; appearance: auto; -webkit-appearance: checkbox; }
.vp-modal-form { display: grid; gap: 10px; }
@media (min-width: 700px) {
  #screen-vpaq .vp-form { max-width: 720px; }
  #screen-vpaq .vp-filtros { grid-template-columns: 220px 1fr 1fr; align-items: end; }
  #screen-vpaq .vp-filtros .vp-buscar-l { grid-column: 1 / -1; }
}

.vp-modal-form select, .vp-modal-form input[type=date] { background-color: #fff; }
.vp-modal-form .vp-row3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }

/* Sin acceso a Márgenes: no se muestra el costo del proveedor ni el margen */
#screen-vpaq.vp-sin-costos .vp-col-costo { display: none; }

/* ── Importar cuadre ─────────────────────────────────────────────────── */
.vpi-subir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.vpi-subir .btn-submit { width: auto; padding: 0 22px; }
.vpi-card { background: var(--white); border: 1px solid var(--g100); border-radius: 16px; padding: 14px; margin: 0 0 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.vpi-card--error { border-color: #FECACA; background: #FEF2F2; color: #991B1B; font-size: 14px; }
.vpi-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.vpi-cab__der { text-align: right; white-space: nowrap; }
.vpi-dia { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; margin: 6px 0; }
.vpi-dia--ok { background: #F0FDF4; color: #14532D; border: 1px solid #BBF7D0; }
.vpi-dia--warn { background: #FFFBEB; color: #78350F; border: 1px solid #FDE68A; }
.vpi-dia--mal { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.vpi-resumen { font-size: 13px; color: var(--g700); margin: 10px 0 6px; }
.vpi-lista { display: grid; gap: 8px; }
.vpi-tx { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1.5px solid var(--g200); border-radius: 12px; cursor: pointer; background: var(--white); }
.vpi-tx input { width: 22px; height: 22px; flex: 0 0 auto; margin: 2px 0 0; appearance: auto; -webkit-appearance: checkbox; }
.vpi-tx--ya_importada, .vpi-tx--sin_guias { opacity: .6; cursor: default; background: #F8FAFC; }
.vpi-tx--revisar { border-color: #FDE68A; background: #FFFBEB; }
.vpi-tx--forma_desconocida { border-color: #FECACA; background: #FEF2F2; cursor: default; }
.vpi-tx__body { flex: 1; min-width: 0; }
.vpi-tx__top { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.vpi-monto { white-space: nowrap; }
.vpi-guias { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.vpi-g { display: block; font-size: 12.5px; font-weight: 700; padding: 6px 9px; border-radius: 8px; word-break: break-all; }
.vpi-g small { display: block; font-weight: 500; font-size: 12px; opacity: .85; word-break: normal; }
.vpi-g--ok { background: #F0FDF4; color: #166534; }
.vpi-g--warn { background: #FFFBEB; color: #92400E; }
.vpi-g--mal { background: #FEF2F2; color: #991B1B; }
.vpi-alerta { font-size: 12.5px; color: #92400E; margin-top: 6px; line-height: 1.4; }
.vpi-pie { position: sticky; bottom: 76px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 16px; background: var(--white); border: 1.5px solid var(--blue); border-radius: 14px; box-shadow: 0 6px 22px rgba(15, 23, 42, .12); }
@media (min-width: 901px) { .vpi-pie { bottom: 12px; } }

/* ── Sincronizar cuadres ─────────────────────────────────────────────── */
#screen-vpaq .mod-screen-header { flex-direction: column; align-items: stretch; gap: 12px; }
#screen-vpaq .vp-sync { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#screen-vpaq .vp-sync .btn-submit { width: 100%; height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (min-width: 700px) {
  #screen-vpaq .mod-screen-header { flex-direction: row; align-items: center; }
  #screen-vpaq .vp-sync { align-items: flex-end; }
  #screen-vpaq .vp-sync .btn-submit { width: auto; height: 42px; font-size: 14px; }
}
.sy-barra { height: 8px; background: var(--g100); border-radius: 999px; overflow: hidden; }
#sy-barra-i { height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .3s; }
.sy-lista { margin-top: 10px; max-height: 38vh; overflow-y: auto; display: grid; gap: 4px; }
.sy-fila { font-size: 13px; line-height: 1.45; padding: 6px 9px; border-radius: 8px; }
.sy-ok { background: #F0FDF4; color: #14532D; }
.sy-mal { background: #FEF2F2; color: #991B1B; }
.v-sync-estado { font-size: 13px; line-height: 1.45; margin: 8px 2px 12px; }