/* ==========================================================================
   Diálogo modal — el bloc de notas de una pantalla
   ========================================================================== */
.dialogo {
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  color: var(--color-text);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialogo-caja {
  display: flex;
  flex-direction: column;
  gap: var(--size-sm);
  width: min(520px, calc(100vw - 2 * var(--size)));
  padding: var(--size-lg);
}
.dialogo-caja textarea {
  min-height: 160px;
  resize: vertical;
  font: inherit;
}

/* El diálogo no puede pasar de la ventana: el de un gasto son ocho campos y en
   un teléfono acostado no entra. El scroll es suyo y no de la página, que
   detrás está quieta. */
.dialogo {
  max-height: calc(100dvh - 2 * var(--size));
  overflow-y: auto;
}

/* Un formulario dentro del diálogo mantiene su grilla: `.dialogo-caja` sola lo
   pondría en flex y el botón de guardar se estiraría de lado a lado. El ancho
   lo sigue poniendo la caja, no el `max-width` del formulario. */
.dialogo-caja.form-tx {
  display: grid;
  max-width: none;
}

/* De qué cuenta habla el formulario. Debajo del título y en secundario: es lo
   que el diálogo ya sabe y no se puede cambiar desde acá —el que se equivocó de
   fila cierra y vuelve a entrar. */
.dialogo-cuenta {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* El error de guardar, dentro del diálogo. El aviso de siempre va fijo sobre la
   página, y la página queda debajo del modal: ahí no se veía. Va pegado a los
   botones, que es donde se estaba mirando al pulsar. */
.dialogo-error {
  margin: 0;
  padding: var(--size-xs) var(--size-sm);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius);
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
}

@media (max-width: 860px) {
  /* El lateral pasa a ser un cajón que se abre con el ☰ de la barra de arriba
     (inicializarMenuMovil) y se cierra con el fondo o al elegir sección. */
  #app { grid-template-columns: minmax(0, 1fr); }
  .barra-movil { display: flex; }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--ancho-lateral);
    height: 100dvh;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--dur-mid) var(--ease);
  }
  #app.menu-abierto .lateral { transform: none; }
  #app.menu-abierto .menu-fondo { display: block; }
  .contenido { padding: 16px 16px 40px; }

  /* Una fila de movimiento son cuatro columnas y 44px reservados para el aspa:
     en un teléfono eso deja a la descripción sin sitio. Baja a su propia línea
     y fecha y monto se reparten la de abajo, que es como se leen igual. */
  /* El panel del cliente se acuesta: el catálogo pasa a ir debajo de lo que el
     cliente ya tiene, y la línea que las separaba deja de ser vertical. */
  .panel-cliente { grid-template-columns: minmax(0, 1fr); }
  .pc-catalogo {
    padding-top: var(--size-xs);
    padding-left: 0;
    border-top: 1px solid var(--color-border-secondary);
    border-left: none;
  }

  /* Dos botones de texto largo no entran en una fila de teléfono. */
  .form-acciones { flex-direction: column; }

  /* Las tres acciones de la cabecera del detalle: apiladas en una columna
     ocuparían media pantalla antes de la primera cifra, así que sueltan el
     rótulo y se quedan con el icono, como en la tabla. */
  .acciones-banco-rotuladas .accion-banco > span { display: none; }
  .acciones-banco-rotuladas .accion-banco { padding: var(--size-xxs); }

  .lista > li.tx,
  .tx-grupo-lista > li.tx,
  .tx-grupo summary.tx { flex-wrap: wrap; row-gap: var(--size-xxs); }
  .tx-desc { flex-basis: 100%; }
  .tx-monto { margin-left: auto; }

  /* Gasto, ingreso y transferencia se cargan desde el teléfono —parado en la
     caja, con una mano—, así que sus controles dejan de ser los de un panel de
     escritorio: 44px es lo que se acierta con el pulgar sin mirar, y 16px es el
     tamaño por debajo del cual Safari hace zoom al enfocar un campo y deja el
     formulario corrido de lado hasta que uno lo devuelve a mano. El monto ya
     pasa de los dos. */
  .dialogo-banco .dlg-texto,
  .dialogo-banco .dlg-cargo,
  .dialogo-banco .tf-hacia select { min-height: 44px; }
  .dialogo-banco input:not([type='radio']):not(.dlg-monto input),
  .dialogo-banco select,
  .dialogo-banco textarea { font-size: 16px; }
  .dialogo-banco .dlg-botones button { min-height: 44px; }

  /* Los saldos bajan debajo del formulario: en 375px no hay sitio para dos
     columnas, y pegarlos arriba empujaría el primer paso fuera de la pantalla. */
  .e2-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .e2-lateral { position: static; }
  /* Una tarjeta por línea: partidas en dos, ni el monto ni el nombre del banco
     entran, y son los dos datos que hay que leer sin equivocarse. */
  .e2-columnas { grid-template-columns: minmax(0, 1fr); }

  /* La tabla de bancos no se parte en dos: sus cuatro columnas son una
     comparación y separarlas la deshace. Se aprieta el relleno y, si aun así no
     entra, `.tabla-envoltura` la desliza en horizontal dentro de su propia caja
     —que es lo que evita que se desplace la pantalla entera. */
  .tabla th,
  .tabla td { padding: var(--size-xs) var(--size-sm); }
  .banco-actual { width: 96px; }
}