/* ============================================================
   Archtec — responsive.css
   Ajustes para tablet y móvil. Solo actúa vía media queries:
   el diseño de escritorio queda intacto.
   ============================================================ */

/* ---------- TABLET (hasta 1024px) ---------- */
@media (max-width: 1024px) {
    .grid-top { grid-template-columns: repeat(2, 1fr); }
    .grid-2-1, .grid-1-2, .cr-grid-2 { grid-template-columns: 1fr; }
    .header-container { padding: 20px 24px; }
    .dashboard-content { padding: 8px 24px 24px; }
}

/* ---------- MÓVIL (hasta 768px) ---------- */
@media (max-width: 768px) {

    html { -webkit-text-size-adjust: 100%; }
    body { height: 100dvh; }
    img { max-width: 100%; }

    /* — Sidebar: modo solo iconos (64px) — */
    .sidebar {
        width: 64px !important;
        min-width: 64px;
        padding: 14px 6px;
    }
    .sidebar .nav-label,
    .sidebar .nav-section-title,
    .sidebar .sidebar-history,
    .sidebar .user-info,
    .sidebar .more-chevron,
    .sidebar .studio-beta-label { display: none !important; }
    .sidebar .nav-item,
    .sidebar .sidebar-more-btn {
        justify-content: center;
        padding: 10px 8px;
    }
    .logo-container { justify-content: center; padding: 0; }
    #sidebar-toggle { display: none; }
    .sidebar .logo { gap: 0; }

    /* — Header — */
    .header-container { padding: 12px 14px; }
    body.ai-mode .header-container,
    body.studio-mode .header-container,
    body.biblio-mode .header-container { padding: 10px 14px; }
    .header-top { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .header-title { font-size: 19px; }
    .header-actions { gap: 8px; flex-wrap: wrap; }
    .user-profile span { display: none; }
    .divider-v { display: none; }
    .header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .time-tabs { max-width: 100%; overflow-x: auto; }

    /* — Contenido — */
    .dashboard-content { padding: 6px 12px 18px; }
    .grid-top { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
    .grid-2-1, .grid-1-2 { gap: 14px; margin-top: 14px; }
    .card { padding: 16px; }

    /* Grids internos */
    .cr-plan-grid, .lw-chips-grid { grid-template-columns: 1fr 1fr; }
    .cr-copy-grid, .cr-creatives-grid { grid-template-columns: 1fr; }
    .uso-meta-grid { grid-template-columns: 1fr; }
    .sesiones-head, .sesiones-row {
        grid-template-columns: 1.4fr 1.2fr;
        row-gap: 4px;
    }

    /* Tablas: scroll horizontal en vez de desbordar */
    .dashboard-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* — Chat IA — */
    .ai-chat-shell {
        padding-top: calc(6vh + 70px);
        gap: 16px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .ai-chat-shell:not(.chatting) .ai-composer,
    .ai-chat-shell:not(.chatting) .ai-suggestions {
        transform: translateY(-20vh);
    }
    .ai-composer { padding: 14px 14px 12px; border-radius: 18px; }
    .ai-composer-bar { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .ai-input { font-size: 16px; } /* evita zoom automático en iOS */
    .ai-suggestions { max-height: 120px; overflow: hidden; }
    .ai-model-menu, .ai-quality-menu { max-width: calc(100vw - 90px); }

    /* Workspace de landings a pantalla completa */
    .landing-workspace {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
    }
}

/* ---------- MÓVIL PEQUEÑO (hasta 400px) ---------- */
@media (max-width: 400px) {
    .header-title { font-size: 17px; }
    .cr-plan-grid, .lw-chips-grid { grid-template-columns: 1fr; }
    .btn-outline, .btn-primary { padding: 8px 12px; font-size: 12px; }
}