/* FIX DROPDOWN FONT SIZES & WIDTHS */
        select, select.form-control {
            font-size: 15px !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        select option {
            font-size: 15px !important;
            padding: 8px !important;
        }

        .quick-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 15px;
            flex-wrap: wrap;
            align-items: center;
        }

        /* Micro-animations */
        @keyframes subtlePulse {
            0% { transform: scale(1); background-color: transparent; }
            50% { transform: scale(1.05); background-color: rgba(46, 204, 113, 0.2); border-radius: 4px; }
            100% { transform: scale(1); background-color: transparent; }
        }
        .blink-update {
            animation: subtlePulse 0.8s ease-in-out;
            display: inline-block;
            transition: all 0.3s;
        }

        .nav-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10px;
            margin-bottom: 25px;
            padding: 12px 15px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 12px;
            width: 100%;
            box-sizing: border-box;
            margin-top: 15px;
        }
        .nav-tab, .nav-btn {
            background: transparent;
            border: none;
            color: #777777;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            padding: 10px 18px;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .nav-tab i, .nav-btn i {
            font-size: 1.1rem;
            transition: transform 0.3s;
        }
        .nav-tab:hover, .nav-btn:hover { 
            color: #333333; 
            background: rgba(0,0,0,0.04);
        }

        .nav-tab:hover i {
            transform: scale(1.1);
        }
        .nav-tab.active {
            background: #3b68e7;
            color: var(--glass-bg);
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(59, 104, 231, 0.3);
            transform: translateY(-2px);
        }
        .section-content { display: none; }
        .section-content.active { 
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        .admin-only { display: none; }

        /* Modal Tabs */
        .modal-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
            overflow-x: auto;
        }
        .modal-tab {
            background: none;
            border: none;
            color: #777777;
            padding: 8px 12px;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.3s;
        }
        .modal-tab:hover { color: #333333; }
        .modal-tab.active {
            color: #3b68e7;
            font-weight: bold;
            border-bottom: 2px solid #3b68e7;
        }
        .modal-section { display: none; }
        .modal-section.active { display: block; }

        /* Estilos base para las plantillas PDF invisibles */
        #pdf-templates { display: none; }
        .pdf-page {
            width: 800px; /* Ancho fijo para el renderizado A4 */
            background: white;
            color: #333;
            font-family: Arial, sans-serif;
            position: relative;
            box-sizing: border-box;
            font-size: 13px;
        }
        .pdf-header-img {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }
        /* Header CSS recreado */
        .pdf-top-header {
            display: table;
            width: 100%;
            margin-bottom: 15px;
        }
        .pdf-top-header > div {
            display: table-cell;
            vertical-align: middle;
        }
        .pdf-title {
            text-align: center;
            color: #1a569d;
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0 5px 0;
            text-transform: uppercase;
        }
        .pdf-subtitle {
            text-align: center;
            color: #555;
            font-size: 12px;
            margin-bottom: 10px;
        }
        .pdf-section-title {
            background-color: #2b65a5;
            color: white;
            padding: 4px 8px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 0;
            border: 1px solid #2b65a5;
        }
        .pdf-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 5px;
        }
        .pdf-table td, .pdf-table th {
            border: 1px solid #ccc;
            padding: 4px 8px;
            vertical-align: middle;
        }
        .pdf-table th {
            background-color: #f2f2f2;
            text-align: left;
            font-weight: bold;
            color: #333;
        }
        .pdf-table-blue th {
            background-color: #e6f0fa;
            color: #1a569d;
        }
        .pdf-checkbox.checked { background-color: #333; }
        .family-table td { padding: 5px; }
        .pdf-signatures {
            display: table;
            width: 100%;
            table-layout: fixed;
            margin-top: 15px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .pdf-sig-box {
            display: table-cell;
            vertical-align: top;
            text-align: center;
            padding: 0 15px;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .pdf-line {
            border-top: 1px solid #333;
            margin: 0 auto 5px auto;
            width: 85%;
        }
        .pdf-cert-text {
            text-align: center;
            font-style: italic;
            font-size: 11px;
            margin: 5px 0 10px 0;
            color: #555;
        }

        /* PRESENTACION DE TABLA MEJORADA */
        #data-table { border-collapse: separate; border-spacing: 0 6px; }
        #data-table th { background: transparent; border-bottom: 2px solid #e2e8f0; padding: 12px 15px; color: #64748b; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
        #data-table td { background: var(--glass-bg); padding: 12px 15px; vertical-align: middle; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; }
        #data-table td:first-child { border-left: 1px solid #f1f5f9; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
        #data-table td:last-child { border-right: 1px solid #f1f5f9; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
        #data-table tbody tr { box-shadow: 0 2px 4px rgba(0,0,0,0.01); }
        #data-table tbody tr:hover td { background: var(--color-bg-dark); box-shadow: 0 4px 6px rgba(0,0,0,0.03); border-color: #e2e8f0; }

        /* AVATAR Y BADGES */
        .user-info-cell { display: flex; align-items: center; gap: 12px; }
        .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(37,99,235,0.3); }
        .user-details { display: flex; flex-direction: column; }
        .user-name { font-weight: 600; color: #1e293b; font-size: 0.95rem; }
        .family-badge { display: inline-flex; align-items: center; gap: 4px; background: #e0f2fe; color: #0284c7; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; margin-top: 4px; width: max-content; }
        
        .status-badge { padding: 5px 12px; border-radius: 20px; font-weight: 700; font-size: 0.75rem; text-align: center; display: inline-block; min-width: 80px; letter-spacing: 0.5px; }
        .status-badge.status-umc { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
        .status-badge.status-rs { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; }
        .status-badge.status-egreso { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
        .status-badge.status-traslado { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
        .status-badge.status-default { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

        .btn-icon { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1px solid transparent; color: #64748b; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
        .btn-icon:hover { background: #f1f5f9; transform: scale(1.1); border-color: #e2e8f0; }

#section-caracterizacion .stats-grid, #section-dashboard-integral .stats-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 20px;
                    margin-bottom: 25px;
                }
                #section-caracterizacion .dash-grid, #section-dashboard-integral .dash-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 20px;
                    margin-bottom: 25px;
                }
                #section-caracterizacion .dash-card, #section-dashboard-integral .dash-card {
                    background: #fff;
                    border-radius: 8px;
                    padding: 20px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
                    transition: box-shadow 0.3s ease;
                }
                #section-caracterizacion .stat-card, #section-dashboard-integral .stat-card {
                    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
                }
                #section-caracterizacion .stat-card, #section-dashboard-integral .stat-card:hover {
                    transform: translateY(-5px) scale(1.02);
                    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
                }
                #section-caracterizacion .dash-card, #section-dashboard-integral .dash-card:hover {
                    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
                }
                
                /* TV Mode specific overrides */
                .tv-mode #section-caracterizacion .dash-header, .tv-mode #section-dashboard-integral .dash-header { border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 25px; }
                .tv-mode #section-caracterizacion .dash-header, .tv-mode #section-dashboard-integral .dash-header h2 { font-size: 2.5rem; color: #fff; margin: 0; }
                .tv-mode #section-caracterizacion .stat-value, .tv-mode #section-dashboard-integral .stat-value { font-size: 3.5rem; }
                .tv-mode #section-caracterizacion .dash-card, .tv-mode #section-dashboard-integral .dash-card { background: #1e1e1e; border: 1px solid #333; }
                .tv-mode #section-caracterizacion h3, .tv-mode #section-dashboard-integral h3 { color: #f0f0f0; }
                .tv-mode #section-caracterizacion .ranking-label, .tv-mode #section-dashboard-integral .ranking-label { color: #ccc; }
                .tv-mode #section-caracterizacion .ranking-count, .tv-mode #section-dashboard-integral .ranking-count { color: #aaa; }
                .tv-mode #section-caracterizacion .stats-grid, .tv-mode #section-dashboard-integral .stats-grid { grid-template-columns: repeat(3, 1fr); }
                
                .dash-total-pill {
                    font-size: 1.1rem;
                    color: #1e293b;
                    background: #e2e8f0;
                    padding: 6px 16px;
                    border-radius: 20px;
                    font-weight: 700;
                    display: inline-block;
                }
                .dash-card-header {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 12px;
                    margin-bottom: 20px;
                }
                .dash-card-header h3 {
                    margin: 0;
                    text-align: center;
                }
                .tv-mode .dash-total-pill {
                    font-size: 1.8rem;
                    color: var(--glass-bg);
                    background: #3b82f6;
                    padding: 8px 24px;
                    border-radius: 30px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
                }

                /* Demographic Inner Cards (TV Mode) */
                .tv-mode #section-caracterizacion .ranking-list, .tv-mode #section-dashboard-integral .ranking-list > div {
                    background: #2a2a2a !important;
                    border-color: #444 !important;
                }
                .tv-mode #section-caracterizacion .ranking-list, .tv-mode #section-dashboard-integral .ranking-list > div > div > span:first-child { color: #f0f0f0 !important; }
                .tv-mode #section-caracterizacion .ranking-list, .tv-mode #section-dashboard-integral .ranking-list > div > div > div > div:last-child { color: #fff !important; } /* Count */
                .tv-mode #section-caracterizacion .ranking-list, .tv-mode #section-dashboard-integral .ranking-list > div > div > div > div:first-child { color: #aaa !important; } /* "Personas" label */
                
                .tv-mode #section-caracterizacion .card-breakdown-container, .tv-mode #section-dashboard-integral .card-breakdown-container {
                    border-top-color: #555 !important;
                    color: #bbb !important;
                }
                .tv-mode #section-caracterizacion .card-breakdown-container, .tv-mode #section-dashboard-integral .card-breakdown-container .breakdown-label,
                .tv-mode #section-caracterizacion .card-breakdown-container, .tv-mode #section-dashboard-integral .card-breakdown-container .breakdown-value { 
                    font-size: 1.1rem !important; 
                    color: #e0e0e0 !important;
                }
                .tv-mode #section-caracterizacion .card-breakdown-container, .tv-mode #section-dashboard-integral .card-breakdown-container .breakdown-value { font-size: 1.2rem !important; font-weight: bold; }
                /* Minimalist Header & Buttons */
                #section-caracterizacion .dash-header, #section-dashboard-integral .dash-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    flex-wrap: wrap;
                    gap: 15px;
                }
                #section-caracterizacion .dash-header, #section-dashboard-integral .dash-header h2 { margin: 0; }
                #section-caracterizacion .dash-actions, #section-dashboard-integral .dash-actions {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                }
                #section-caracterizacion .dash-actions, #section-dashboard-integral .dash-actions .btn {
                    border-radius: 30px;
                    padding: 8px 18px;
                    font-size: 0.9rem;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border: 1px solid transparent;
                    transition: all 0.3s ease;
                    background: #f8f9fa;
                    color: #495057;
                }
                #section-caracterizacion .dash-actions, #section-dashboard-integral .dash-actions .btn:hover {
                    background: #e9ecef;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
                }
                
                /* TV Mode Buttons */
                .tv-mode #section-caracterizacion .dash-actions, .tv-mode #section-dashboard-integral .dash-actions .btn {
                    background: #2a2a2a;
                    color: #e0e0e0;
                    border: 1px solid #444;
                }
                .tv-mode #section-caracterizacion .dash-actions, .tv-mode #section-dashboard-integral .dash-actions .btn:hover {
                    background: #3a3a3a;
                    border-color: #555;
                }

.family-cards-container { display: flex; flex-direction: column; gap: 15px; }
                            .family-card { background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; padding-top: 25px; position: relative; display: flex; flex-direction: column; gap: 12px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
                            .family-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-color: #d0d0d0; }
                            .fc-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
                            .fc-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
                            .fc-label { font-size: 0.72rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
                            .fc-btn-remove { position: absolute; top: 10px; right: 10px; background: #fff0f0; border: 1px solid #ffd0d0; border-radius: 4px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--color-danger); cursor: pointer; transition: all 0.2s; }
                            .fc-btn-remove:hover { background: var(--color-danger); color: #fff; }
                            .fc-title { position: absolute; top: -10px; left: 15px; background: #fff; padding: 0 8px; font-size: 0.75rem; font-weight: bold; color: #888; border-radius: 10px; border: 1px solid #e0e0e0; }


/* ==========================================================================
   MOBILE UX IMPROVEMENTS (R1 & R2) - Max-Width: 768px
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .glass-container,
    .main-container,
    .container,
    .dashboard-container,
    .content-wrapper,
    .view,
    .section-content {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden;
    }

    .glass-container {
        height: auto !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
    }

    .card,
    .dash-card,
    .widget-card,
    .stat-card {
        padding: 15px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Header Mobile */
    header,
    .header,
    .dashboard-header,
    .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .dashboard-header h1,
    .header h1,
    .header-content h1 {
        font-size: 1.3rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .header-left,
    .header-right {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #user-info {
        font-size: 0.9rem !important;
        white-space: nowrap;
    }

    #btn-logout {
        min-height: 38px !important;
        padding: 6px 14px !important;
        width: auto !important;
    }

    /* Horizontal Navigation Mobile */
    .nav-tabs,
    .quick-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 15px !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .nav-tabs::-webkit-scrollbar,
    .quick-actions::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .nav-tab,
    .nav-btn,
    .quick-actions .nav-btn,
    .quick-actions .nav-tab {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        box-sizing: border-box !important;
    }

    /* Controls and Selectors */
    select,
    select.form-control,
    #campamentoFilter,
    #global-campamento-filter,
    .select-custom,
    .form-select,
    .filters-box select,
    .form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }

    /* Buttons and Spacing */
    .btn,
    button,
    .actions .btn,
    .dash-actions .btn {
        min-height: 40px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 8px 14px !important;
        font-size: 0.9rem !important;
    }

    .toolbar,
    .filters-box,
    .actions,
    .dash-actions {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    .table-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* Generador de Reportes Dinámicos - Mobile Responsiveness */
@media (max-width: 768px) {
    #section-reportes-dinamicos {
        height: auto !important;
    }
    
    #section-reportes-dinamicos > div {
        flex-direction: column !important;
        height: auto !important;
    }
    
    /* Panel lateral de filtros */
    #section-reportes-dinamicos > div > div:first-child {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid #e0e0e0 !important;
        padding: 15px !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    /* Título principal de filtros */
    #section-reportes-dinamicos > div > div:first-child h2 {
        font-size: 1.2rem !important;
    }

    /* Área principal de resultados */
    #section-reportes-dinamicos > div > div:last-child {
        padding: 15px !important;
        min-height: 60vh !important;
    }
    
    /* Cabecera de resultados (Título + Botones Exportar) */
    #section-reportes-dinamicos > div > div:last-child > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Contenedor de Botones de Exportar */
    #section-reportes-dinamicos > div > div:last-child > div:first-child > div:last-child {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    #section-reportes-dinamicos > div > div:last-child > div:first-child > div:last-child button {
        flex: 1 1 calc(50% - 10px) !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }

    /* Tabla de resultados */
    #rd-results-table th, #rd-results-table td {
        white-space: nowrap !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
    }
}