/* ============================================================
   🪟 SISTEMA DE POPUPS – OSA INSUMOS
   ============================================================ */

/* ================= CONTENEDOR GENERAL ================= */
.popupOsa {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontPrincipal);
}

/* ================= OVERLAY ================= */
.popupOverlayOsa {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* ================= CAJA PRINCIPAL ================= */
.popupContenidoOsa {
  position: relative;
  background: var(--colorCardFondo);
  color: var(--colorCardTexto);
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popupEntradaOsa 0.25s ease-out;
}

/* ================= HEADER ================= */
.popupHeaderOsa {
  padding: 14px 16px;
  background: var(--colorFondoPanel);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popupHeaderOsa h5 {
  margin: 0;
  font-weight: 500;
  color: var(--colorTextoGeneral);
}

/* Botón cerrar */
.btnCerrarPopupOsa {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--colorTextoGeneral);
  cursor: pointer;
}

/* ================= BODY ================= */
.popupBodyOsa {
  padding: 16px;
}

.popupBodyOsa label {
  font-weight: 500;
  color: var(--colorTextoGeneral);
}

.popupBodyOsa .form-control,
.popupBodyOsa .form-select {
  border-radius: 8px;
}

/* Resultado */
.popupBodyOsa [data-resultado] {
  background: var(--colorFondoPantalla);
  color: var(--colorTextoGeneral);
}

/* ================= FOOTER ================= */
.popupFooterOsa {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--colorCardFondo);
}

/* ================= ANIMACIÓN ================= */
@keyframes popupEntradaOsa {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ============================================================
   📱 RESPONSIVE – TAMAÑOS OFICIALES
   ============================================================ */

/* ------------------------------------------------------------
   📱 Cell gama baja (≤ 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {

  .popupContenidoOsa {
    max-width: 94%;
    border-radius: 10px;
  }

  .popupBodyOsa {
    padding: 14px;
  }

  .popupFooterOsa {
    flex-direction: column;
  }

  .popupFooterOsa .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   📱 Cell gama alta (481px – 767px)
   ------------------------------------------------------------ */
@media (min-width: 481px) and (max-width: 767px) {

  .popupContenidoOsa {
    max-width: 380px;
  }
}

/* ------------------------------------------------------------
   📱 Tablet (768px – 991px)
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {

  .popupContenidoOsa {
    max-width: 420px;
  }
}

/* ------------------------------------------------------------
   🖥️ Desktop (≥ 992px)
   ------------------------------------------------------------ */
@media (min-width: 992px) {

  .popupContenidoOsa {
    max-width: 460px;
  }
}

.calcCeraInfoWrapper {
  margin-top: 12px;
}

.calcCeraInfoBox {
  background: #f8f9fa;
  border-left: 4px solid var(--colorPrincipal, #198754);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.calcCeraInfoBox strong {
  color: #212529;
}

.calcCeraInfoBox a.btn {
  margin-top: 6px;
}


/* DESDE AQUI ES TODO NUEVO */
/* Slider OSA */
.calc-slider {
  accent-color: var(--colorPrincipal);
}

/* Barra APF */
#barraApf {
  background-color: var(--colorSecundario);
}

/* ============================================================
   RESULTADOS – Calculadora OSA
   ============================================================ */

#resApf,
#resBpf,
#resEsencia,
#resAditivo {
  font-family: var(--fontPrincipal);
  color: var(--colorCardTexto);
  line-height: 1.3;
}

/* Cantidad por unidad */
#resApf > div:first-child,
#resBpf > div:first-child,
#resEsencia > div:first-child,
#resAditivo > div:first-child {
  font-size: 0.85rem;
  color: var(--colorTextoGeneral);
  opacity: 0.85;
}

/* Cantidad por lote */
#resApf > div.fw-bold,
#resBpf > div.fw-bold,
#resEsencia > div.fw-bold,
#resAditivo > div.fw-bold {
  margin-top: 2px;
  font-size: 1.1rem;
  color: var(--colorPrincipal);
}

/* Caja contenedora (hereda la card) */
.card .border.rounded.p-3 {
  background-color: var(--colorCardFondo);
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Título del insumo */
.card .fw-bold {
  color: var(--colorTextoGeneral);
}

/* Responsive: compactar en mobile */
@media (max-width: 576px) {

  #resApf,
  #resBpf,
  #resEsencia,
  #resAditivo {
    font-size: 0.9rem;
  }

  #resApf > div.fw-bold,
  #resBpf > div.fw-bold,
  #resEsencia > div.fw-bold,
  #resAditivo > div.fw-bold {
    font-size: 1rem;
  }
}