/*
 * Ajustes del panel para móvil.
 *
 * Filament ya es responsive, pero está pensado para escritorio: en un teléfono
 * los botones de acción quedan pequeños para el pulgar, el botón de guardar
 * cae al final de formularios muy largos, y los márgenes se comen el ancho
 * útil de una pantalla de 360 px.
 *
 * Va como hoja estática y no como tema de Tailwind porque el proyecto se
 * despliega descomprimiendo un ZIP en hosting compartido: no hay Node ni
 * `npm run build` que pueda compilar un tema.
 *
 * Todo lo de aquí es aditivo y va dentro de media queries de móvil, así que el
 * escritorio queda exactamente como estaba.
 */

/* ── Objetivos táctiles ──────────────────────────────────────────────
   44 px es el mínimo que recomiendan tanto Apple como Google. Por debajo,
   fallar el toque y darle a la fila de al lado es cuestión de tiempo. */

@media (max-width: 1023px) {

    .fi-btn,
    .fi-icon-btn,
    .fi-ta-actions .fi-link,
    .fi-dropdown-list-item {
        min-height: 44px;
    }

    .fi-icon-btn {
        min-width: 44px;
    }

    /* Las acciones de fila en una tabla: más aire entre ellas para no
       encadenar toques erróneos. */
    .fi-ta-actions {
        gap: 0.5rem;
    }

    /* ── Aprovechar el ancho ─────────────────────────────────────────
       En 360 px, los 24 px de margen a cada lado son el 13 % de la pantalla. */

    .fi-main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .fi-section-content,
    .fi-fo-component-ctn {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    /* ── Formularios ────────────────────────────────────────────────── */

    /* Por debajo de 16 px, iOS hace zoom al enfocar un campo y deja la
       pantalla descuadrada; volver atrás es cosa del usuario. */
    .fi-input,
    .fi-select-input,
    .fi-fo-rich-editor .ProseMirror,
    textarea.fi-input {
        font-size: 16px;
    }

    /* El botón de guardar, siempre a mano. En una ficha de cliente o de
       cita hay que bajar mucho para encontrarlo. */
    .fi-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -0.875rem -1rem;
        padding: 0.75rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / 0.95);
        backdrop-filter: blur(8px);
        border-top: 1px solid rgb(0 0 0 / 0.08);
    }

    .dark .fi-form-actions {
        background: rgb(24 24 27 / 0.95);
        border-top-color: rgb(255 255 255 / 0.1);
    }

    /* Y que ocupe todo el ancho: es la acción principal de la pantalla. */
    .fi-form-actions .fi-ac {
        width: 100%;
    }

    .fi-form-actions .fi-ac .fi-btn {
        flex: 1;
        justify-content: center;
    }

    /* ── Tablas ─────────────────────────────────────────────────────── */

    /* Que se note que la tabla sigue hacia la derecha, en vez de parecer
       cortada. */
    .fi-ta-ctn {
        -webkit-overflow-scrolling: touch;
    }

    /* Filas algo más altas: se leen mejor y se tocan mejor. */
    .fi-ta-row .fi-ta-cell {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    /* Los filtros y la búsqueda, apilados y a ancho completo. */
    .fi-ta-header-ctn .fi-input-wrp {
        width: 100%;
    }

    /* ── Escritorio del panel ───────────────────────────────────────── */

    /* Los widgets, uno por fila: dos columnas en 360 px no cabe. */
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: 1fr !important;
    }

    /* ── Modales ────────────────────────────────────────────────────── */

    /* A pantalla casi completa: un modal pequeño centrado en un móvil deja
       el contenido en un cuadradito y desperdicia el resto. */
    .fi-modal-window {
        margin-top: auto;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* ── Barra superior ─────────────────────────────────────────────── */

    .fi-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
    }
}

/* Pantallas muy estrechas: se recorta lo prescindible. */
@media (max-width: 400px) {

    .fi-header-heading {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    /* Las migas de pan ocupan una línea entera y no aportan en un móvil,
       donde ya está el botón de volver. */
    .fi-breadcrumbs {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}