/* ============================================================================
   ajustes.css  -  Que Ajustes use el ancho de la pantalla
   ----------------------------------------------------------------------------
   El problema: .settings-wrapper es un flex en columna y .settings-card lleva
   max-width:560px (style.css:1565). En un monitor de 1900 px eso deja una
   columna de 700 a la izquierda y dos tercios de pantalla en blanco, con los
   ajustes repartidos en un scroll que no hace falta.

   La solucion no es estirar las tarjetas: una descripcion de 1.500 px de ancho
   no hay quien la lea. Lo que se reparte son las SECCIONES, en una rejilla de
   columnas de 420 px que el navegador cuenta solas segun lo que haya.

   Se carga DESPUES de style.css y de vidrio.css. Quitar el <link> devuelve
   Ajustes exactamente a como estaba.
   ========================================================================== */

/* El corte: por debajo de 980 px de hueco util no caben dos columnas de 420
   mas el separador, asi que hasta ahi se queda la columna unica de siempre.
   En movil ni se entera. */
@media (min-width: 1000px) {

  #view-settings .settings-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-content: start;   /* las filas se apilan arriba, no se reparten */
    align-items: start;     /* cada seccion con su alto, sin estirarse */
    gap: 26px 24px;
    /* Tope para que en un monitor ancho no salgan cinco columnas flacas */
    max-width: 1560px;
    padding: 32px 32px 48px;
  }

  /* El titulo de la pantalla manda sobre toda la rejilla */
  #view-settings .settings-wrapper > .dash-header {
    grid-column: 1 / -1;
    margin-bottom: -6px;
  }

  /* Ya no hace falta: el ancho lo pone la columna de la rejilla */
  #view-settings .settings-card { max-width: none; }

  /* Cada tarjeta con su alto. Se probo igualarlas por fila y queda peor:
     "Tema" es una sola linea y al estirarla hasta el alto de "Asistente IA"
     se convierte en una caja de 200 px con un hueco vacio dentro. */

  /* Sesion y Negocio: el boton no tiene por que ocupar toda la tarjeta */
  #view-settings .settings-save-btn,
  #view-settings .settings-logout-btn { align-self: flex-start; }
}

/* A partir de aqui caben tres columnas y las descripciones empiezan a quedar
   cortas para lo ancha que es la tarjeta: se sube el minimo. */
@media (min-width: 1500px) {
  #view-settings .settings-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  }
}