/* ============================================================
   WatcherWolf — Responsive overrides (móvil / tablet)
   Un solo archivo, cargado al final desde los 3 layouts.
   Objetivo: cubrir el rango 320px–768px sin tocar los CSS base.
   ============================================================ */

/* ===== Util general ===== */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* ===== <= 1024px: sidebar backend como drawer, topbar compacto ===== */
@media (max-width: 1024px) {
    .admin-sidebar, .sa-sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000;
        box-shadow: 2px 0 12px rgba(0,0,0,0.2);
    }
    .admin-sidebar.active, .sa-sidebar.active { transform: translateX(0); }
    .sidebar-overlay, .sa-sidebar-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.5); z-index: 999;
    }
    .sidebar-overlay.active, .sa-sidebar-overlay.active { display: block; }
    .admin-main, .sa-main { margin-left: 0 !important; padding-left: 0 !important; }
    .mobile-menu-btn, .sa-mobile-menu-btn { display: inline-flex !important; }
}

/* ===== <= 900px: grids 3-4 col -> 2 col ===== */
@media (max-width: 900px) {
    .pricing-grid,
    .features-grid,
    .footer-grid,
    .stats-grid,
    .quick-stats,
    .slot-stats,
    .sa-dash-grid,
    .charts-row,
    .detail-grid,
    .svc-grid-info {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hero h1 { font-size: clamp(1.75rem, 6vw, 2.6rem) !important; }
}

/* ===== <= 768px: empujar casi todo a 1 columna ===== */
@media (max-width: 768px) {
    /* Grids genéricas */
    .pricing-grid,
    .footer-grid,
    .sa-cols,
    .create-form-grid,
    .landing-features,
    .landing-cards,
    .comparison-grid,
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contenedores con padding grande */
    .container, .hero, .section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Tipografía hero */
    .hero h1, .estado-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.2 !important; }
    .hero p, .hero-subtitle { font-size: 1rem !important; }

    /* Tablas: wrapper automático */
    .table-wrapper, .items-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .items-table, .table, table.table {
        min-width: 560px;
    }

    /* Formularios inline 2col -> 1col */
    .form-row,
    .form-grid-2,
    .form-grid-3,
    .status-grid,
    .create-form-grid,
    .settings-grid,
    .config-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Botones de acción: wrap */
    .page-actions, .card-actions, .header-actions, .probe-actions,
    .bulk-actions, .filter-bar, .toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .page-actions .btn, .card-actions .btn, .header-actions .btn {
        flex: 1 1 auto;
    }

    /* Stats chips: wrap y full width en 2 cols */
    .stats-bar { flex-wrap: wrap !important; }
    .stat-chip { flex: 1 1 calc(50% - 8px); justify-content: center; }

    /* Monitor cards */
    .item-card, .monitor-card {
        min-width: 0;
    }
    .item-card-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .item-card-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Page header */
    .page-header {
        flex-direction: column;
        align-items: stretch !important;
    }
    .page-header h1 { font-size: 1.25rem !important; }

    /* Modales */
    .modal { padding: 12px !important; }
    .modal-content { max-width: 100% !important; width: 100% !important; margin: 20px 0 !important; }

    /* Landings */
    .lp-grid, .lp-features, .lp-cards {
        grid-template-columns: 1fr !important;
    }

    /* Estado */
    .svc-grid { grid-template-columns: 1fr !important; }

    /* Plan banner: vertical */
    .plan-banner { flex-direction: column; align-items: flex-start !important; }
    .plan-usage { width: 100%; justify-content: space-between; }

    /* Hide desktop-only elements */
    .hide-mobile, .desktop-only { display: none !important; }
}

/* ===== <= 600px: apretar aún más ===== */
@media (max-width: 600px) {
    /* Todo grid 2col -> 1col */
    .pricing-grid,
    .features-grid,
    .footer-grid,
    .stats-grid,
    .quick-stats,
    .slot-stats,
    .sa-dash-grid,
    .charts-row,
    .detail-grid,
    .svc-grid-info {
        grid-template-columns: 1fr !important;
    }

    /* Ocultar columnas auxiliares en tablas grandes */
    .hide-xs { display: none !important; }

    /* Stats chips full width */
    .stat-chip { flex: 1 1 100%; }

    /* Header reducido */
    .navbar { padding: 10px 16px !important; }
    .navbar-brand, .logo { font-size: 1.1rem !important; }

    /* Hero cards */
    .info-card-value { font-size: 1.15rem !important; }

    /* Tamaños de fuente globales más pequeños */
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.1rem !important; }
    body { font-size: 15px; }

    /* Backend topbar */
    .admin-topbar, .sa-topbar {
        padding: 10px 12px !important;
    }
    .topbar-right .btn span,
    .sa-topbar-right .btn span { display: none; }

    /* Item card: padding reducido */
    .item-card { padding: 14px !important; }

    /* Cards card-body */
    .card, .card-body { padding: 16px !important; }

    /* Formularios: inputs full width */
    .form-input, .form-control, input[type=text], input[type=email],
    input[type=url], input[type=number], select, textarea {
        font-size: 16px; /* evita zoom en iOS */
        width: 100%;
    }

    /* Footer */
    .footer { padding: 32px 16px 16px !important; text-align: center; }
    .footer-col { text-align: center; }

    /* Mini timeline 24h más pequeño */
    .mini-tl-24h { height: 12px !important; }
    .mini-tl-legend { font-size: .62rem !important; }

    /* Tabla: primera columna sticky para que se vea el nombre */
    .items-table th:first-child,
    .items-table td:first-child {
        position: sticky; left: 0;
        background: var(--bg-secondary);
    }
}

/* ===== <= 400px: iPhone SE y similares ===== */
@media (max-width: 400px) {
    .big-state { font-size: .95rem !important; padding: 10px 16px !important; }
    .plan-summary-card { padding: 14px !important; flex-direction: column; align-items: flex-start !important; }
    .page-header h1 { font-size: 1.1rem !important; }
    .btn { padding: 8px 14px !important; font-size: .85rem !important; }
    .btn-sm { padding: 6px 10px !important; font-size: .78rem !important; }
    .plan-icon { width: 36px !important; height: 36px !important; }
    .sa-stat-value { font-size: 1.4rem !important; }
}