/* ════════════════════════════════════════════════════════════════════
   VENTANAS DE PEDIDO — la ventana a pantalla casi completa, el botón de
   minimizar y la barra de abajo con las minimizadas.
   ════════════════════════════════════════════════════════════════════ */

/* La ventana llena la pantalla dejando un marco; en pantallas grandes se
   limita a 1600 px para que las filas no se estiren de más */
#pedidoModal .modal-content.pretty-modal,
#recordatorioModal .modal-content.pretty-modal {
    width: calc(100vw - 36px); max-width: 1600px; height: calc(100vh - 36px); max-height: none; margin: 18px auto;
}
#pedidoModal .pretty-modal-body { padding: 18px 26px 0; gap: 14px 20px; }
/* Con ventanas minimizadas abajo, la abierta deja sitio para verlas */
body.vp-con-dock #pedidoModal .modal-content.pretty-modal, body.vp-con-dock #recordatorioModal .modal-content.pretty-modal { height: calc(100vh - 36px - 62px); }
#pedidoModal .form-group textarea { min-height: 96px; }
/* El buscador de clientes: la lista cae encima de todo y se ve entera */
#pedidoModal .search-results { max-height: min(420px, 55vh); z-index: 1200; box-shadow: 0 14px 34px rgba(15, 23, 42, .2); border-radius: 10px; }
#pedidoModal #clienteResults .search-result-item { padding: 8px 12px; }
#pedidoModal #clienteResults .search-result-item strong { margin-bottom: 1px; font-size: .9rem; }
#pedidoModal #clienteResults .search-result-item small { font-size: .78rem; }
#pedidoModal .form-group:has(#clienteSearch) { position: relative; z-index: 3; }
#pedidoModal .form-group:has(#articuloSearch) { position: relative; z-index: 2; }

/* Botón de minimizar en la cabecera, al lado de la X */
.vp-min {
    width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; margin-right: 6px; transition: background .2s;
}
.vp-min:hover { background: rgba(255, 255, 255, .35); }

/* La barra de minimizadas: encima de la barra de navegación, de derecha a
   izquierda. Las fichas se comprimen hasta 120 px y después saltan de fila. */
#vpDock {
    position: fixed; left: 8px; right: 8px; bottom: 58px; z-index: 2100;
    display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 6px; pointer-events: none;
}
#vpDock[hidden] { display: none; }
body.erp-fijo #vpDock { left: 272px; }
.vp-chip {
    pointer-events: auto; flex: 0 1 260px; min-width: 120px; display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #cbd5e1; border-left: 4px solid #3b82f6;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18); cursor: pointer; font-family: 'Segoe UI', Arial, sans-serif; color: #0f172a;
    animation: vp-sube .25s ease; transition: transform .15s, box-shadow .15s;
}
.vp-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .24); }
.vp-chip.vp-presupuesto { border-left-color: #f59e0b; } .vp-chip.vp-presupuesto i { color: #d97706; }
.vp-chip.vp-programado { border-left-color: #0d9488; } .vp-chip.vp-programado i { color: #0f766e; }
.vp-chip i { color: #2563eb; flex-shrink: 0; }
.vp-chip-texto { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.vp-chip-texto b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-chip-texto small { font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-chip-x { border: 0; background: transparent; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; }
.vp-chip-x:hover { color: #b91c1c; background: #fee2e2; }
@keyframes vp-sube { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
    #pedidoModal .modal-content.pretty-modal, #recordatorioModal .modal-content.pretty-modal { width: calc(100vw - 12px); height: calc(100vh - 12px); margin: 6px auto; }
    #vpDock { bottom: 64px; }
    .vp-chip { flex-basis: 160px; }
}

/* Que no quede media pantalla en blanco: la lista de artículos y la
   descripción crecen con la altura de la ventana, y los botones quedan abajo */
#pedidoModal .modal-content.pretty-modal { display: flex; flex-direction: column; }
#pedidoModal .pretty-modal-body { grid-template-rows: auto; }
#pedidoModal .articulos-container { min-height: max(160px, calc(100vh - 770px)); display: flex; flex-direction: column; }
#pedidoModal .articulos-lista { flex: 1; overflow-y: auto; }
#pedidoModal #descripcionPedido { min-height: max(96px, calc(100vh - 1100px)); }
body.vp-con-dock #pedidoModal .articulos-container { min-height: max(160px, calc(100vh - 832px)); }
body.vp-con-dock #pedidoModal #descripcionPedido { min-height: max(96px, calc(100vh - 1160px)); }
#recordatorioModal .form-group:has(#descripcionRecordatorio) textarea { min-height: max(84px, calc(100vh - 640px)); }