/* ============================================================
   EllaSuite 360 — Mobile-first & touch (≤768px foco)
   Carga después de layouts.css. Refuerza responsive al 100%.
   ============================================================ */

/* Variables --safe-* en app.css :root */

/* Contenido principal: menos márgenes en pantallas estrechas + safe area */
.app-content {
    padding-left: max(var(--space-3), var(--safe-left));
    padding-right: max(var(--space-3), var(--safe-right));
    padding-bottom: max(var(--space-4), var(--safe-bottom));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .app-content {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

@media (min-width: 1024px) {
    .app-content {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* ── Topbar: título largo + notch ── */
.topbar {
    padding-left: max(var(--space-3), var(--safe-left));
    padding-right: max(var(--space-3), var(--safe-right));
    padding-top: max(var(--space-3), var(--safe-top));
}

.topbar-left {
    flex: 1;
    min-width: 0;
}

.topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: clamp(0.95rem, 4vw, var(--fs-lg));
}

/* Dropdowns: no desbordan el ancho útil en móvil */
@media (max-width: 767px) {
    .topbar .dropdown-menu {
        max-width: min(320px, calc(100vw - 1rem - var(--safe-left) - var(--safe-right)));
        max-height: min(70vh, 480px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Cabecera de página: acciones a ancho completo en móvil ── */
@media (max-width: 767px) {
    .page-header {
        margin-bottom: var(--space-4);
        gap: var(--space-3);
    }

    .page-header h1 {
        font-size: clamp(1.1rem, 5vw, var(--fs-xl));
        line-height: 1.25;
    }

    .page-header .page-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .page-header .page-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Grillas: una columna en móvil (formularios legibles) ── */
@media (max-width: 639px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* grid-4 pasa a 2 columnas en XS (stats); en muy estrecho opcional 1 */
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 380px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Utilidad: ocultar texto decorativo en pantallas muy pequeñas */
@media (max-width: 767px) {
    .hide-xs {
        display: none !important;
    }
}

/* ── Tarjetas y tablas táctiles ── */
@media (max-width: 767px) {
    .card-body {
        padding: var(--space-3);
    }

    .card-header {
        padding: var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-xs);
    }

    .table .actions {
        flex-wrap: wrap;
    }
}

/* ── Toasts: ancho en móvil ── */
@media (max-width: 767px) {
    .toast-container {
        left: max(0.75rem, var(--safe-left));
        right: max(0.75rem, var(--safe-right));
        max-width: none;
    }
}

/* ── Modales: respetar safe area (components ya hace sheet abajo) ── */
@media (max-width: 767px) {
    .modal {
        padding-left: max(var(--space-4), var(--safe-left));
        padding-right: max(var(--space-4), var(--safe-right));
        padding-bottom: max(var(--space-4), var(--safe-bottom));
    }
}

/* ── Menú lateral overlay ── */
.menu-overlay {
    padding-left: max(var(--space-4), var(--safe-left));
    padding-right: max(var(--space-4), var(--safe-right));
    padding-bottom: max(var(--space-4), var(--safe-bottom));
}

/* ── Bottom nav ya usa padding-bottom env; refuerzo tap targets ── */
@media (max-width: 767px) {
    .bottom-nav-item,
    .bottom-nav-center {
        min-height: 48px;
    }
}

/* ── Tabs genéricas: scroll suave sin cortar ── */
@media (max-width: 767px) {
    .tabs {
        padding-bottom: var(--space-1);
        gap: 0;
    }

    .tab-item {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* ── Configuración: pestañas en columna legible ── */
@media (max-width: 639px) {
    .config-tabs .config-tabs-strip .tab-item {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: calc(50% - 0.25rem);
        border-radius: 10px;
    }

    .config-tabs .config-tabs-strip .tab-item.active {
        border-bottom: 1px solid rgba(219, 80, 165, 0.22);
    }
}

/* ── Evitar zoom accidental en inputs (iOS) si font < 16px — mantener inputs legibles ── */
@media (max-width: 767px) {
    .form-input,
    .form-select,
    .form-textarea {
        font-size: max(16px, var(--fs-base));
    }
}

/* ── POS: sin padding ni max-width en ningún tamaño de pantalla ── */
.app-content:has(.pos-layout) {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* ── Onboarding / landing: márgenes seguros en pantalla completa ── */
.onboarding-shell {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
    padding-bottom: max(0px, var(--safe-bottom));
}

.landing-shell {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
}