/* ============================================================
   ProspeCRM - Responsive Design
   Mobile First -> Tablet -> Desktop
   Bottom nav siempre visible en todas las pantallas
   ============================================================ */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {

    /* Modal centrado en tablet */
    .modal-backdrop {
        align-items: center;
    }

    .modal {
        border-radius: var(--radius-xl);
        max-height: 80vh;
    }

    /* Stats en 4 columnas */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Establecimiento cards en grid */
    .est-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Slide panel mas estrecho */
    .slide-panel {
        max-width: 400px;
    }

    /* Toast en esquina */
    .toast-container {
        left: auto;
        width: 360px;
    }

    /* Mapa mas alto */
    .map-container {
        height: 280px;
    }

    /* Funnel labels mas anchos */
    .funnel-label {
        width: 130px;
    }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {

    .page-content {
        padding: calc(var(--topbar-height) + 16px) 24px calc(var(--nav-height) + 24px);
        max-width: 1100px;
        margin: 0 auto;
    }

    /* Login centrado */
    .login-wrapper {
        max-width: 420px;
    }

    /* Stats separados */
    .stats-grid {
        gap: 16px;
    }

    /* Establishment list en 3 columnas */
    .est-list {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Detail content con max-width */
    .est-detail-content {
        max-width: 800px;
    }

    /* Kanban con columnas mas anchas */
    .kanban-column {
        min-width: 280px;
        max-width: 300px;
    }

    /* Calendar grid mas grande */
    .calendar-day {
        min-height: 80px;
        padding: 8px;
    }
}

/* --- Large Desktop (1280px+) --- */
@media (min-width: 1280px) {
    .est-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .page-content {
        max-width: 1200px;
    }

    .stats-grid {
        max-width: 1000px;
    }
}

/* --- Small Mobile (max 375px) --- */
@media (max-width: 375px) {
    .login-form {
        padding: 20px 16px;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .funnel-label {
        width: 70px;
        font-size: 0.625rem;
    }
}

/* --- Safe Areas (notch devices) --- */
@supports (padding-top: env(safe-area-inset-top)) {
    .top-bar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--topbar-height) + env(safe-area-inset-top));
    }

    .page-content {
        padding-top: calc(var(--topbar-height) + env(safe-area-inset-top));
    }

    .login-screen {
        padding-top: env(safe-area-inset-top);
    }
}

/* --- Landscape Mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
    .login-wrapper {
        max-width: 600px;
    }

    .login-header {
        margin-bottom: 16px;
    }

    .login-logo-container {
        width: 50px;
        height: 50px;
    }

    .login-logo {
        width: 36px;
    }

    .login-title {
        font-size: 1.25rem;
    }
}

/* --- Print --- */
@media print {
    .top-bar, .bottom-nav, .fab, .toast-container {
        display: none !important;
    }

    .page-content {
        margin: 0;
        padding: 0;
    }

    .card {
        break-inside: avoid;
    }
}

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