/* =====================================================================
   REDISEÑO del formulario de COMPRA (crear-compra / editar-compra).
   TODO scopeado a .formularioCompra → no afecta ninguna otra pantalla.
   Solo reestiliza; NO cambia IDs, clases funcionales ni la lógica JS.
   Para volver atrás: quitar el <link> de plantilla.php (o revertir el commit).
   ===================================================================== */

/* --- Card contenedora más limpia --- */
.formularioCompra { --cmp-azul:#2563EB; --cmp-borde:#e5e7eb; --cmp-gris:#64748b; }
#reservaPane .card-primary { border-top: 3px solid var(--cmp-azul); box-shadow: 0 4px 18px -10px rgba(15,23,42,.25); }
#reservaPane .card-primary > .card-header { background: #fff; border-bottom: 1px solid #eef2f7; }
#reservaPane .card-primary > .card-header .card-title { color: var(--cmp-azul); font-weight: 700; }

/* --- Campos: bordes e íconos parejos y suaves --- */
.formularioCompra .form-control { border-color: var(--cmp-borde); }
.formularioCompra .form-control:focus { border-color: var(--cmp-azul); box-shadow: 0 0 0 .18rem rgba(37,99,235,.14); }
.formularioCompra .input-group-text { background: #f8fafc; border: 1px solid var(--cmp-borde); color: var(--cmp-gris); }
.formularioCompra label { font-size: 12px; font-weight: 600; color: var(--cmp-gris); text-transform: uppercase; letter-spacing: .3px; margin-bottom: .25rem; }

/* --- Compactar: los campos con input-lg estaban demasiado altos --- */
/* (no toca las filas de producto, que usan form-control-sm). El input-group estira todo a la
   altura del recuadro más alto, así que se fija la altura del input, del $ y del botón. --- */
.formularioCompra .form-control:not(.form-control-sm) { height: 38px !important; padding: .375rem .6rem !important; font-size: .9rem; }
.formularioCompra .input-group-text:not([style]) { height: 38px; padding-top: .375rem !important; padding-bottom: .375rem !important; }
.formularioCompra .input-group-append .btn { height: 38px !important; padding-top: .375rem !important; padding-bottom: .375rem !important; font-size: .875rem; }

/* --- Encabezados de columna de la tabla de productos --- */
.compra-thead { padding: 4px 15px 2px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a3b8; }

/* --- Filas de producto: colores suaves y consistentes (verde=flete, azul=costo) --- */
.formularioCompra .nuevaDescripcionProducto { background: #fff; }
.formularioCompra .nuevoCostoFlete { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #065f46; }
.formularioCompra .nuevoPrecioUProductoCalculado { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af; font-weight: 600; }
.formularioCompra .nuevoPrecioTProducto { background: #f8fafc !important; font-weight: 600; color: #0f172a; }
.formularioCompra .quitarProducto { border-radius: 6px; box-shadow: none; }
.formularioCompra .nuevoProducto .row { border-radius: 8px; }
.formularioCompra .nuevoProducto .row:hover { background: #f8fafc; }

/* --- Separador entre los productos y los campos de carga de abajo (línea marcada) --- */
.formularioCompra hr { border-top: 2px solid #cbd5e1; margin: 1.1rem 0 1.25rem; }

/* --- Botones: UNA paleta con jerarquía clara (calma el "colores por todos lados") ---
   OJO: custom.css pinta .btn-info/.btn-warning/etc. con !important, así que acá también
   va !important para poder sobreescribirlos SOLO dentro del formulario de compra. --- */
/* Utilitarios (Calcular peso / flete): celeste ghost, discretos */
.formularioCompra .btn-info { background: #eff6ff !important; border: 1px solid #bfdbfe !important; color: #1d4ed8 !important; box-shadow: none; font-weight: 600; }
.formularioCompra .btn-info:hover { background: #dbeafe !important; color: #1e40af !important; }
/* IMEI/SERIAL: ámbar suave, no chillón */
.formularioCompra #editarImeiPPCompra.btn-warning { background: #fff7ed !important; border: 1px solid #fed7aa !important; color: #c2410c !important; box-shadow: none; font-weight: 600; }
.formularioCompra #editarImeiPPCompra.btn-warning:hover { background: #ffedd5 !important; }
/* Adjuntar comprobante: primario sobrio */
.formularioCompra #btnAdjuntarComprobante { box-shadow: none; }

/* --- Barra de acciones inferior: separada y con jerarquía --- */
.formularioCompra .botones-compra { border-top: 1px solid #eef2f7; padding-top: 1rem; margin-top: 1rem; }
.formularioCompra .botones-compra .btn { border-radius: 8px; padding: .5rem 1.1rem; font-weight: 600; box-shadow: none; }
/* Calcular Precio Compra: acción secundaria (gris, no compite con Guardar) */
.formularioCompra #btnCalcularPrecioCompra.btn-info { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; }
.formularioCompra #btnCalcularPrecioCompra.btn-info:hover { background: #e2e8f0 !important; }
/* Generar Recepción: verde refinado (acción importante) */
.formularioCompra .btnGenerarRecepcion.btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.formularioCompra .btnGenerarRecepcion.btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
/* Guardar: primario, el CTA (queda a la derecha por el margin-left:auto existente) */
.formularioCompra .btn-guardar-compra.btn-primary { background: var(--cmp-azul) !important; border-color: var(--cmp-azul) !important; color: #fff !important; }
.formularioCompra .btn-guardar-compra.btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }

/* --- Totales: los readonly se ven como "resultado", no como campo editable --- */
.formularioCompra #nuevoTotalCompraCosto, .formularioCompra #nuevoTotalCompra,
.formularioCompra #nuevoCantidadProductosCompra, .formularioCompra #nuevoPesoNetoCompra { background: #f8fafc; font-weight: 700; color: #0f172a; }