` mide justo la ventana, el resumen de arriba se queda fijo por ser un hijo que no crece, y lo que sobra se lo reparten los dos paneles — cada uno con su cabecera quieta y su lista desplazándose dentro. Sin una línea de JavaScript. ⚠️ Sólo en pantalla ancha. En móvil manda la página, como en el resto del panel. */ @media (min-width: 900px) { .hoja-alta { height: calc(100vh - var(--barra-alto)); /* ⛔ Y EN EL IPAD, `dvh`. En iOS `100vh` NO es lo que se ve: es la ventana como si las barras del navegador estuvieran escondidas, o sea MAS ALTA que el hueco real. Con la pagina ademas bloqueada (el `overflow: hidden` de aqui abajo), la ultima tira de la pantalla quedaba debajo de la barra del navegador y no habia forma de llegar a ella: en el iPad «no baja». Reportado por Darwin el 2026-09-08 con Chrome. ⚠️ Y le pasa a los iPad porque este `@media` empieza en 900 px: en horizontal casi todos pasan de ahi (1080–1366), asi que entran por la puerta pensada para un escritorio. `100dvh` es el alto que se ve DE VERDAD. Va en una segunda linea, no sustituyendo a la primera: quien no entienda `dvh` se queda con `vh` y todo sigue como estaba. ⭐ Es el mismo par que ya usaba `.entrada` desde el principio. */ height: calc(100dvh - var(--barra-alto)); display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--e3); } /* ⛔ Y LA PAGINA NO SE DESPLAZA. Una `hoja-alta` mide EXACTAMENTE la ventana: cabecera (60) mas `100vh - 60`. Si algo anade UN solo pixel —una barra de desplazamiento horizontal, que `100vh` no descuenta; un margen; una fila que se pasa— la pagina ya se puede desplazar. Y como la cabecera es `sticky`, no se va: lo que se esconde DETRAS de ella es la barra de arriba de la pantalla. En NAIMail salian cortados el buzon y el boton de «Escribir». ⚠️ Medido: con 1 px de sobra la barra sube 1 px. No hace falta un fallo grande, basta cualquier pixel. Cerrar el desplazamiento de la PAGINA no quita nada, porque en estas pantallas nunca se desplazo: cada panel se desplaza por dentro y `.hoja-alta` ya era `overflow: hidden`. */ html:has(main.hoja-alta), body:has(main.hoja-alta) { overflow: hidden; } /* El resumen de arriba no crece ni encoge; los paneles se quedan con el resto. ⚠️ `min-height: 0` es lo que permite que un hijo flex se haga MÁS PEQUEÑO que su contenido. Sin eso no aparece ningún scroll y la lista se sale por abajo. */ .hoja-alta > * { flex: 0 0 auto; } .hoja-alta > .dos-panes { flex: 1 1 auto; min-height: 0; } /* Cada panel: alto completo de su columna, y partido en cabecera + contenido. ⚠️ Se escribe con `.dos-panes` en medio para EMPATAR en especificidad con `.dos-panes.viendo-ficha .pane-lista { display: block }`, que si no gana y deshace el reparto en cuanto se abre una ficha — la lista de la izquierda dejaba de tener scroll y se salia por abajo. Al empatar, gana la que va despues, que es esta. */ .hoja-alta .dos-panes .pane-lista, .hoja-alta .dos-panes .pane-ficha { position: static; /* ya no hace falta `sticky`: no hay scroll de pagina */ max-height: none; height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* La ficha del proveedor llega dentro del panel y tiene que estirarse igual. */ .hoja-alta .pane-alto { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .hoja-alta .pane-fijo { flex: 0 0 auto; padding-bottom: var(--e2); margin-bottom: var(--e2); border-bottom: 1px solid var(--borde); } /* Lo que va DESPUÉS de la cabecera es lo que se desplaza. ⚠️ Sin `padding-top`: en un contenedor con scroll el relleno de arriba NO recorta — el contenido sube por dentro del hueco y asoma media fila bajo la cabecera. El aire va en el `margin-bottom` de la cabecera, que sí queda fuera de lo que se mueve. */ .hoja-alta .pane-fijo ~ * { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* ⭐ Y se puede ANIDAR: una caja que ya se desplaza pero que a su vez tiene su propia cabecera fija deja de desplazarse ella y se parte otra vez. Asi la seccion de Ordenes tiene su balance y sus filtros quietos DENTRO de la ficha, que a su vez esta dentro de la pantalla — tres niveles con la misma regla. ⚠️ `:has()` hereda la especificidad de lo que lleva dentro, asi que esta gana a la de arriba y le quita el `overflow-y: auto`. Es a proposito: quien se desplaza ahora es su cuerpo. */ .hoja-alta .pane-fijo ~ *:has(> .pane-fijo) { display: flex; flex-direction: column; overflow: hidden; } .hoja-alta .pane-fijo ~ .pane-cuerpo, .hoja-alta .pane-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; } } /* ── Un bloque que se pliega ────────────────────────────────────────────────────────────── ⭐ Darwin: el resumen de Gastos se pliega para dejar sitio a las listas. En `hoja-alta` esos píxeles salen directamente del alto de los paneles, así que se notan mucho. */ .plegable-tirador { /* ⚠️ Ancho automatico, no 100%: a lo ancho de la pantalla la flecha se iba al otro extremo, a un palmo del rotulo, y no se leia como un solo boton. */ display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--e2); padding: 3px var(--e2); background: none; border: 0; border-radius: var(--radio-xs); color: var(--texto-3); font: inherit; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .plegable-tirador:hover { background: var(--fondo-3); color: var(--texto-1); } /* La flecha apunta a lo que va a pasar al pulsar, no a como está. */ .plegable-flecha { transition: transform .15s ease; } .plegable.plegado .plegable-flecha { transform: rotate(-90deg); } .plegable.plegado > .plegable-cuerpo { display: none; } /* Título del formulario de contacto: dice si se está añadiendo o editando a alguien. */ .exp-form-titulo { margin-bottom: var(--e2); color: var(--texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* ═══ Conciliación bancaria (2026-08-18) ═══════════════════════════════════════════════ ⭐ Rejilla y no bloques apilados: con 60 movimientos en pantalla, las columnas alineadas dejan comparar de un vistazo; apilado hay que releer cada bloque para saber qué es cada cosa. Las seis columnas son: casilla · fecha · importe · concepto · propuesta · acción. */ .bk-tabla { display: flex; flex-direction: column; } .bk-cab, .bk-fila { display: grid; grid-template-columns: 26px 96px 118px minmax(220px, 1fr) minmax(230px, 300px) 96px; gap: var(--e2); align-items: start; padding: 8px 4px; border-bottom: 1px solid var(--borde); } /* ⛔ SIN `position: sticky`. Iba pegada con `top: 34px` —la altura de la barra de aceptar, contada a mano— y bastaba que esa barra creciera una línea para que la cabecera se comiera la primera fila. Ahora vive dentro del `pane-fijo` del panel, que ya sabe quedarse quieto. */ .bk-cab { font-size: 12px; color: var(--texto-3); border-bottom: 1px solid var(--borde); } .bk-fila:hover { background: rgba(255,255,255,.02); } /* ⚠️ Lo ya resuelto se atenúa pero NO se esconde: hace falta poder revisar lo hecho y deshacerlo, y una lista donde lo conciliado desaparece impide comprobar el trabajo de ayer. */ .bk-hecha { opacity: .6; } .bk-fecha { font-size: 13px; color: var(--texto-2); white-space: nowrap; padding-top: 2px; } .bk-importe { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; } .bk-concepto { min-width: 0; } /* El concepto del banco puede ser larguísimo y con números de traza: se corta en dos líneas en vez de estirar la fila. El texto entero sigue estando en el título. */ .bk-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; word-break: break-word; } .bk-fam { font-size: 10.5px; opacity: .75; } .bk-prop select { width: 100%; } .bk-prop .ho-pista { display: block; margin-top: 2px; line-height: 1.3; } .bk-acc { text-align: right; } @media (max-width: 1100px) { /* En pantalla estrecha la propuesta pasa debajo, que es lo único que se puede sacrificar. */ .bk-cab { display: none; } .bk-fila { grid-template-columns: 26px 90px 110px 1fr; } .bk-prop, .bk-acc { grid-column: 2 / -1; text-align: left; } } /* ── Buscador dentro del desplegable ───────────────────────────────────────────────────── Cualquier ``, los desplegables y las barras de scroll los sigue pintando el navegador en su versión oscura y quedan negros sobre blanco. Es el mismo problema que ya costó el calendario invisible, al revés. ⚠️ Y las sombras aquí son grises muy suaves: la sombra negra del tema oscuro, sobre blanco, ensucia y hace que todo parezca despegado. */ body[data-tema="claro"] { --campo: #ffffff; --hueco: rgba(20,30,60,.045); --cromo: rgba(255,255,255,.82); --cromo-menu: rgba(252,253,255,.95); --realce: rgba(20,30,60,.05); --realce-2: rgba(20,30,60,.075); color-scheme: light; accent-color: #5B47B0; --bg: #eef1f7; --texto: #16203a; --texto-2: #4a5878; --texto-3: #78859f; --borde: rgba(20,30,60,.12); --borde-2: rgba(20,30,60,.2); --panel: rgba(255,255,255,.86); --panel-2: rgba(248,250,253,.95); --panel-3: rgba(20,30,60,.04); --dlg-fondo: #ffffff; --violeta: #5B47B0; --violeta-claro: #7A66CF; --violeta-humo: rgba(91,71,176,.1); --violeta-borde: rgba(91,71,176,.28); --dorado: #B8892B; --verde: #1F9D55; --rojo: #C7453F; --ambar: #B7791F; --sombra: 0 8px 24px rgba(30,45,80,.1); --fondo-halo: radial-gradient(1100px 650px at 18% 6%, rgba(120,140,255,.16), transparent 55%), radial-gradient(850px 560px at 90% 10%, rgba(150,120,230,.13), transparent 55%), linear-gradient(180deg, #f7f9fd, var(--bg)); } /* ══════════════════════════════════════════════════════════ mi perfil ══ El diálogo que se abre al pulsar el nombre. */ /* Un