.rectangle {
    max-height: 70vh;
    min-width: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px;
    padding-right: 40px; /* Espacio para el scrollbar */
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px var(--color-shadow);
    margin: 20px;
    margin-left: 0px;
    margin-right: 0px;
  }

/* Fondo del scrollbar (track) */
.rectangle::-webkit-scrollbar {
  width: 4px; /* Ancho del scrollbar */
}

/* Color del fondo del track */
.rectangle::-webkit-scrollbar-track {
  background-color: none; /* Puedes ajustar este si quieres contraste */
  margin-block: 20px;
  border-radius: 10px;
}

/* Scroll (thumb) – lo que se arrastra */
.rectangle::-webkit-scrollbar-thumb {
  background-color: var(--color-primary); /* Tu color deseado */
  border-radius: 10px; /* Bordes redondeados */
}

@media (max-width: 1000px) {
  .row-of-rectangles {
    flex-direction: column;
    align-items: center; /* opcional: centra los rectángulos */
  }

  .row-of-rectangles .rectangle {
    width: 90% !important; /* Opcional: para que no ocupen todo el ancho */
    margin-bottom: 20px; /* espacio entre rectángulos */
  }
}



.white {
    background: var(--color-bg-contrast);
}

.pink {
    background: var(--color-primary-light);
}
  
.row-of-rectangles {
    display: flex;
    width: 100%;
  }


/* ----------   Tarjetas y contenedor  ---------------- */
.settings-view .row-of-rectangles{
  display:flex;
  flex-wrap:wrap;
  gap:20px;                 /* espacio entre tarjetas           */
}

.settings-view .rectangle.center-content{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centra vertical                  */
  align-items:center;       /* centra horizontal                */
  text-align:center;
}

.settings-view .rectangle.half{
  flex:1 1 50%;             /* 50 % de ancho, permite wrap      */
  max-width:48%;
  height:90vh;              /* tope sólo si hay espacio         */
  max-height:90vh;
  box-sizing:border-box;
  min-width: 400px; /* Ancho mínimo para tarjetas pequeñas */
}

/* ► Cuando la ventana es baja, deja crecer la tarjeta  */
@media (max-height:800px){
  .settings-view .rectangle.half{
    height:auto;
    max-height:none;
  }
}

/* ► En móvil  (≤ 992 px) ocupa todo el ancho           */
@media (max-width:992px){
  .settings-view .rectangle.half{
    flex:1 1 100%;
    max-width:100%;
    height:auto;
    max-height:none;
  }
}

/* ----------   Botones predefinidos  ------------------ */
.settings-view .preset-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}

.settings-view .preset-wrapper > .custom-btn{
  flex:1 1 140px;           /* ~140 px base, se encoge si hace falta */
  max-width:200px;
}