/* La pantalla Cargar en la PC, propia de la web.
 *
 * La plantilla pone «Ingreso del mes» y «Gastos fijos» lado a lado, en dos
 * columnas iguales, y a los gastos fijos no les entran sus seis campos en un
 * renglón. Acá van uno abajo del otro y a todo el ancho: arriba el ingreso,
 * en una franja baja (el título y sus tres campos en el mismo renglón), y
 * abajo los gastos fijos, con todos sus campos en una sola fila.
 *
 * cargar.html es copia de la app de escritorio y no se edita: por eso va
 * acá. En el celular ya estaban apilados (movil.css), así que esto es solo
 * para pantallas anchas. */

@media (min-width: 701px) {
  body[data-pantalla="carga.cargar"] .grid.g2 {
    grid-template-columns: 1fr;
  }

  /* ── Ingreso del mes: la franja chica ── */
  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child > h2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  body[data-pantalla="carga.cargar"] #i-concepto {
    flex: 1 1 120px;
    max-width: 260px;
    min-width: 120px !important;
  }
}

/* Desde que entra, el título a la izquierda y los tres campos a la derecha,
   en el mismo renglón; la ayuda y la tabla de ingresos, abajo a todo el
   ancho. Más angosto, los campos bajan abajo del título. */
@media (min-width: 1100px) {
  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 24px;
  }

  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child > h2 {
    margin: 0;
  }

  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child > .filtros {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child > p,
  body[data-pantalla="carga.cargar"] .grid.g2 > .panel:first-child > .tabla-scroll {
    grid-column: 1 / -1;
    margin-top: 0 !important;
  }
}

@media (min-width: 701px) {

  /* ── Gastos fijos: el nombre se estira y los campos van en una fila ── */
  body[data-pantalla="carga.cargar"] #gf-nombre {
    flex: 1 1 140px;
  }

  /* un poco más angostos que en la plantilla, para que la fila entre entera
     desde una pantalla de 1440 */
  body[data-pantalla="carga.cargar"] #gf-monto { width: 110px !important; }
  body[data-pantalla="carga.cargar"] #gf-cat { width: 165px; }
  body[data-pantalla="carga.cargar"] #gf-dia { width: 70px !important; }
  body[data-pantalla="carga.cargar"] #gf-desde,
  body[data-pantalla="carga.cargar"] #gf-hasta { width: 155px; }
}