/* =========================================================
   CALCULADORA – CSS ESPECÍFICO DE LA VISTA
   ---------------------------------------------------------
   Estructura:
   1) Contenedor de página
   2) Iconos de categorías
   3) Secciones de formularios (visibilidad/títulos/resultados)
   4) Autocomplete (wrapper + lista de sugerencias)
   5) Vuelo – espaciados
   6) Resumen fijo
   7) Barra de herramientas (chips reutilizables)
   8) Transporte – layout (barra superior + botón Calcular centrado)
   9) Utilidades menores
   ========================================================= */


/* 1) CONTENEDOR DE PÁGINA -------------------------------- */
.calculadora-container{
  max-width: 900px;
  margin: 100px auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  text-align: center;
}

/* 2) ICONOS DE CATEGORÍAS -------------------------------- */
.iconos-categorias{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px; margin-bottom: 2rem;
}
.btn-categoria{
  width: 70px; height: 70px; border-radius: 50%;
  background: #4CAF50; color: #fff; border: 0;
  font-size: 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.btn-categoria:hover{ transform: scale(1.1); background: #3B8B3B; }

/* 3) SECCIONES DE FORMULARIOS ---------------------------- */
.formulario-categoria{ display: none; margin-top: 2rem; text-align: left; }
.formulario-categoria.active{ display: block; }
.formulario-categoria h3{ color: #2F4F4F; margin-bottom: 1rem; }

.resultado-categoria{ display: none; margin-top: 1rem; }

/* 4) AUTOCOMPLETE ---------------------------------------- */
.auto-wrapper{ position: relative; }
.auto-wrapper .sugerencias-lista{
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid #dee2e6; border-radius: .375rem;
  padding: 4px 0; z-index: 3000; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.auto-wrapper .sugerencias-lista.is-open{ display: block; }
.sugerencias-lista li{
  list-style: none; padding: 8px 12px; cursor: pointer;
}
.sugerencias-lista li:hover{ background: #f1f3f5; }

/* 5) VUELO – ESPACIADOS ---------------------------------- */
#form-vuelo label{ margin-top: 10px; }
#escalas-container .grupo-escala{ margin-top: 10px; }
#escalas-container .grupo-escala .eliminar-escala{ min-width: 44px; }
#formulario-vuelo #agregar-escala{
  display: block;            /* fuerza salto de línea */
  margin: 8px 0 16px;        /* aire vertical */
}

/* 6) RESUMEN FIJO ---------------------------------------- */
.resumen-fijo{
  margin-top: 3rem; background: #f8f9fa;
  padding: 1.5rem; border-radius: 10px;
}
.resumen-fijo .del-cat{
  display: inline-block; margin-left: 8px; font-weight: 700; cursor: pointer;
  color: #dc3545; padding: 0 6px; border-radius: 4px; line-height: 1;
}
.resumen-fijo .del-cat:hover{ background: rgba(220,53,69,.1); }

/* 7) BARRA DE HERRAMIENTAS (CHIPS) ----------------------- */
.toolbar-mapa{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 6px; }

.btn-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; color:#374151;
  font-weight:500; box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}
.btn-chip .icon{
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; font-weight:700; line-height:1;
}
.btn-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.btn-chip:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.04); }
.btn-chip:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

.btn-chip.add .icon{ background:#e8f5e9; color:#2e7d32; }
.btn-chip.clear{ color:#b42318; border-color:#f2b8b5; }
.btn-chip.clear .icon{ background:#fde8e7; color:#b42318; }

/* 8) TRANSPORTE – LAYOUT --------------------------------- */
/* Barra superior: botón a la izquierda + texto a la derecha */
.toolbar-mapa-row .helper-text{
  max-width: 720px; line-height: 1.35;
}
@media (max-width: 768px){
  .toolbar-mapa-row .helper-text{ margin-top: .25rem; }
}

/* Botón "Calcular" CENTRADO (solo en Transporte) */
#formulario-transporte button[type="submit"]{
  display: block;
  margin: 16px auto 0;   /* ← centra horizontalmente */
}

/* 9) UTILIDADES MENORES ---------------------------------- */
.btn-calcular{ margin: 16px 0; }   /* si decides usar esta clase en otros lados */