.custom-fieldset {
  border: 1px solid #e6e9eb;
  border-radius: 8px;
  padding: 18px 22px 14px 22px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  box-shadow: 0 1px 4px rgba(16, 24, 32, 0.04);
  position: relative;
}

/* Legend en estilo 'pill' que sobresale levemente del borde */
.custom-fieldset > legend {
  display: inline-block;
  padding: 6px 12px;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #233b2b;
  background: #f4f6fa;
  border-radius: 5px;
  margin-bottom: 6px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  border: 1px solid rgba(35, 59, 43, 0.06);
}

/* Para destacar legend con fondo de color */
.custom-fieldset.legend-accent > legend {
  background: var(--color-principal, #1d6f42);
  color: #fff;
  box-shadow: 0 2px 6px rgba(29, 111, 66, 0.08);
}

.custom-fieldset .form-group {
  margin-bottom: 12px;
}

/* Breakpoints compatibles con Bootstrap 3
   xs: <768px
   sm: >=768px and <992px
   md: >=992px and <1200px
   lg: >=1200px
*/

/* Extra small (xs) - teléfonos (por debajo de 768px) */
@media (max-width: 767px) {
  .custom-fieldset {
    padding: 12px;
  }
  .custom-fieldset > legend {
    font-size: 14px;
    padding: 6px 10px;
  }
}

/* Small (sm) - tablets (>=768px and <992px) */
@media (min-width: 768px) and (max-width: 991px) {
  .custom-fieldset {
    padding: 14px 18px;
  }
  .custom-fieldset > legend {
    font-size: 1.4rem;
    padding: 7px 12px;
  }
}

/* Medium (md) - laptops pequeños (>=992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .custom-fieldset {
    padding: 16px 20px;
  }
  .custom-fieldset > legend {
    font-size: 1.6rem;
    padding: 8px 12px;
  }
}

/* Large (lg) - escritorios grandes (>=1200px) */
@media (min-width: 1200px) {
  .custom-fieldset {
    padding: 18px 22px 14px 22px; /* valor por defecto */
  }
  .custom-fieldset > legend {
    font-size: 1.8rem; /* valor por defecto */
    padding: 9px 12px;
  }
}