/* ════════════════════════════════════════════════════════════════════
   FORMULARIOS EN FORMATO ERP — gestión de rutas
   Nuevo pedido, presupuesto, pedido programado y recordatorio: en vez
   de una columna larga con desplazamiento, una ventana ancha con los
   campos en rejilla, para verlo todo de un vistazo. Solo CSS: el HTML
   de las ventanas (gestionrutas.js) no cambia; cada grupo se coloca
   por su id o por el campo que contiene.
   ════════════════════════════════════════════════════════════════════ */

/* ── La ventana: ancha y a la altura de la pantalla ── */
#pedidoModal .modal-content.pretty-modal,
#recordatorioModal .modal-content.pretty-modal {
    width: 94%; max-width: 1180px; margin: 16px auto; max-height: calc(100vh - 32px);
}
#pedidoModal .pretty-modal-header, #recordatorioModal .pretty-modal-header { padding: 14px 22px; }
#pedidoModal .pretty-modal-header h2, #recordatorioModal .pretty-modal-header h2 { font-size: 1.05rem; }
#pedidoModal .pretty-modal-header-icon, #recordatorioModal .pretty-modal-header-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }

/* ── Campos más compactos, etiquetas de ERP ── */
#pedidoModal .form-group, #recordatorioModal .form-group { margin-bottom: 0; min-width: 0; }
#pedidoModal .form-group > label, #recordatorioModal .form-group > label,
#pedidoModal .date-field > label, #recordatorioModal .date-field > label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 700; margin-bottom: 5px;
}
#pedidoModal .form-group input:not([type="checkbox"]):not([type="radio"]), #pedidoModal .form-group select, #pedidoModal .form-group textarea,
#recordatorioModal .form-group input:not([type="checkbox"]), #recordatorioModal .form-group select, #recordatorioModal .form-group textarea,
#pedidoModal .date-field input, #recordatorioModal .date-field input {
    padding: 9px 11px; font-size: 13.5px; border-radius: 8px; margin-top: 0;
}
#pedidoModal .form-group textarea, #recordatorioModal .form-group textarea { min-height: 84px; resize: vertical; }
#pedidoModal .dates-container, #recordatorioModal .dates-container { gap: 10px; }

/* ── Rejilla del pedido / presupuesto / programado (6 columnas) ── */
#pedidoModal .pretty-modal-body {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; align-content: start;
    padding: 18px 22px 0;
}
#pedidoModal .form-group:has(#clienteSearch)      { order: 1; grid-column: span 3; }
#pedidoModal .form-group:has(#almpcl)             { order: 2; grid-column: span 1; }
#pedidoModal .form-group.dates-container          { order: 3; grid-column: span 2; }
#pedidoModal #recurrenciaGroup                    { order: 4; grid-column: 1 / -1; }
#pedidoModal #origenCargaGrupo                    { order: 4; grid-column: span 2; position: relative; z-index: 3; }   /* el origen de la carga (8/10/2026), junto a las fechas */
#pedidoModal .form-group:has(#articuloSearch)     { order: 5; grid-column: 1 / -1; }
#pedidoModal .form-group:has(#descripcionPedido)  { order: 6; grid-column: span 3; }
#pedidoModal #refpclGroup                         { order: 7; grid-column: span 1; }
#pedidoModal .form-group:has(#bultosPedido)       { order: 8; grid-column: span 1; }
#pedidoModal #codpclGroup                         { order: 9; grid-column: span 1; }
#pedidoModal .form-group:has(#emacliInput)        { order: 10; grid-column: span 2; }
#pedidoModal #numalbaranGroup                     { order: 11; grid-column: span 1; }
#pedidoModal #estadoGroup                         { order: 12; grid-column: span 1; }
#pedidoModal .precios-correctos-grupo             { order: 13; grid-column: span 2; }
#pedidoModal #conductorGroup                      { order: 14; grid-column: span 2; }
#pedidoModal #proveedorNombreGroup                { order: 15; grid-column: span 3; }
#pedidoModal #vehiculoGroup                       { order: 16; grid-column: span 2; }
#pedidoModal #remolqueGroup                       { order: 17; grid-column: span 1; }
#pedidoModal .form-group:has(#selectedLocation)   { order: 18; grid-column: span 1; }
#pedidoModal .modal-buttons                       { order: 19; grid-column: 1 / -1; margin-top: 4px; padding: 12px 0 16px; }
#pedidoModal .almacen-float-arrow-wrap            { order: 20; grid-column: 1 / -1; }

/* La banda del reparto (quién lo lleva) se distingue del resto */
#pedidoModal #conductorGroup, #pedidoModal #vehiculoGroup, #pedidoModal #remolqueGroup,
#pedidoModal .form-group:has(#selectedLocation), #pedidoModal #proveedorNombreGroup {
    background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px;
}
#pedidoModal #estadoGroup > div { margin-top: 10px !important; }
#pedidoModal .coordinates { font-size: 12px; padding: 9px 10px; }
#pedidoModal .precios-correctos-grupo { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; }
#pedidoModal .precios-correctos-ayuda { margin: 4px 0 0; font-size: 11.5px; }

/* ── Artículos: buscador en una fila y las líneas como en una tabla ── */
#pedidoModal .articulos-container { padding: 12px; background: #fff; }
#pedidoModal .add-articulo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
#pedidoModal .add-articulo .search-container { flex: 1 1 320px; }
#pedidoModal .tipo-container { flex: 1 1 320px; }
#pedidoModal #personalizadoContainer { flex: 1 1 100%; }
#pedidoModal #addArticuloBtn { flex: 0 0 auto; min-width: 110px; }
#pedidoModal .articulos-lista { margin-top: 10px; gap: 6px; }
#pedidoModal .articulo-item { padding: 8px 10px; }
#pedidoModal .articulo-info strong { font-size: .92rem; margin-bottom: 4px; }
#pedidoModal .articulo-details { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
#pedidoModal .articulo-details > div { flex: 1 1 110px; padding: 6px 8px !important; margin: 0 !important; }
#pedidoModal .articulo-details label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
#pedidoModal .articulo-details input { padding: 6px 8px; font-size: 13px; }

/* ── Recordatorio: los campos a la izquierda y el mapa grande a la derecha ── */
#recordatorioModal .pretty-modal-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-rows: min-content; gap: 12px 18px; padding: 18px 22px 0;
}
#recordatorioModal .form-group { grid-column: 1; }
#recordatorioModal .form-group:has(#miniMap) { grid-column: 2; grid-row: 1 / span 8; display: flex; flex-direction: column; }
#recordatorioModal #miniMap { height: 100% !important; min-height: 420px; flex: 1; border-radius: 10px; margin-bottom: 8px !important; }
#recordatorioModal .coordinates-input { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
#recordatorioModal .coordinates-input .coord-field label { font-size: .68rem; text-transform: uppercase; color: #64748b; font-weight: 700; }
#recordatorioModal .coord-button { padding: 9px 12px; border-radius: 8px; }
#recordatorioModal .modal-buttons { grid-column: 1 / -1; margin-top: 4px; padding: 12px 0 16px; }

/* En pantallas estrechas, la columna de siempre */
@media (max-width: 900px) {
    #pedidoModal .pretty-modal-body { display: block; padding: 16px; }
    #pedidoModal .form-group { margin-bottom: 14px; }
    #recordatorioModal .pretty-modal-body { display: block; padding: 16px; }
    #recordatorioModal .form-group { margin-bottom: 14px; }
    #recordatorioModal #miniMap { min-height: 240px; }
}

/* ── Cada línea de artículo en UNA fila: nombre a la izquierda, cifras a la derecha ── */
#pedidoModal .articulo-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px; }
#pedidoModal .articulo-info { flex: 1; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
#pedidoModal .articulo-info strong { flex: 1 1 240px; margin: 0; font-size: .88rem; }
#pedidoModal .articulo-info .fianza-auto-marca { flex: 0 0 auto; }
#pedidoModal .articulo-info .fianza-sin-precio { flex: 1 1 100%; }
#pedidoModal .articulo-details { margin-top: 0 !important; flex: 3 1 560px; display: flex; gap: 6px 10px; align-items: center; }
#pedidoModal .articulo-details > div { flex: 1 1 90px; display: flex; align-items: center; gap: 5px; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
#pedidoModal .articulo-details label { margin: 0; white-space: nowrap; }
#pedidoModal .articulo-details input { width: 100%; min-width: 56px; }
#pedidoModal .articulo-details > div > span { font-size: .72rem; color: #64748b; white-space: nowrap; }
#pedidoModal .almacen-required-hint { display: block; font-size: .62rem; margin: 2px 0 0; }