/* ════════════════════════════════════════════════════════════════════
   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; }

/* ── Cancelar y Guardar, ARRIBA en la cabecera (15/10/2026, César) ──
   Abajo quedaban detrás de la barra del ERP y en algunos ordenadores no se
   podía pulsar Guardar. Ahora van en la cabecera de color, siempre a la
   vista: Guardar en blanco con el color de la ventana (pedido, presupuesto,
   programado) y Cancelar transparente. Sin Subir a Delsol. */
#pedidoModal .pretty-modal-header .modal-buttons {
    position: static; order: 0; grid-column: auto;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    margin: 0; padding: 0; background: none; box-shadow: none; border: none;
}
#pedidoModal .pretty-modal-header .modal-buttons > button {
    flex: 0 0 auto; min-width: 0; padding: 8px 16px; font-size: .88rem;
    border-radius: 9px; box-shadow: none; transform: none;
}
#pedidoModal .pretty-modal-header .cancel-button {
    background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .6);
}
#pedidoModal .pretty-modal-header .cancel-button:hover { background: rgba(255, 255, 255, .26); transform: none; }
#pedidoModal .pretty-modal-header .save-button {
    background: #fff; color: #1d4ed8; border: 1.5px solid #fff; font-weight: 700;
}
#pedidoModal .pretty-modal-header .save-button:hover:not(:disabled) { background: #eff6ff; transform: none; box-shadow: none; }
#pedidoModal .pretty-modal-header .save-button:disabled { opacity: .55; }
#pedidoModal .pretty-modal-header.theme-presupuesto .save-button { color: #b45309; }
#pedidoModal .pretty-modal-header.theme-programado .save-button { color: #0f766e; }
@media (max-width: 768px) {
    /* En el móvil, los dos botones en su propia fila bajo el título */
    #pedidoModal .pretty-modal-header { flex-wrap: wrap; row-gap: 10px; }
    #pedidoModal .pretty-modal-header .modal-buttons { order: 10; width: 100%; flex-direction: row; flex-wrap: nowrap; }
    #pedidoModal .pretty-modal-header .modal-buttons > button { flex: 1 1 0; justify-content: center; }
}