/* ============================================================
   RESPONSIVE.CSS — VIRGILIO
   Autor: Johnnatan Villada
   Ultima actualizacion: 23 Abril 2026
   ============================================================ */

/* ── Tablet grande 1024px ───────────────────────────────── */
@media (max-width: 1024px) {
    .cards-view { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }
}

/* ── Tablet 980px (iPad Pro, pantallas 2x) ──────────────── */
@media (max-width: 980px) {
    /* Sidebar: ocultar fuera de pantalla */
    .app-sidebar,
    .app-sidebar.collapsed,
    body.logged-in .app-sidebar,
    body.logged-in .app-sidebar.collapsed {
        position: fixed !important;
        left: -160px !important;
        width: 200px !important;
        height: 100vh !important;
        transform: none !important;
        transition: left 0.3s ease !important;
        z-index: 300 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        box-shadow: none !important;
    }

    /* Sidebar abierto */
    .app-sidebar.mobile-open,
    .app-sidebar.collapsed.mobile-open,
    body.logged-in .app-sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
    }

    /* Mostrar texto en sidebar abierto */
    .app-sidebar.mobile-open .sb-nav-item span,
    .app-sidebar.mobile-open .sb-user-name,
    .app-sidebar.mobile-open .sb-user-status,
    .app-sidebar.mobile-open .sb-tagline,
    .app-sidebar.mobile-open .sb-badge { display: inline !important; }

    .app-sidebar.mobile-open .sb-nav-item {
        justify-content: flex-start !important;
        padding: 10px 16px !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .app-sidebar.mobile-open .sb-nav-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .app-sidebar.mobile-open .sb-logo { justify-content: flex-start !important; }
    .app-sidebar.mobile-open .sb-footer { justify-content: flex-start !important; padding: 16px 20px !important; }
    .app-sidebar.mobile-open .sb-header { padding: 20px 16px !important; }
    .app-sidebar.mobile-open .sb-avatar { width: 36px !important; height: 36px !important; }
    .app-sidebar.mobile-open .sidebar-toggle { display: none !important; }

    /* Contenido: pantalla completa */
    .app-content,
    .app-content.expanded { margin-left: 0 !important; }

    /* Header */
    .header,
    .app-sidebar.collapsed ~ .app-content .header {
        left: 0 !important;
        padding: 10px 16px !important;
    }

    /* Boton hamburguesa */
    #mobileMenuBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #f0fdf4 !important;
        border: 1px solid #c8ecc7 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-size: 18px !important;
        color: #2AA048 !important;
        flex-shrink: 0 !important;
    }

    .sidebar-toggle,
    body.logged-in .sidebar-toggle,
    #sidebarTab { display: none !important; }

    /* Padding top para compensar header fijo */
    .page-section { padding-top: 130px !important; }
    #page-onboarding,
    #page-aliados,
    #page-helpdesk,
    #page-banking,
    #page-imagine,
    #page-comunicaciones { padding-top: 130px !important; }

    /* Grids a 2 columnas */
    #capacidad-pago-datacredito .grid-3col,
    div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

    /* Modales */
    .modal-content { max-width: 92% !important; }

    /* Overlay: se activa via clase .active desde ui.js */
}

/* ── Movil 768px ────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Sidebar */
    .app-sidebar,
    .app-sidebar.collapsed,
    body.logged-in .app-sidebar,
    body.logged-in .app-sidebar.collapsed {
        position: fixed !important;
        left: -220px !important;
        width: 220px !important;
        height: 100vh !important;
        transition: left 0.3s ease !important;
        z-index: 300 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
    }

    .app-sidebar.mobile-open,
    .app-sidebar.collapsed.mobile-open,
    body.logged-in .app-sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 4px 0 28px rgba(0,0,0,0.2) !important;
    }

    .app-sidebar.mobile-open .sb-nav-item span,
    .app-sidebar.mobile-open .sb-user-name,
    .app-sidebar.mobile-open .sb-user-status,
    .app-sidebar.mobile-open .sb-tagline,
    .app-sidebar.mobile-open .sb-badge { display: inline !important; }

    .app-sidebar.mobile-open .sb-nav-item {
        justify-content: flex-start !important;
        padding: 12px 16px !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .app-sidebar.mobile-open .sb-nav-icon { width: 26px !important; height: 26px !important; }
    .app-sidebar.mobile-open .sb-logo { justify-content: flex-start !important; }
    .app-sidebar.mobile-open .sb-footer { justify-content: flex-start !important; padding: 16px 20px !important; }
    .app-sidebar.mobile-open .sb-header { padding: 20px 16px !important; }
    .app-sidebar.mobile-open .sb-avatar { width: 36px !important; height: 36px !important; }
    .app-sidebar.mobile-open .sb-logo img { width: auto !important; }
    .app-sidebar.mobile-open .sidebar-toggle { display: none !important; }

    /* Contenido */
    .app-content,
    .app-content.expanded { margin-left: 0 !important; }

    /* Header */
    .header,
    .app-sidebar.collapsed ~ .app-content .header {
        left: 0 !important;
        padding: 10px 12px !important;
        height: auto !important;
        min-height: 60px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .header h1 { font-size: 18px !important; }
    .header p { display: none !important; }

    /* Boton hamburguesa */
    #mobileMenuBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: #f0fdf4 !important;
        border: 1px solid #c8ecc7 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-size: 18px !important;
        color: #2AA048 !important;
        flex-shrink: 0 !important;
    }

    .sidebar-toggle,
    body.logged-in .sidebar-toggle,
    #sidebarTab { display: none !important; }

    /* Padding top para header */
    .page-section { padding-top: 80px !important; }
    #page-onboarding,
    #page-aliados,
    #page-helpdesk,
    #page-banking,
    #page-imagine,
    #page-comunicaciones { padding-top: 80px !important; }

    /* Sections */
    .section { padding: 12px !important; }

    /* Grids a 1 columna */
    .cards-view { grid-template-columns: 1fr !important; gap: 10px !important; }
    .form-grid,
    .form-grid-3 { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* KPIs */
    #kpis-helpdesk { grid-template-columns: repeat(2, 1fr) !important; }
    #grid-ideas { grid-template-columns: 1fr !important; }

    /* Modales */
    .modal-content {
        max-width: 100% !important;
        width: 96% !important;
        padding: 16px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    #modal-nuevo-ticket > div,
    #modal-detalle-ticket > div {
        width: 96% !important;
        padding: 16px !important;
        max-height: 92vh !important;
    }

    /* Section header */
    .section-header { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
    .section-controls { width: 100% !important; flex-wrap: wrap !important; gap: 8px !important; }

    /* Tablas */
    .tabla-historico { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Login */
    .login-box { padding: 28px 16px !important; margin: 0 12px !important; }
    .login-title { font-size: 26px !important; }
    .login-bg-formas,
    .login-bg-gradiente { display: none !important; }

    /* Usuario en header */
    .header > div:last-child > div:first-child span {
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    /* ── Comunicaciones en movil ── */
    #page-comunicaciones .grid,
    #page-comunicaciones [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Feed de anuncios ocupa todo el ancho */
    #col-feed,
    #col-widgets {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Agenda calendario */
    #agenda-container { overflow-x: auto !important; }

    /* Disponibilidad */
    #disponibilidad-grid { grid-template-columns: 1fr !important; }

    /* Banking */
    #banking-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    #banking-tabla { overflow-x: auto !important; }
    #banking-tabla table { min-width: 600px !important; }

    /* Overlay: se activa via clase .active desde ui.js */
}

/* ── Movil pequeno 480px ────────────────────────────────── */
@media (max-width: 480px) {
    /* Header simplificado */
    .header h1 { font-size: 16px !important; }
    .header h1 span { display: none !important; }

    /* Botones header: solo icono */
    .header button[onclick="handleLogout()"] {
        padding: 8px 10px !important;
        font-size: 0 !important;
    }
    .header button[onclick="handleLogout()"] i { font-size: 15px !important; }
    #btn-refrescar { padding: 8px 10px !important; font-size: 0 !important; }
    #btn-refrescar i { font-size: 15px !important; }

    /* Ocultar info usuario en header */
    .header > div:last-child > div:first-child { display: none !important; }

    /* KPIs a 1 columna en pantallas muy pequenas */
    #kpis-helpdesk { grid-template-columns: 1fr !important; }
    #banking-kpis { grid-template-columns: 1fr !important; }

    /* Imagine */
    #page-imagine h1 { font-size: 28px !important; }

    /* Padding reducido */
    .section { padding: 10px !important; }
    .modal-content { padding: 12px !important; }

    /* Inputs y botones full width */
    .section-controls input,
    .section-controls select,
    .section-controls button { width: 100% !important; }

    /* Comunicaciones: ocultar widgets en movil muy pequeno para priorizar feed */
    #col-widgets { display: none !important; }

    /* Tabla de transacciones banking */
    #banking-tabla table { min-width: 500px !important; }
}

/* ── Movil muy pequeno 360px ────────────────────────────── */
@media (max-width: 360px) {
    .header h1 { font-size: 14px !important; }
    .section { padding: 8px !important; }
    .modal-content { width: 99% !important; padding: 10px !important; }
}

/* ============================================================
   COMUNICACIONES — LAYOUT RESPONSIVO
   ============================================================ */

/* Desktop: 3 columnas */
.com-content-wrap {
    flex: 1;
    padding: 24px 28px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#page-comunicaciones {
    padding-top: 116px;
    overflow: auto;
    box-sizing: border-box;
}

.com-layout-grid {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr) 260px;
    gap: 18px;
    align-items: start;
}

.com-col-izq {
    position: sticky;
    top: 16px;
}

.com-col-feed {
    min-width: 0;
}

.com-col-der {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Tablet 980px ── */
@media (max-width: 980px) {
    #page-comunicaciones { padding-top: 130px; }

    .com-content-wrap {
        padding: 16px;
    }

    .com-layout-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* En tablet: ocultar columna izquierda (categorias),
       mostrar como dropdown horizontal */
    .com-col-izq { display: none; }

    /* Barra de categorias horizontal para tablet/movil */
    #com-categorias-movil {
        display: flex !important;
        overflow-x: auto;
        gap: 8px;
        padding: 0 0 10px 0;
        margin-bottom: 12px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #com-categorias-movil::-webkit-scrollbar { display: none; }

    .com-col-der {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .com-col-der > * {
        flex: 1 1 260px;
        min-width: 240px;
    }
}

/* ── Movil 768px ── */
@media (max-width: 768px) {
    #page-comunicaciones { padding-top: 80px; }

    .com-content-wrap { padding: 10px; }

    .com-layout-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .com-col-izq { display: none; }

    /* Widgets en columna, cada uno ocupa 100% */
    .com-col-der {
        position: static;
        flex-direction: column;
        gap: 10px;
    }

    .com-col-der > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Cards de anuncios: padding reducido */
    #com-feed-central > div {
        margin-bottom: 10px !important;
    }

    /* Galeria de imagenes: max 2 columnas en movil */
    #com-feed-central [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Acciones like/comentar: texto mas pequeno */
    #com-feed-central button {
        font-size: 12px !important;
    }

    /* Header comunicaciones: padding reducido */
    #page-comunicaciones [style*="padding:0 28px"] {
        padding: 0 12px !important;
    }

    /* Tabs: scroll horizontal si no caben */
    #page-comunicaciones [style*="display:flex;gap:0;margin-top:16px"] {
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
}

/* ── Movil 480px ── */
@media (max-width: 480px) {
    .com-content-wrap { padding: 8px; }

    /* Ocultar widgets en movil pequeno — priorizar feed */
    .com-col-der { display: none; }

    /* Anuncios: tarjetas a pantalla completa */
    #com-feed-central {
        padding: 0 !important;
    }

    /* Galeria: 1 columna en movil muy pequeno */
    #com-feed-central [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   AGENDA MOVIL — ESTILO TIPO iPHONE CALENDAR
   ============================================================ */

/* Strip de dias horizontales */
.com-agenda-movil {
    background: #f8fafc;
}

.com-dias-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 12px 12px 8px;
    background: white;
    border-bottom: 1px solid #f1f5f9;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 0;
    z-index: 10;
}
.com-dias-strip::-webkit-scrollbar { display: none; }

.com-dia-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    min-width: 36px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.com-dia-chip:active { background: #f0fdf4; }
.com-dia-chip-sel { background: #f0fdf4; }

.com-dia-chip-letra {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

.com-dia-chip-num {
    font-size: 18px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
}
.com-dia-hoy {
    color: white !important;
    background: #2AA048;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
}
.com-dia-sel-num {
    color: #2AA048 !important;
}

/* Punto indicador de eventos */
.com-dia-dot {
    width: 5px;
    height: 5px;
    background: #2AA048;
    border-radius: 50%;
}
.com-dia-dot-sel { background: #2AA048; }

/* Lista de eventos */
.com-lista-movil {
    padding: 8px 12px 80px;
}

/* Grupo por dia */
.com-grupo-dia {
    margin-bottom: 8px;
}

.com-grupo-dia-header {
    padding: 12px 0 6px;
}

.com-grupo-dia-fecha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.com-grupo-dia-num {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    min-width: 36px;
}

.com-grupo-dia-hoy .com-grupo-dia-num {
    color: #2AA048;
}

.com-grupo-dia-nombre {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.com-grupo-dia-mes {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 1px;
}

/* Tarjeta de evento */
.com-evento-movil {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: white;
    border-radius: 12px;
    padding: 12px 12px 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    position: relative;
    transition: transform 0.1s;
}
.com-evento-movil:active { transform: scale(0.98); }

.com-evento-movil-hora {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 52px;
    flex-shrink: 0;
    padding-top: 2px;
}

.com-evento-hora-text {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.com-evento-hora-fin {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.com-evento-movil-info {
    flex: 1;
    min-width: 0;
}

.com-evento-movil-titulo {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.com-evento-movil-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.4;
}

.com-evento-movil-lugar {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.com-evento-movil-badge {
    font-size: 10px;
    font-weight: 700;
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    align-self: flex-start;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-evento-movil-titulo {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.com-evento-movil-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Sin eventos */
.com-sin-eventos {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
}

/* En desktop ocultar vista movil si se activa por error */
@media (min-width: 769px) {
    .com-agenda-movil .com-dias-strip { display: none; }
}