/* =====================================================================
   REDISEÑO de los formularios de RESERVA, TRÁNSITO y DEVOLUCIÓN (crear/editar).
   Mismo criterio que compra-moderna.css. Scopeado a .formularioReserva,
   .formularioTransito y .formularioDevolucion → 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).
   El acento azul del card lo hereda de compra-moderna (#reservaPane .card-primary).
   ===================================================================== */

.formularioReserva, .formularioTransito, .formularioDevolucion { --rt-azul:#2563EB; --rt-borde:#e5e7eb; --rt-gris:#64748b; }

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

/* Encabezados de columna de la tabla de productos (los <small> grises) */
.formularioReserva small.text-muted, .formularioTransito small.text-muted, .formularioDevolucion small.text-muted { text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .3px; color: #94a3b8 !important; }

/* --- Compactar: campos con input-lg (Descuento/Total/Artículos) estaban muy altos --- */
.formularioReserva .form-control:not(.form-control-sm), .formularioTransito .form-control:not(.form-control-sm), .formularioDevolucion .form-control:not(.form-control-sm) { height: 38px !important; padding: .375rem .6rem !important; font-size: .9rem; }
.formularioReserva .input-group-text:not([style]), .formularioTransito .input-group-text:not([style]), .formularioDevolucion .input-group-text:not([style]) { height: 38px; padding-top: .375rem !important; padding-bottom: .375rem !important; }
/* Se sacan TODOS los "$" (ion-social-usd): las filas de producto Y el Total de abajo (ocupan
   lugar y ya se entiende que es monetario). El input toma todo el ancho. */
.formularioReserva .input-group-text:has(.ion-social-usd),
.formularioTransito .input-group-text:has(.ion-social-usd),
.formularioDevolucion .input-group-text:has(.ion-social-usd) { display: none !important; }
.formularioReserva .input-group-prepend:has(.ion-social-usd) > .form-control,
.formularioTransito .input-group-prepend:has(.ion-social-usd) > .form-control,
.formularioDevolucion .input-group-prepend:has(.ion-social-usd) > .form-control { border-radius: 6px !important; }
.formularioReserva .input-group-append .btn, .formularioTransito .input-group-append .btn, .formularioDevolucion .input-group-append .btn { height: 38px !important; padding-top: .375rem !important; padding-bottom: .375rem !important; font-size: .875rem; }

/* --- Precio y Total (filas) + Total general: valores a la derecha (quedan mejor alineados) --- */
.formularioReserva .nuevoPrecioUProducto, .formularioReserva .nuevoPrecioTProducto, .formularioReserva #nuevoTotalReserva,
.formularioTransito .nuevoPrecioUProducto, .formularioTransito .nuevoPrecioTProducto, .formularioTransito #nuevoTotalTransito,
.formularioDevolucion .nuevoPrecioUProducto, .formularioDevolucion .nuevoPrecioTProducto, .formularioDevolucion #nuevoTotalDevolucion { text-align: right; }
/* Cantidad centrada (como en compras) */
.formularioReserva .nuevaCantidadProducto, .formularioTransito .nuevaCantidadProducto, .formularioDevolucion .nuevaCantidadProducto { text-align: center; }

/* --- Filas de producto: hover suave --- */
.formularioReserva .nuevoProducto .row:hover, .formularioTransito .nuevoProducto .row:hover, .formularioDevolucion .nuevoProducto .row:hover { background: #f8fafc; border-radius: 8px; }
.formularioReserva .nuevoPrecioTProducto, .formularioTransito .nuevoPrecioTProducto, .formularioDevolucion .nuevoPrecioTProducto { background: #f8fafc !important; font-weight: 600; color: #0f172a; }

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

/* --- Botones: UNA paleta con jerarquía (custom.css los pinta con !important, por eso va !important) --- */
/* IMEI/SERIAL: ámbar suave, no chillón */
.formularioReserva #editarImeiPP.btn-warning, .formularioTransito .btn-warning, .formularioDevolucion .btn-warning { background: #fff7ed !important; border: 1px solid #fed7aa !important; color: #c2410c !important; box-shadow: none; font-weight: 600; }
.formularioReserva #editarImeiPP.btn-warning:hover, .formularioTransito .btn-warning:hover, .formularioDevolucion .btn-warning:hover { background: #ffedd5 !important; }
/* Item Libre (solo reserva): acción secundaria (azul ghost, no compite con Guardar) */
.formularioReserva #btnAgregarItemLibre.btn-primary { background: #eff6ff !important; border: 1px solid #bfdbfe !important; color: #1d4ed8 !important; box-shadow: none; font-weight: 600; }
.formularioReserva #btnAgregarItemLibre.btn-primary:hover { background: #dbeafe !important; color: #1e40af !important; }

/* --- Barra de acciones inferior --- */
.formularioReserva .acciones-form, .formularioTransito .acciones-form, .formularioDevolucion .acciones-form { border-top: 1px solid #eef2f7; padding-top: 1rem; margin-top: 1rem; }
.formularioReserva .acciones-form .btn, .formularioTransito .acciones-form .btn, .formularioDevolucion .acciones-form .btn { border-radius: 8px; padding: .5rem 1.1rem; font-weight: 600; box-shadow: none; }
/* Generar Factura / Generar Reserva: verde refinado (solo reserva/tránsito) */
.formularioReserva .btnGenerarFactura.btn-success, .formularioTransito .btnGenerarReserva.btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.formularioReserva .btnGenerarFactura.btn-success:hover, .formularioTransito .btnGenerarReserva.btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
/* Guardar: primario, el CTA (queda a la derecha por el margin-left:auto existente) */
.formularioReserva .btn-guardar.btn-primary, .formularioTransito .btn-guardar.btn-primary, .formularioDevolucion .btn-guardar.btn-primary { background: var(--rt-azul) !important; border-color: var(--rt-azul) !important; color: #fff !important; }
.formularioReserva .btn-guardar.btn-primary:hover, .formularioTransito .btn-guardar.btn-primary:hover, .formularioDevolucion .btn-guardar.btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }

/* --- Totales/readonly se ven como "resultado" --- */
.formularioReserva #nuevoTotalReserva, .formularioReserva #nuevoCantidadProductos,
.formularioTransito #nuevoTotalTransito, .formularioTransito #nuevoCantidadProductos,
.formularioDevolucion #nuevoTotalDevolucion { background: #f8fafc; font-weight: 700; color: #0f172a; }