/* ============================================
   MANTENIMIENTO PREPAGO - CSS específico
   ============================================ */

/* --------------------------------------------
   FRANJA GRIS FULL-BLEED
   Ocupa todo el ancho de pantalla, excediendo
   el contenedor padre.

.franja-gris {
  background-color: #ebe8df;
  padding: 2.5rem 1rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
   -------------------------------------------- */
.fond-1 {
    min-height: 300px;
    max-height: 100vh;
    padding: 3rem 0;  /* ← Agregar padding vertical */
    background-color: #e4e1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(63, 63, 63);
    text-align: center;
}

/* --------------------------------------------
   TARJETAS DE BENEFICIOS (dentro de franja gris)
   -------------------------------------------- */
.beneficio-card {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.beneficio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.beneficio-card i {
  font-size: 2rem;
  color: #0f3560;
}

.beneficio-card h6 {
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  color: #0f3560;
}

.beneficio-card p {
  font-size: 0.9rem;
  color: #495057;
  margin-bottom: 0;
}

/* --------------------------------------------
   SELECTOR DE RUBROS (HTMX)
   -------------------------------------------- */

/* SELECTOR DE RUBROS */
.selector-rubros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

/* Estado normal: todos iguales */
.selector-rubros button {
  padding: 0.6rem 1.2rem;
  border: 2px solid #d6d9dd;
  background: #f5f6f7;
  color: #343a40;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* Identidad cromática de cada rubro */
.selector-rubros .rubro-electricidad {
  --color-rubro: #0f3560;
}

.selector-rubros .rubro-seguridad {
  --color-rubro: #753e12;
}

.selector-rubros .rubro-conectividad {
  --color-rubro: #087f8c;
}

.selector-rubros .rubro-autoconsumo {
  --color-rubro: #38744b;
}

/* Hover: anticipa el color sin ocupar el estado activo */
.selector-rubros button:hover {
  border-color: var(--color-rubro);
  background: color-mix(in srgb, var(--color-rubro) 12%, white);
  color: var(--color-rubro);
}

/* Seleccionado */
.selector-rubros button.activo {
  background: var(--color-rubro);
  border-color: var(--color-rubro);
  color: white;
  box-shadow: 0 4px 8px
    color-mix(in srgb, var(--color-rubro) 30%, transparent);
}

/* Iconos */
.selector-rubros button i {
  color: inherit;
}

/* Responsive */
@media (max-width: 768px) {
  .selector-rubros button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* --------------------------------------------
   CONTENEDOR HTMX (donde se inyectan los partials)
   -------------------------------------------- */
#contenido-rubro {
  min-height: 300px;
  transition: opacity 0.3s ease;
}

#contenido-rubro.htmx-request {
  opacity: 0.5;
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */
@media (max-width: 768px) {
  .franja-gris {
    padding: 1.5rem 0.75rem;
  }

  .selector-rubros button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .beneficio-card {
    padding: 1rem 0.75rem;
  }
}