/* ========================================
   PROJECT MODULE - RESPONSIVE CSS
   Fix per tutto il modulo progetti su mobile/tablet
   Prefisso classi: pv2- (project-v2)
   ======================================== */

/* ========================================
   TABLET GRANDE - iPad Pro 12.9 (1024px - 1366px)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1366px) {
    .pv2-dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    
    .pv2-card {
        min-height: 200px !important;
    }
    
    .pv2-navbar {
        padding: 12px 20px !important;
    }
    
    /* Hero banner */
    .pv2-hero-banner,
    #entrepreneurshipHero {
        padding: 24px !important;
    }
    
    /* Sidebar più stretto su schermi grandi */
    .project-sidebar.pv2-sidebar {
        width: 240px !important;
    }
    
    .project-content-wrapper {
        margin-left: 240px !important;
    }
}

/* ========================================
   TABLET MEDIO - iPad Pro 11, iPad Air (834px - 1024px)
   ======================================== */
@media (min-width: 835px) and (max-width: 1024px) {
    .pv2-dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    
    .pv2-card {
        min-height: 180px !important;
    }
    
    .pv2-navbar {
        padding: 10px 16px !important;
    }
    
    .pv2-action-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    /* Hero banner compatto */
    .pv2-hero-banner,
    #entrepreneurshipHero {
        padding: 20px !important;
    }
    
    .pv2-hero-title {
        font-size: 22px !important;
    }
    
    .pv2-hero-subtitle {
        font-size: 14px !important;
    }
    
    /* Timeline compatta */
    .pv2-timeline-phases {
        gap: 8px !important;
    }
    
    .pv2-phase-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .pv2-phase-name {
        font-size: 11px !important;
    }
}

/* ========================================
   TABLET PICCOLO - iPad Mini, iPad Standard (768px - 834px)
   ======================================== */
@media (min-width: 768px) and (max-width: 834px) {
    .pv2-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .pv2-card {
        min-height: 160px !important;
    }
    
    .pv2-navbar {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 14px !important;
    }
    
    .pv2-breadcrumb {
        width: 100% !important;
    }
    
    .pv2-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    /* Hero banner */
    .pv2-hero-banner,
    #entrepreneurshipHero {
        padding: 16px !important;
    }
    
    .pv2-hero-title {
        font-size: 20px !important;
    }
    
    /* Cards header */
    .pv2-card-header {
        padding: 12px !important;
    }
    
    .pv2-card-title {
        font-size: 14px !important;
    }
}

/* ========================================
   TABLET GENERICO (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* Content wrapper - SOLO per modulo progetti (con .project-sidebar presente) */
    .project-content-wrapper {
        margin-left: 0 !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix per pagina Mis Proyectos */
    .manage-projects-container,
    .projects-grid,
    .projects-list {
        width: 100% !important;
        padding: 10px !important;
    }
    
    /* Cards progetto */
    .project-card,
    .card-project {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Grid 2 colonne su tablet */
    .pv2-dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        height: auto !important;
    }
}

/* ========================================
   MOBILE (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Content wrapper mobile - SOLO per modulo progetti */
    .project-content-wrapper {
        margin-left: 0 !important;
        padding: 15px 20px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Margini extra per il contenuto */
    .pv2-dashboard-grid {
        margin: 15px 0 !important;
    }
    
    .pv2-timeline-card {
        margin: 10px 0 !important;
    }
    
    .pv2-navbar {
        margin: 0 -5px 15px -5px !important;
        padding: 12px 15px !important;
    }
    
    /* Fix row wrapper */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Grid 1 colonna su mobile */
    .pv2-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .pv2-card {
        width: 100% !important;
        min-height: 180px !important;
        max-height: none !important;
    }
    
    /* Timeline mobile - orizzontale con connettori visibili */
    .pv2-timeline-card {
        padding: 12px !important;
    }
    
    .pv2-timeline-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    
    .pv2-timeline-phases {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        gap: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .pv2-phase {
        flex-shrink: 0 !important;
        min-width: 60px !important;
    }
    
    /* Connettori SEMPRE visibili */
    .pv2-phase-connector {
        display: flex !important;
        flex: 1 !important;
        min-width: 15px !important;
        max-width: 30px !important;
        height: 3px !important;
        margin-top: 18px !important;
        flex-shrink: 0 !important;
        background: #E5E7EB !important;
    }
    
    .pv2-phase-connector.completed {
        background: linear-gradient(90deg, #10B981 0%, #22C55E 100%) !important;
    }
    
    /* Navbar mobile */
    .pv2-navbar {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .pv2-breadcrumb {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .pv2-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .pv2-action-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Cards header/body mobile */
    .pv2-card-header {
        padding: 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .pv2-card-title {
        font-size: 14px !important;
    }
    
    .pv2-card-body {
        padding: 12px !important;
    }
    
    /* Liste mobile */
    .pv2-list {
        gap: 8px !important;
    }
    
    .pv2-list-item {
        padding: 10px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Note mobile */
    .pv2-notes-list {
        gap: 10px !important;
    }
    
    .pv2-note-card {
        padding: 12px !important;
    }
    
    /* Empty states mobile */
    .pv2-empty {
        padding: 20px 15px !important;
    }
    
    .pv2-empty-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .pv2-empty-icon i {
        font-size: 24px !important;
    }
    
    .pv2-empty-title {
        font-size: 16px !important;
    }
    
    .pv2-empty-text {
        font-size: 13px !important;
    }
    
    /* Fix pagina Mis Proyectos */
    .manage-projects-container,
    .projects-container {
        padding: 10px !important;
    }
    
    .project-card,
    .card-project,
    .project-item {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
}

/* ========================================
   SMARTPHONE PICCOLI (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    .project-content-wrapper {
        padding: 12px 15px !important;
    }
    
    .pv2-dashboard-grid {
        margin: 12px 0 !important;
        gap: 12px !important;
    }
    
    .pv2-navbar {
        margin-bottom: 12px !important;
        padding: 10px 12px !important;
    }
    
    .pv2-card {
        min-height: 150px !important;
    }
    
    .pv2-card-header {
        padding: 10px !important;
    }
    
    .pv2-card-body {
        padding: 10px !important;
    }
    
    .pv2-timeline-card {
        padding: 10px !important;
    }
    
    .pv2-phase-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    .pv2-phase-icon i {
        font-size: 16px !important;
    }
    
    .pv2-phase-name {
        font-size: 11px !important;
    }
    
    .pv2-navbar {
        padding: 10px !important;
    }
    
    .pv2-action-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    /* Fix sidebar toggle su smartphone */
    .sidebar-toggle-btn {
        top: 65px !important;
        left: 8px !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    .sidebar-toggle-btn i {
        font-size: 24px !important;
    }
}

/* ========================================
   FIX SPECIFICI PER PAGINE
   ======================================== */

/* Fix per pagina Mis Proyectos - contenuto verticale */
@media (max-width: 768px) {
    .projects-grid,
    .projects-list,
    .project-cards-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .project-card-wrapper,
    .project-card {
        width: 100% !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
    }
    
    /* Fix testo verticale */
    .project-card *,
    .card-project * {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

/* Fix per pagina Objetivos */
@media (max-width: 768px) {
    .objectives-list,
    .objectives-container {
        padding: 10px !important;
    }
    
    .objective-item,
    .objective-card {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
}

/* Fix per pagina Recursos */
@media (max-width: 768px) {
    .resources-grid,
    .resources-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .resource-card,
    .resource-item {
        width: 100% !important;
    }
}

/* Fix per pagina Notas */
@media (max-width: 768px) {
    .notes-container {
        padding: 10px !important;
    }
    
    .note-card,
    .pv2-note-card {
        width: 100% !important;
    }
}

/* Fix per pagina Agenda/Calendario */
@media (max-width: 768px) {
    .calendar-container,
    .schedule-container {
        overflow-x: auto !important;
    }
    
    .event-card,
    .session-card {
        width: 100% !important;
    }
}

/* Fix per pagina Informes */
@media (max-width: 768px) {
    .reports-container {
        padding: 10px !important;
    }
    
    .report-card {
        width: 100% !important;
    }
}

/* ========================================
   MANAGE PROJECTS - RESPONSIVE TABLET
   Classi specifiche: mp- (manage-projects)
   ======================================== */

/* iPad Pro 12.9 (1024px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
    .mp-projects-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    .mp-project-card {
        min-height: 280px !important;
    }
    
    .mp-filters-bar {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    /* Fix cards manage-projects su iPad Pro */
    .modern-card {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .modern-card .card-body {
        min-height: 280px !important;
        overflow: visible !important;
    }
    
    .modern-card .team-section {
        overflow: visible !important;
    }
    
    .modern-card .team-section .row {
        flex-direction: column !important;
    }
    
    .modern-card .avatar-circle {
        width: 28px !important;
        height: 28px !important;
    }
    
    .modern-card .card-title {
        font-size: 16px !important;
    }
}

/* iPad Pro 11, iPad Air (834px - 1024px) */
@media (min-width: 835px) and (max-width: 1024px) {
    .mp-projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .mp-project-card {
        min-height: 260px !important;
    }
    
    .mp-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    .mp-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .mp-filters-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .mp-search-input {
        width: 100% !important;
    }
    
    /* Fix cards manage-projects su iPad Air */
    .modern-card {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .modern-card .card-body {
        min-height: 260px !important;
        overflow: visible !important;
        padding: 16px !important;
    }
    
    .modern-card .team-section {
        overflow: visible !important;
    }
    
    .modern-card .team-section .row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modern-card .avatar-circle {
        width: 26px !important;
        height: 26px !important;
    }
    
    .modern-card .card-title {
        font-size: 15px !important;
    }
    
    .modern-card .card-header {
        padding: 16px !important;
    }
}

/* iPad Mini, iPad Standard (768px - 834px) */
@media (min-width: 768px) and (max-width: 834px) {
    .mp-projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    
    .mp-project-card {
        min-height: 240px !important;
    }
    
    .mp-card-title {
        font-size: 15px !important;
    }
    
    .mp-card-description {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
    
    /* Fix cards manage-projects su iPad Mini */
    .modern-card {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .modern-card .card-body {
        min-height: 240px !important;
        overflow: visible !important;
        padding: 14px !important;
    }
    
    .modern-card .team-section .row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .modern-card .avatar-circle {
        width: 24px !important;
        height: 24px !important;
    }
    
    .modern-card .card-title {
        font-size: 14px !important;
    }
    
    .modern-card .card-header {
        padding: 14px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .mp-projects-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .mp-project-card {
        min-height: auto !important;
    }
}

/* ========================================
   VIEW PROJECT - RESPONSIVE TABLET
   Classi specifiche: vp- (view-project)
   ======================================== */

/* iPad Pro 12.9 */
@media (min-width: 1025px) and (max-width: 1366px) {
    .vp-content-grid {
        grid-template-columns: 2fr 1fr !important;
        gap: 24px !important;
    }
    
    .vp-sidebar-right {
        width: 100% !important;
    }
}

/* iPad Pro 11, iPad Air */
@media (min-width: 835px) and (max-width: 1024px) {
    .vp-content-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .vp-main-content,
    .vp-sidebar-right {
        width: 100% !important;
    }
    
    .vp-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    
    .vp-tab-btn {
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* iPad Mini */
@media (min-width: 768px) and (max-width: 834px) {
    .vp-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .vp-header-info {
        width: 100% !important;
    }
    
    .vp-header-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .vp-action-btn {
        flex: 1 !important;
        min-width: 120px !important;
        justify-content: center !important;
    }
}

/* ========================================
   NOTES PAGE - RESPONSIVE TABLET
   Classi specifiche: np- (notes-page)
   ======================================== */

/* iPad Pro 12.9 */
@media (min-width: 1025px) and (max-width: 1366px) {
    .np-notes-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* iPad Pro 11, iPad Air */
@media (min-width: 835px) and (max-width: 1024px) {
    .np-notes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .np-note-card {
        min-height: 200px !important;
    }
    
    .np-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* iPad Mini */
@media (min-width: 768px) and (max-width: 834px) {
    .np-notes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    
    .np-note-card {
        padding: 14px !important;
    }
    
    .np-note-title {
        font-size: 14px !important;
    }
}

/* ========================================
   DASHBOARD CARDS - RESPONSIVE TABLET
   ======================================== */

/* iPad Pro 12.9 */
@media (min-width: 1025px) and (max-width: 1366px) {
    .pv2-dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .pv2-card {
        min-height: 220px !important;
    }
    
    .pv2-card-header {
        padding: 16px !important;
    }
    
    .pv2-card-body {
        padding: 16px !important;
    }
}

/* iPad Pro 11, iPad Air */
@media (min-width: 835px) and (max-width: 1024px) {
    .pv2-dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .pv2-card {
        min-height: 200px !important;
    }
    
    .pv2-card-header {
        padding: 14px !important;
    }
    
    .pv2-card-title {
        font-size: 15px !important;
    }
}

/* iPad Mini */
@media (min-width: 768px) and (max-width: 834px) {
    .pv2-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .pv2-card {
        min-height: 180px !important;
    }
    
    .pv2-card-header {
        padding: 12px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

/* ========================================
   REUNIONES/MEETINGS CARDS - DESKTOP (> 1366px)
   ======================================== */
@media (min-width: 1367px) {
    /* Card riunione desktop */
    .meeting-card,
    .reunion-card,
    .videollamada-card,
    .card-reunion {
        background: white !important;
        border-radius: 20px !important;
        padding: 24px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #e5e7eb !important;
        transition: all 0.3s ease !important;
    }
    
    .meeting-card:hover,
    .reunion-card:hover,
    .videollamada-card:hover,
    .card-reunion:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15) !important;
    }
    
    /* Header videollamada desktop */
    .videollamada-header,
    .meeting-header {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    /* Link videollamada button desktop */
    .btn-videollamada,
    a[href*="videollamada"],
    .link-videollamada {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 20px !important;
        background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
        color: white !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }
    
    .btn-videollamada:hover,
    a[href*="videollamada"]:hover,
    .link-videollamada:hover {
        background: linear-gradient(135deg, #0891b2, #0e7490) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
    }
    
    /* Badge stato desktop */
    .badge-agendada,
    .badge-status {
        display: inline-flex !important;
        padding: 8px 16px !important;
        border-radius: 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    /* Fase actual desktop */
    .fase-actual {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 16px 0 !important;
    }
    
    .fase-actual .badge {
        padding: 8px 18px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }
    
    /* Mentor info desktop */
    .mentor-info,
    .meeting-mentor {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
        background: #f8fafc !important;
        border-radius: 14px !important;
        margin: 16px 0 !important;
    }
    
    .mentor-info img,
    .meeting-mentor img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #e5e7eb !important;
    }
    
    /* Data e ora desktop */
    .meeting-datetime,
    .reunion-datetime {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 14px 18px !important;
        background: #f0f9ff !important;
        border-radius: 12px !important;
        margin: 16px 0 !important;
        font-size: 15px !important;
        color: #0369a1 !important;
    }
    
    /* Team info desktop */
    .meeting-team,
    .reunion-team {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
        background: #faf5ff !important;
        border-radius: 12px !important;
    }
    
    .meeting-team img,
    .reunion-team img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        border: 2px solid #e9d5ff !important;
    }
    
    /* Filtri desktop */
    .filter-section,
    .filtrar-proyecto {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
        padding: 20px !important;
        background: #f8fafc !important;
        border-radius: 16px !important;
    }
    
    .filter-section select,
    .filtrar-proyecto select {
        padding: 12px 20px !important;
        border-radius: 12px !important;
        border: 1px solid #e5e7eb !important;
        font-size: 15px !important;
        min-width: 250px !important;
        transition: all 0.2s ease !important;
    }
    
    .filter-section select:focus,
    .filtrar-proyecto select:focus {
        border-color: #0A97D9 !important;
        box-shadow: 0 0 0 3px rgba(10, 151, 217, 0.1) !important;
    }
    
    /* View toggle buttons desktop */
    .view-toggle,
    .toggle-view {
        display: flex !important;
        gap: 10px !important;
    }
    
    .view-toggle button,
    .toggle-view button {
        padding: 12px 18px !important;
        border-radius: 12px !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
    }
    
    .view-toggle button:hover,
    .toggle-view button:hover {
        background: #f3f4f6 !important;
    }
    
    .view-toggle button.active,
    .toggle-view button.active {
        background: #0A97D9 !important;
        color: white !important;
        border-color: #0A97D9 !important;
    }
}

/* ========================================
   REUNIONES/MEETINGS CARDS - RESPONSIVE TABLET
   ======================================== */

/* Tutti i tablet */
@media (min-width: 768px) and (max-width: 1366px) {
    /* Card riunione */
    .meeting-card,
    .reunion-card,
    .videollamada-card,
    .card-reunion {
        background: white !important;
        border-radius: 16px !important;
        padding: 20px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* Header videollamada */
    .videollamada-header,
    .meeting-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    /* Link videollamada button */
    .btn-videollamada,
    a[href*="videollamada"],
    .link-videollamada {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
        color: white !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }
    
    /* Info progetto */
    .meeting-project-info,
    .reunion-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Badge stato */
    .badge-agendada,
    .badge-status {
        display: inline-flex !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    
    /* Fase actual */
    .fase-actual {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 12px 0 !important;
    }
    
    .fase-actual .badge {
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }
    
    /* Mentor info */
    .mentor-info,
    .meeting-mentor {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        margin: 12px 0 !important;
    }
    
    .mentor-info img,
    .meeting-mentor img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    /* Data e ora */
    .meeting-datetime,
    .reunion-datetime {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 12px !important;
        background: #f0f9ff !important;
        border-radius: 10px !important;
        margin: 12px 0 !important;
        font-size: 14px !important;
        color: #0369a1 !important;
    }
    
    /* Team info */
    .meeting-team,
    .reunion-team {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
        background: #faf5ff !important;
        border-radius: 10px !important;
    }
    
    .meeting-team img,
    .reunion-team img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }
    
    /* Filtri */
    .filter-section,
    .filtrar-proyecto {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
        margin-bottom: 20px !important;
        padding: 16px !important;
        background: #f8fafc !important;
        border-radius: 12px !important;
    }
    
    .filter-section select,
    .filtrar-proyecto select {
        padding: 10px 16px !important;
        border-radius: 10px !important;
        border: 1px solid #e5e7eb !important;
        font-size: 14px !important;
        min-width: 200px !important;
    }
    
    /* View toggle buttons */
    .view-toggle,
    .toggle-view {
        display: flex !important;
        gap: 8px !important;
    }
    
    .view-toggle button,
    .toggle-view button {
        padding: 10px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #e5e7eb !important;
        background: white !important;
    }
    
    .view-toggle button.active,
    .toggle-view button.active {
        background: #0A97D9 !important;
        color: white !important;
        border-color: #0A97D9 !important;
    }
}

/* ========================================
   REUNIONES - MOBILE (< 768px)
   ======================================== */
@media (max-width: 767px) {
    /* Card riunione mobile */
    .meeting-card,
    .reunion-card,
    .videollamada-card,
    .card-reunion {
        background: white !important;
        border-radius: 14px !important;
        padding: 16px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid #e5e7eb !important;
    }
    
    /* Header videollamada mobile */
    .videollamada-header,
    .meeting-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 14px !important;
    }
    
    /* Link videollamada button mobile */
    .btn-videollamada,
    a[href*="videollamada"],
    .link-videollamada {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    /* Badge stato mobile */
    .badge-agendada,
    .badge-status {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    /* Fase actual mobile */
    .fase-actual {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 10px 0 !important;
    }
    
    .fase-actual .badge {
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    
    /* Mentor info mobile */
    .mentor-info,
    .meeting-mentor {
        padding: 10px !important;
        margin: 10px 0 !important;
    }
    
    .mentor-info img,
    .meeting-mentor img {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Data e ora mobile */
    .meeting-datetime,
    .reunion-datetime {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 10px 0 !important;
        font-size: 13px !important;
    }
    
    /* Team info mobile */
    .meeting-team,
    .reunion-team {
        padding: 8px !important;
    }
    
    .meeting-team img,
    .reunion-team img {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Filtri mobile */
    .filter-section,
    .filtrar-proyecto {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
        margin-bottom: 16px !important;
    }
    
    .filter-section select,
    .filtrar-proyecto select {
        width: 100% !important;
        min-width: auto !important;
        padding: 12px 14px !important;
    }
    
    /* View toggle mobile */
    .view-toggle,
    .toggle-view {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .view-toggle button,
    .toggle-view button {
        flex: 1 !important;
        padding: 12px !important;
    }
}

/* ========================================
   REUNIONES - SMARTPHONE PICCOLI (< 480px)
   ======================================== */
@media (max-width: 480px) {
    /* Card riunione smartphone */
    .meeting-card,
    .reunion-card,
    .videollamada-card,
    .card-reunion {
        border-radius: 12px !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }
    
    /* Header videollamada smartphone */
    .videollamada-header,
    .meeting-header {
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    /* Link videollamada button smartphone */
    .btn-videollamada,
    a[href*="videollamada"],
    .link-videollamada {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    /* Badge stato smartphone */
    .badge-agendada,
    .badge-status {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    /* Fase actual smartphone */
    .fase-actual .badge {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    
    /* Mentor info smartphone */
    .mentor-info,
    .meeting-mentor {
        padding: 8px !important;
        margin: 8px 0 !important;
    }
    
    .mentor-info img,
    .meeting-mentor img {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Data e ora smartphone */
    .meeting-datetime,
    .reunion-datetime {
        padding: 8px !important;
        margin: 8px 0 !important;
        font-size: 12px !important;
    }
    
    /* Team info smartphone */
    .meeting-team img,
    .reunion-team img {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Filtri smartphone */
    .filter-section,
    .filtrar-proyecto {
        padding: 12px !important;
        margin-bottom: 14px !important;
    }
    
    .filter-section select,
    .filtrar-proyecto select {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    /* View toggle smartphone */
    .view-toggle button,
    .toggle-view button {
        padding: 10px !important;
        font-size: 13px !important;
    }
}