/* =====================================================================
   APP-AGUAS — vista de escritorio.

   Se enlaza desde cabecera.php con media="(min-width: 860px)", así que:

     - en un teléfono el navegador la descarga con prioridad baja y NO
       bloquea el pintado. La app de terreno se usa con señal mala y hasta
       ahora el repartidor pagaba 540 líneas que nunca le aplicaban;
     - en un monitor sí es bloqueante, así que no hay parpadeo;
     - como carga después de app.css, gana en cascada sola. Por eso acá
       adentro no hay un solo `!important` ni un `@media` envolvente.

   Quién es el usuario de esta vista: la oficina. El repartidor entra por
   el teléfono y esa vista no la toca nadie desde acá. Acá se toma pedidos,
   se revisa el consolidado del día y se mantiene la cartera, sentado,
   con mouse y con la pantalla llena de datos a la vez.

   Solo hay dos @media acá: el riel de la barra lateral (bajo 1100px) y el
   colapso de las pantallas de dos columnas (bajo 1000px).
   ===================================================================== */

/* --- Lo que el teléfono trae y acá sobra ----------------------------- */

.appbar--mobile,
.tabbar,
.pie-fijo,
.solo-movil { display: none; }

/* `.solo-escritorio` no necesita regla acá: app.css lo apaga solo por debajo
   de 860px, así que a este lado conserva el display de su propio componente. */


/* --- Armazón ---------------------------------------------------------
   Dos columnas: la lateral con ancho de token, el contenido con el resto.
   La lateral es `sticky` y no `fixed` a propósito: con sticky la columna
   sigue siendo una celda del grid, así que el contenido nunca queda por
   debajo de ella y no hace falta compensar con márgenes.               */

body {
    background: var(--fondo-escritorio);
    padding-bottom: 0;
}
/* Estas dos las reservaba el teléfono para la tabbar y para las barras
   flotantes; acá no existe ninguna de las dos. */
body.con-pie-fijo,
body.con-accion { padding-bottom: 0; }

.armazon {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    align-items: start;
    min-height: 100dvh;
}
/* Sin lateral —el login— el contenido ocupa la única columna. Si no, la
   primera celda seguiría midiendo el ancho de una barra que no está. */
.armazon--solo { grid-template-columns: minmax(0, 1fr); }

.armazon__contenido {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main {
    flex: 1;
    width: 100%;
    max-width: var(--medida-ancha);
    margin-inline: auto;
    padding: var(--e-5) var(--e-6) 72px;
}


/* --- Barra lateral ---------------------------------------------------
   Once destinos. La barra horizontal que había antes aguantaba ocho y
   solo a costa de ir soltando información a medida que la ventana se
   angostaba: a 1150px se perdía el nombre de la marca y el del usuario, y
   a 1000px los iconos. Una lateral no tiene ese techo —hacia abajo el
   espacio sobra—, y por eso vuelven a la navegación destinos que estaban
   escondidos en Ajustes: Clientes y Seguimiento, que cualquier repartidor
   puede usar, y Equipo, que no estaba en ninguna barra.                */

.lateral {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--lateral-fondo);
    color: var(--lateral-texto);
}

.lateral__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--e-4);
    height: 60px;
    flex: none;
    color: var(--lateral-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--lateral-separador);
}
.lateral__logo { border-radius: 7px; flex: none; }
.lateral__nombre {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.lateral__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Explícito: con solo `overflow-y`, el eje x se vuelve `auto` por su
       cuenta y cualquier cosa que asome un píxel dibuja una barra abajo. */
    overflow-x: hidden;
    padding: var(--e-3) 0;
}

.lateral__grupo {
    margin: var(--e-4) 0 var(--e-1);
    padding: 0 var(--e-4);
    font-size: var(--t-mini);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lateral-texto-2);
}
.lateral__grupo:first-child { margin-top: 0; }

.lateral__destino {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 1px var(--e-2);
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 550;
    color: var(--lateral-texto-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.lateral__destino .ico { flex: none; }
.lateral__destino:hover {
    background: var(--lateral-hover);
    color: var(--lateral-texto);
}
/* El destino donde estás parado: fondo, peso y un filo del color de acento
   sobre el canto izquierdo. Con la barra horizontal esto era solo un fondo
   más claro y a 13px se perdía. */
.lateral__destino.activo {
    background: var(--lateral-activo);
    color: var(--lateral-texto);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--lateral-acento);
}

/* Dos líneas: quién está dentro arriba, y sus dos acciones debajo. En una
   sola línea, un nombre largo compartía los 236px con dos iconos y terminaba
   cortado con puntos suspensivos. */
.lateral__pie {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-2);
    padding: var(--e-3);
    border-top: 1px solid var(--lateral-separador);
}
.lateral__usuario {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 var(--e-1);
    line-height: 1.2;
}
.lateral__acciones {
    display: flex;
    gap: var(--e-1);
}
/* Los dos se reparten el ancho: así el área para hacer clic es la de un
   destino de la lista y no la de un icono suelto. */
.lateral__acciones .lateral__boton { flex: 1; }
.lateral__usuario-nombre {
    font-size: var(--t-chico);
    font-weight: 600;
    color: var(--lateral-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lateral__usuario-rol {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--lateral-acento);
}
.lateral__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 34px;
    padding: 0 var(--e-2);
    border-radius: 8px;
    font-size: var(--t-chico);
    font-weight: 550;
    color: var(--lateral-texto-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.lateral__boton:hover {
    background: var(--lateral-hover);
    color: var(--lateral-texto);
}
.lateral__boton.activo {
    background: var(--lateral-activo);
    color: var(--lateral-texto);
}
.lateral__boton--salir:hover {
    background: rgba(179, 38, 30, .35);
    color: var(--rojo-tenue);
}

/* Rótulo al pasar el mouse. Solo se ve en el riel, donde el rótulo de
   verdad no está; se declara acá para no repetir el bloque adentro del
   media. */
/* `display: none` y no `visibility: hidden`: un elemento invisible sigue
   ocupando su lugar, y estos globos cuelgan a `left: calc(100% + 10px)`. Con
   once de ellos el ancho a recorrer del nav pasaba de 236 a 380px y la barra
   lateral se dibujaba con un scroll horizontal propio. Solo existen en el
   riel, que es donde el rótulo de verdad no está. */
.lateral__globo {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--texto);
    color: #fff;
    font-size: var(--t-chico);
    font-weight: 550;
    white-space: nowrap;
    pointer-events: none;
    z-index: 70;
}


/* --- Riel (860–1099 px) ----------------------------------------------
   Notebook chico y tablet apaisada. La lateral se encoge a los iconos y
   el rótulo pasa a un globo al pasar el mouse. No se suelta ni un destino:
   con once, esconder alguno es esconder una parte de la app.

   El nav deja de tener scroll propio en este tramo porque un contenedor
   con overflow recorta el globo, y once destinos de 40px entran de sobra
   en el alto de cualquier notebook.                                     */

@media (max-width: 1099.98px) {
    :root { --ancho-lateral: 68px; }

    .lateral { overflow: visible; }
    .lateral__nav { overflow: visible; }

    .lateral__nombre,
    .lateral__usuario { display: none; }

    .lateral__marca { justify-content: center; padding: 0; }

    /* El rótulo del grupo se va, pero la separación entre grupos tiene que
       quedar: es lo que distingue "Cartera" de "Administración" cuando solo
       quedan iconos. */
    .lateral__grupo {
        height: 1px;
        margin: var(--e-3) var(--e-3);
        padding: 0;
        overflow: hidden;
        text-indent: -999px;
        background: var(--lateral-separador);
    }
    .lateral__grupo:first-child { margin-top: 0; height: 0; }

    .lateral__destino {
        justify-content: center;
        margin: 2px var(--e-3);
        padding: 10px 0;
    }
    .lateral__rotulo { display: none; }
    .lateral__destino:hover .lateral__globo { display: block; }

    /* 68px no dan para dos botones al lado; se apilan y quedan solo iconos. */
    .lateral__pie { padding: var(--e-2); }
    .lateral__acciones { flex-direction: column; }
    .lateral__boton { padding: 0; }

    main { padding-inline: var(--e-5); }
}


/* --- Encabezado de pantalla ------------------------------------------
   En el teléfono el título de la pantalla lo lleva la barra superior azul,
   que acá no se dibuja. Sin este bloque, un administrador ve tablas y
   formularios sin ningún rótulo que le diga dónde está parado.          */

.pagina-encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin-bottom: var(--e-5);
    padding-bottom: var(--e-4);
    border-bottom: 1px solid var(--separador);
}
.pagina-encabezado__texto { min-width: 0; }
.pagina-encabezado h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texto);
}
.pagina-encabezado p {
    margin: var(--e-1) 0 0;
    font-size: var(--t-medio);
    color: var(--texto-2);
}
/* "Volver" vive acá y no en la lateral: pertenece a la pantalla de la que
   se vuelve, no a la navegación. */
.pagina-encabezado__volver {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    margin-bottom: 6px;
    font-size: var(--t-chico);
    font-weight: 600;
    color: var(--texto-2);
    text-decoration: none;
}
.pagina-encabezado__volver:hover { color: var(--azul); }
.pagina-encabezado__accion {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}


/* --- Componentes -----------------------------------------------------
   Todo lo de acá abajo es el mismo componente del teléfono con la densidad
   y las proporciones de un monitor. Nada se redibuja de cero.           */

/* Tarjetas y listas: en el teléfono flotan sobre un fondo gris sin borde
   porque ocupan el ancho completo y no hace falta delimitarlas. Acá,
   sueltas en una superficie ancha, necesitan canto y una sombra mínima. */
.tarjeta,
.lista {
    border: 1px solid var(--separador);
    box-shadow: var(--sombra-1);
}

.fila { min-height: 54px; }
.fila:hover { background: var(--superficie-hover); }

/* La fila que en el teléfono apila sus acciones debajo lo hace por falta de
   ancho: con 390px, "Editar ficha" y "Archivar" no entran al lado del nombre
   y la dirección. Acá sí entran, y desapilarlas le devuelve a la lista de
   clientes casi la mitad de su alto: cuatro fichas ocupaban 600px. */
.fila--apilada { flex-wrap: nowrap; }
.fila--apilada .fila__cuerpo { flex: 1 1 auto; min-width: 0; }
.fila--apilada .fila__acciones {
    width: auto;
    flex: none;
    margin-top: 0;
    align-items: center;
}
/* Los botones de subir y bajar el orden van envueltos cada uno en su propio
   <form>. Sin esto el form cede ancho como cualquier hijo de un flex y el
   botón de 48px se aplasta hasta quedar una pastilla. */
.fila__acciones form { flex: none; }

/* Cabecera de columnas para las listas que son tablas de verdad
   (consolidado, equipo, pedidos): sin ella hay que adivinar qué es cada
   número de la fila. En el teléfono esas listas no la llevan porque la
   fila se lee como ficha, no como renglón de tabla. */
.lista__cabecera {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: 10px 14px;
    background: var(--superficie-hundida);
    border-bottom: 1px solid var(--separador);
    font-size: var(--t-mini);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-2);
}

/* Botones: en el teléfono ocupan el ancho de la pantalla porque la
   pantalla mide 390px. Estirados a mil y pico se ven como una puerta. */
.boton {
    width: auto;
    min-width: 200px;
    cursor: pointer;
}
/* Los que sí ocupan su contenedor entero, porque el ancho completo es su
   forma y no una herencia del teléfono. */
.accion .boton,
.hoja .boton,
.login-form .boton,
.boton--estirado { width: 100%; }
.boton--icono,
.boton--chico,
.boton--compacto,
.fila__acciones .boton { min-width: 0; }
.fila__acciones .boton:not(.boton--icono) { flex: 0 0 auto; width: auto; }

/* Medida de lectura. Un rótulo "Nombre" sobre una caja de un metro de
   ancho no se lee: el ojo pierde la relación entre los dos extremos. Las
   listas y la grilla de artículos quedan fuera —son tablas y cuadrículas,
   y el ancho les sirve. */
.campo,
form > label,
form > .pista,
textarea,
.segmentado,
.selector-fecha,
.buscador,
.vacio { max-width: var(--medida-formulario); }

.grilla,
.lista { max-width: none; }
/* El menú de Ajustes es una lista de destinos, no de datos, así que le toca
   la medida de lectura. Va con las dos clases porque `.lista` está declarada
   más abajo y con una sola le ganaría por orden. */
.lista.menu-ajustes { max-width: var(--medida-formulario); }

/* Las tarjetas con totales o con campos adentro se acotan por la misma
   razón: con el rótulo a la izquierda y el monto a la derecha de una caja
   de 1.240px, hay que seguir la línea con el dedo. */
.tarjeta:has(.totales),
.tarjeta:has(.campo),
.tarjeta:has(.segmentado) { max-width: var(--medida-formulario); }

/* Escotilla para cuando una tarjeta ancha contiene un campo. */
.ancho-completo { max-width: none; }

/* Los cuatro medios de pago van en dos filas en el teléfono porque no
   caben; en un monitor caben de sobra. */
.segmentado--dos-filas {
    grid-auto-flow: column;
    grid-template-columns: repeat(4, 1fr);
}

/* Campos: alto de dedo en el teléfono, alto de mouse acá. */
input, select, textarea { font-size: var(--t-medio); }

/* Los formularios se quedan en una columna. Poner los campos cortos de a
   pares obligaba a envolver cada rótulo con su campo, y el espaciado de los
   rótulos en el teléfono se apoya en `.campo + label` / `.pista + label`,
   que no cruzan un div: la ganancia era estética y el costo, la vista que
   de verdad se usa. Con la medida de lectura ya se leen bien.

   Resumen del día y medios de pago se leen juntos: uno explica de dónde
   sale el número del otro. */
.panel-totales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--e-5);
    align-items: start;
}
.panel-totales > div > h2:first-child { margin-top: 0; }


/* --- Inicio ----------------------------------------------------------
   Dos columnas: a la izquierda el estado del día —cuánto va vendido, qué
   hay asignado, las dos acciones de arranque—, y a la derecha lo que se
   mira todo el rato, que es la cartera.

   Los envoltorios no usan `display: contents` en el teléfono. Esa era la
   solución anterior y le costó a la pantalla su peor bug: con `contents`
   los hijos se vuelven celdas sueltas del grid, y como el media query de
   escritorio nunca le devolvía un display propio a la columna principal,
   la cartera entera caía en la columna de 340px con el 60% derecho de la
   pantalla en blanco. Acá son cajas normales, y el orden del teléfono es
   sencillamente el orden del documento.                                 */

.inicio-grid {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: var(--e-5);
    align-items: start;
}
.inicio-grid__lateral {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    position: sticky;
    top: var(--e-5);
}
.inicio-grid__lateral > * { margin-bottom: 0; }
.inicio-grid__principal { min-width: 0; }

/* La medida de lectura de las tarjetas con totales la fija su columna. */
.inicio-grid .tarjeta { max-width: none; }

.inicio-acciones {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}

.cartera-barra {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}
.cartera-barra .buscador { flex: 1; margin-bottom: 0; }
/* `flex: none` porque si no el botón cede ancho antes que el campo y el
   rótulo se parte en dos líneas. Lo que tiene que ceder es el buscador. */
.cartera-barra .boton { flex: none; white-space: nowrap; min-height: 48px; }

.cartera-titular {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-4);
    margin: 0 var(--e-1) var(--e-2);
}
.cartera-titular h2,
.cartera-titular .h2-nota { margin: 0; }


/* --- Registro de entrega ---------------------------------------------
   Es la pantalla más usada de la app y en un monitor era una columna de
   dos metros: había que bajar hasta el final para ver el total.

   A la izquierda lo que se elige —el pedido que dejó la oficina, quién es
   el cliente, la grilla de artículos y el carrito—; a la derecha lo que se
   decide y se confirma, con el total siempre a la vista. El corte está
   puesto para que en el teléfono el orden del documento siga siendo el de
   antes, así que esa vista no se entera de nada.                        */

.entrega-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: var(--e-5);
    align-items: start;
}
.entrega-grid__principal { min-width: 0; }
.entrega-grid__lateral {
    min-width: 0;
    position: sticky;
    top: var(--e-5);
}
.entrega-grid__lateral > h2:first-child { margin-top: 0; }
/* Dentro de su columna cada bloque ya está acotado: no necesita la medida
   de lectura general, que acá lo dejaría más angosto todavía. */
.entrega-grid .segmentado,
.entrega-grid textarea,
.entrega-grid .accion { max-width: none; }

/* Los cuatro medios de pago entran en una fila, pero dentro de una columna
   de 400px "Transferencia" no cabe: en esta pantalla se quedan en dos. */
.entrega-grid .segmentado--dos-filas {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
}

.boton--repetir { min-height: 68px; }


/* --- Barra de acción -------------------------------------------------
   Era el único componente fijo que sobrevivía en escritorio, y con la
   barra superior a todo el ancho no se notaba. Con una lateral se ve el
   problema entero: `position: fixed` la anclaba al viewport, así que
   cruzaba por debajo de la navegación. Además su reserva de espacio
   (`body.con-accion`) quedaba anulada, y el final del formulario quedaba
   tapado por ella.

   Acá es `sticky` dentro de la columna de contenido: se queda al pie
   mientras haya formulario debajo, se detiene donde el formulario termina,
   y nunca invade la lateral.                                            */

.accion {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    z-index: 20;
    margin-top: var(--e-5);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--separador);
    border-radius: var(--r-tarjeta);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
    max-width: var(--medida-formulario);
}
.accion__total b { font-size: 26px; }


/* --- Acceso ----------------------------------------------------------
   Dos mitades a pantalla completa: a la izquierda qué es esto, a la derecha
   el formulario. Es la única pantalla que ve alguien que todavía no es
   cliente —una demo empieza acá—, así que tiene que sostener la mirada.

   La versión anterior tenía trece colores propios que no estaban en la
   paleta, un degradado de cuatro paradas, un halo radial y cuatro tarjetas
   de vidrio con `backdrop-filter`. Acá el azul es el azul de la marca, sin
   degradado, y los argumentos son texto con su icono.                    */

body.pagina-login {
    background: var(--azul);
    min-height: 100dvh;
}
body.pagina-login .appbar { display: none; }
body.pagina-login .armazon,
body.pagina-login .armazon__contenido { display: block; min-height: 100dvh; }
body.pagina-login main {
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
}

.login-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 100dvh;
}

.login-marco {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e-6);
    padding: clamp(36px, 4.5vw, 60px);
    background: var(--azul);
    color: var(--lateral-texto);
}
.login-marco__marca {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    color: var(--lateral-texto);
    text-decoration: none;
}
.login-marco__logo { border-radius: 10px; flex: none; }
.login-marco__nombre {
    display: block;
    font-size: 18px; font-weight: 800; letter-spacing: 2px;
}
.login-marco__bajada {
    display: block;
    font-size: var(--t-chico); color: var(--lateral-texto-2);
}
.login-marco__cuerpo { max-width: 30rem; }
.login-marco__titulo {
    margin: 0 0 var(--e-3);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-transform: none;
}
.login-marco__texto {
    margin: 0 0 var(--e-6);
    font-size: var(--t-medio);
    line-height: 1.5;
    color: var(--lateral-texto-2);
}

.login-puntos {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: var(--e-4);
}
.login-punto { display: flex; align-items: flex-start; gap: var(--e-3); }
.login-punto__icono {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 8px;
    background: var(--lateral-activo);
    color: var(--lateral-acento);
}
.login-punto strong {
    display: block;
    font-size: var(--t-medio); font-weight: 650;
}
.login-punto span span,
.login-punto > span > span {
    display: block;
    font-size: var(--t-chico); line-height: 1.4;
    color: var(--lateral-texto-2);
}
.login-marco__pie {
    margin: 0;
    padding-top: var(--e-4);
    border-top: 1px solid var(--lateral-separador);
    font-size: var(--t-chico);
    color: var(--lateral-texto-2);
}
.login-marco__pie a { color: var(--lateral-acento); }

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 56px);
    background: var(--fondo-escritorio);
}
.login-caja {
    width: 100%;
    max-width: 400px;
    padding: clamp(30px, 3.4vw, 40px);
    border-radius: var(--r-tarjeta);
    background: var(--superficie);
    box-shadow: var(--sombra-2);
}
.login-encabezado { margin-bottom: var(--e-5); }
.login-encabezado__titulo {
    margin: 0 0 var(--e-1);
    font-size: 23px; font-weight: 700; letter-spacing: -.02em;
    color: var(--texto);
    text-transform: none;
}
.login-encabezado__subtitulo {
    margin: 0;
    font-size: var(--t-chico); color: var(--texto-2);
}
.boton--login { width: 100%; }


/* --- Hoja de confirmación --------------------------------------------
   En el teléfono sube desde abajo, que es el gesto correcto ahí. Con
   mouse, un cuadro pegado al borde inferior de un monitor de 27" queda
   lejísimos de donde está la vista. Acá es un cuadro centrado.          */

dialog.hoja {
    margin: auto;
    max-width: 420px;
    border-radius: var(--r-tarjeta);
    animation: none;
}
dialog.hoja::backdrop { background: rgba(16, 22, 28, .45); }
.hoja__asa { display: none; }
.hoja__cuerpo { padding-top: var(--e-5); }

/* El aviso flotante tenía su posición calculada desde la tabbar, que acá
   no existe: se apoyaba en el aire. */
.brindis {
    left: auto;
    right: var(--e-5);
    bottom: var(--e-5);
    margin: 0;
}


/* --- Cuando el ancho no da para dos columnas ---------------------------
   Que la ventana sea "de escritorio" no significa que el contenido tenga
   ancho de escritorio: con el riel puesto, a 870px a la columna de la
   cartera le quedan 478px y el buscador sale cortado y los rótulos
   partidos en dos. Debajo de 1000px las pantallas de dos columnas vuelven
   a una sola, que es lo que el ancho aguanta.                            */

@media (max-width: 999.98px) {
    .inicio-grid,
    .entrega-grid { grid-template-columns: minmax(0, 1fr); }
    /* Sin segunda columna al lado, quedarse pegado arriba no aporta nada:
       la caja se quedaría flotando sobre el contenido que le sigue. */
    .inicio-grid__lateral,
    .entrega-grid__lateral { position: static; }
    .entrega-grid__lateral > h2:first-child { margin-top: 22px; }
}