/* ==========================================================================
   Widget "Grupo de circuitos" — contenedor PROPIO, independiente del de paquetes.
   El fondo real lo pone un style inline por-grupo (circuits.groups.bg_css: color,
   degradé o CSS libre). Acá va el radius/padding del contenedor y el header.
   ========================================================================== */
.circuits-group {
    position: relative;
    margin-bottom: 0.5rem;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.5rem) 1rem;
    /* Radius propio de circuitos (más marcado que el de paquetes). */
    border-radius: 28px;
    overflow: hidden;
    /* Fallback si el grupo no define fondo (el inline lo pisa). */
    background: linear-gradient(180deg,
        rgba(16, 26, 51, 0.06) 0%,
        rgba(16, 26, 51, 0.02) 40%,
        rgba(16, 26, 51, 0) 75%);
}

/* ----- Header ----- */
.circuits-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.circuits-group__title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.circuits-group__title {
    position: relative;
    font-size: clamp(1.35rem, 2.8vw, 1.8rem);
    font-weight: 800;
    color: var(--pm-group-title, #16213e);
    margin: 0;
    padding-left: 15px;
    letter-spacing: -0.3px;
}
.circuits-group__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.1em;
    border-radius: 999px;
    /* Acento propio de circuitos (ámbar → dorado). */
    background: linear-gradient(180deg, #f5b301, #e08a00);
}
.circuits-group__subtitle {
    font-size: 0.92rem;
    color: var(--pm-group-subtitle, #6b7280);
    margin: 0;
    padding-left: 15px;
}