/* --- CONTENEDOR PRINCIPAL SIRACUSA --- */
#siracusa-wizard {
  background-color: #000000;
  color: #ffffff;
  padding: 30px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid #1f386c;
  overflow: visible !important; /* Permitir que los menús floten fuera */
}

#siracusa-wizard h2 {
  text-align: center;
  color: #00d4ff;
  font-size: 1.8rem;
  margin-bottom: 30px;
}

/* --- SELECTORES PERSONALIZADOS (ESTILO REPRORACE) --- */
.custom-select-container {
  position: relative;
  margin-bottom: 15px;
  cursor: pointer;
  z-index: 10; /* Base para selectores */
}

/* El selector activo siempre debe estar por encima de todo */
.custom-select-container.active {
  z-index: 9999 !important;
}

.custom-select-trigger {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.3);
  padding: 15px 20px;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.custom-select-trigger:hover {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

/* --- MENÚ DESPLEGABLE CON BUSCADOR --- */
.custom-select-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #111111 !important;
  border: 1px solid #444;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
  max-height: 300px;
  overflow: hidden; /* El scroll lo maneja la lista interna */
  margin-top: 2px;
}

.custom-select-container.active .custom-select-content {
  display: block !important;
}

/* Buscador interno fijo */
.search-box-wrapper {
  padding: 10px;
  position: sticky;
  top: 0;
  background: #111111;
  border-bottom: 1px solid #333;
  z-index: 11;
}

.inner-search {
  width: 100%;
  background: #222;
  border: 1px solid #00d4ff;
  color: white;
  padding: 10px;
  border-radius: 6px;
  outline: none;
}

/* Lista de opciones con scroll vertical */
.options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}

.options-list li {
  padding: 12px 20px;
  border-bottom: 1px solid #222;
  color: #eee;
  cursor: pointer;
  display: block !important;
  transition: background 0.2s;
}

.options-list li:hover {
  background: #00d4ff;
  color: #000;
  font-weight: 600;
}

/* --- FICHA DE RESULTADOS (GLASSMORPHISM) --- */
.glass-card-final {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  margin-top: 40px;
  z-index: 1;
}

.result-title-text {
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}

/* --- GRÁFICOS RESPONSIVE --- */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: 100% !important;
  max-width: 100%;
}

.chart-wrapper {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 15px;
  height: 300px; /* Altura fija para que Chart.js no colapse */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- KPI E INDICADORES --- */
.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  margin-bottom: 30px;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: #00d4ff;
}

/* --- KPI Boxes + Badges (como en capturas) --- */
.kpi-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 16px;
  min-width: 190px;
  text-align: center;
}

.kpi-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.badge-stage {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.badge-increase {
  display: inline-block;
  margin-top: 10px;
  background: #00d4ff;
  color: #000;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
}

/* --- Servicios (chips) --- */
.services-flex {
  margin: 26px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.service-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  font-weight: 600;
}

.service-item i {
  color: #00d4ff;
}

/* --- Botones CTA (como en capturas) --- */
.action-buttons {
  margin-top: 22px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-main,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.05rem;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-main {
  background: #00d4ff;
  color: #000;
}

.btn-outline {
  background: rgba(255, 255, 255, 0.85);
  color: #111;
}

.btn-main:hover,
.btn-outline:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.hidden { display: none !important; }

/* --- Desplegables: estética + buscador FUERA (sin romper ficha/animaciones) --- */
#siracusa-wizard .custom-select-wrapper{
  position: relative;
  margin-bottom: 15px;
}

/* Select nativo oculto (solo estado y eventos) */
#siracusa-wizard .custom-select-native{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Trigger como botón (misma estética ReproRace) */
#siracusa-wizard .custom-select-trigger{
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

#siracusa-wizard .custom-select-icons{
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: #00d4ff;
}

#siracusa-wizard .custom-select-searchbtn{
  background: transparent;
  border: 0;
  color: #00d4ff;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
}

#siracusa-wizard .custom-select-searchbtn:hover{
  background: rgba(0, 212, 255, 0.12);
}

/* Buscador flotante: aparece encima, fuera del flujo */
#siracusa-wizard .custom-select-search{
  position: absolute;
  left: 0;
  right: 0;
  top: -54px;
  display: none;
  background: #111111;
  border: 1px solid rgba(0, 212, 255, 0.55);
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

#siracusa-wizard .custom-select-wrapper.search-open .custom-select-search{
  display: block;
}

/* Cuando el buscador está abierto, subimos z-index del bloque para que no lo tape nada */
#siracusa-wizard .custom-select-wrapper.search-open{
  z-index: 9999;
}

/* Scrollbar Profesional */
.options-list::-webkit-scrollbar { width: 5px; }
.options-list::-webkit-scrollbar-thumb { background: #00d4ff; border-radius: 10px; }

/* --- AJUSTES MÓVILES --- */
@media (max-width: 768px) {
  #siracusa-wizard { padding: 15px; }
  .charts-container { grid-template-columns: 1fr; }
  .chart-wrapper { height: 250px; }
  .kpi-value { font-size: 1.5rem; }
}

/* v3.2.0 - refuerzo chips servicios */
#siracusa-wizard .services-flex{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:18px;margin-bottom:18px;}
#siracusa-wizard .service-item{display:inline-flex;align-items:center;gap:8px;}

/* === SP-REPRO · Ajuste charts en móvil (sin tocar desktop) === */
@media (max-width: 768px) {

  /* Contenedor del gráfico: evita overflow lateral */
  .sp-repro-chart,
  .sp-repro-chart-container,
  .chart-container,
  .wizard-chart {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Canvas: que se ajuste al ancho del móvil */
  .sp-repro-chart canvas,
  .sp-repro-chart-container canvas,
  .chart-container canvas,
  .wizard-chart canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}