/* Reset y configuración base */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body { 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  background: linear-gradient(135deg, #ffffff 0%, #e4e4e4 100%); 
  min-height: 100vh; 
  padding: 12px; 
}

/* Contenedor principal */
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
}

/* Header */
.header { 
  text-align: center; 
  color: white; 
  margin-bottom: 40px; 
}

.header h1 { 
  font-size: 2.2rem; 
  margin-bottom: 10px; 
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
}

.header p { 
  font-size: 1rem; 
  opacity: 0.9; 
}

/* Grid principal */
.content { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 20px; 
  align-items: start; 
}

/* Tarjetas */
.card { 
  background: white; 
  border-radius: 20px; 
  padding: 24px; 
  box-shadow: 0 20px 60px rgba(0,0,0,0.3); 
}

.card h2 { 
  color: #007bff; 
  margin-bottom: 20px; 
  font-size: 1.4rem; 
  border-bottom: 2px solid #007bff; 
  padding-bottom: 10px; 
}

/* Grupos de selectores */
.selector-group { 
  margin-bottom: 20px; 
}

.selector-label { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 10px; 
  font-weight: 600; 
  color: #333; 
  font-size: 1rem; 
}

.selector-value { 
  background: #007bff; 
  color: white; 
  padding: 4px 10px; 
  border-radius: 20px; 
  font-size: 1rem; 
  min-width: 50px; 
  text-align: center; 
}

/* Sliders */
.slider-container { 
  position: relative; 
  margin-bottom: 10px; 
}

input[type="range"] { 
  width: 100%; 
  height: 6px; 
  border-radius: 5px; 
  background: #ddd; 
  outline: none; 
  -webkit-appearance: none; 
}

input[type="range"]::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 18px; 
  height: 18px; 
  border-radius: 50%; 
  background: #007bff; 
  cursor: pointer; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
  transition: all 0.3s ease; 
}

input[type="range"]::-webkit-slider-thumb:hover { 
  background: #764ba2; 
  transform: scale(1.2); 
}

input[type="range"]::-moz-range-thumb { 
  width: 18px; 
  height: 18px; 
  border-radius: 50%; 
  background: #007bff; 
  cursor: pointer; 
  border: none; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
  transition: all 0.3s ease; 
}

input[type="range"]::-moz-range-thumb:hover { 
  background: #764ba2; 
  transform: scale(1.2); 
}

.range-labels { 
  display: flex; 
  justify-content: space-between; 
  font-size: 0.85rem; 
  color: #666; 
  margin-top: 5px; 
}

/* Toggle switches */
.toggle-container { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  background: #f8f9fa; 
  border-radius: 15px; 
  margin-bottom: 15px; 
}

.toggle-label { 
  font-weight: 600; 
  color: #333; 
  font-size: 1rem; 
}

.toggle-switch { 
  position: relative; 
  width: 48px; 
  height: 24px; 
  background: #ccc; 
  border-radius: 30px; 
  cursor: pointer; 
  transition: all 0.3s ease; 
}

.toggle-switch.active { 
  background: #007bff; 
}

.toggle-slider { 
  position: absolute; 
  top: 3px; 
  left: 3px; 
  width: 20px; 
  height: 20px; 
  background: white; 
  border-radius: 50%; 
  transition: all 0.3s ease; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

.toggle-switch.active .toggle-slider { 
  left: 25px; 
}

/* Tarjeta de resumen */
.summary-card { 
  position: sticky; 
  top: 20px; 
}

.summary-item { 
  display: flex; 
  justify-content: space-between; 
  padding: 10px 0; 
  border-bottom: 1px solid #eee; 
  font-size: 0.95rem; 
}

.summary-item:last-child { 
  border-bottom: none; 
}

.summary-item .label { 
  color: #666; 
  font-weight: 500; 
}

.summary-item .value { 
  font-weight: 600; 
  color: #333; 
}

/* Sección de totales */
.total-section { 
  margin-top: 20px; 
  padding-top: 20px; 
  border-top: 2px solid #007bff; 
}

.total-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 15px; 
}

.total-label { 
  font-size: 1.1rem; 
  font-weight: 600; 
  color: #333; 
}

.total-amount { 
  font-size: 2rem; 
  font-weight: bold; 
  color: #007bff; 
}

#subtotal {
  font-size: 1.4rem !important;
}

/* Botón de CTA */
.cta-button { 
  width: 100%; 
  padding: 14px; 
  background: linear-gradient(135deg, #007bff 0%, #764ba2 100%); 
  color: white; 
  border: none; 
  border-radius: 12px; 
  font-size: 1rem; 
  font-weight: bold; 
  cursor: pointer; 
  margin-top: 20px; 
  transition: all 0.3s ease; 
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); 
}

.cta-button:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6); 
}

/* Badges informativos */
.info-badge { 
  display: inline-block; 
  background: #e3f2fd; 
  color: #1976d2; 
  padding: 3px 8px; 
  border-radius: 12px; 
  font-size: 0.8rem; 
  font-weight: 600; 
  margin-left: 8px; 
}

/* Nota al pie */
.footnote {
  opacity: 0.85;
  margin-top: 16px;
  font-size: 0.9rem;
  text-align: center;
}

/* Features list (oculta) */
.features-list { 
  display: none !important; 
}

.pdf-hidden {
  display: none !important;
}

.pdf-only {
  display: none !important;
}

/* Media queries - Responsive */
@media (max-width: 968px) {
  .content { 
    grid-template-columns: 1fr; 
  }
  
  .header h1 { 
    font-size: 2rem; 
  }
}