/*
 * DINHELSE CRM · Tablet y pantallas tactiles
 *
 * POR QUE EXISTE
 *
 * El 5 de octubre de 2026 una comercial no pudo pulsar «Confirmar» en la
 * pantalla de activacion del doble factor desde su tablet: el boton
 * quedaba por debajo del borde y la pagina no se desplazaba.
 *
 * La causa es el armazon simple de Filament (acceso, codigo, cambio de
 * contraseña, activacion): centra la tarjeta en vertical con flexbox, y
 * cuando la tarjeta es MAS ALTA que la pantalla, el centrado la saca por
 * arriba y por abajo a partes iguales y lo que sobresale no se puede
 * alcanzar. Es un fallo clasico de `align-items: center`. La solucion
 * es `safe center`: centra si cabe y, si no, alinea arriba y deja
 * desplazar.
 *
 * El resto son ajustes para dedo: botones y filas de tabla un poco mas
 * altos cuando el puntero es grueso (tactil), y las ventanas modales
 * que nunca pasen del alto de la pantalla.
 */

/* ---- Armazon simple: que siempre se pueda llegar al final ---------- */
.fi-simple-layout { min-height: 100dvh; }

.fi-simple-main-ctn {
    align-items: safe center;
    min-height: 100dvh;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
    overflow-y: auto;
}

/* Navegadores sin `safe` (muy viejos): arriba y a desplazar. */
@supports not (align-items: safe center) {
    .fi-simple-main-ctn { align-items: flex-start; }
}

.fi-simple-main { margin-top: 1rem; margin-bottom: 1rem; }

/* En tablet apaisada hay poco alto: el QR y el logo mas pequeños. */
@media (max-height: 820px) {
    .fi-simple-main img[alt^="Código QR"] { width: 170px !important; height: 170px !important; }
    .fi-simple-layout .fi-logo,
    .fi-simple-layout img[alt="DINHELSE CRM"] { height: 5rem !important; max-height: 5rem !important; }
}

/* ---- Ventanas modales: nunca mas altas que la pantalla -------------- */
.fi-modal-window {
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}
.fi-modal-content { overflow-y: auto; }
.fi-modal-footer { flex-shrink: 0; }

/* ---- Dedo, no raton ------------------------------------------------ */
@media (pointer: coarse) {
    .fi-btn { min-height: 2.75rem; }
    .fi-icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
    .fi-ta-cell { padding-top: 0.85rem; padding-bottom: 0.85rem; }
    .fi-input, .fi-select-input, .fi-fo-field-wrp input, .fi-fo-field-wrp select {
        min-height: 2.75rem;
        font-size: 1rem; /* por debajo de 16px, iOS hace zoom al tocar un campo */
    }
    .fi-dropdown-list-item { min-height: 2.75rem; }
}

/* ---- Tablet en vertical: tablas que no revienten el ancho ---------- */
@media (max-width: 1024px) {
    .fi-ta-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fi-header-heading { font-size: 1.35rem; }
}