/* ============================================================
   cotizaciones-azul.css  ·  Reskin AZUL "fusion" para los
   módulos de cotización de RDN (Trituración, Roll Off,
   Decomiso, Destrucción Planta, Logística, etc.)

   CÓMO USARLO: pega esta línea en cada módulo, JUSTO ANTES
   de </head> (así carga después del <style> y manda):

       <link rel="stylesheet" href="cotizaciones-azul.css">

   NO toca la lógica (MySQL, cálculos, PDF, WhatsApp).
   NO toca el DOCUMENTO/preview/PDF → la cotización impresa
   queda BLANCA y limpia, como debe ser.
   ============================================================ */

/* ---- Fondo general azul (gradiente fijo) ---- */
body{
  background:linear-gradient(165deg,#0A3B79 0%,#13539A 48%,#0B4385 100%) !important;
  background-attachment:fixed !important;
  color:#fff !important;
}

/* ============================================================
   SIDEBAR IZQUIERDO  ·  cristal azul + pill dorado activo
   ============================================================ */
.sb{
  background:rgba(5,28,60,.72) !important;
  border-right:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sb-logo{border-bottom:1px solid rgba(255,255,255,.12) !important;padding:14px !important;}
.sb-logo img{
  width:100% !important;
  max-height:46px !important;
  object-fit:contain !important;
  background:#fff !important;
  border-radius:6px !important;
  padding:4px 8px !important;
}
.sb-logo small{color:rgba(255,255,255,.5) !important;display:block !important;text-align:center !important;margin-top:6px !important;}
.sb-sec{color:rgba(255,255,255,.42) !important;}
.sb a{color:rgba(255,255,255,.8) !important;border-left-color:transparent !important;}
.sb a:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;}
.sb a.on{
  background:linear-gradient(135deg,#F6C544,#FFD974) !important;
  color:#0A3B79 !important;
  border-left-color:#F6C544 !important;
  font-weight:700 !important;
}
.sb hr{border-top-color:rgba(255,255,255,.12) !important;}

/* ---- Topbar superior en cristal ---- */
.topbar{
  background:rgba(5,28,60,.55) !important;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 16px rgba(0,0,0,.25) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ============================================================
   PANELES DEL BUILDER  ·  cristal glassmorphism
   ============================================================ */
.panel{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff !important;
}
.panel-t{
  color:#fff !important;
  border-bottom:2px solid rgba(246,197,68,.55) !important;
}

/* ---- Campos del formulario ---- */
.fg label{color:#FFD974 !important;}
.fg input,.fg select,.fg textarea{
  background:rgba(255,255,255,.09) !important;
  border:1.5px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.45) !important;}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:#F6C544 !important;
  box-shadow:0 0 0 3px rgba(246,197,68,.18) !important;
}
/* opciones del select legibles (fondo blanco, texto oscuro) */
.fg select option,select option{color:#1a1a2e !important;background:#fff !important;}

/* ---- Botones de tipo de servicio ---- */
.tipo{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.22) !important;
  color:rgba(255,255,255,.82) !important;
}
.tipo.on{
  background:linear-gradient(135deg,#F6C544,#FFD974) !important;
  border-color:#F6C544 !important;
  color:#0A3B79 !important;
}

/* ---- Cajas de costo ---- */
.costo-box{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.16) !important;
}
.costo-box h4{color:#FFD974 !important;}
.costo-lbl{color:rgba(255,255,255,.88) !important;}
.costo-unit{color:rgba(255,255,255,.6) !important;}
.costo-input{
  background:rgba(255,255,255,.1) !important;
  border:1.5px solid rgba(255,255,255,.26) !important;
  color:#fff !important;
}
.costo-input:focus{border-color:#F6C544 !important;}

/* ---- Caja TOTAL: dinero en lima ---- */
.total-box{
  background:rgba(0,0,0,.28) !important;
  border:1px solid rgba(246,197,68,.5) !important;
}
.total-box .monto{color:#B6E84B !important;}

/* ---- Cards de modalidad / recipiente ---- */
.mod-card,.recip-card{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.2) !important;
}
.mod-card.on,.recip-card.on{
  border-color:#F6C544 !important;
  background:rgba(246,197,68,.12) !important;
}
.mod-card .mod-titulo,.recip-card .recip-nom{color:#FFD974 !important;}
.mod-card .mod-desc,.recip-card .recip-dim{color:rgba(255,255,255,.7) !important;}
.mod-card.on .mod-desc{color:#fff !important;}
.recip-card .recip-img{background:rgba(255,255,255,.08) !important;color:#fff !important;}
.recip-card .recip-info{border-top-color:rgba(255,255,255,.12) !important;}

/* ---- Caja de días (era amarilla) ---- */
.dias-box{
  background:rgba(246,197,68,.12) !important;
  border:2px solid rgba(246,197,68,.5) !important;
  box-shadow:none !important;
}
.dias-box h4,.dias-label{color:#FFD974 !important;}
.dias-btn,.dias-display,.dias-input{
  background:rgba(255,255,255,.1) !important;
  border:2px solid rgba(246,197,68,.55) !important;
  color:#FFD974 !important;
}
.dias-btn:hover{background:#F6C544 !important;color:#0A3B79 !important;}
.dias-info{background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.82) !important;}
.dias-info b{color:#FFD974 !important;}

/* ============================================================
   Cajas inline de IVU (amarilla) y Fuel (azul claro)
   — usan style="" en el HTML, así que las pillamos por su
   checkbox interno con :has()  (Safari 15.4+/Chrome 105+, OK
   en Mac, iPhone y iPad modernos)
   ============================================================ */
.wrap div:has(> label > #c-ivu){
  background:rgba(246,197,68,.12) !important;
  border:1px solid rgba(246,197,68,.5) !important;
}
.wrap div:has(> label > #c-fuel){
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.2) !important;
}
div:has(> label > #c-ivu) label,
div:has(> label > #c-fuel) label,
div:has(> label > #c-fuel) span{color:#fff !important;}
#ivu-monto,#fuel-monto{color:#B6E84B !important;}
#sel-fuel-pct,#inp-fuel-pct{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}

/* ============================================================
   ROLL OFF (cotizacion-rolloff.html) — clases propias
   .seccion · .cont-card · .fuel-box · .ivu-box · .terminos-box
   ============================================================ */

/* Sub-secciones de costo (Entrega, Renta, Levantes, Disposición…) */
.seccion{
  background:rgba(255,255,255,.05) !important;
  border-left:3px solid #F6C544 !important;
}
.seccion-t{color:#FFD974 !important;}
.costo-check label{color:rgba(255,255,255,.9) !important;}

/* Tarjetas de contenedor / compactador */
.cont-card{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.cont-card.on{
  background:linear-gradient(135deg,#F6C544,#FFD974) !important;
  border-color:#F6C544 !important;
  color:#0A3B79 !important;
}
.cont-card .name{color:inherit !important;}
#cont-foto-fallback{
  background:rgba(255,255,255,.06) !important;
  border:1px dashed rgba(255,255,255,.3) !important;
  color:rgba(255,255,255,.75) !important;
}

/* Caja Fuel Charge (era azul claro) */
.fuel-box{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.2) !important;
}
.fuel-box label,.fuel-box span{color:#fff !important;}
.fuel-select{
  background:rgba(255,255,255,.1) !important;
  border:1.5px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}

/* Caja IVU (era amarilla) — opciones en cristal, activo naranja como acento */
.ivu-box{
  background:rgba(246,197,68,.1) !important;
  border:2px solid rgba(246,197,68,.45) !important;
}
.ivu-titulo{color:#FFD974 !important;}
.ivu-opt{
  background:rgba(255,255,255,.07) !important;
  border:2px solid rgba(255,255,255,.2) !important;
  color:rgba(255,255,255,.85) !important;
}
.ivu-opt:hover{border-color:#F6C544 !important;}

/* Caja Términos y Condiciones (era anaranjada) */
.terminos-box{
  background:rgba(255,255,255,.05) !important;
  border:2px solid rgba(246,197,68,.4) !important;
}
.terminos-titulo{color:#FFD974 !important;}
.terminos-titulo span{color:rgba(255,255,255,.7) !important;}
.termino-item{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.termino-item .bullet{color:#F6C544 !important;}
.termino-item textarea{color:#fff !important;background:transparent !important;}
.termino-item textarea:focus{background:rgba(255,255,255,.08) !important;}

/* Total de Roll Off (usa .total-item/.total-final, no .monto) */
.total-box .total-item{border-bottom-color:rgba(255,255,255,.15) !important;}
.total-box .total-final{
  color:#B6E84B !important;
  border-top-color:rgba(246,197,68,.5) !important;
}

/* ============================================================
   DESTRUCCIÓN PLANTA (cotizacion-destruccion-planta.html)
   .mat-chip · .modo-card · .costo-card · .disp-card · .precio-quick
   ============================================================ */

/* Chips de materiales a destruir */
.mat-chip{
  background:rgba(255,255,255,.06) !important;
  border:1.5px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.mat-chip:hover{background:rgba(255,255,255,.1) !important;border-color:#F6C544 !important;}
.mat-chip.on{
  background:rgba(246,197,68,.15) !important;
  border-color:#F6C544 !important;
  color:#FFD974 !important;
}
.mat-chip .nombre{color:inherit !important;}
.mat-chip .qty-row input{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.mat-chip .qty-btn{
  background:rgba(255,255,255,.1) !important;
  border:1.5px solid rgba(255,255,255,.25) !important;
  color:#FFD974 !important;
}
.mat-chip .qty-btn:hover{background:#F6C544 !important;color:#0A3B79 !important;}

/* Campo agregar material personalizado */
.material-libre-row input{
  background:rgba(255,255,255,.09) !important;
  border:1.5px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.material-libre-row input::placeholder{color:rgba(255,255,255,.45) !important;}

/* Tarjetas de modo de cobro (Por Libra / Caja / Unidad / Viaje) */
.modo-card{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.2) !important;
}
.modo-card .titulo{color:#fff !important;}
.modo-card .ej{color:rgba(255,255,255,.65) !important;}
.modo-card.on{
  background:linear-gradient(135deg,#F6C544,#FFD974) !important;
  border-color:#F6C544 !important;
}
.modo-card.on .titulo{color:#0A3B79 !important;}
.modo-card.on .ej{color:rgba(10,59,121,.8) !important;}

/* Tarjetas de costo (Libras, Cajas, Transportación, Disposición…) */
.costo-card{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.16) !important;
}
.costo-card-tit{color:#FFD974 !important;}

/* Botones de precio rápido ($0.20, $0.30…) */
.precio-quick button{
  background:rgba(255,255,255,.08) !important;
  border:1.5px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.precio-quick button:hover{background:rgba(246,197,68,.2) !important;border-color:#F6C544 !important;color:#FFD974 !important;}
.precio-quick button.on{background:#F6C544 !important;border-color:#F6C544 !important;color:#0A3B79 !important;}

/* Tarjetas de disposición / transporte */
.disp-card{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.disp-card .titulo{color:#fff !important;}
.disp-card .precio{color:rgba(255,255,255,.7) !important;}
.disp-card.on{
  background:rgba(246,197,68,.15) !important;
  border-color:#F6C544 !important;
}
.disp-card.on .titulo{color:#FFD974 !important;}
.disp-card.on .precio{color:rgba(255,255,255,.8) !important;}

/* Sub-cajas que se abren (coproceso / vertedero) — eran claras */
#wrap-coproceso,#wrap-vertedero{background:rgba(255,255,255,.05) !important;}

/* IVU label + términos (textos que quedaban oscuros) */
.ivu-box label{color:#fff !important;}
.terminos-help{color:rgba(255,255,255,.7) !important;}
.terminos-help b{color:#FFD974 !important;}
.terminos-actions button{
  background:rgba(255,255,255,.08) !important;
  border:1.5px solid rgba(255,255,255,.2) !important;
  color:#fff !important;
}
.terminos-actions button:hover{background:rgba(246,197,68,.2) !important;border-color:#F6C544 !important;color:#FFD974 !important;}

/* ============================================================
   SERVICIO INTEGRAL (cotizacion-servicio-integral.html) — verde
   Contenedores propios: .sec · .renglon · .termino · .resumen · .actions-bar
   (NO se toca .propuesta/.prop-*/.resumen-mensual = documento blanco)
   ============================================================ */

/* Paneles principales (usa .sec en vez de .panel) */
.sec{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff !important;
}
.sec-title{border-bottom:2px solid rgba(246,197,68,.4) !important;}
.sec-title h3{color:#A5D6A7 !important;}
.cat-equipos .sec-title h3{color:#81C784 !important;}
.cat-materiales .sec-title h3{color:#FFB74D !important;}
.cat-outsourcing .sec-title h3{color:#64B5F6 !important;}
.cat-instalacion .sec-title h3{color:#BA68C8 !important;}
.cat-equipos .sec-title,.cat-materiales .sec-title,
.cat-outsourcing .sec-title,.cat-instalacion .sec-title{border-bottom-color:rgba(255,255,255,.18) !important;}

/* Renglones (equipos/materiales/outsourcing/instalación) */
.renglon,
.cat-materiales .renglon,.cat-outsourcing .renglon,.cat-instalacion .renglon{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.14) !important;
}
.renglon input[type="text"],.renglon input[type="number"],.renglon select{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.renglon .nombre{color:#fff !important;}
.renglon .desc{color:rgba(255,255,255,.7) !important;}
.renglon-label{color:rgba(255,255,255,.55) !important;}
.drag-handle{color:rgba(255,255,255,.5) !important;}

/* Términos */
.termino{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.14) !important;
}
.termino.destacado{
  background:rgba(246,197,68,.12) !important;
  border-color:rgba(246,197,68,.5) !important;
}
.termino textarea{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.termino .destacado-label{color:#FFD974 !important;}

/* Resumen mensual (builder, no el del documento) */
.resumen{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(246,197,68,.5) !important;
}
.resumen-title{color:#FFD974 !important;}
.resumen-row{border-bottom-color:rgba(255,255,255,.15) !important;}
.resumen-row span:first-child{color:rgba(255,255,255,.7) !important;}
.resumen-row.total{
  border-top-color:rgba(246,197,68,.6) !important;
  color:#B6E84B !important;
}
.resumen-row.total span{color:#B6E84B !important;}

/* Barra de acciones inferior */
.actions-bar{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* ============================================================
   REFUERZO DE ESPECIFICIDAD (Servicio Integral carga /mobile.css
   que pisa .sec/.renglon/etc. con más fuerza). Estas reglas
   "body .wrap .X" le ganan sin importar el orden de carga.
   ============================================================ */
body .wrap .sec{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  color:#fff !important;
}
body .wrap .renglon{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.14) !important;
}
body .wrap .termino{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.14) !important;
}
body .wrap .termino.destacado{
  background:rgba(246,197,68,.12) !important;
  border-color:rgba(246,197,68,.5) !important;
}
body .wrap .resumen{
  background:rgba(255,255,255,.06) !important;
  border:2px solid rgba(246,197,68,.5) !important;
}
body .wrap .actions-bar{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* ============================================================
   NO se tocan (a propósito) para que el documento impreso
   quede BLANCO y profesional:
   .modal-preview · .preview-page · .doc-* · .costo-tabla-pdf
   .totales-* · .cliente-box · .firma-section · .section-title
   .servicio-list · .preview-recipiente
   ============================================================ */