/* ==========================================
   RESPONSIVE — Pilder OS Multi-dispositivo
   Project Pilder OS v1.0 Enterprise
   ==========================================
   Breakpoints:
   - ≤1024px  Tablet landscape
   - ≤768px   Tablet portrait / Móvil landscape
   - ≤480px   Móvil portrait
   ========================================== */

/* ==================================================
   GLOBAL: Prevenir overflow horizontal SIEMPRE
   ================================================== */
#app-content {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==================================================
   TOUCH DEVICES: Pinch-to-zoom & touch scrolling
   Solo aplica a dispositivos táctiles (móvil/tablet)
   ================================================== */
@media (max-width: 1024px) {
    /* Habilitar pinch-to-zoom nativo en todo el contenido */
    body,
    #app-content,
    #selector-overlay,
    .view-section {
        touch-action: pan-x pan-y pinch-zoom;
    }
}

/* ==================================================
   TABLET LANDSCAPE (≤1024px)
   ================================================== */
@media (max-width: 1024px) {

    /* --- Login --- */
    .login-split-left {
        width: 50%;
        padding: 30px;
    }
    .login-split-right {
        width: 50%;
        padding: 50px;
    }
    .login-quote {
        font-size: 2rem;
    }
    .login-quote-sub {
        font-size: 1rem;
    }

    /* --- Selector "Mis Proyectos" --- */
    #selector-overlay {
        padding: 25px;
    }

    /* Selector grid: asegurar scroll touch suave en tablets */
    .selector-grid {
        -webkit-overflow-scrolling: touch;
    }

    /* --- Workspace Header --- */
    header {
        /* Altura fija reducida para tablet landscape: proporcional y consistente */
        height: 72px;
        min-height: 72px;
        max-height: 72px;
        gap: 10px;
        padding: 0 1.5%;
        grid-template-columns: 60px 1fr auto 60px;
    }
    .logo-container {
        width: 60px;
        height: 60px;
    }

    /* --- Settings Panel: Guard contra apertura accidental --- */
    /* Cuando el panel NO tiene la clase .open, forzar que esté fuera de pantalla */
    #settings-panel:not(.open) {
        right: -100vw !important;
        visibility: hidden;
    }
}

/* ==================================================
   TABLET PORTRAIT / MOBILE LANDSCAPE (≤768px)
   ================================================== */
@media (max-width: 768px) {

    /* ===== LOGIN ===== */
    #login-overlay {
        flex-direction: column;
        overflow-y: auto;
    }
    .login-split-left {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 40px 24px;
    }
    .login-split-right {
        display: none;
    }
    .login-card {
        max-width: 400px;
        width: 100%;
    }
    .login-title {
        font-size: 1.8rem;
    }
    .login-input {
        font-size: 1rem; /* evita zoom en iOS */
    }

    /* ===== SELECTOR "MIS PROYECTOS" ===== */
    #selector-overlay {
        padding: 20px 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .selector-container {
        width: 100%;
        /* Permitir que el contenedor crezca y sea scrolleable */
        min-height: 0;
    }
    .selector-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 16px;
    }
    .selector-header h1 {
        font-size: 1.5rem !important;
        letter-spacing: 0 !important;
        margin-bottom: 2px !important;
    }
    .selector-header > div:first-child > div {
        font-size: 0.85rem !important;
    }
    /* Botones del selector: horizontal con wrap */
    .selector-header > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100%;
    }
    .selector-header .btn-action {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    /* Ordenar por */
    .selector-header > div:last-child > div:first-child {
        width: 100%;
        padding: 6px 10px !important;
    }

    /* ===== TARJETAS DE BÉISBOL: Scroll vertical con el dedo ===== */
    .selector-grid {
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;            /* CLAVE: permitir scroll vertical touch */
        -webkit-overflow-scrolling: touch !important; /* Scroll suave en iOS */
        padding: 20px 0 40px 0 !important;
        gap: 16px !important;
        /* Asegurar que el grid no tenga altura fija que bloquee scroll */
        max-height: none !important;
        flex: 1 1 auto !important;
    }
    .project-card {
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0;
    }
    .project-card:hover {
        transform: none;
    }

    /* ===== WORKSPACE HEADER ===== */
    header {
        /* Altura fija para mobile: compacto pero visible */
        height: 64px;
        min-height: 64px;
        max-height: 64px;
        grid-template-columns: auto 1fr;
        gap: 6px;
        padding: 0 3%;
    }
    /* Ocultar logos en mobile */
    .logo-container {
        display: none !important;
    }
    #p-title {
        /* Tipografía fluida: legible en mobile sin romper el layout */
        font-size: clamp(0.78rem, 2.2vw, 1rem) !important;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #p-sub {
        font-size: 0.65rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-profile-box {
        margin-right: 0;
        grid-column: 1 / -1; /* Ocupa toda la fila */
    }
    .user-name-display {
        display: none; /* Ocultar nombre de usuario en mobile */
    }
    /* Botones del header en línea horizontal scrollable */
    .user-profile-box > div:last-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .btn-logout,
    .btn-session-logout,
    .btn-share-header,
    .vnotes-toggle-btn,
    .btn-save {
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .save-indicator {
        font-size: 0.55rem !important;
    }

    /* ===== VIEWER BANNER ===== */
    .swm-viewer-banner {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        flex-wrap: wrap;
        gap: 6px;
        text-align: center;
    }

    /* ===== CONTENIDO DEL WORKSPACE ===== */

    /* Sección general */
    .view-section {
        padding-bottom: 20px !important;
    }
    section {
        padding: 8px 2% !important;
    }

    /* Sec headers (títulos de sección) */
    .sec-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .sec-header h2 {
        font-size: 0.95rem !important;
    }

    /* Objetivo / Resumen Ejecutivo: stack vertical */
    .text-sections {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* KPI stat cards (En Ejecución, Bloqueadas, etc.) */
    .st-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .st-kpi-card {
        min-height: 90px !important;
        padding: 8px !important;
    }
    .st-kpi-card h3 {
        font-size: 0.7rem !important;
    }
    .st-kpi-val {
        font-size: 1.5rem !important;
    }

    /* Tablas: scroll horizontal con soporte touch */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .view-section table {
        min-width: 650px;
    }
    .view-section section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Botones de acción en secciones */
    .btn-action {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    /* ===== RESUMEN DAILY — RISK MATRIX (MEJORA PRINCIPAL) ===== */
    /* Stack vertical del heatmap + tabla de riesgos en mobile */
    .risk-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow-x: visible !important;
    }
    /* Heatmap: asegurar visibilidad completa con scroll si necesario */
    .heatmap-box {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .heatmap-grid {
        min-width: 250px;
    }
    /* Tabla de riesgos dentro del daily: scroll horizontal touch */
    .risk-container .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== RESUMEN DAILY — Scroll touch completo ===== */
    #view-daily {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-daily section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Gráficas de Avance y Histórico: stack vertical */
    #view-daily .st-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ===== KANBAN ===== */
    .kb-board {
        min-width: auto !important;
    }
    .kb-col {
        min-width: 220px;
        width: 220px;
    }
    #kb-board-view {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== WORKPLAN / PLAN DE TRABAJO ===== */
    .wp-dashboard {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .wp-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .wp-toolbar .btn-toolbar {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    #view-workplan section,
    #view-workplan,
    #view-gantt {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-gantt .gd-container {
        min-width: 800px;
    }

    /* ===== GANTT CHART ===== */
    .gd-left {
        width: 160px !important;
        min-width: 160px !important;
    }
    .gd-header {
        padding: 8px !important;
    }

    /* ===== STEERING COMMITTEE ===== */
    .st-card {
        padding: 12px !important;
    }
    #view-steering {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Stack grid de Riesgos Top 5 y Mapa de Calor en Steering */
    .st-grid-risk {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .st-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Finanzas row: stack vertical */
    .st-fin-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Mini heatmap en steering: scroll touch */
    .st-heatmap-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== CHARTER ===== */
    #view-charter {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-charter .charter-table {
        min-width: 600px;
    }
    #view-charter section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Charter sheet más compacto en mobile */
    .charter-sheet {
        padding: 15px !important;
        margin: 0 1% 15px 1% !important;
    }
    .charter-row {
        flex-direction: column;
    }
    .charter-field {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
    }
    .charter-field:last-child {
        border-bottom: none;
    }

    /* ===== STAKEHOLDERS ===== */
    #view-stakeholders {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-stakeholders section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== HISTORIAL DE MINUTAS ===== */
    #view-minutes {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-minutes section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== LECCIONES / MORALEJAS ===== */
    #view-lessons section,
    #view-moralejas section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-lessons section h2,
    #view-moralejas section h2 {
        font-size: 1rem !important;
    }

    /* ===== CONTROLES DE CAMBIOS ===== */
    #view-changes {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-changes section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== DOCUMENTOS ===== */
    #view-docs section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== CONTROL DE PAGOS ===== */
    #view-payments {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-payments section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== CIERRE DEL PROYECTO ===== */
    #view-close {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-close section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== USER STORIES ===== */
    #view-stories {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #view-stories section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== INDICADORES & OKRs ===== */
    .kpi-dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    #view-kpis {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== SHARING MODAL ===== */
    .swm-modal-overlay .swm-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px;
    }

    /* ===== PM ADVISOR & SETTINGS ===== */
    #advisor-panel {
        width: 100vw !important;
        right: -100vw;
    }
    #settings-panel {
        width: 90vw !important;
    }
    /* Guard reforzado: asegurar panel fuera de pantalla cuando cerrado */
    #settings-panel:not(.open) {
        right: -100vw !important;
        visibility: hidden;
    }

    /* ===== VIEWER NOTES ===== */
    .vnotes-panel {
        width: 100vw !important;
        right: -100vw;
    }

    /* ===== CONFIGURACIÓN ===== */
    #view-config section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ===== PORTFOLIO REPORT (dentro de Selector) ===== */
    #portfolio-report-view {
        padding: 0 !important;
    }
    .per-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .per-toolbar .btn-action {
        font-size: 0.7rem !important;
    }
}

/* ==================================================
   MOBILE PORTRAIT (≤480px)
   ================================================== */
@media (max-width: 480px) {

    /* --- Login más compacto --- */
    .login-split-left {
        padding: 30px 16px;
    }
    .login-title {
        font-size: 1.5rem;
    }
    .login-sub {
        font-size: 0.85rem;
    }
    .btn-login {
        font-size: 0.85rem !important;
        padding: 11px 10px !important;
    }

    /* --- Selector --- */
    #selector-overlay {
        padding: 14px 10px;
    }
    .selector-header h1 {
        font-size: 1.3rem !important;
    }
    .selector-header > div:first-child > div {
        font-size: 0.75rem !important;
    }
    .selector-header .btn-action {
        font-size: 0.65rem !important;
        padding: 6px 8px !important;
    }

    /* --- Header ultra-compacto --- */
    header {
        /* Altura mínima para smartphones: nunca colapsa el layout */
        height: 58px;
        min-height: 58px;
        max-height: 58px;
        padding: 0 2%;
    }
    #p-title {
        font-size: 0.72rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #p-sub {
        display: none;
    }
    .btn-logout,
    .btn-session-logout,
    .btn-share-header,
    .vnotes-toggle-btn,
    .btn-save {
        font-size: 0.55rem !important;
        padding: 3px 6px !important;
    }

    /* --- KPI stat cards: 2x2 grid --- */
    .st-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .st-kpi-card {
        min-height: 80px !important;
        padding: 6px !important;
    }
    .st-kpi-card h3 {
        font-size: 0.6rem !important;
        padding: 4px 6px !important;
    }
    .st-kpi-val {
        font-size: 1.2rem !important;
    }

    /* --- Sec headers --- */
    .sec-header h2 {
        font-size: 0.85rem !important;
    }

    /* --- Kanban columnas más angostas --- */
    .kb-col {
        min-width: 200px;
        width: 200px;
    }

    /* --- Gantt --- */
    .gd-left {
        width: 120px !important;
        min-width: 120px !important;
    }

    /* --- Sidebar items compactos --- */
    #app-sidebar .sidebar-item {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* --- Viewer banner --- */
    .swm-viewer-banner {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }

    /* --- Risk container aún más compacto --- */
    .heatmap-grid {
        height: 160px;
    }
}

/* ==================================================
   SAFE TEXT WRAPPING (evita romper letra-por-letra)
   ================================================== */
@media (max-width: 768px) {
    /* Wrapping seguro: solo en palabras, nunca en caracteres */
    h1, h2, h3, h4, .sec-header h2, .st-kpi-card h3 {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }
}

/* ==================================================
   MOBILE LANDSCAPE: Protección contra paneles abiertos
   Aplica solo cuando el dispositivo está en landscape
   y el viewport es de tamaño mobile/tablet (no laptop)
   ================================================== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Asegurar que los paneles laterales no invadan el contenido */
    #settings-panel:not(.open) {
        right: -100vw !important;
        visibility: hidden;
    }
    #advisor-panel:not(.open) {
        right: -100vw !important;
        visibility: hidden;
    }
    /* Selector grid: mantener scroll horizontal en landscape tablet */
    .selector-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==================================================
   SMARTPHONE LANDSCAPE ESPECÍFICO (altura < 500px)
   Cuando el smartphone está en landscape, la altura
   es muy limitada — optimizaciones adicionales
   ================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Header más compacto */
    header {
        padding: 0.3rem 2% !important;
    }
    /* Tarjetas de béisbol: scroll horizontal en landscape smartphone */
    .selector-grid {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .project-card {
        min-width: 260px !important;
        max-width: 280px !important;
    }
    /* KPI row: una sola fila horizontal scrollable */
    .st-kpi-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    .st-kpi-card {
        min-height: 70px !important;
    }
}