/* ================================================================
   PGC SYSTEM - NÚCLEO DE DISEÑO (VERSIÓN DEFINITIVA 2026)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');


/* El resto de tu código sigue abajo... */
:root {
    --primary-color: #1C4EFF;      
    --accent-color: #1C4EFF;       
    --accent-hover: #d97706;
    --bg-system: #f3f4f6;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --sidebar-width: 280px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --radius: 12px;
}
/* 🌙 MODO OSCURO */
body.dark {
    --bg-system: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #334155;
}
.badge-status-v3 {
    background: var(--bg-system);
    color: var(--text-main);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- RESET BASE Y FUENTE PREMIUM LEXEND --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Lexend', sans-serif !important; /* Forzamos la fuente en todo */
}

body { 
    background: var(--bg-system); 
    color: var(--text-main); 
    min-height: 100vh;
    line-height: 1.5;
}

/* Toque PRO para los títulos del PGC SYSTEM */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800; /* Bien negrita para que resalten */
    letter-spacing: -0.5px;
    color: var(--text-main);
}

/* Aseguramos que los botones y campos no usen fuentes del sistema */
input, select, textarea, button {
    font-family: 'Lexend', sans-serif !important;
}

/* --- BARRA SUPERIOR MÓVIL (TOP BAR) --- */
.mobile-top-bar {
    display: none; 
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 65px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 900;
}

.mobile-logo-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}
.mobile-logo-name span { color: var(--accent-color); }

.btn-open-sidebar {
    background: var(--accent-color);
    color: white;
    border: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* --- SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    position: fixed;
    left: 0; top: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: var(--transition);
}

.sidebar-header {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    border-bottom: 1px solid var(--border-color);
}

.brand-group { display: flex; align-items: center; gap: 12px; }

.brand-logo-small {
    background: var(--accent-color);
    color: white;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 1.3rem;
}

.sidebar-header h2 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
.sidebar-header h2 span { color: var(--accent-color); }

.btn-close-sidebar {
    display: none; 
    background: #fee2e2;
    color: #dc2626;
    border: none;
    width: 35px; height: 35px;
    border-radius: 8px;
    align-items: center; justify-content: center;
    cursor: pointer;
}

/* ================================================================
   NAVEGACIÓN PREMIUM (ESTILO SaaS PRO)
   ================================================================ */

.nav-container { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px 15px; 
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* 1. Enlaces Principales (Padres) */
.nav-link-parent {
    display: flex; 
    align-items: center; 
    padding: 12px 16px;
    color: var(--text-main); 
    text-decoration: none; 
    border-radius: 12px;
    font-weight: 600; 
    font-size: 14px; 
    margin-bottom: 6px; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

/* Iconos de los Padres */
.nav-link-parent i:first-child { 
    font-size: 1.3rem; 
    width: 32px; 
    transition: transform 0.3s ease;
}

/* Efecto Hover */
.nav-link-parent:hover { 
    background: rgba(21, 193, 219, 0.08); 
    color: var(--accent-color); 
    transform: translateX(4px);
}

.nav-link-parent:hover i:first-child {
    transform: scale(1.1);
}

/* Estado Activo */
.nav-link-parent.active { 
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: white !important; 
    box-shadow: 0 4px 12px rgba(37, 222, 235, 0.3) !important;
}

.nav-link-parent.active i { color: white;}




/* 2. Submenús (Efecto Árbol) */
.nav-section .submenu {
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    padding-left: 20px; 
    margin-left: 18px;
    border-left: 1.5px solid var(--border-color);
    display: flex; 
    flex-direction: column;
}

.nav-section.active-section .submenu { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Flecha de Acordeón */
.arrow { 
    margin-left: auto; 
    font-size: 11px; 
    opacity: 0.5;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.nav-section.active-section .arrow { 
    transform: rotate(180deg); 
    color: var(--accent-color);
    opacity: 1;
}

/* Enlaces del Submenú */
.submenu a {
    padding: 10px 16px; 
    font-size: 13.5px; 
    color: var(--text-muted);
    text-decoration: none; 
    position: relative;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* Punto indicador para el submenú */
.submenu a::before {
    content: '';
    position: absolute;
    left: -1.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 1.5px;
    background: var(--border-color);
    transition: all 0.3s ease;
}

.submenu a:hover, 
.submenu a.active { 
    color: var(--accent-color); 
    padding-left: 22px;
}

.submenu a:hover::before,
.submenu a.active::before { 
    width: 15px;
    background: var(--accent-color);
}

/* 3. FOOTER DEL SIDEBAR (DISEÑO INTEGRADO) */
.sidebar-footer { 
    padding: 20px; 
    background: var(--card-bg); 
    border-top: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* Botón de Tema Premium */
.theme-btn-v2 { 
    width: 100%; 
    padding: 12px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    font-size: 13.5px; 
    font-weight: 700; 
    cursor: pointer; 
    background: var(--bg-system);
    color: var(--text-main);
    transition: all 0.3s ease;
}

.theme-btn-v2:hover {
    border-color: var(--accent-color);
    background: var(--card-bg);
    color: var(--accent-color);
}

/* Botón Logout (Peligro pero elegante) */
.logout-btn { 
    width: 100%; 
    padding: 12px; 
    border-radius: 12px; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    font-size: 13.5px; 
    font-weight: 700; 
    text-decoration: none;
    background: #fff1f2; 
    color: #be123c; 
    transition: all 0.3s ease;
}

.logout-btn:hover { 
    background: #be123c; 
    color: white; 
    box-shadow: 0 4px 12px rgba(190, 18, 60, 0.2);
}

/* Ajustes Modo Oscuro */
body.dark .nav-link-parent:hover { background: #eff6ff; }
body.dark .logout-btn { background: rgba(225, 29, 72, 0.1); color: #fb7185; }
body.dark .logout-btn:hover { background: #e11d48; color: white; }

/* --- CONTENIDO --- */
#layout-content-wrapper {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 30px;
    transition: var(--transition);
}

/* --- FORMULARIOS PREMIUM --- */
.form-premium { max-width: 1000px; margin: 0 auto; }
.form-section { background: var(--card-bg); border-radius: var(--radius); padding: 25px; border: 1px solid var(--border-color); box-shadow: var(--shadow); margin-bottom: 25px; }
.section-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--accent-color); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--bg-system); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full-width { grid-column: span 2; }
label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
input, select { padding: 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); transition: var(--transition); }
input:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 3px rgba(235, 136, 37, 0.1); }

/* RADIO TILES (SÍ/NO) */
.radio-tile-group { display: flex; gap: 12px; margin-top: 5px; }
.radio-tile { flex: 1; position: relative; cursor: pointer; }
.radio-tile input { position: absolute; opacity: 0; }
.radio-tile .tile-content { padding: 12px; border: 2px solid var(--border-color); border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; transition: 0.3s; background: var(--card-bg); color: var(--text-muted); }
.radio-tile input:checked + .tile-content { background: var(--accent-color); color: white; border-color: var(--accent-color); }

.input-other { margin-top: 10px; border-style: dashed; background: var(--bg-system); display: none; }

.form-actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; }
.btn-submit { background: var(--accent-color); color: white; border: none; padding: 12px 25px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; }

/* Estilo para campos deshabilitados */
select:disabled, input:disabled {
    background-color: var(--bg-system) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 1024px) {
    .mobile-top-bar { display: flex; }
    #layout-content-wrapper { margin-left: 0; padding: 20px; padding-top: 85px; }
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,0.3); }
    .btn-close-sidebar { display: flex; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full-width { grid-column: span 1; }
    .form-actions { flex-direction: column-reverse; }
    .btn-submit, .btn-cancel { width: 100%; }
}

/* ================================================================
   SISTEMA DE DISEÑO PGC - COMPONENTES DE LISTADO (MIEMBROS)
   ================================================================ */

/* 1. CABECERA DE PÁGINA (PAGE HEADER) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.page-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header h2 i {
    color: var(--accent-color);
}

/* 2. BARRA DE HERRAMIENTAS (TOOLS BAR) */
.tools-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.export-buttons {
    display: flex;
    gap: 10px;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    border: 1px solid transparent;
}

.btn-export.pdf {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fee2e2;
}

.btn-export.excel {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #dcfce7;
}

.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    filter: brightness(0.95);
}

/* 3. INFORMACIÓN DEL USUARIO (AVATAR Y NOMBRE) */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(235, 136, 37, 0.2);
}

.user-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.2;
}

.user-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 4. ELEMENTOS DE LA TABLA (PILLS Y BADGES) */
.code-pill {
    background: var(--bg-system);
    padding: 4px 10px;
    border-radius: 8px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
    border: 1px solid var(--border-color);
}

.jac-info, .member-type, .doc-info {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
}

.jac-info i, .member-type i {
    color: var(--primary-color);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-activo {
    background: #dcfce7;
    color: #15803d;
}

.badge-inactivo {
    background: #fee2e2;
    color: #b91c1c;
}

/* 5. BOTONES DE ACCIÓN */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.act-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.act-btn.view { background: #eff6ff; color: #2563eb; }
.act-btn.edit { background: #fef9c3; color: #854d0e; }
.act-btn.status.activo { background: #fee2e2; color: #dc2626; }
.act-btn.status.inactivo { background: #dcfce7; color: #16a34a; }

.act-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ================================================================
   BARRA DE BÚSQUEDA PGC - VERSIÓN DATATABLES 2.0 (BLINDADA)
   ================================================================ */

/* ================================================================
   CONTENEDOR SUPERIOR DE TABLAS (BUSCADOR Y LONGITUD)
   ================================================================ */

/* 1. La barrita que contiene el buscador y el "Mostrar [10]" */
.top-toolbar, 
.dt-layout-row:first-child {
    display: flex !important;
    justify-content: space-between !important; /* Uno a la izquierda, otro a la derecha */
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    padding: 0 5px !important;
    flex-wrap: wrap !important; /* Para que en móvil se apilen */
}

/* 2. El Buscador (dt-search) */
.dt-search, 
.dataTables_filter {
    flex: 1 !important; /* Que crezca para ocupar espacio */
    max-width: 450px !important; /* Pero que no se pase de aquí */
    margin: 0 !important;
    position: relative !important;
    display: block !important;
}

/* 3. Ocultamos el texto feo de DataTables */
.dt-search label, 
.dataTables_filter label {
    display: block !important;
    width: 100% !important;
    font-size: 0 !important;
    color: transparent !important;
    margin: 0 !important;
}

/* 4. El cuadro de texto con su lupa */
.dt-search input, 
.dataTables_filter input {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 10px 15px 10px 45px !important; /* Espacio para la lupa */
    background: var(--bg-system) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 14px !important;
    color: var(--text-main) !important;
    font-size: 14px !important;
    transition: 0.3s !important;
}

.dt-search input:focus {
    border-color: var(--accent-color) !important;
    background: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(235, 136, 37, 0.1) !important;
    color: var(--text-main) !important;
}

/* 5. Inyectamos la Lupa */
.dt-search::before, 
.dataTables_filter::before {
    content: "\f52a";
    font-family: "bootstrap-icons" !important;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--text-muted);
    z-index: 10;
    pointer-events: none;
}

/* 6. Estilo para el "Mostrar [10] registros" */
.dt-length, 
.dataTables_length {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}

.dt-length select, 
.dataTables_length select {
    padding: 8px 30px 8px 12px !important;
    border-radius: 10px !important;
    border: 2px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .top-toolbar, .dt-layout-row:first-child {
        flex-direction: column-reverse !important; /* Buscador arriba, selector abajo */
        align-items: stretch !important;
    }
    .dt-search, .dataTables_filter {
        max-width: 100% !important;
    }
}

/* Paginación */
/* ================================================================
   PAGINACIÓN PREMIUM (ESTILO BOTONERA SAAS)
   ================================================================ */

/* 1. Contenedor del footer de la tabla */
.bottom-toolbar, 
.dt-layout-row:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap !important;
    gap: 15px;
}

/* 2. Estilo de los botones de paginación */
.dt-paging, 
.dataTables_paginate {
    display: flex !important;
    gap: 5px !important;
}

/* Botón individual */
.dt-paging-button, 
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover: El botón se ilumina y sube un poquito */
/* Hover: Al pasar el mouse, el botón se llena de color y el texto se vuelve blanco */
.dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-color) !important; /* Fondo Naranja */
    color: white !important; /* Texto Blanco - Ahora sí se verá perfecto */
    border-color: var(--accent-color) !important;
    transform: translateY(-3px); /* Sube un poquito más para el efecto pro */
    box-shadow: 0 6px 15px rgba(235, 136, 37, 0.3) !important;
}

/* IMPORTANTE: Ajuste para los iconos de flecha en el hover */
.dt-paging-button:hover i,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover i {
    color: white !important;
}


/* Estado Activo: El botón de la página actual */
.dt-paging-button.current,
.dt-paging-button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bg-system) !important; /* Un tono oscuro para diferenciar del hover */
    color: white !important;
    border-color: var(--text-main) !important;
    transform: none !important;
}

/* Botones deshabilitados (Cuando no hay más páginas) */
.dt-paging-button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: var(--bg-system) !important;
}

/* Ocultar los botones de "Primero" y "Último" en celulares para que no se amontonen */
@media (max-width: 480px) {
    .dt-paging-button.first, .dt-paging-button.last {
        display: none !important;
    }
}

/* --- RESPONSIVO PARA MÓVIL --- */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions, .header-actions .btn-primary {
        width: 100%;
    }
    
    .btn-primary {
        justify-content: center;
    }

    .tools-bar {
        justify-content: center;
    }

    .export-buttons {
        width: 100%;
    }

    .btn-export {
        flex: 1;
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

/* MODO OSCURO TWEAKS */
body.dark .user-avatar {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark .btn-export.pdf { background: rgba(220, 38, 38, 0.1); }
body.dark .btn-export.excel { background: rgba(22, 163, 74, 0.1); }

body.dark .act-btn.view { background: #1e293b; }
body.dark .act-btn.edit { background: #1e293b; }

/* ================================================================
   DISEÑO MÓDULO EDICIÓN DE MIEMBROS
   ================================================================ */

/* Contenedor de dos columnas que se vuelve una en móvil */
.profile-edit-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Badge de modo edición */
.badge-edit {
    display: inline-block;
    background: #fff7ed;
    color: #c2410c;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #ffedd5;
    margin-bottom: 8px;
}

/* Texto especial para superadmin */
.text-superadmin {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 13px;
}

/* Inputs con Iconos */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 15px;
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 45px !important; /* Espacio para el icono */
}

/* Alerta de información en edición */
.alert-info-edit {
    margin-top: 25px;
    background: #f0f9ff;
    border-left: 4px solid #0ea5e9;
    padding: 15px;
    font-size: 13px;
    color: #0369a1;
    display: flex;
    gap: 12px;
    border-radius: 0 12px 12px 0;
    line-height: 1.4;
}

.alert-info-edit i {
    font-size: 1.2rem;
}

/* Separación específica de grupos */
.form-group-spacing {
    margin-bottom: 20px;
}

/* Selectores dinámicos */
.select-status-dynamic {
    font-weight: 700;
    color: var(--accent-color);
}

/* --- RESPONSIVO PARA FORMULARIO DE EDICIÓN --- */
@media (max-width: 992px) {
    .profile-edit-container {
        grid-template-columns: 1fr; /* Colapsa a una sola columna */
    }
    
    .main-content {
        padding: 20px 15px;
    }

    .form-actions {
        position: sticky;
        bottom: 0;
        background: var(--bg-system);
        padding: 15px 0;
        margin-top: 10px;
        z-index: 10;
        border-top: 1px solid var(--border-color);
    }
    
    .btn-submit {
        width: 100%;
        justify-content: center;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    }
}

/* ================================================================
   DISEÑO VISTA DETALLADA DEL MIEMBRO (PROFILE VIEW)
   ================================================================ */

/* Cabecera de Perfil */
.profile-header-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.profile-cover {
    height: 140px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #f97316 100%);
    opacity: 0.9;
}

.profile-info-content {
    padding: 0 40px 30px 40px;
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-top: -60px;
    position: relative;
}

.profile-avatar-big {
    width: 140px;
    height: 140px;
    background: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 6px solid white;
}

.profile-main-data {
    flex: 1;
    padding-bottom: 10px;
}

.profile-main-data h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.profile-badges-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-header-actions {
    display: flex;
    gap: 12px;
    padding-bottom: 10px;
}

/* KPIs de Perfil */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card-item {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: var(--transition);
}

.kpi-icon-box {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.bg-attendance { background: #fff7ed; color: #f97316; }
.bg-money { background: #f0fdf4; color: #16a34a; }
.bg-total { background: #eff6ff; color: #2563eb; }

.kpi-value-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
}

.kpi-label-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Grilla de Información Detallada */
.info-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.detail-card {
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    padding: 20px;
}

.detail-card-header {
    font-weight: 800;
    font-size: 15px;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--bg-system);
    padding-bottom: 10px;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.detail-item span { color: var(--text-muted); font-weight: 500; }

/* Tabla de Aportes */
.finance-header {
    margin-bottom: 15px;
}

.finance-header h3 { font-size: 1.3rem; font-weight: 800; }
.finance-subtitle { font-size: 13px; color: var(--text-muted); }

.month-pill {
    background: var(--bg-system);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
}

.text-success-bold { color: #16a34a; font-weight: 800; }

.btn-view-img {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.empty-state-msg {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

.empty-state-msg i { font-size: 2.5rem; margin-bottom: 10px; display: block; }

/* Tags Sociales */
.tag-badge {
    background: #f1f5f9;
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
}

/* --- RESPONSIVIDAD VIEW PROFILE --- */
@media (max-width: 992px) {
    .profile-info-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 0;
    }

    .profile-avatar-big {
        margin-top: 0;
    }

    .profile-badges-group {
        justify-content: center;
    }

    .profile-header-actions {
        width: 100%;
        justify-content: center;
    }

    .info-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .profile-header-actions {
        flex-direction: column;
    }
    
    .profile-header-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
   DASHBOARD DE MIEMBROS - DISEÑO SaaS PROFESIONAL
   ================================================================ */

/* --- 1. CONTENEDORES Y FILTROS --- */
.filter-panel {
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

.filter-grid-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-item label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-cancel-mini {
    display: block;
    padding: 11px;
    background: linear-gradient(135deg, #071340  0%, #ef4444 100%);
    color: beige;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.button-dt-paging-button {
    color: var(--text-main) !important;
    background-color: var(--accent-color) !important;
}
.btn-cancel-mini:hover {
    background: #e2e8f0;
    color: var(--accent-color);
}

/* --- 2. TARJETAS KPI (ESTADÍSTICAS) --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card-item {
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition);
}

.kpi-card-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Bordes de color para identificar rápido */
.border-primary { border-top: 4px solid var(--primary-color); }
.border-success { border-top: 4px solid var(--secondary-color); }
.border-danger  { border-top: 4px solid #ef4444; }
.border-warning { border-top: 4px solid var(--accent-color); }

.kpi-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.bg-total-miembros { background: #e0f2fe; color: #0369a1; }
.bg-money { background: #dcfce7; color: #15803d; }
.bg-attendance { background: #fee2e2; color: #b91c1c; }
.bg-orange-soft { background: #fff7ed; color: #c2410c; }

.kpi-value-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

.kpi-label-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- 3. CUADRÍCULA DE GRÁFICAS --- */
.charts-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.chart-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Evita desbordamiento en grids */
}

.chart-wrapper {
    position: relative;
    height: 280px; /* Altura controlada para Chart.js */
    width: 100%;
}

.chart-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 4. TABLA DE ÚLTIMOS REGISTROS (SCROLL MÓVIL) --- */
.card-title-modern {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--text-main);
}

.table-responsive {
    width: 100%;
    overflow-x: auto; /* El truco del scroll lateral */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* Forzamos un ancho mínimo para que en celular la tabla no se aplaste */
.table-responsive table {
    min-width: 850px; 
    border-collapse: collapse;
}

.table-responsive th {
    background: var(--bg-system);
    padding: 12px 15px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
}

.table-responsive td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    white-space: nowrap; /* Evita que los nombres se rompan en dos filas */
}

/* --- 5. RESPONSIVIDAD EXTREMA --- */

/* Tablets */
@media (max-width: 1100px) {
    .charts-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* Celulares */
@media (max-width: 768px) {
    #layout-content-wrapper {
        padding: 15px;
        padding-top: 85px; /* Altura de la Top Bar móvil */
    }

    /* Los KPIs se ven mejor en 2 columnas en móvil */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .kpi-card-item {
        padding: 15px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .kpi-value-num {
        font-size: 1.2rem;
    }

    .filter-grid-dashboard {
        grid-template-columns: 1fr 1fr;
    }

    .btn-clear-container {
        grid-column: span 2;
    }
}

/* Celulares muy pequeños */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .filter-grid-dashboard {
        grid-template-columns: 1fr;
    }

    .btn-clear-container {
        grid-column: span 1;
    }
    
    .page-header h2 {
        font-size: 1.3rem;
    }
}

/* Ajustes Modo Oscuro para Gráficas */
body.dark .chart-container {
    background: var(--card-bg);
}

body.dark .table-responsive th {
    background: #1e293b;
}


/* ================================================================
   SISTEMA DE MODALES PREMIUM (PGC MODAL)
   ================================================================ */

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: none; /* Se activa por JS */
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal-card {
    background: var(--card-bg);
    width: 100%;
    max-width: 400px;
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#modal-icon-container {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
}

/* Tipos de Modal */
.modal-success #modal-icon-container { background: #dcfce7; color: #16a34a; }
.modal-error #modal-icon-container { background: #fee2e2; color: #dc2626; }
.modal-warning #modal-icon-container { background: #fef3c7; color: #d97706; }
.modal-info #modal-icon-container { background: #e0f2fe; color: #0284c7; }

.modal-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-main);
}

.modal-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
}


.modal-footer .btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 10px;
}

.modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #00ffff 0%, var(--accent-color) 100%);
    box-shadow: 0 6px 15px rgba(255, 122, 24, 0.3);
}

.modal-footer .btn-cancel {
    background: #ff7a18;
    color: var(--text-main);
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.modal-footer .btn-cancel:hover {
    background: #ff0000;
    color: white;
}

/* ================================================================
   DISEÑO PRO: REGISTRO DE APORTES (FINANZAS PGC)
   ================================================================ */

.header-centered {
    text-align: center;
    margin-bottom: 40px;
}

.header-icon-top {
    font-size: 3.5rem;
    color: var(--accent-color);
    margin-bottom: 5px;
    filter: drop-shadow(0 5px 15px rgba(235, 136, 37, 0.2));
}

/* Contenedor Principal del Formulario */
.form-card-container {
    background: var(--card-bg);
    max-width: 600px;
    width: 100%;
    margin: 0 auto 60px auto;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.form-pgc-pro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Input de Búsqueda y Resultados */
.search-input-wrapper {
    position: relative;
    width: 100%;
}

.form-control-pgc {
    width: 100% !important; /* Forzar el ancho total */
    display: block;
}

.autocomplete-results {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Badge de Miembro Seleccionado */
.selection-badge {
    display: none;
    margin-top: 15px;
    background: var(--card-bg);
    border: 2px dashed var(--accent-color);
    padding: 15px;
    border-radius: 15px;
    animation: fadeInSlide 0.3s ease;
}

.selection-badge.active { display: block; }

.selection-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.selection-content i {
    font-size: 2rem;
    color: var(--primary-color);
}

.selection-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.selection-text strong { font-size: 1rem; color: var(--text-main); }
.selection-text span { font-size: 0.85rem; color: var(--text-muted); }

.btn-remove-selection {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-remove-selection:hover { background: #dc2626; color: white; }

/* Grid de Mes y Año */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Input de Dinero Estilizado */
.input-money-wrapper {
    position: relative;
    width: 100%;
}

.currency-symbol {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    color: var(--accent-color);
    font-size: 1.2rem;
}

.input-money-wrapper .form-control-pgc {
    padding-left: 40px !important;
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--bg-system);
    border: 2px solid var(--border-color);
    color: var(--text-main);
    height: 60px;
}

/* Subida de Archivos */
.file-upload-wrapper {
    width: 100%;
}

.file-input { display: none; }
.file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
    background: var(--bg-system);
}

.file-label:hover { border-color: var(--accent-color); background: #fffcf9; }
.file-label i { font-size: 1.8rem; color: var(--text-light); }
.file-label span { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-top: 5px; }

/* Acciones Finales */
.form-actions-pgc {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-cancel {
    flex: 1;
    background: linear-gradient(135deg, #071340  0%, #ef4444 100%);
    color: beige;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-cancel:hover { background: #e2e8f0; color: var(--accent-color); }

.btn-submit-pgc {
    flex: 2;
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(235, 136, 37, 0.4);
    transition: 0.3s;
}

.btn-submit-pgc:hover {
    background: var(--accent-color);
    box-shadow: 0 8px 25px rgba(235, 136, 37, 0.6);
    
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .form-card-container { padding: 25px; border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-actions-pgc { flex-direction: column-reverse; }
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   GESTIÓN DE APORTES - DISEÑO PREMIUM
   ================================================================ */

/* Avatar pequeño para tablas */
.user-avatar-sm {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: white; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}

.user-name-table { font-weight: 700; font-size: 13.5px; color: var(--text-main); }
.user-sub-table { font-size: 11px; color: var(--text-muted); }

/* Filtros rápidos */
.btn-primary-mini {
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: white; border: none; padding: 10px 20px;
    border-radius: 8px; font-weight: 700; cursor: pointer;
}
/* Gráfica Card */
.chart-card {
    padding: 25px; margin-bottom: 25px;
}

/* ================================================================
   SISTEMA DE MODALES PGC (PGC-MODAL)
   ================================================================ */
.modal-pgc {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    z-index: 2000; align-items: center; justify-content: center;
}

.modal-pgc.active { display: flex; animation: modalFadeIn 0.3s ease; }

.modal-pgc-content {
    background: var(--card-bg); width: 100%; max-width: 450px;
    border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
    border: 1px solid var(--border-color);
}

.modal-pgc-header {
    padding: 20px 25px; background: var(--bg-system);
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.modal-pgc-header h3 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
.modal-pgc-close { background: none; border: none; font-size: 1.8rem; color: var(--text-muted); cursor: pointer; }

.modal-pgc-body { padding: 25px; }

.detail-row {
    display: flex; justify-content: space-between; padding: 12px 0;
    border-bottom: 1px solid var(--bg-system);
}
.detail-row span { color: var(--text-muted); font-size: 14px; }
.detail-row strong { color: var(--text-main); font-size: 14px; }

.comprobante-preview {
    margin-top: 20px; padding: 15px; background: var(--bg-system);
    border-radius: 12px; text-align: center;
}
.comprobante-preview p { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--text-muted); }

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Responsividad para lista de aportes */
@media (max-width: 768px) {
    .modal-pgc-content { margin: 15px; border-radius: 15px; }
    .btn-clear-container .d-flex { flex-direction: column; width: 100%; }
    .btn-primary-mini, .btn-cancel-mini { width: 100%; }
}


/* ================================================================
   GESTIÓN DE GASTOS - DISEÑO PREMIUM
   ================================================================ */

/* Colores para egresos */
.border-danger-soft {
    border-bottom: 2px solid #fee2e2 !important;
}

.border-dark {
    border-top: 4px solid #1e293b !important;
}

.text-danger-bold {
    color: #e11d48;
    font-weight: 800;
}

.btn-dark-mini {
    background: #1e293b !important;
    color: white !important;
}

/* Reutilización de componentes con tema rojo */
.btn-expense {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: white !important;
}

/* Específicos para la tabla de gastos */
#tablaGastos strong {
    color: var(--text-main);
    font-size: 14px;
}

/* Animación de la barra de descarga de datos */
.chart-card {
    border-left: 5px solid #e11d48;
}

/* --- RESPONSIVIDAD LISTA GASTOS --- */
@media (max-width: 768px) {
    .header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .btn-expense {
        grid-column: span 2;
        justify-content: center;
    }
}

/* ================================================================
   DISEÑO PRO: BALANCE GENERAL (PGC FINANZAS)
   ================================================================ */

.header-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* Filtros superiores compactos */
.filter-balance-top {
    display: flex;
    gap: 10px;
    background: var(--card-bg);
    padding: 8px 15px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.filter-balance-top select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    background-color: var(--bg-system);
}

.btn-reset-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: var(--bg-system);
    color: var(--text-muted);
    border-radius: 8px;
    transition: 0.3s;
}

.btn-reset-balance:hover {
    color: var(--accent-color);
    background: #fff;
    box-shadow: 0 0 0 1px var(--accent-color);
}

/* Gráfica de Balance */
.chart-card-balance {
    padding: 25px;
    margin-bottom: 30px;
    border-left: 5px solid var(--primary-color);
}

/* Estilos de Tabla de Balance */
.table-balance-detail {
    width: 100%;
    min-width: 650px; /* Evita que se amontone en móvil */
}

.text-right { text-align: right !important; }

.bg-success-light {
    background: #dcfce7;
    color: #15803d;
}

.bg-danger-light {
    background: #fee2e2;
    color: #b91c1c;
}

.balance-badge {
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    display: inline-block;
}

.text-success-bold { color: #16a34a; font-weight: 700; }
.text-danger-bold { color: #dc2626; font-weight: 700; }

/* --- RESPONSIVIDAD BALANCE --- */
@media (max-width: 1024px) {
    .header-balance {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-balance-top {
        width: 100%;
    }
    
    .filter-balance-top select {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 15px;
        padding-top: 80px;
    }

    .table-balance-detail th, 
    .table-balance-detail td {
        padding: 12px 8px;
        font-size: 13px;
    }
}

/* ================================================================
   MODULO REUNIONES - DISEÑO PRO SaaS
   ================================================================ */

/* Grid de Filtros */
.filter-grid-reuniones {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 20px;
    align-items: flex-end;
}

.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.input-icon-wrapper input {
    padding-left: 38px !important;
}

.btn-reset-alt {
    display: block;
    padding: 11px 20px;
    background: var(--bg-system);
    color: var(--text-muted);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

/* Date Badge Box */
.date-badge-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.date-badge-box.type-ordinaria { background: linear-gradient(135deg, #10b981, #059669); }
.date-badge-box.type-extraordinaria { background: linear-gradient(135deg, #ef4444, #be123c); }

.db-day { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.db-month { font-size: 10px; font-weight: 700; text-transform: uppercase; margin-top: 2px; }

/* Info de la Reunión */
.reunion-main-info { display: flex; flex-direction: column; gap: 4px; }
.reunion-title { font-size: 15px; color: var(--text-main); }
.reunion-meta { display: flex; gap: 15px; font-size: 12px; color: var(--text-muted); font-weight: 500; }

.fine-badge { color: #f59e0b; font-weight: 700; }

/* Quorum Pills */
.quorum-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
    width: fit-content;
    margin-top: 5px;
}

.q-cumplido { background: #dcfce7; color: #15803d; }
.q-fallido { background: #fee2e2; color: #b91c1c; }
.q-pendiente { background: #f1f5f9; color: #64748b; }

/* Asistencia Stat */
.attendance-stat { font-size: 13px; color: var(--text-light); }
.attendance-stat.stat-active { color: var(--text-main); }
.attendance-stat strong { font-size: 16px; color: var(--primary-color); }

/* Badge de Tipo */
.badge-type-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    color: white;
}
.badge-type-pill.type-ordinaria { background: #10b981; }
.badge-type-pill.type-extraordinaria { background: #ef4444; }

/* Botones de Acción Mini */
.action-buttons-group { display: flex; gap: 8px; justify-content: center; align-items: center; }

.btn-act {
    width: 35px; height: 35px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: 0.3s;
}

.btn-act.call { background: #f0fdf4; color: #10b981; }
.btn-act.edit { background: #fffbeb; color: #f59e0b; }
.btn-act.delete { background: #fef2f2; color: #ef4444; }
.btn-act.report { background: #eff6ff; color: #2563eb; }

.btn-act:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.lock-indicator { color: #94a3b8; font-size: 1.3rem; }

/* Empty State */
.empty-table-state { padding: 60px !important; text-align: center; color: var(--text-light); }
.empty-table-state i { font-size: 3rem; margin-bottom: 10px; display: block; }

/* --- RESPONSIVIDAD REUNIONES --- */
@media (max-width: 900px) {
    .filter-grid-reuniones { grid-template-columns: 1fr 1fr; }
    .btn-clear-container { grid-column: span 2; }
}

@media (max-width: 600px) {
    .filter-grid-reuniones { grid-template-columns: 1fr; }
    .btn-clear-container { grid-column: span 1; }
    .table-reuniones { min-width: 750px; } /* Forzar scroll lateral */
}

/* ================================================================
   DISEÑO PRO: CREACIÓN DE REUNIONES (PGC)
   ================================================================ */

.wider-form {
    max-width: 750px !important; /* Un poco más ancho para los grids de 3 columnas */
}

.form-section-group {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bg-system);
}

.section-subtitle {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid de 3 columnas para el horario */
.form-grid-3 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 15px;
}

/* Switch / Toggle Personalizado */
.custom-toggle-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-system);
    padding: 15px;
    border-radius: 12px;
}

.switch-label {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.switch-label input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(24px); }

.toggle-text strong { display: block; font-size: 14px; color: var(--text-main); }
.text-muted-sm { font-size: 11px; color: var(--text-muted); }

/* Caja de Configuración de Multa */
.fine-config-box {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
    opacity: 0;
    margin-top: 0;
}

.fine-config-box.active {
    max-height: 200px;
    opacity: 1;
    margin-top: 20px;
    padding: 15px;
    background: #E9FDFA;
    border: 1px solid #fef3c7;
    border-radius: 12px;
}

.alert-mini-info {
    margin-top: 10px;
    font-size: 11px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Estilo para los inputs de hora y fecha */
input[type="date"], input[type="time"] {
    cursor: pointer;
}

/* --- RESPONSIVIDAD REUNIÓN --- */
@media (max-width: 768px) {
    .form-grid-3 {
        grid-template-columns: 1fr; /* Apilar en móvil */
    }
    
    .custom-toggle-container {
        flex-direction: row;
        align-items: center;
    }
}

/* ================================================================
   MODULO ASISTENCIA - DISEÑO PRO SaaS
   ================================================================ */

.breadcrumb-mini {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 1px;
}

.fine-badge-alt {
    background: #fff1f2;
    color: #e11d48;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #fee2e2;
}

/* Dashboard de Quórum */
.quorum-realtime-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 25px;
}

.q-stat { display: flex; flex-direction: column; gap: 5px; }
.q-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.q-val { font-size: 1.6rem; font-weight: 800; color: var(--text-main); line-height: 1; }

.quorum-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.quorum-badge.valid { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.quorum-badge.invalid { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* Buscador de Asistencia */
.attendance-search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: center;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.1rem;
}

.search-input-wrapper input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    font-weight: 500;
}

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.per-page-selector select {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* Tabla de Asistencia Pro */
.table-asistencia-pro { width: 100%; border-collapse: collapse; }
.table-asistencia-pro th { background: var(--bg-system); padding: 15px; font-size: 12px; color: var(--text-muted); text-align: left; }
.table-asistencia-pro td { padding: 15px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }

/* Resaltar fila seleccionada */
.row-checked { background: #10b981 !important; }

/* Switch de Asistencia (iOS Style) */
.switch-asistencia {
    position: relative;
    display: inline-block;
    width: 55px; height: 28px;
}

.switch-asistencia input { opacity: 0; width: 0; height: 0; }

.slider-round {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1; transition: .3s; border-radius: 34px;
}

.slider-round:before {
    position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px;
    background-color: white; transition: .3s; border-radius: 50%;
}

input:checked + .slider-round { background-color: #10b981; }
input:checked + .slider-round:before { transform: translateX(27px); }


/* Alerta de bloqueo */
.alert-locked-session {
    background: #eff6ff; color: #1e40af; padding: 15px; border-radius: 12px;
    display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 25px;
    border: 1px solid #bfdbfe;
}

.table-footer-action {
    padding: 20px; text-align: center; background: var(--bg-system);
}

.btn-load-more {
    padding: 10px 30px; border-radius: 10px; border: 1px solid var(--border-color);
    background: white; font-weight: 700; color: var(--text-muted); cursor: pointer;
}

/* Final Actions */
.attendance-final-actions {
    display: flex; justify-content: flex-end; margin-top: 30px; padding-bottom: 50px;
}

.btn-save-attendance {
    padding: 18px 45px !important;
    font-size: 1rem !important;
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.3) !important;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .quorum-realtime-card { grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; }
    .q-legal-status { grid-column: span 2; }
    .attendance-search-bar { flex-direction: column; align-items: stretch; }
    .per-page-selector { justify-content: space-between; }
    .attendance-final-actions { flex-direction: column; }
    .btn-save-attendance { width: 100%; }
}

/* --- ESTILOS PARA RESULTADOS DE BÚSQUEDA ASISTENCIA --- */

.user-info-sm {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-data-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.user-name-sm {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
}

.user-doc-sm {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
}

.avatar-xs {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: whitesmoke;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.code-pill-sm {
    background: var(--bg-system);
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Monaco', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-color);
}

/* --- ESTILO EXTRA PARA MODO EDICIÓN --- */

.badge-edit-mode {
    display: inline-block;
    background: #fff7ed;
    color: #c2410c;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #ffedd5;
    margin-bottom: 10px;
}

/* Forzar que los campos de dinero de edición mantengan el ancho */
.wider-form .input-money-wrapper .form-control-pgc {
    width: 100% !important;
}

/* Resaltado de la sección de multas si está activa */
.highlight-section {
    background: linear-gradient(to right, transparent, rgba(235, 136, 37, 0.03));
    padding: 15px;
    border-radius: 12px;
}

/* Responsividad para el Grid de Horario en Edición */
@media (max-width: 600px) {
    .form-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   DISEÑO REPORTE OFICIAL ASISTENCIA (VER-ASISTENCIA)
   ================================================================ */

.header-report {
    margin-bottom: 30px;
}

.report-tag {
    display: inline-block;
    background: var(--bg-system);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
}

/* KPIs del Reporte */
.attendance-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card-report {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.stat-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.stat-val { font-size: 1.6rem; font-weight: 800; color: var(--text-main); margin-top: 5px; }

.quorum-status-box {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left !important;
}

.quorum-status-box i { font-size: 1.8rem; }
.quorum-status-box div { display: flex; flex-direction: column; }
.quorum-status-box strong { font-size: 14px; }
.quorum-status-box span { font-size: 11px; font-weight: 600; opacity: 0.8; }

.quorum-status-box.valid { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.quorum-status-box.invalid { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Grid de Listas */
.attendance-lists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}

.report-card {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.report-card-header {
    padding: 15px 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
}

.list-success .report-card-header { background: #f0fdf4; color: #16a34a; }
.list-danger .report-card-header { background: #fef2f2; color: #dc2626; }

/* BARRA DE MULTA DENTRO DEL RECUADRO */
.fine-alert-bar {
    background: #450a0a;
    color: white;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SCROLL INTELIGENTE PARA MILES DE MIEMBROS */
.report-table-scroll {
    max-height: 500px; /* Si la lista es muy larga, aparece el scroll */
    overflow-y: auto;
}

.report-table-scroll table { width: 100%; border-collapse: collapse; }
.report-table-scroll th { background: var(--bg-system); padding: 10px 20px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; text-align: left; position: sticky; top: 0; z-index: 10; }
.report-table-scroll td { padding: 12px 20px; border-bottom: 1px solid var(--bg-system); font-size: 14px; }

.code-tag { background: var(--bg-system); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-color); }

/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {
    .attendance-lists-grid { grid-template-columns: 1fr; } /* Se apilan en móvil */
}

@media (max-width: 600px) {
    .attendance-stats-summary { grid-template-columns: 1fr 1fr; }
    .quorum-status-box { grid-column: span 2; }
}

/* ================================================================
   DISEÑO PRO: AUDITORÍA DE INASISTENCIAS (REUNIONES)
   ================================================================ */

.table-audit { width: 100%; border-collapse: collapse; }
.table-audit th { background: var(--bg-system); padding: 15px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); text-align: left; border-bottom: 2px solid var(--border-color); }
.table-audit td { padding: 15px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }

/* Badge de participación */
.badge-ratio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

/* Valor de la deuda */
.deuda-value {
    font-family: 'Monaco', monospace;
    font-weight: 800;
    font-size: 15px;
}

/* Botón de Cartera */
.btn-manage-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-manage-wallet:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Grillas de Filtros específicas para auditoría */
.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-icon-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.input-icon-wrapper input {
    padding-left: 35px !important;
}

/* --- RESPONSIVIDAD AUDITORÍA --- */
@media (max-width: 768px) {
    .table-audit { min-width: 700px; } /* Forzar scroll lateral en móvil */
    
    .header-actions {
        width: 100%;
    }
    
    .btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* --- MEJORAS DE UX --- */

/* Efecto de cristal para el sidebar en modo oscuro */
body.dark .sidebar {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
}

/* Scrollbar personalizado para el nav-container */
.nav-container::-webkit-scrollbar {
    width: 5px;
}
.nav-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* Animación sutil para los enlaces del menú */
.nav-link-parent:active {
    transform: scale(0.98);
}

/* Estilo para el overlay de fondo cuando el menú móvil está abierto */
@media (max-width: 1024px) {
    .sidebar::before {
        content: "";
        position: fixed;
        top: 0; left: 100%;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    .sidebar.open::before {
        left: var(--sidebar-width);
        opacity: 1;
        pointer-events: auto;
    }
}

/* --- OPTIMIZACIÓN DE TARJETAS (CARDS) --- */
.card-premium {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 20px;
    transition: var(--transition);
}
.card-premium:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* --- ESTADOS DE CARGA (SKELETONS) --- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-system) 25%, var(--border-color) 50%, var(--bg-system) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   1. RESET SAGRADO (PROHIBIDO TOCAR)
   ================================================================ */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
}
* { box-sizing: border-box !important; }

#layout-content-wrapper {
    width: calc(100% - var(--sidebar-width)) !important;
    margin-left: var(--sidebar-width) !important;
    padding: 30px;
    min-width: 0;
}

@media (max-width: 1024px) {
    #layout-content-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 15px !important;
        padding-top: 80px !important;
        display: block !important;
    }
}

/* ================================================================
   2. DISEÑO SaaS PREMIUM (AJUSTADO AL RESET)
   ================================================================ */

.debt-summary-card {
    width: 100% !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white; padding: 25px; border-radius: 20px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.debt-amount-badge {
    background: #eb8825; color: white; padding: 10px 20px;
    border-radius: 12px; font-size: 1.5rem; font-weight: 900;
}

.gestionar-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; width: 100%;
}

/* TARJETAS DE MULTA */
.fine-card-pro {
    width: 100% !important; background: var(--card-bg);
    border: 1px solid var(--border-color); border-left: 5px solid #ef4444;
    border-radius: 15px; padding: 20px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
}

.fine-info strong { display: block; font-size: 16px; color: var(--text-main); }
.fine-val { font-size: 1.3rem; font-weight: 800; color: #ef4444; margin-top: 5px; }

.fine-actions { display: flex; gap: 10px; }

.btn-pay { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; padding: 8px 15px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-excuse { background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; padding: 8px 15px; border-radius: 8px; font-weight: 700; cursor: pointer; }

/* TABLAS E HISTORIAL */
.table-history { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-history th { text-align: left; padding: 10px; background: var(--bg-system); color: var(--text-muted); }
.table-history td { padding: 10px; border-bottom: 1px solid var(--border-color); }

.pill-pagada { color: #10b981; font-weight: 800; text-transform: uppercase; font-size: 11px; }
.pill-excusada { color: #3b82f6; font-weight: 800; text-transform: uppercase; font-size: 11px; }

/* REPARACIÓN MÓVIL DEFINITIVA */
@media (max-width: 768px) {
    .gestionar-grid { display: block !important; }
    
    .debt-summary-card { flex-direction: column; text-align: center; gap: 15px; }
    .debt-amount-badge { width: 100%; }

    .fine-card-pro { flex-direction: column; text-align: center; gap: 15px; }
    .fine-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
    
    .btn-pay, .btn-excuse { width: 100%; padding: 12px; }
    
    .history-section { margin-top: 30px; }
}

/* ================================================================
   MÓDULO ACTIVIDADES - DISEÑO SaaS PROFESIONAL
   ================================================================ */

/* 1. Filtros */
.filter-grid-main {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.btn-reset-alt {
    height: 42px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-system);
    color: var(--text-muted);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}

.btn-reset-alt:hover {
    color: var(--accent-color);
    background: white;
}

/* 2. Date Badge (Calendario) */
.date-badge-v2 {
    width: 50px;
    height: 55px;
    background: var(--bg-system);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.date-badge-v2 .day {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

.date-badge-v2 .month {
    font-size: 9px;
    font-weight: 800;
    background: var(--accent);
    color: white;
    width: 100%;
    text-align: center;
    padding: 2px 0;
    margin-top: 4px;
    text-transform: uppercase;
}

/* 3. Estilos de Fila */
.activity-title { font-weight: 700; color: var(--text-main); font-size: 14.5px; }
.activity-location { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.time-pill {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.type-badge {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    background: rgba(var(--color), 0.1); /* Esto requiere que el color venga en RGB, pero como viene en HEX: */
    border: 1px solid var(--color);
    color: var(--color);
    text-transform: uppercase;
}

.attendance-counter {
    background: var(--bg-system);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.attendance-counter.active {
    background: #dcfce7;
    color: #15803d;
}

/* 4. Botones de Acción Icono */
.action-flex {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.btn-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: 0.3s;
    text-decoration: none;
}

.btn-icon.check { background: #f0fdf4; color: #16a34a; }
.btn-icon.view { background: #eff6ff; color: #2563eb; }
.btn-icon.edit { background: #fffbeb; color: #d97706; }
.btn-icon.delete { background: #fef2f2; color: #dc2626; }

.btn-icon:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.icon-locked { color: #94a3b8; font-size: 1.2rem; }

/* 5. Paginación */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.page-link {
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    transition: 0.3s;
}

.page-link.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* ================================================================
   RESPONSIVIDAD MÓVIL (ANTIDESBORDAMIENTO)
   ================================================================ */

@media (max-width: 1024px) {
    .filter-grid-main {
        grid-template-columns: 1fr 1fr;
    }
    .btn-reset-wrapper { grid-column: span 2; }
    .btn-reset-alt { width: 100%; }
}

@media (max-width: 768px) {
    .filter-grid-main { grid-template-columns: 1fr; }
    .btn-reset-wrapper { grid-column: span 1; }
    
    /* La tabla en móvil debe ser scrollable para no romper el diseño */
    .table-results-container {
        padding: 0;
        border-radius: 15px;
    }
    
    .table-premium {
        min-width: 700px; /* Forzamos un ancho mínimo para que el scroll horizontal funcione */
    }
}

/* ================================================================
   DISEÑO FORMULARIOS PREMIUM (ACTIVIDADES)
   ================================================================ */

/* 1. Header Banner Dinámico */
.create-header-banner {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    border-left: 8px solid var(--accent-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.4s ease;
    box-shadow: var(--shadow);
}

.header-content-flex { display: flex; align-items: center; gap: 20px; }
.header-icon-box {
    width: 50px; height: 50px;
    background: var(--bg-system);
    color: var(--accent-color);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.header-text h2 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); }
.header-text p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.header-badge-step { font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: 1px; }

/* 2. Grid del Formulario */
.form-premium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.card-form-section {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 25px;
}

.section-title-v2 {
    font-size: 15px; font-weight: 800; color: var(--text-main);
    margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.section-title-v2 i { color: var(--accent-color); }

/* 3. Inputs y Controles */
.input-pgc {
    width: 100%; padding: 12px 15px;
    border-radius: 12px; border: 1px solid var(--border-color);
    background: var(--bg-system); color: var(--text-main);
    font-size: 14px; transition: 0.3s;
}
.input-pgc:focus {
    border-color: var(--accent-color);
    background: var(--bg-system);
    color: var(--text-main);
    box-shadow: 0 0 0 4px rgba(235, 136, 37, 0.1);
    outline: none;
}

.required { color: #ef4444; margin-left: 3px; }

.select-preview-wrapper { position: relative; display: flex; align-items: center; }
.color-dot-indicator {
    position: absolute; right: 35px;
    width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent-color);
    border: 2px solid white; box-shadow: 0 0 0 1px #ddd;
}

.input-with-icon-v2 { position: relative; }
.input-with-icon-v2 i { position: absolute; left: 15px; top: 12px; color: #94a3b8; }
.input-with-icon-v2 input { padding-left: 45px; }

/* 4. Logística y Acciones */
.form-grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }

.btn-save-activity {
    width: 100%; padding: 18px;
    background: var(--accent-color); color: white;
    border: none; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 20px rgba(235, 136, 37, 0.2);
}
.btn-save-activity:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(235, 136, 37, 0.3); }

.btn-cancel-link {
    display: block; text-align: center; margin-top: 15px;
    color: var(--text-muted); font-weight: 600; text-decoration: none; font-size: 14px;
}

/* 5. Alertas */
.alert-error-shake {
    display: none; background: #fee2e2; color: #b91c1c;
    padding: 15px; border-radius: 12px; margin-bottom: 20px;
    font-weight: 700; font-size: 13px; align-items: center; gap: 10px;
}
.alert-error-shake.show { display: flex; animation: shake 0.5s; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .form-premium-grid { grid-template-columns: 1fr; }
    .create-header-banner { flex-direction: column; text-align: center; gap: 15px; }
    .header-content-flex { flex-direction: column; }
}

/* ================================================================
   VISTA DETALLADA DE ACTIVIDAD (VER-ACTIVIDAD)
   ================================================================ */

/* 1. Hero Card (Cabecera Impactante) */
.activity-hero-card {
    position: relative;
    padding: 60px 40px;
    border-radius: 25px;
    background-color: var(--act-color);
    color: white;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.hero-bg-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}

.hero-content { position: relative; z-index: 2; }

.hero-top-labels { display: flex; gap: 10px; margin-bottom: 20px; }

.badge-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 15px; letter-spacing: -1px; }

.hero-info-row { display: flex; gap: 25px; font-size: 14px; font-weight: 600; }
.info-item { display: flex; align-items: center; gap: 8px; }
.info-item i { font-size: 1.1rem; opacity: 0.8; }

/* 2. Grid de Detalles */
.activity-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.card-section-header {
    font-weight: 800; font-size: 17px; color: var(--text-main);
    margin-bottom: 20px; padding-bottom: 15px;
    border-bottom: 1px solid var(--bg-system);
    display: flex; align-items: center; gap: 12px;
}
.card-section-header i { color: var(--act-color); font-size: 1.4rem; }

.description-body { font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.empty-text { font-style: italic; color: #94a3b8; }

.audit-footer { margin-top: 20px; font-size: 11px; color: #94a3b8; font-weight: 600; display: flex; gap: 8px; }

/* 3. Widgets del Sidebar */
.stat-widget { text-align: center; padding: 30px !important; }
.stat-icon-circle {
    width: 60px; height: 60px; background: #f0fdf4; color: #16a34a;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 1.8rem;
}
.stat-large-number { font-size: 3rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.stat-subtitle { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }

.link-action { display: block; margin-top: 20px; color: var(--accent-color); font-weight: 800; text-decoration: none; font-size: 14px; }

.widget-title { font-size: 13px; font-weight: 800; color: #94a3b8; margin-bottom: 20px; text-transform: uppercase; }

.vertical-actions { display: flex; flex-direction: column; gap: 10px; }

.btn-sidebar-action {
    width: 100%; padding: 14px; border-radius: 12px;
    text-align: center; font-weight: 700; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: 0.3s; font-size: 14px;
}

.btn-sidebar-action.check { background: #16a34a; color: white; }
.btn-sidebar-action.edit { background: #fffbeb; color: #d97706; }
.btn-sidebar-action.delete { background: #fef2f2; color: #dc2626; }
.btn-sidebar-action.back { background: var(--bg-system); color: var(--text-muted); }

.btn-sidebar-action:hover { transform: translateY(-3px); box-shadow: var(--shadow); filter: brightness(0.95); }

.alert-locked-v2 {
    background: #fff7ed; color: #9a3412; padding: 12px; border-radius: 10px;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 10px; border: 1px solid #ffedd5;
}

.divider { height: 1px; background: var(--border-color); margin: 10px 0; }

/* 4. Badges de Estado Específicos */
.st-prog { background: #10b981; color: white; }
.st-comp { background: #3b82f6; color: white; }
.st-canc { background: #ef4444; color: white; }

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .activity-detail-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 1.8rem; }
    .hero-info-row { flex-direction: column; gap: 10px; }
    .activity-hero-card { padding: 30px 20px; }
}

/* ================================================================
   INTERFAZ DE EDICIÓN DE ACTIVIDADES
   ================================================================ */

/* 1. Banner de Edición */
.edit-hero-banner {
    background-color: var(--act-color);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: background-color 0.4s ease; /* Transición suave al cambiar tipo */
    position: relative;
    overflow: hidden;
}

.edit-hero-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}

.hero-edit-content { position: relative; display: flex; align-items: center; gap: 20px; z-index: 2; }

.edit-icon-circle {
    width: 60px; height: 60px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

.edit-upper-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.8; }
.edit-title { font-size: 1.6rem; font-weight: 800; margin: 2px 0 0 0; }

.btn-close-edit {
    position: relative; z-index: 2;
    color: rgba(255,255,255,0.6);
    font-size: 2rem;
    transition: 0.3s;
}
.btn-close-edit:hover { color: white; transform: rotate(90deg); }

/* 2. Tarjeta de Acento */
.accent-card-v2 { border-top: 5px solid var(--act-color); }

/* 3. Nota SaaS */
.badge-saas-note {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.badge-saas-note i { color: #3b82f6; font-size: 1.2rem; }
.badge-saas-note p { font-size: 12px; color: #64748b; margin: 0; line-height: 1.4; font-weight: 600; }

/* 4. Botón de Actualizar */
.btn-save-activity-update {
    width: 100%; padding: 18px;
    background: var(--act-color);
    color: white; border: none; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-save-activity-update:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }

/* RESPONSIVIDAD EDICIÓN */
@media (max-width: 1024px) {
    .edit-hero-banner { flex-direction: row; padding: 20px; }
    .edit-icon-circle { width: 50px; height: 50px; font-size: 1.4rem; }
    .edit-title { font-size: 1.2rem; }
}

@media (max-width: 768px) {
    .edit-hero-banner { flex-direction: column; text-align: center; gap: 15px; }
    .hero-edit-content { flex-direction: column; }
    .btn-close-edit { position: absolute; top: 15px; right: 15px; font-size: 1.5rem; }
}

/* ================================================================
   INTERFAZ DE ASISTENCIA PREMIUM (PGC SYSTEM)
   ================================================================ */

/* 1. Header de Asistencia */
.attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.attendance-meta-row {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* 2. Widget Contador (SaaS Style) */
.selection-counter-widget {
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
}

.selection-counter-widget.active {
    border-color: #10b981;
    background: #f0fdf4;
    transform: scale(1.05);
}

.counter-number {
    font-size: 2rem;
    font-weight: 900;
    color: #10b981;
    line-height: 1;
}

.counter-text {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 3. Barra de Herramientas */
.attendance-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 15px;
}

.search-input-box, .select-filter-box {
    background: var(--bg-system);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.search-input-box i, .select-filter-box i { color: #94a3b8; margin-right: 10px; }

.search-input-box input, .select-filter-box select {
    border: none;
    background: transparent;
    padding: 12px 0;
    width: 100%;
    color: var(--text-main);
    font-size: 14px;
    outline: none;
}

.btn-outline-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.btn-outline-danger:hover { background: #dc2626; color: white; }

/* 4. Tabla y Carga */
.loading-state {
    padding: 80px;
    text-align: center;
}

.spinner-pgc {
    width: 40px;
    height: 40px;
    border: 4px solid var(--bg-system);
    border-top: 4px solid var(--accent-color);
    border-radius: 50%;
    margin: 0 auto 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* 5. Acciones Finales */
.attendance-footer-actions {
    margin-top: 30px;
    padding: 25px;
    background: var(--card-bg);
    border-radius: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.btn-save-attendance-final {
    background: #16a34a;
    color: white;
    border: none;
    padding: 16px 35px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(22, 163, 74, 0.2);
    transition: 0.3s;
}
.btn-save-attendance-final:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(22, 163, 74, 0.3); }

.btn-back-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .attendance-header { flex-direction: column; align-items: flex-start; }
    .selection-counter-widget { width: 100%; justify-content: center; }
    .attendance-filter-grid { grid-template-columns: 1fr; }
    .attendance-footer-actions { flex-direction: column-reverse; }
    .btn-save-attendance-final { width: 100%; }
}

/* ================================================================
   DISEÑO DE REPORTE DE ASISTENCIA (SaaS STYLE)
   ================================================================ */

/* 1. Header del Reporte */
.report-header-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.report-main-title { font-size: 1.8rem; font-weight: 800; margin: 10px 0; color: var(--text-main); }
.report-meta { display: flex; gap: 15px; }
.meta-tag { font-size: 13px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }

.report-actions { display: flex; gap: 12px; }

.btn-pdf-export {
    background: #E60026; color: white; border: none; padding: 12px 20px;
    border-radius: 10px; font-weight: 800; text-decoration: none; transition: 0.3s;
}
.btn-pdf-export:hover { filter: brightness(1.2); transform: translateY(-3px); }

.btn-back-outline {
    background: var(--bg-system); color: var(--text-muted); border: 1px solid var(--border-color);
    padding: 12px 20px; border-radius: 10px; font-weight: 700; text-decoration: none;
}

/* 2. KPIs del Reporte */
.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card-v3 {
    background: var(--card-bg); padding: 25px; border-radius: 20px;
    display: flex; align-items: center; gap: 20px; border: 1px solid var(--border-color);
}

.stat-icon-bg { width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

.stat-card-v3.present .stat-icon-bg { background: #dcfce7; color: #16a34a; }
.stat-card-v3.absent .stat-icon-bg { background: #fee2e2; color: #dc2626; }
.stat-card-v3.total .stat-icon-bg { background: #e0f2fe; color: #0284c7; }

.stat-card-v3 .val { display: block; font-size: 1.8rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.stat-card-v3 .lab { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* 3. Círculo de Participación */
.participation-circle {
    width: 65px; height: 65px; border-radius: 50%;
    background: conic-gradient(var(--accent-color) calc(var(--p) * 1%), var(--bg-system) 0);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.participation-circle::before { content: ""; position: absolute; width: 50px; height: 50px; background: var(--card-bg); border-radius: 50%; }
.percent-text { position: relative; font-weight: 900; font-size: 14px; color: var(--text-main); }

/* 4. Listados */
.report-lists-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.list-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; margin-bottom: 15px; padding: 10px 15px; border-radius: 10px; }
.list-title.text-success { background: #f0fdf4; color: #16a34a; }
.list-title.text-danger { background: #fef2f2; color: #dc2626; }

.list-scroll-container { padding: 0 !important; max-height: 600px; overflow-y: auto; }

.report-table { width: 100%; border-collapse: collapse; }
.report-table th { background: var(--bg-system); padding: 12px 15px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); position: sticky; top: 0; text-align: left; }
.report-table td { padding: 12px 15px; border-bottom: 1px solid var(--bg-system); }

.user-cell { display: flex; align-items: center; gap: 12px; }
.avatar-letter { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.bg-success-soft { background: #dcfce7; color: #16a34a; }
.bg-danger-soft { background: #fee2e2; color: #dc2626; }

.id-tag { background: var(--bg-system); padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* RESPONSIVIDAD REPORTE */
@media (max-width: 1200px) {
    .report-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .report-header-card { flex-direction: column; text-align: center; gap: 20px; }
    .report-actions { width: 100%; }
    .btn-pdf-export, .btn-back-outline { flex: 1; justify-content: center; }
    
    .report-stats-grid { grid-template-columns: 1fr; }
    .report-lists-layout { grid-template-columns: 1fr; }
}

/* ================================================================
   DISEÑO MÓDULO DE TRABAJO (JORNADAS)
   ================================================================ */

/* 1. Colores y Elementos de Cabecera */
.icon-amber { color: #f59e0b; }

.btn-work {
    background: #f59e0b;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: 0.3s;
}

.btn-work:hover {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.badge-global {
    background: #6366f1;
    color: white;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
}

/* 2. Filtros de Trabajo */
.work-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.btn-reset-work {
    height: 42px; width: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-system); color: var(--text-muted);
    border-radius: 10px; border: 1px solid var(--border-color);
}

/* 3. Tarjeta de Fecha (Calendario de Trabajo) */
.date-card-work {
    width: 55px;
    background: var(--bg-system);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.date-card-work .day {
    display: block; font-size: 1.4rem; font-weight: 900;
    color: var(--text-main); line-height: 1.2; padding-top: 5px;
}

.date-card-work .month {
    display: block; font-size: 10px; font-weight: 900;
    background: #f59e0b; color: white;
    padding: 3px 0; margin-top: 5px; text-transform: uppercase;
}

/* 4. Estilos de Fila y Tabla */
.work-row { border-left: 5px solid transparent; transition: 0.3s; }
.work-row:hover { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.02); }

.work-title { font-weight: 700; color: var(--text-main); font-size: 15px; }
.work-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.fine-value-badge {
    background: #fffbeb;
    color: #b45309;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid #fef3c7;
    display: inline-block;
}

/* 5. Estados y Asistencia */
.status-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-pill.open { background: #e0f2fe; color: #0369a1; }
.status-pill.closed { background: #dcfce7; color: #166534; }

.asis-count { font-size: 11px; font-weight: 700; color: #16a34a; margin-top: 5px; }

/* 6. Bloqueo */
.btn-icon.locked { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* RESPONSIVIDAD JORNADAS */
@media (max-width: 1024px) {
    .work-filter-grid { grid-template-columns: 1fr 1fr; }
    .reset-action { grid-column: span 2; }
    .btn-reset-work { width: 100%; }
}

@media (max-width: 768px) {
    .work-filter-grid { grid-template-columns: 1fr; }
    .reset-action { grid-column: span 1; }
    
    .table-work-premium {
        min-width: 750px;
    }
}

/* ================================================================
   FORMULARIO DE JORNADAS DE TRABAJO (SaaS STYLE)
   ================================================================ */

/* 1. Header del Formulario */
.work-header-banner {
    background: var(--card-bg);
    padding: 25px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    border-left: 8px solid #f59e0b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.banner-flex { display: flex; align-items: center; gap: 20px; }

.icon-circle-work {
    width: 55px; height: 55px;
    background: #fff7ed; color: #f59e0b;
    border-radius: 15px; display: flex;
    align-items: center; justify-content: center;
    font-size: 1.6rem;
}

.banner-text h2 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin: 0; }
.banner-text p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.banner-badge { font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: 1px; }

/* 2. Tarjeta con Acento (Derecha) */
.accent-work-card { border-top: 5px solid var(--accent-color); }

/* 3. El Cuadro de la Multa (Importante) */
.fine-highlight-box {
    background: #ebeeff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #fef3c7;
    margin-top: 20px;
}

.fine-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; color: #b45309;
    text-transform: uppercase; margin-bottom: 12px;
}

.input-money-wrapper-v2 {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-tag {
    position: absolute; left: 15px;
    font-size: 1.5rem; font-weight: 900; color: #f59e0b;
}

.input-fine {
    width: 100%; padding: 15px 15px 15px 40px;
    border-radius: 12px; border: 2px solid #fcd34d;
    background: white; color: #92400e;
    font-size: 1.8rem; font-weight: 900;
    outline: none; transition: 0.3s;
}
.input-fine:focus { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1); }

.fine-info-text { font-size: 11px; color: #b45309; margin-top: 10px; font-weight: 600; line-height: 1.4; }

/* 4. Botón de Guardar Trabajo */
.btn-save-work {
    width: 100%; padding: 18px;
    background: #f59e0b; color: white;
    border: none; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.2);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-save-work:hover { background: #d97706; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(245, 158, 11, 0.3); }

/* RESPONSIVIDAD FORMULARIO TRABAJO */
@media (max-width: 1024px) {
    .form-premium-grid { grid-template-columns: 1fr; }
    .work-header-banner { flex-direction: column; text-align: center; gap: 20px; padding: 20px; }
    .banner-flex { flex-direction: column; }
    
    /* En tablet/móvil, los botones de acción se ven mejor apilados */
    .form-actions-sticky {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .input-fine { font-size: 1.4rem; padding-left: 35px; }
    .currency-tag { font-size: 1.2rem; }
}

/* ================================================================
   INTERFAZ ASISTENCIA DE TRABAJO (SaaS PREMIUM)
   ================================================================ */

/* 1. Header de Jornada */
.work-attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 10px 5px;
}

.work-title-display { font-size: 1.8rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.5px; }

.work-meta-row { display: flex; gap: 20px; margin-top: 5px; }
.meta-item { font-size: 14px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.meta-item b { color: #b45309; }

/* 2. Widget de Progreso */
.progress-widget {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    padding: 12px 20px;
    border-radius: 15px;
    text-align: right;
}
.progress-label { font-size: 10px; font-weight: 800; color: #b45309; letter-spacing: 1px; }
.progress-value { font-size: 1.4rem; font-weight: 900; color: #92400e; }

/* 3. Buscador y Tabla */
.search-container-work { padding: 20px; background: var(--bg-system); border-radius: 15px 15px 0 0; }

.table-attendance-card { padding: 0 !important; }

.ajax-container { min-height: 400px; overflow-x: auto; }

.row-selected { background-color: #f8fafc; }

/* 4. Selectores de Estado (Radio Tiles) */
.status-options-flex {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.status-tile {
    position: relative;
    cursor: pointer;
    flex: 1;
    min-width: 85px;
}

.status-tile input {
    position: absolute;
    opacity: 0;
}

.tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: white;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: 0.2s;
}

/* Colores Dinámicos por Estado */
.status-tile input[value="1"]:checked + .tile-btn { background: #dcfce7; color: #15803d; border-color: #16a34a; }
.status-tile input[value="2"]:checked + .tile-btn { background: #eff6ff; color: #1d4ed8; border-color: #2563eb; }
.status-tile input[value="0"]:checked + .tile-btn { background: #fef2f2; color: #dc2626; border-color: #ef4444; }

.tile-btn i { font-size: 14px; margin-bottom: 2px; }

/* 5. Acciones del Pie */
.attendance-form-actions {
    padding: 25px;
    background: var(--bg-system);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 15px 15px;
}

.btn-save-work-final {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.2);
}
.btn-save-work-final:hover { transform: translateY(-3px); background: #d97706; }

/* RESPONSIVIDAD ASISTENCIA TRABAJO */
@media (max-width: 1024px) {
    .work-attendance-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .progress-widget { width: 100%; text-align: center; }
}

@media (max-width: 768px) {
    .table-premium { min-width: 650px; } /* Forzar scroll lateral en la tabla */
    
    .status-options-flex { gap: 5px; }
    .tile-btn { padding: 6px; font-size: 9px; }
    
    .attendance-form-actions { flex-direction: column-reverse; gap: 20px; }
    .btn-save-work-final { width: 100%; }
}

/* ================================================================
   REPORTE DE JORNADA - DISEÑO SaaS PREMIUM
   ================================================================ */

/* 1. Header del Reporte */
.report-header-work {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.report-title { font-size: 1.8rem; font-weight: 900; margin: 5px 0; color: var(--text-main); }
.report-meta-tags { display: flex; gap: 15px; margin-top: 10px; }
.tag-work { font-size: 13px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.report-actions { display: flex; gap: 12px; }

.btn-pdf {
    background: #E60026; color: white; padding: 12px 25px;
    border-radius: 10px; font-weight: 800; text-decoration: none;
    display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.btn-pdf:hover { filter: brightness(1.2); transform: translateY(-2px); }

.btn-back {
    background: var(--bg-system); color: var(--text-muted); padding: 12px 25px;
    border-radius: 10px; font-weight: 700; text-decoration: none; border: 1px solid var(--border-color);
}

/* 2. Grid de KPIs de Trabajo */
.work-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card-kpi-work {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.kpi-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.kpi-value { font-size: 1.6rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-weight: 600; }

/* Acentos de Color */
.highlight-success { border-left: 5px solid #10b981; }
.highlight-danger { border-left: 5px solid #ef4444; }
.highlight-warning { border-left: 5px solid #f59e0b; }

.text-success { color: #10b981 !important; }
.text-danger { color: #ef4444 !important; }
.text-warning { color: #f59e0b !important; }
.text-info { color: #3b82f6 !important; }

/* 3. Buscador y Tabla AJAX */
.search-bar-modern {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--bg-system);
    border-bottom: 1px solid var(--border-color);
}
.search-bar-modern i { color: #94a3b8; font-size: 1.2rem; }
.search-bar-modern input { border: none; background: transparent; width: 100%; font-size: 15px; outline: none; color: var(--text-main); font-weight: 500; }

.ajax-table-container { min-height: 300px; padding: 10px; }

.loading-placeholder { padding: 80px; text-align: center; color: var(--text-muted); }

/* RESPONSIVIDAD REPORTE TRABAJO */
@media (max-width: 1024px) {
    .report-header-work { flex-direction: column; text-align: center; gap: 20px; }
    .report-actions { width: 100%; }
    .btn-pdf, .btn-back { flex: 1; justify-content: center; }
}

@media (max-width: 768px) {
    .work-stats-grid { grid-template-columns: 1fr 1fr; } /* Dos por fila en tablet */
}

@media (max-width: 480px) {
    .work-stats-grid { grid-template-columns: 1fr; } /* Una por fila en móvil */
    .report-title { font-size: 1.4rem; }
}

/* ================================================================
   TABLAS AJAX Y BADGES DE TRABAJO (SaaS DARK/LIGHT)
   ================================================================ */

/* 1. Contenedor y Tabla */
.table-card-premium {
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    width: 100%;
    /* 1. Esto permite que el contenido interno se deslice */
    overflow-x: auto; 
    /* 2. Suaviza el scroll en iPhone/Android */
    -webkit-overflow-scrolling: touch; 
}

.table-premium {
    width: 100%;
    border-collapse: collapse;
    /* 3. Forzamos un ancho mínimo para que aparezca el scroll en celulares */
}

.table-premium th {
    background: var(--bg-system);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}

.table-premium td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
}

/* 2. Celdas de Usuario */
.user-info-cell { display: flex; align-items: center; gap: 12px; }
.avatar-sm {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    color: beige;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    border: 1px solid var(--border-color);
}
.user-full-name { font-weight: 700; }
.code-tag-sm { background: var(--bg-system); padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* 3. Status Pills Dinámicas */
.status-pill-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Estados Asistencia */
.badge-work { background: #dcfce7; color: #15803d; }
.badge-replace { background: #e0f2fe; color: #0369a1; }
.badge-absent { background: #fee2e2; color: #dc2626; }

/* Estados Pago (Modo Claro/Oscuro) */
.pill-pagada { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.pill-excusada { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.pill-pendiente { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.text-success-v2 { color: #10b981; font-weight: 800; font-size: 11px; }

/* Ajustes Modo Oscuro para Pills */
body.dark .badge-work { background: rgba(16, 185, 129, 0.15); color: #34d399; }
body.dark .badge-replace { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
body.dark .badge-absent { background: rgba(239, 68, 68, 0.15); color: #f87171; }

/* 4. Paginación AJAX */
.ajax-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.ajax-pagination a {
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.ajax-pagination a.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* 5. Estados Vacíos */
.empty-results {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
}
.empty-results i { font-size: 3rem; margin-bottom: 15px; display: block; opacity: 0.5; }

@media (max-width: 768px) {
    .table-premium {
        min-width: 700px; /* Al ser 700px, en un celular de 380px saldrá el scroll */
    }
    
    /* Opcional: reducimos un poco los paddings en móvil para ganar espacio */
    .table-premium td, .table-premium th {
        padding: 12px 10px;
    }
}

/* --- AJUSTE EXTRA PARA EL BUSCADOR --- */
.search-bar-modern {
    width: 100%;
    box-sizing: border-box; /* Evita que el buscador empuje la pantalla */
}

/* ================================================================
   DISEÑO CARTERA DE MULTAS (SaaS STYLE)
   ================================================================ */

/* 1. Header Especial */
.btn-pdf-export {
    background: #E60026; color: white; padding: 12px 25px;
    border-radius: 12px; font-weight: 800; text-decoration: none;
    display: flex; align-items: center; gap: 8px; transition: 0.3s;
    box-shadow: 0 4px 12px rgba(230, 0, 38, 0.2);
}
.btn-pdf-export:hover { transform: translateY(-3px); filter: brightness(1.1); }

/* 2. Balance Grid Moderno (KPIs) */
.balance-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card-pro {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.kpi-icon-box {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

.card-red .kpi-icon-box { background: #fef2f2; color: #ef4444; }
.card-green .kpi-icon-box { background: #f0fdf4; color: #10b981; }

.kpi-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; }
.kpi-value { font-size: 1.8rem; font-weight: 900; color: var(--text-main); display: block; line-height: 1.2; }

/* 3. Panel de Filtros */
.filters-container-work { padding: 25px !important; margin-bottom: 30px; }

.filter-grid-work {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.filter-group label { display: block; font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }

.filter-group select, .filter-group input {
    width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border-color);
    background: var(--bg-system); color: var(--text-main); font-size: 14px; outline: none;
}

.btn-reset-alt {
    width: 45px; height: 45px; background: var(--bg-system); color: var(--text-muted);
    border-radius: 10px; border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: 0.3s;
}
.btn-reset-alt:hover { color: var(--accent-color); background: white; border-color: var(--accent-color); }

/* 4. Contenedor de Tabla AJAX */
.table-results-wrapper { min-height: 400px; }

/* RESPONSIVIDAD CARTERA */
@media (max-width: 1024px) {
    .filter-grid-work { grid-template-columns: 1fr 1fr; }
    .btn-reset-box { grid-column: span 2; width: 100%; }
    .btn-reset-alt { width: 100%; }
}

@media (max-width: 768px) {
    .balance-grid-modern { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; text-align: center; gap: 20px; }
    .header-actions { width: 100%; }
    .btn-pdf-export { justify-content: center; width: 100%; }
    
    .filter-grid-work { grid-template-columns: 1fr; }
    .btn-reset-box { grid-column: span 1; }
}

@media (max-width: 480px) {
    .kpi-card-pro { padding: 20px; gap: 15px; }
    .kpi-value { font-size: 1.4rem; }
    .kpi-icon-box { width: 50px; height: 50px; font-size: 1.5rem; }
}

/* ================================================================
   DISEÑO LISTADO DE MULTAS (AJAX PREMIUM)
   ================================================================ */

/* 1. Celdas de Información */
.user-data { display: flex; flex-direction: column; line-height: 1.3; }
.work-cell-info { display: flex; flex-direction: column; gap: 3px; }
.work-title-sm { font-weight: 700; color: var(--text-main); font-size: 13.5px; }
.work-date-sm { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.fine-amount-text { font-size: 15px; font-weight: 800; color: var(--text-main); }

/* 2. Botones de Acción en Tabla */
.action-btns-flex {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}

.btn-table-action.pay { background: #10b981; color: white; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
.btn-table-action.excuse { background: #f59e0b; color: white; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2); }

.btn-table-action:hover { transform: translateY(-2px); filter: brightness(1.1); }

.finalized-label { font-size: 11px; color: #10b981; font-weight: 700; font-style: italic; }

/* 3. Footer de Tabla y Paginación */
.pagination-footer {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.results-info { font-size: 13px; color: var(--text-muted); }

/* 4. Estado Vacío Estilizado */
.empty-state-card {
    padding: 60px 20px;
    text-align: center;
    border: 2px dashed var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    background: var(--card-bg);
}
.empty-state-card i { font-size: 3rem; margin-bottom: 15px; display: block; opacity: 0.4; }

/* RESPONSIVIDAD LISTADO MULTAS */
@media (max-width: 768px) {
    .table-premium { min-width: 800px; } /* Forzar scroll para ver todas las acciones */
    
    .pagination-footer { justify-content: center; text-align: center; }
    .results-info { width: 100%; order: 2; }
    .ajax-pagination { width: 100%; order: 1; }
    
    .btn-table-action span { display: none; } /* Ocultar texto de botones en móvil, dejar solo icono */
    .btn-table-action { padding: 8px; font-size: 1.2rem; }
}

/* ================================================================
   INTERFAZ DE PAGO Y EXCUSAS (SaaS PREMIUM)
   ================================================================ */

/* 1. Contenedor Principal */
.pay-form-container {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
}

.pay-header { text-align: center; margin-bottom: 30px; }

.pay-icon-box {
    width: 70px; height: 70px;
    background: white; color: var(--action-color);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.pay-main-title { font-size: 1.6rem; font-weight: 900; color: var(--text-main); }
.pay-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 5px; }

/* 2. Tarjeta Tipo Recibo */
.fine-receipt-card {
    border-top: 6px solid var(--action-color) !important;
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 30px;
}

.receipt-body { padding: 30px; }

.receipt-row { display: flex; justify-content: space-between; gap: 20px; }
.receipt-item { display: flex; flex-direction: column; }

.r-label { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.r-value { font-size: 16px; font-weight: 800; color: var(--text-main); }
.r-value-sm { font-size: 14px; font-weight: 700; color: var(--text-main); }
.r-subtext { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.receipt-divider { height: 1px; background: dashed var(--border-color); border-top: 1px dashed #cbd5e1; margin: 25px 0; }

.receipt-total-section { text-align: center; }
.total-label { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.total-amount { font-size: 3rem; font-weight: 900; color: #ef4444; margin-top: 5px; letter-spacing: -1px; }

/* 3. Estilos del Formulario */
.pay-form-box { padding: 35px !important; }

.label-pro { font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 10px; display: block; }

/* File Upload Custom */
.file-upload-wrapper-v2 { position: relative; width: 100%; }
.file-hidden { position: absolute; width: 0; height: 0; opacity: 0; }
.file-custom-label {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px; border: 2px dashed var(--border-color); border-radius: 12px;
    background: var(--bg-system); color: var(--text-muted); cursor: pointer; transition: 0.3s;
    font-size: 14px; font-weight: 600;
}
.file-custom-label:hover { border-color: var(--action-color); background: white; color: var(--action-color); }

/* 4. Acciones */
.form-actions-pay { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }

.btn-submit-action {
    width: 100%; padding: 18px;
    background: var(--action-color); color: white;
    border: none; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-submit-action:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }

.btn-cancel-flat { text-align: center; color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; }

/* RESPONSIVIDAD PAGO */
@media (max-width: 768px) {
    .pay-form-container { padding: 0 10px; }
    .receipt-row { flex-direction: column; text-align: center; }
    .receipt-item.text-right { text-align: center; margin-top: 20px; }
    .total-amount { font-size: 2.2rem; }
    .pay-form-box { padding: 25px !important; }
}

/* ================================================================
   DISEÑO TÁCTIL: PLANILLA DE JORNADAS (AJAX)
   ================================================================ */

/* 1. Reset de la Tabla en AJAX */
.table-card-premium {
    overflow-x: auto; /* Scroll lateral en móviles */
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .table-premium { min-width: 650px; } /* Evita que la tabla se aplaste */
}

/* 2. Tiles de Estado (Los nuevos radio buttons) */
.status-tile {
    display: block;
    cursor: pointer;
}

.status-tile input {
    position: absolute;
    opacity: 0; /* Escondemos el radio original */
}

.tile-btn {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-system);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tile-btn i { font-size: 14px; }

/* 3. Colores cuando se activa el Radio */

/* Trabajó: Verde */
.status-tile input[value="1"]:checked + .tile-btn {
    background: #dcfce7;
    color: #15803d;
    border-color: #16a34a;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.15);
}

/* Reemplazo: Azul */
.status-tile input[value="2"]:checked + .tile-btn {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #3b82f6;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15);
}

/* Faltó (Multa): Rojo */
.status-tile input[value="0"]:checked + .tile-btn {
    background: #fef2f2;
    color: #dc2626;
    border-color: #ef4444;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
}

/* 4. Resaltado de Fila Activa */
.row-attendance.row-selected {
    background-color: rgba(245, 158, 11, 0.03); /* Un naranja muy sutil */
}

/* 5. Estado Vacío */
.empty-results-box {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
}
.empty-results-box i { font-size: 3rem; margin-bottom: 10px; display: block; opacity: 0.5; }

/* Ajustes para Modo Oscuro */
body.dark .tile-btn { background: #1e293b; color: #94a3b8; }
body.dark .status-tile input[value="1"]:checked + .tile-btn { background: rgba(16, 185, 129, 0.2); color: #34d399; }
body.dark .status-tile input[value="2"]:checked + .tile-btn { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
body.dark .status-tile input[value="0"]:checked + .tile-btn { background: rgba(239, 68, 68, 0.2); color: #f87171; }

/* ================================================================
   MÓDULO DE INVENTARIO (SaaS SKY STYLE)
   ================================================================ */

.icon-sky { color: #0ea5e9; }

/* 1. Botón de Inventario */
.btn-inventory {
    background: #0ea5e9;
    color: white;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
    transition: 0.3s;
}
.btn-inventory:hover { background: #0284c7; transform: translateY(-2px); }

/* 2. Filtros de Inventario */
.inventory-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 15px;
    align-items: flex-end;
}

.filter-actions-flex { display: flex; gap: 10px; align-items: flex-end; }

.btn-filter-main {
    background: #1e293b; color: white; border: none; padding: 12px 20px;
    border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s;
}

.btn-reset-v2 {
    height: 42px; width: 42px; background: var(--bg-system); color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}

/* 3. Estilos de Celda y Tabla */
.resource-cell { display: flex; align-items: center; gap: 12px; }

.resource-icon-box {
    width: 38px; height: 38px; background: #e0f2fe; color: #0ea5e9;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

.resource-name { font-weight: 700; color: var(--text-main); font-size: 14.5px; }

.description-truncate {
    font-size: 12.5px; color: var(--text-muted);
    max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.price-text { color: #0ea5e9; font-size: 14px; }

/* 4. Badges de Stock (Nuevos) */
.status-pill-v3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}
.status-pill-v3 b { font-size: 13px; }

.pill-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.pill-warning { background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }
.pill-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* 5. Ordenamiento */
.sort-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 5px; }

/* RESPONSIVIDAD INVENTARIO */
@media (max-width: 1024px) {
    .inventory-filter-grid { grid-template-columns: 1fr 1fr; }
    .filter-actions-flex { grid-column: span 2; width: 100%; }
    .btn-filter-main { flex: 1; }
}

@media (max-width: 768px) {
    .inventory-filter-grid { grid-template-columns: 1fr; }
    .filter-actions-flex { grid-column: span 1; }
    
    .inventory-table { min-width: 800px; } /* Activamos el scroll lateral */
    
    .hide-mobile { display: none; } /* Escondemos descripción en móvil para ahorrar espacio */
    
    .page-header { flex-direction: column; text-align: center; gap: 20px; }
    .btn-inventory { width: 100%; justify-content: center; }
}

/* ================================================================
   FORMULARIO DE INVENTARIO (PGC SKY STYLE)
   ================================================================ */

/* 1. Header del Formulario */
.inventory-header-banner {
    background: var(--card-bg);
    padding: 25px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    border-left: 8px solid #0ea5e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.icon-circle-inventory {
    width: 55px; height: 55px;
    background: #e0f2fe; color: #0ea5e9;
    border-radius: 15px; display: flex;
    align-items: center; justify-content: center;
    font-size: 1.6rem;
}

.banner-badge.sky { background: #0ea5e9; color: white; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; }

/* 2. Grid y Formulario */
.form-container-item { padding: 35px !important; }

.form-grid-3-col {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.label-pro { font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; display: block; text-transform: uppercase; }

/* Input de Dinero Especial */
.input-money-wrapper-v3 { position: relative; display: flex; align-items: center; }
.currency-tag-sm { position: absolute; left: 12px; font-weight: 800; color: #0ea5e9; }
.input-pgc.padding-money { padding-left: 25px; }

/* 3. Nota de Información */
.info-note-inventory {
    background: #eff6ff;
    color: #1e40af;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 25px;
    border: 1px solid #bfdbfe;
}
.info-note-inventory i { font-size: 1.2rem; }
.info-note-inventory p { font-size: 13px; margin: 0; line-height: 1.4; font-weight: 600; }

/* 4. Acciones */
.form-actions-inventory {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
}

.btn-save-inventory {
    background: #0ea5e9;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
    transition: 0.3s;
}
.btn-save-inventory:hover { transform: translateY(-3px); background: #0284c7; }

/* RESPONSIVIDAD CREAR ITEM */
@media (max-width: 1024px) {
    .form-grid-3-col { grid-template-columns: 1fr 1fr; }
    .inventory-header-banner { padding: 20px; text-align: center; flex-direction: column; gap: 15px; }
    .banner-flex { flex-direction: column; }
}

@media (max-width: 768px) {
    .form-grid-3-col { grid-template-columns: 1fr; }
    .form-container-item { padding: 25px !important; }
    .form-actions-inventory { flex-direction: column-reverse; width: 100%; }
    .btn-save-inventory { width: 100%; }
}

/* ================================================================
   MÓDULO DE PRÉSTAMOS (SaaS LOGISTICS STYLE)
   ================================================================ */

.icon-blue { color: #2563eb; }

/* 1. Botón Principal Préstamos */
.btn-loan-primary {
    background: #2563eb;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
    transition: 0.3s;
}
.btn-loan-primary:hover { background: #1d4ed8; transform: translateY(-2px); }

/* 2. KPIs de Préstamos */
.loan-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card-loan {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.border-blue { border-left: 6px solid #2563eb; }
.border-red { border-left: 6px solid #ef4444; }

.kpi-icon-loan {
    width: 55px; height: 55px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.kpi-icon-loan.blue { background: #eff6ff; color: #2563eb; }
.kpi-icon-loan.red { background: #fef2f2; color: #ef4444; }

.kpi-data-loan { display: flex; flex-direction: column; }
.kpi-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; }
.kpi-value { font-size: 1.8rem; font-weight: 900; color: var(--text-main); line-height: 1.2; }

/* 3. Filtros */
.loan-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr auto;
    gap: 15px;
    align-items: flex-end;
}

.filter-actions-loan { display: flex; gap: 10px; }

.btn-filter-loan {
    background: #1e293b; color: white; border: none; padding: 12px 25px;
    border-radius: 10px; font-weight: 700; cursor: pointer;
}

.btn-reset-loan {
    width: 45px; height: 45px; background: var(--bg-system); color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}

/* 4. Estilos de Celda Tabla */
.date-main { font-weight: 700; color: var(--text-main); font-size: 14px; }

.items-list-box { display: flex; align-items: center; gap: 8px; }
.item-pill { background: var(--bg-system); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-main); border: 1px solid var(--border-color); }
.more-items { font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* Badges Específicos */
.pill-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }

/* RESPONSIVIDAD PRÉSTAMOS */
@media (max-width: 1024px) {
    .loan-filter-grid { grid-template-columns: 1fr 1fr; }
    .filter-actions-loan { grid-column: span 2; width: 100%; }
    .btn-filter-loan { flex: 1; }
}

@media (max-width: 768px) {
    .loan-stats-grid { grid-template-columns: 1fr; }
    
    .loan-table { min-width: 800px; } /* Activamos scroll lateral */
    
    .hide-mobile { display: none; }
    
    .page-header { flex-direction: column; text-align: center; gap: 20px; }
    .btn-loan-primary { width: 100%; justify-content: center; }
}

/* ================================================================
   INTERFAZ DE CREACIÓN DE PRÉSTAMOS (SaaS PREMIUM)
   ================================================================ */

/* 1. Header Especial */
.icon-circle-loan {
    width: 60px; height: 60px;
    background: #eff6ff; color: #2563eb;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 1.8rem; box-shadow: var(--shadow);
}

.banner-badge.blue { background: #2563eb; color: white; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; }

/* 2. Autocompletado de Miembros */
.search-member-container { position: relative; }

.autocomplete-results-box {
    position: absolute; top: 100%; left: 0; right: 0;
    background: white; border: 1px solid var(--border-color);
    border-radius: 0 0 15px 15px; z-index: 1000;
    max-height: 250px; overflow-y: auto;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: none;
}

.resultado-miembro {
    padding: 12px 20px; cursor: pointer;
    background: var(--bg-system);
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-system);
    font-size: 14px; color: var(--text-main);
    transition: 0.2s;
}
.resultado-miembro:hover { background: #eff6ff; color: #2563eb; padding-left: 25px; }

/* 3. Feedback de Selección */
.selection-feedback-card { margin-bottom: 25px; display: none; }

.member-badge-active {
    background: #f0f9ff; color: #0369a1; padding: 15px;
    border-radius: 12px; border: 1px solid #bae6fd;
    display: flex; align-items: center; gap: 15px;
}
.member-badge-active i { font-size: 1.8rem; }
.member-badge-active strong { display: block; font-size: 15px; }
.member-badge-active span { font-size: 12px; opacity: 0.8; }

/* 4. Lista de Artículos (Scrollable) */
.items-selection-card { display: flex; flex-direction: column; height: 100%; }

.items-scroll-pane {
    flex: 1; max-height: 450px; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: 15px;
    background: var(--bg-system);
}

.table-items-loan { width: 100%; border-collapse: collapse; }
.table-items-loan th { background: var(--card-bg); padding: 12px; font-size: 11px; text-transform: uppercase; color: var(--text-muted); position: sticky; top: 0; }
.table-items-loan td { padding: 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-system); }

.item-name { font-weight: 700; color: var(--text-main); font-size: 14px; }
.stock-mini-badge { background: var(--bg-system); padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--text-muted); }

.input-quantity {
    width: 70px; padding: 8px; border-radius: 8px;
    border: 2px solid var(--border-color); text-align: center;
    font-weight: 800; color: #2563eb; outline: none; transition: 0.3s;
}
.input-quantity:focus { border-color: #2563eb; background: #eff6ff; }

/* 5. Acciones */
.form-actions-loan { margin-top: 25px; display: flex; flex-direction: column; gap: 15px; }

.btn-confirm-loan {
    width: 100%; padding: 18px; background: #2563eb; color: white;
    border: none; border-radius: 15px; font-weight: 800; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); transition: 0.3s;
}
.btn-confirm-loan:hover { transform: translateY(-3px); background: #1d4ed8; }

/* RESPONSIVIDAD PRÉSTAMOS */
@media (max-width: 1024px) {
    .form-premium-grid { grid-template-columns: 1fr; }
    .items-scroll-pane { max-height: 350px; }
}

/* ================================================================
   DETALLE DE PRÉSTAMO (SaaS LOGISTICS PREMIUM)
   ================================================================ */

/* 1. Hero Dynamic Section */
.loan-hero-v2 {
    background-color: var(--loan-color);
    padding: 50px 40px;
    border-radius: 25px;
    color: white;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.hero-overlay-loan {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
}

.hero-content-loan { position: relative; z-index: 2; }
.hero-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.status-pill-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-main-title { color: whitesmoke; font-size: 2.2rem; font-weight: 900; margin-bottom: 5px; letter-spacing: -1px; }
.hero-subtitle { font-size: 14px; opacity: 0.9; font-weight: 600; }

/* 2. Detail Grid */
.loan-detail-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.member-profile-flex { display: flex; gap: 20px; align-items: center; }

.member-avatar-large {
    width: 70px; height: 70px;
    background: var(--bg-system);
    color: var(--loan-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 900; border: 4px solid white;
    box-shadow: var(--shadow);
}

.member-data-text h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin-bottom: 5px; }

.data-pills-row { display: flex; gap: 15px; }
.data-pills-row span { font-size: 12px; font-weight: 700; color: var(--text-muted); }

.loan-notes-box {
    margin-top: 25px; padding: 15px; background: var(--bg-system);
    border-radius: 12px; border: 1px solid var(--border-color);
}
.loan-notes-box label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; display: block; margin-bottom: 5px; }
.loan-notes-box p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* 3. Timeline & Actions */
.timeline-box { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.timeline-item { padding-left: 20px; border-left: 3px solid var(--border-color); }
.timeline-item.success { border-left-color: #10b981; }

.t-label { display: block; font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; }
.t-val { font-size: 15px; color: var(--text-main); }

.vertical-actions-loan { display: flex; flex-direction: column; gap: 10px; }

.btn-sidebar-action.check-green { background: #10b981; color: white; }
.btn-sidebar-action.back-gray { background: var(--bg-system); color: var(--text-muted); }

/* 4. Inventory List Table */
.no-padding { padding: 0 !important; overflow: hidden; }
.table-header-simple { padding: 20px; font-weight: 800; color: var(--text-main); font-size: 15px; border-bottom: 1px solid var(--border-color); }

.inventory-loan-list .item-name-bold { display: block; font-weight: 700; font-size: 14px; color: var(--text-main); }
.inventory-loan-list .item-price-sub { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.count-pill {
    display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 800; font-size: 12px;
}
.count-pill.good { background: #dcfce7; color: #16a34a; }
.count-pill.warning { background: #fff7ed; color: #c2410c; }
.count-pill.danger { background: #fef2f2; color: #dc2626; }

.multa-val { font-weight: 800; }

.total-row-red { background: #fef2f2; color: #991b1b; }
.total-row-red td { padding: 15px; font-weight: 800; font-size: 15px; }

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .loan-detail-grid { grid-template-columns: 1fr; }
    .hero-main-title { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .inventory-loan-list { min-width: 750px; } /* Activamos scroll lateral en tabla */
    .loan-hero-v2 { padding: 30px 20px; text-align: center; }
    .hero-top-row { flex-direction: column; gap: 10px; }
}

/* ================================================================
   INTERFAZ DE DEVOLUCIÓN (SaaS INSPECTION STYLE)
   ================================================================ */

/* 1. Header de Devolución */
.icon-circle-return {
    width: 60px; height: 60px;
    background: #f0fdf4; color: #16a34a;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 1.8rem; box-shadow: var(--shadow);
}

.banner-badge.green { background: #16a34a; color: white; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; }

/* 2. Tabla de Inspección */
.table-return-inspect th { background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }

.item-info-cell { display: flex; flex-direction: column; line-height: 1.3; }
.text-muted-sm { font-size: 11px; color: #94a3b8; font-weight: 600; }

.badge-total-loan {
    background: #eff6ff; color: #2563eb;
    padding: 8px 15px; border-radius: 12px;
    font-size: 1.2rem; font-weight: 900;
    border: 2px solid #dbeafe;
}

/* 3. Inputs de Inspección */
.input-inspect {
    width: 80px; padding: 10px; border-radius: 10px;
    border: 2px solid var(--border-color);
    text-align: center; font-weight: 800; font-size: 15px;
    transition: 0.3s; outline: none;
}

.input-inspect.good { color: #16a34a; }
.input-inspect.good:focus { border-color: #16a34a; background: #f0fdf4; }

.input-inspect.warning { color: #d97706; }
.input-inspect.warning:focus { border-color: #f59e0b; background: #fff7ed; }

.input-inspect.danger { color: #dc2626; }
.input-inspect.danger:focus { border-color: #ef4444; background: #fef2f2; }

/* Input Multa Especial */
.multa-input-wrapper { position: relative; display: inline-flex; align-items: center; }
.currency-prefix { position: absolute; left: 10px; font-weight: 800; color: #94a3b8; font-size: 14px; }
.input-inspect.multa { width: 120px; padding-left: 25px; color: #dc2626; border-color: #fecaca; }

/* 4. Errores de Fila */
.row-error-math { background-color: #fff1f2 !important; transition: 0.3s; }

/* 5. Acciones Finales */
.form-actions-return {
    margin-top: 35px; display: flex; justify-content: flex-end;
    align-items: center; gap: 25px; padding-bottom: 50px;
}

.btn-finish-return {
    background: #16a34a; color: white; border: none;
    padding: 18px 45px; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(22, 163, 74, 0.2); transition: 0.3s;
}
.btn-finish-return:hover { transform: translateY(-3px); background: #15803d; }

/* RESPONSIVIDAD */
@media (max-width: 768px) {
    .table-return-inspect { min-width: 750px; } /* Activamos scroll lateral */
    .form-actions-return { flex-direction: column-reverse; gap: 15px; }
    .btn-finish-return { width: 100%; }
}

/* ================================================================
   HOJA DE VIDA DEL RECURSO (SaaS STYLE)
   ================================================================ */

/* 1. Header del Recurso */
.resource-detail-header {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 20px;
    border-top: 6px solid #0ea5e9;
    margin-bottom: 30px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.resource-main-title { font-size: 1.8rem; font-weight: 900; margin: 10px 0; color: var(--text-main); }
.resource-description { font-size: 14px; color: var(--text-muted); max-width: 600px; line-height: 1.5; }

.resource-value-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-system); padding: 6px 15px; border-radius: 8px;
    margin-top: 15px; font-size: 13px; color: var(--text-muted);
}
.resource-value-badge b { color: #0ea5e9; }

.header-actions-flex { display: flex; gap: 10px; align-items: center; }

.btn-edit-resource {
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%); color: white; padding: 12px 20px;
    border-radius: 10px; font-weight: 800; text-decoration: none; transition: 0.3s;
}
.btn-edit-resource:hover { background: var(--accent-color); transform: translateY(-2px); }

/* 2. Grid de KPIs (Mini) */
.resource-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.kpi-mini-card {
    background: var(--card-bg); padding: 20px; border-radius: 15px;
    text-align: center; border: 1px solid var(--border-color);
}
.kpi-mini-card.border-success { border-top: 4px solid #10b981; }
.kpi-mini-card.border-warning { border-top: 4px solid #f59e0b; }
.kpi-mini-card.border-danger { border-top: 4px solid #ef4444; }

.kpi-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.kpi-val { font-size: 1.6rem; font-weight: 900; color: var(--text-main); }

/* 3. Tabla de Historial */
.history-resource-table th { background: #f8fafc; font-size: 11px; text-transform: uppercase; color: #64748b; }
.history-resource-table td { font-size: 13.5px; }

.date-cell { display: flex; flex-direction: column; line-height: 1.2; }
.date-cell small { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.user-link { font-weight: 700; color: #2563eb; }

.text-success-bold { color: #10b981; font-weight: 800; }
.text-warning-bold { color: #f59e0b; font-weight: 800; }
.text-danger-bold { color: #ef4444; font-weight: 800; }

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .resource-stats-grid { grid-template-columns: 1fr 1fr; }
    .resource-detail-header { flex-direction: column; text-align: center; gap: 20px; }
    .resource-detail-header .header-actions-flex { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
    .history-resource-table { min-width: 800px; } /* Activamos scroll lateral */
}

@media (max-width: 480px) {
    .resource-stats-grid { grid-template-columns: 1fr; }
    .resource-main-title { font-size: 1.5rem; }
}

/* ================================================================
   INTERFAZ DE EDICIÓN DE INVENTARIO (SaaS SKY)
   ================================================================ */

/* 1. Header Banner */
.edit-item-banner {
    background: var(--card-bg);
    padding: 25px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
    border-left: 8px solid #0ea5e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.icon-circle-edit {
    width: 55px; height: 55px;
    background: #e0f2fe; color: #0ea5e9;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 1.6rem;
}

.btn-close-edit-v2 {
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: 0.3s;
}
.btn-close-edit-v2:hover { color: #ef4444; transform: rotate(90deg); }

/* 2. Tarjeta Derecha con Acento */
.accent-edit-card { border-top: 5px solid #0ea5e9; }

/* 3. Alerta de Stock Info */
.info-alert-stock {
    background: #f0f9ff;
    color: #0369a1;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #bae6fd;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 25px;
}
.info-alert-stock i { font-size: 1.2rem; }
.info-alert-stock p { font-size: 12px; margin: 0; line-height: 1.4; font-weight: 600; }

/* 4. Botón de Guardar Cambios */
.btn-save-edit-item {
    width: 100%; padding: 18px;
    background: #0ea5e9; color: white;
    border: none; border-radius: 15px;
    font-weight: 800; font-size: 16px;
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-save-edit-item:hover { background: #0284c7; transform: translateY(-3px); }

/* RESPONSIVIDAD EDICIÓN ITEM */
@media (max-width: 1024px) {
    .edit-item-banner { flex-direction: row; text-align: left; padding: 20px; }
}

@media (max-width: 768px) {
    .edit-item-banner { flex-direction: column; text-align: center; gap: 15px; }
    .banner-flex { flex-direction: column; }
    .btn-close-edit-v2 { position: absolute; top: 15px; right: 15px; }
    
    .form-actions-edit { display: flex; flex-direction: column; width: 100%; }
}

/* ================================================================
   DISEÑO MULTAS DE INVENTARIO (SaaS RED STYLE)
   ================================================================ */

.icon-red { color: #ef4444; }

.border-green { border-left: 6px solid #10b981; }

.kpi-icon-loan.green { background: #ecfdf5; color: #10b981; }

/* ================================================================
   BOTÓN FILTRAR MULTAS - RED GRADIENT (FIRE GLOW STYLE)
   ================================================================ */

.btn-filter-loan-danger {
    /* 1. Gradiente: Rojo vibrante a Rojo oscuro institucional */
    background: linear-gradient(135deg, #FF6B6B 0%, #dc2626 100%);
    
    /* 2. Texto en blanco humo para máxima legibilidad */
    color: whitesmoke !important; 
    
    /* 3. Tamaño Slim (Compacto y Elegante) */
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    border: none;
    cursor: pointer;
    text-decoration: none;

    /* 4. Centrado Total */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;

    /* 5. EL BRILLO (Sombra roja neón sutil) */
    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.3);
    
    /* 6. Transición fluida */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-filter-loan-danger:hover {
    /* 7. Hover: Sube un poquito y el brillo se intensifica */
    transform: translateY(-3px);
    color: white !important;
    filter: brightness(1.1);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.5);
}

.btn-filter-loan-danger:active {
    /* Efecto de pulsación */
    transform: translateY(-1px) scale(0.98);
}

/* Icono dentro del botón de multas */
.btn-filter-loan-danger i {
    font-size: 1.1rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* RESPONSIVIDAD PARA EL BOTÓN */
@media (max-width: 768px) {
    .btn-filter-loan-danger {
        width: 100%; /* En celular ocupa todo el ancho */
        padding: 14px;
        font-size: 14px;
    }
}

/* Badge de Tipo de Multa */
.type-badge-sm {
    background: var(--bg-system); color: var(--text-muted);
    padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 800;
}

.fine-amount-red { color: #ef4444; font-size: 15px; font-weight: 800; }

.page-link.active-red {
    background: #ef4444; color: white; border-color: #ef4444;
}

/* RESPONSIVIDAD MULTAS */
@media (max-width: 768px) {
    .fine-table { min-width: 850px; } /* Forzamos scroll lateral */
    
    .page-header h2 { font-size: 1.4rem; }
    
    .btn-filter-loan-danger { width: 100%; }
}

/* ================================================================
   DETALLE DE MULTA (SaaS COMPROBANTE STYLE)
   ================================================================ */

/* 1. Fine Hero Card */
.fine-hero-card {
    background-color: var(--status-color);
    padding: 50px 40px;
    border-radius: 25px;
    color: white;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.fine-hero-card .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.fine-hero-card .hero-content { position: relative; z-index: 2; }

.hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

.badge-status-pill {
    background: white; color: var(--status-color);
    padding: 6px 15px; border-radius: 50px; font-weight: 800; font-size: 11px;
}

.fine-id { font-size: 13px; font-weight: 700; opacity: 0.8; letter-spacing: 1px; }
.hero-title { font-size: 2.2rem; font-weight: 900; margin: 0; letter-spacing: -1px; }
.hero-date { font-size: 14px; opacity: 0.9; margin-top: 5px; font-weight: 600; }

/* 2. Grid y Tarjetas */
.fine-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }

.card-section-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--bg-system); }

.fine-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.info-item { display: flex; flex-direction: column; }
.label-pro { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; margin-bottom: 5px; }
.label-pro.center { text-align: center; }

.value-pro { font-size: 16px; font-weight: 700; color: var(--text-main); }
.sub-value { font-size: 12px; color: var(--text-muted); font-weight: 600; }

.type-pill-large {
    background: #f1f5f9; color: var(--status-color);
    padding: 6px 12px; border-radius: 8px; font-weight: 800; font-size: 13px;
    width: fit-content; border: 1px solid var(--border-color);
}

.observation-box {
    background: var(--bg-system); padding: 20px; border-radius: 15px;
    border: 1px solid var(--border-color); margin-top: 25px;
}
.observation-box p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-top: 5px; }

/* 3. Columna Financiera */
.amount-summary-card { text-align: center; border-top: 6px solid var(--status-color) !important; }
.amount-display { font-size: 3rem; font-weight: 900; color: var(--status-color); margin: 10px 0; letter-spacing: -1px; }

.payment-confirmed {
    background: #ecfdf5; color: #059669; padding: 12px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; font-weight: 800; border: 1px solid #d1fae5;
}

/* 4. Botones */
.btn-group-vertical { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }

.btn-action-pro {
    padding: 14px; border-radius: 12px; font-weight: 700; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s;
}

.btn-action-pro.pay { background: #10b981; color: white; }
.btn-action-pro.excuse { background: #f59e0b; color: white; }
.btn-action-pro.back { background: var(--bg-system); color: var(--text-muted); border: 1px solid var(--border-color); }

.btn-action-pro:hover { transform: translateY(-3px); box-shadow: var(--shadow); filter: brightness(1.1); }

.audit-footer-mini { font-size: 10px; color: #94a3b8; text-align: center; margin-top: 20px; font-weight: 700; text-transform: uppercase; }

/* RESPONSIVIDAD */
@media (max-width: 1024px) {
    .fine-detail-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .fine-info-row { grid-template-columns: 1fr; gap: 15px; }
    .fine-hero-card { padding: 30px 20px; text-align: center; }
    .hero-top { flex-direction: column; gap: 10px; }
}

/* ================================================================
   PAGO DE MULTAS DE INVENTARIO (SaaS PRESTAMOS STYLE)
   ================================================================ */

/* Reutiliza .pay-form-container, .pay-header, .fine-receipt-card 
   definidos en el módulo anterior, pero aquí el acento es Verde PGC */

.receipt-divider {
    height: 1px;
    border-top: 2px dashed var(--border-color);
    margin: 25px 0;
    position: relative;
}

/* Efecto de "Corte de Ticket" a los lados */
.receipt-divider::before, .receipt-divider::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    background: var(--bg-system);
    border-radius: 50%;
}
.receipt-divider::before { left: -40px; }
.receipt-divider::after { right: -40px; }

.total-amount {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--action-color); /* Usamos el verde dinámico */
    text-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin: 10px 0;
}

.btn-submit-action {
    background: var(--action-color) !important;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2) !important;
}

/* RESPONSIVIDAD AJUSTADA */
@media (max-width: 768px) {
    .total-amount { font-size: 2.5rem; }
    .receipt-divider::before, .receipt-divider::after { display: none; }
    .pay-form-box { padding: 25px !important; }
}

/* ================================================================
   INFORME PATRIMONIAL (SaaS AUDIT STYLE)
   ================================================================ */

/* 1. Header Extra */
.header-badge-period {
    background: #e0f2fe; color: #0ea5e9;
    padding: 6px 15px; border-radius: 8px;
    font-weight: 800; font-size: 13px;
}

/* 2. Filtros de Informe */
.report-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 20px;
    align-items: flex-end;
}
.report-filter-actions { display: flex; gap: 10px; }

.btn-filter-report {
    background: #1e293b; color: white; border: none;
    padding: 12px 25px; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.btn-reset-report {
    width: 45px; height: 45px; background: var(--bg-system); color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}

/* 3. KPI Cards v4 */
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; margin-bottom: 30px;
}
.kpi-card-v4 {
    background: var(--card-bg); padding: 25px; border-radius: 20px;
    border: 1px solid var(--border-color); text-align: center;
}
.kpi-card-v4.border-success { border-bottom: 5px solid #10b981; }
.kpi-card-v4.border-danger { border-bottom: 5px solid #ef4444; }
.kpi-card-v4.border-blue { border-bottom: 5px solid #2563eb; }

.kpi-card-v4 .label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.kpi-card-v4 .val { font-size: 1.8rem; font-weight: 900; margin-top: 5px; }

/* 4. Layout de Gráfico */
.chart-analysis-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; margin-bottom: 30px; }
.chart-wrapper-inner { height: 300px; position: relative; }

.analysis-text-card { background: var(--card-bg) !important; }
.analysis-title { font-size: 15px; font-weight: 800; color: var(--text-light); margin-bottom: 15px; }
.analysis-content p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.analysis-list { margin-top: 15px; padding-left: 20px; }
.analysis-list li { font-size: 13px; color: #64748b; margin-bottom: 8px; }

/* 5. Tabla Reporte Audit */
.date-badge-report { background: var(--bg-system); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-main); }

.badge-type-v2 { padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: white; }
.badge-type-v2.bg-success { background: #10b981; }
.badge-type-v2.bg-danger { background: #ef4444; }

.concept-cell { display: flex; flex-direction: column; line-height: 1.2; }
.concept-name { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.amount-final { font-size: 15px; font-weight: 800; }

/* RESPONSIVIDAD INFORME */
@media (max-width: 1024px) {
    .report-kpi-grid { grid-template-columns: 1fr; }
    .chart-analysis-layout { grid-template-columns: 1fr; }
    .report-filter-grid { grid-template-columns: 1fr 1fr; }
    .report-filter-actions { grid-column: span 2; width: 100%; }
    .btn-filter-report { flex: 1; }
}

@media (max-width: 768px) {
    .report-table-audit { min-width: 750px; }
    .page-header { flex-direction: column; text-align: center; gap: 15px; }
}

/* ================================================================
   CENTRO DE DOCUMENTACIÓN (SaaS DOCS STYLE)
   ================================================================ */

/* 1. Hero Banner */
.docs-hero-banner {
    background: linear-gradient(135deg, var(--accent-color)0%, #001253 100%);
    padding: 50px 40px;
    border-radius: 25px;
    color: white;
    margin-bottom: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 4, 60, 0.2);
}

.hero-bg-icon {
    position: absolute; right: -20px; bottom: -40px;
    font-size: 10rem; opacity: 0.1; transform: rotate(-15deg);
}

.hero-title { font-size: 2.2rem; font-weight: 900; margin: 10px 0; letter-spacing: -1px; }
.hero-subtitle { font-size: 15px; opacity: 0.8; max-width: 650px; line-height: 1.5; }
.breadcrumb-mini-light { font-size: 11px; color: white; font-weight: 800; letter-spacing: 2px; opacity: 0.6; }

/* 2. Grid de Documentos */
.docs-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* 3. Estilos de Tarjeta (Card Doc Pro) */
.card-doc-pro {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 24px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card-doc-pro:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--doc-color);
}

.badge-doc-tag {
    position: absolute; top: 20px; right: 20px;
    font-size: 9px; font-weight: 900; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 6px;
    background: var(--doc-bg); color: var(--doc-color);
}

.doc-icon-circle {
    width: 60px; height: 60px;
    border-radius: 18px; background: var(--doc-bg); color: var(--doc-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 20px;
}

.doc-title { font-size: 1.3rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.doc-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; flex-grow: 1; }

.doc-footer-link {
    margin-top: 20px; font-size: 13px; font-weight: 800; color: var(--doc-color);
    display: flex; align-items: center; gap: 8px; transition: gap 0.3s;
}
.card-doc-pro:hover .doc-footer-link { gap: 15px; }

/* 4. Variantes de Color Dinámicas */
.color-sky { --doc-bg: #e0f2fe; --doc-color: #0ea5e9; }
.color-amber { --doc-bg: #fff7ed; --doc-color: #f59e0b; }
.color-green { --doc-bg: #f0fdf4; --doc-color: #10b981; }
.color-red { --doc-bg: #fef2f2; --doc-color: #ef4444; }
.color-purple { --doc-bg: #f5f3ff; --doc-color: #8b5cf6; }

/* 5. Footer de Seguridad */
.docs-security-info {
    margin-top: 40px; padding: 25px;
    background: #00043c; border-radius: 20px; color: white;
}
.info-flex { display: flex; align-items: center; gap: 20px; }
.info-icon { font-size: 2rem; color: #3b82f6; }
.info-text strong { display: block; font-size: 15px; margin-bottom: 4px; }
.info-text p { font-size: 13px; opacity: 0.8; margin: 0; }

/* RESPONSIVIDAD DOCUMENTOS */
@media (max-width: 1024px) {
    .hero-title { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .docs-hero-banner { padding: 30px 20px; text-align: center; }
    .hero-bg-icon { display: none; }
    .docs-grid-layout { grid-template-columns: 1fr; }
    .info-flex { flex-direction: column; text-align: center; }
}

/* ================================================================
   GENERADOR DE ACTAS (SaaS LEGAL STYLE)
   ================================================================ */

.icon-blue-legal { color: #0284c7; }

/* 1. Estructura de Secciones */
.docs-form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; margin-bottom: 25px; }

.border-top-blue { border-top: 5px solid #0284c7 !important; }
.border-bottom-blue { border-bottom: 5px solid #0284c7 !important; }

/* 2. Quórum Auto Display (Premium Widget) */
.accent-quorum-card { background: var(--bg-system) !important; border-color: #bae6fd !important; }

.quorum-auto-display {
    display: flex; justify-content: space-around;
    padding: 20px 10px; background: var(--card-bg);
    border-radius: 15px; border: 1px solid #e0f2fe;
    text-align: center; margin-bottom: 15px;
    transition: 0.3s;
}


.quorum-auto-display.loading-stats { opacity: 0.5; filter: blur(2px); }

.q-item { display: flex; flex-direction: column; gap: 4px; }
.q-lab { font-size: 9px; font-weight: 900; color: #0284c7; text-transform: uppercase; letter-spacing: 1px; }
.q-item b { font-size: 1.5rem; font-weight: 900; color: var(--text-main); }

.quorum-disclaimer { font-size: 10px; color: #64748b; text-align: center; margin: 0; font-weight: 600; }

/* 3. Área de Firmas */
.firma-block { background: var(--bg-system); padding: 20px; border-radius: 15px; border: 1px solid var(--border-color); }
.mb-10 { margin-bottom: 10px; }

/* 4. Footer de Generación */
.docs-submit-bar {
    position: sticky; bottom: 20px;
    background: var(--card-bg); padding: 20px;
    border-radius: 20px; box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color); z-index: 100;
}

.btn-generate-acta {
    width: 100%; padding: 18px;
    background: #0284c7; color: white; border: none;
    border-radius: 15px; font-weight: 900; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3);
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-generate-acta:hover { transform: translateY(-5px); background: #0369a1; box-shadow: 0 15px 30px rgba(2, 132, 199, 0.4); }

/* RESPONSIVIDAD ACTAS */
@media (max-width: 1024px) {
    .docs-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .quorum-auto-display { flex-direction: column; gap: 20px; padding: 25px; }
    .btn-generate-acta { font-size: 14px; padding: 15px; }
}

/* ================================================================
   GENERADOR DE ACTAS DE TRABAJO (SaaS AMBER STYLE)
   ================================================================ */

.icon-amber-work { color: #f59e0b; }

.border-top-amber { border-top: 5px solid #f59e0b !important; }
.border-bottom-amber { border-bottom: 5px solid #f59e0b !important; }

/* 1. Work Stats Display (Widget) */
.accent-work-card-docs { background: var(--bg-system) !important; border-color: #fef3c7 !important; }

.work-stats-display {
    display: flex; justify-content: space-around;
    padding: 20px 10px; background: var(--card-bg);
    border-radius: 15px; border: 1px solid #fef3c7;
    text-align: center; transition: 0.3s;
}

.work-stats-display.loading-stats { opacity: 0.5; filter: blur(2px); }

.ws-item { display: flex; flex-direction: column; gap: 4px; }
.ws-lab { font-size: 9px; font-weight: 900; color: #b45309; text-transform: uppercase; letter-spacing: 1px; }
.ws-item b { font-size: 1.4rem; font-weight: 900; color: var(--text-main); }

/* 2. Flex Helper */
.flex-row-gap-10 { display: flex; gap: 10px; }

/* 3. Botón de Generación Trabajo */
.btn-generate-work {
    width: 100%; padding: 18px;
    background: #f59e0b; color: white; border: none;
    border-radius: 15px; font-weight: 900; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-generate-work:hover { transform: translateY(-5px); background: #d97706; box-shadow: 0 15px 30px rgba(245, 158, 11, 0.4); }

/* RESPONSIVIDAD */
@media (max-width: 768px) {
    .work-stats-display { flex-direction: column; gap: 20px; padding: 25px; }
    .flex-row-gap-10 { flex-direction: column; }
}

/* ================================================================
   DISEÑO CARTA DE RECOMENDACIÓN (SaaS SOCIAL STYLE)
   ================================================================ */

.icon-green-social { color: #16a34a; }

.border-top-green { border-top: 5px solid #16a34a !important; }
.border-bottom-green { border-bottom: 5px solid #16a34a !important; }

/* 1. Autocompletado de Documentos */
.relative { position: relative; }

.autocomplete-results-docs {
    position: absolute; top: 100%; left: 0; right: 0;
    background: white; border: 1px solid var(--border-color);
    border-radius: 0 0 15px 15px; z-index: 1000;
    max-height: 250px; overflow-y: auto;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: none;
}

.res-item {
    padding: 12px 20px; cursor: pointer;
    border-bottom: 1px solid var(--bg-system);
    font-size: 14px; color: var(--text-main);
    display: flex; justify-content: space-between; align-items: center;
    transition: 0.2s;
}
.res-item:hover { background: #f0fdf4; color: #16a34a; padding-left: 25px; }

.res-item small { font-weight: 700; color: var(--text-muted); font-size: 11px; }

/* 2. Helper de Borde Success */
.border-success { border-color: #16a34a !important; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1) !important; }

/* 3. Botón Social */
.btn-generate-social {
    width: 100%; padding: 18px;
    background: #16a34a; color: white; border: none;
    border-radius: 15px; font-weight: 900; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(22, 163, 74, 0.3);
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-generate-social:hover { transform: translateY(-5px); background: #15803d; box-shadow: 0 15px 30px rgba(22, 163, 74, 0.4); }

/* Ajustes Modo Oscuro */
body.dark .res-item:hover { background: rgba(22, 163, 74, 0.1); }

/* ================================================================
   GENERADOR DE CIRCULARES (SaaS RED STYLE)
   ================================================================ */

.icon-red-fine { color: #dc2626; }
.text-red { color: #dc2626 !important; }
.text-amber { color: #b45309 !important; }

.border-top-red { border-top: 5px solid #dc2626 !important; }
.border-bottom-red { border-bottom: 5px solid #dc2626 !important; }

/* 1. Card de Autocompletado (Amber) */
.card-autofill-fine {
    background: var(--card-bg) !important;
    border: 2px dashed #fcd34d !important;
}
.select-amber { border-color: #fcd34d !important; font-weight: 700; color: #b45309; }
.helper-text-amber { font-size: 11px; color: #b45309; margin-top: 10px; font-weight: 600; }

/* Animación de éxito al autocompletar */
.success-pulse { animation: pulse-bg 1s; }
@keyframes pulse-bg {
    0% { background-color: #fffbeb; }
    50% { background-color: #fef3c7; }
    100% { background-color: #fffbeb; }
}

/* 2. Grid de 3 Columnas (Para montos y fechas) */
.form-grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

/* 3. Botón de Cobranza (Rojo) */
.btn-generate-fine {
    width: 100%; padding: 18px;
    background: #dc2626; color: white; border: none;
    border-radius: 15px; font-weight: 900; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-generate-fine:hover { transform: translateY(-5px); background: #991b1b; box-shadow: 0 15px 30px rgba(220, 38, 38, 0.4); }

/* RESPONSIVIDAD */
@media (max-width: 768px) {
    .form-grid-3-col { grid-template-columns: 1fr; }
    .docs-form-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   DISEÑO ACTA DE CONCILIACIÓN (SaaS PURPLE STYLE)
   ================================================================ */

.icon-purple-conc { color: #7c3aed; }
.text-purple { color: #7c3aed !important; }

.border-top-purple { border-top: 5px solid #7c3aed !important; }
.border-bottom-purple { border-bottom: 5px solid #7c3aed !important; }

/* 1. Buscador y Caja de Involucrados */
.bg-light-purple { background: var(--card-bg) !important; border-color: #ddd6fe !important; }

.search-member-box-conc {
    background: var(--bg-system); padding: 20px; border-radius: 15px;
    border: 2px dashed #7c3aed; margin-bottom: 25px;
}

.involucrados-grid-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;
}

.involucrado-card-pro {
    background: var(--bg-system); padding: 20px; border-radius: 15px;
    border: 1px solid var(--border-color); position: relative;
    animation: slideUp 0.3s ease-out; box-shadow: var(--shadow);
}

.inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.label-pro.mini { font-size: 10px; margin-bottom: 4px; }
.input-pgc-sm { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 13px; outline: none; }
.input-pgc-sm:focus { border-color: #7c3aed; }

.btn-remove-inv {
    position: absolute; top: -10px; right: -10px;
    width: 26px; height: 26px; background: #ef4444; color: white;
    border-radius: 50%; border: none; font-size: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-add-manual-conc {
    width: 100%; padding: 12px; background: var(--bg-system); color: #7c3aed;
    border: 1px solid #7c3aed; border-radius: 10px; font-weight: 800;
    cursor: pointer; transition: 0.3s;
}
.btn-add-manual-conc:hover { background: var(--bg-system); }

/* 2. Helper de Firmas */
.full-width-signature { grid-column: span 2; }
/* 3. Botón de Generación Purple */
.btn-generate-conc {
    width: 100%; padding: 18px;
    background: #7c3aed; color: white; border: none;
    border-radius: 15px; font-weight: 900; font-size: 16px;
    cursor: pointer; box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-generate-conc:hover { transform: translateY(-5px); background: #6d28d9; box-shadow: 0 15px 30px rgba(124, 58, 237, 0.4); }

/* ANIMACIONES */
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* RESPONSIVIDAD */
@media (max-width: 900px) {
    .involucrados-grid-list { grid-template-columns: 1fr; }
    .inv-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .form-grid-3-col { grid-template-columns: 1fr; }
    .full-width-signature { grid-column: span 1; }
}



/* ================================================================
   DASHBOARD PANEL PRINCIPAL (SaaS COMMAND CENTER)
   ================================================================ */

/* 1. Welcome Banner */
.welcome-banner-pro {
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    padding: 40px; border-radius: 25px; color: white; 
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; box-shadow: var(--shadow);
}
.breadcrumb-mini-light { font-size: 10px; color: white; font-weight: 800; letter-spacing: 2px; opacity: 0.6; }
.welcome-text h1 { font-size: 2.2rem; color: whitesmoke; font-weight: 900; margin: 5px 0; }
.welcome-date { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 50px; font-size: 13px; font-weight: 600; }
.hero-title {color: white;}
/* 2. Grid Superior */
.dashboard-top-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 25px; margin-bottom: 25px; }

/* Plan Card */
.plan-status-widget { display: flex; flex-direction: column; justify-content: space-between; }
.plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.plan-badge { background: #e0f2fe; color: #0284c7; padding: 4px 10px; border-radius: 6px; font-size: 9px; font-weight: 900; }
.plan-cost { font-size: 1.8rem; font-weight: 900; color: var(--text-main); }
.plan-cost span { font-size: 14px; color: var(--text-muted); font-weight: 600; }

.usage-container { margin-top: 10px; }
.usage-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.progress-bar-bg { height: 10px; background: var(--bg-system); border-radius: 50px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--primary-color); border-radius: 50px; transition: 1s cubic-bezier(0.4, 0, 0.2, 1); }
.usage-footer { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-weight: 600; }

/* Mini KPIs */
.kpi-dashboard-row { display: grid; grid-template-rows: 1fr 1fr; gap: 15px; }
.kpi-mini-box { background: var(--card-bg); padding: 20px; border-radius: 20px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--border-color); }
.kpi-icon { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.kpi-data { display: flex; flex-direction: column; }
.kpi-v { font-size: 1.5rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.kpi-l { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }

.card-blue .kpi-icon { background: #eff6ff; color: #2563eb; }
.card-green .kpi-icon { background: #f0fdf4; color: #16a34a; }

/* 3. Main Grid */
.dashboard-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; }

.chart-wrapper { height: 250px; position: relative; }

.recent-list { margin-top: 15px; }
.recent-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.avatar-letter { width: 36px; height: 36px; background: var(--bg-system); color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.recent-info { display: flex; flex-direction: column; line-height: 1.3; }
.recent-info strong { font-size: 14px; color: var(--text-main); }
.recent-info small { font-size: 11px; color: var(--text-muted); }

.btn-link-pro { display: inline-block; margin-top: 20px; color: var(--primary-color); font-weight: 800; text-decoration: none; font-size: 13px; }

/* 4. Seguridad Accordion */
.security-section-dashboard { padding: 0 !important; overflow: hidden; border: 1px solid #fcd34d !important; }

.btn-toggle-security {
    width: 100%; padding: 20px 25px; background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%); border: none; color: white;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    transition: 0.3s;
}
.btn-toggle-security:hover { background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%); color: white; }
.btn-toggle-security.active { border-bottom: 1px solid #fcd34d; }

.btn-content { display: flex; align-items: center; gap: 12px; color: white; }
.btn-content i { font-size: 1.5rem; color: white; }
.btn-content span { font-weight: 800; font-size: 15px; color: white; }

.security-form-wrapper { padding: 25px; display: none; }
.security-intro { margin-bottom: 20px; font-size: 13px; color: #b45309; font-weight: 600; line-height: 1.5; }

.password-input-box { position: relative; display: flex; align-items: center; }
.toggle-pwd-view { position: absolute; right: 15px; color: #94a3b8; cursor: pointer; }
.input-dashboard-pwd { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-system); font-size: 14px; }

.btn-save-pwd {
    width: 100%; margin-top: 20px; padding: 14px; background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%); color: white;
    border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.3s;
}
.btn-save-pwd:hover { background: #000; transform: translateY(-2px); }

/* RESPONSIVIDAD DASHBOARD */
@media (max-width: 1024px) {
    .dashboard-top-grid, .dashboard-main-grid { grid-template-columns: 1fr; }
    .kpi-dashboard-row { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .welcome-banner-pro { flex-direction: column; text-align: center; gap: 20px; }
}

@media (max-width: 480px) {
    .kpi-dashboard-row { grid-template-columns: 1fr; }
    .welcome-text h1 { font-size: 1.5rem; }
    .plan-header { flex-direction: column; gap: 10px; }
}


/* ================================================================
   ELIMINADOR ATÓMICO DE ESPACIOS EN MÓVIL (SOLUCIÓN DEFINITIVA)
   ================================================================ */

@media (max-width: 1024px) {
    /* 1. Forzamos al body a no separar los elementos con flex */
    body {
        display: block !important; /* En móvil, que todo fluya hacia abajo normal */
    }

    /* 2. Ajuste milimétrico del Wrapper */
    #layout-content-wrapper {
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 20px !important;
        /* El header mide 65px, le damos 65px exactos para que pegue */
        padding-top: 65px !important; 
        width: 100% !important;
        display: block !important;
    }

    /* 3. El culpable suele ser .main-content o el primer hijo */
    .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important; /* Quitamos cualquier padding que tenga el main */
    }

    /* 4. Atacamos a los banners y headers que se ven en las fotos */
    .welcome-banner-pro, 
    .page-header, 
    .docs-hero-banner, 
    .activity-hero-card,
    .resource-detail-header,
    .fine-hero-card,
    .report-header-work {
        margin-top: 15px !important; /* Solo 15px de separación de la barra */
        margin-bottom: 20px !important;
    }

    /* 5. Si hay algún contenedor invisible molestando */
    div[style*="margin-top"], 
    div[style*="padding-top"] {
        margin-top: 0 !important;
    }
}

.btn-outline {
    background: var(--accent-color);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: 0.3s;
}
/* ================================================================
   PANTALLA DE BIENVENIDA (INTRO CINEMÁTICA)
   ================================================================ */
.welcome-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #0f172a; /* Azul muy oscuro profundo */
    z-index: 9999; /* Por encima de TODO */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}

.welcome-content {
    text-align: center;
    color: white;
    animation: zoomInIntro 0.5s ease-out;
}

.welcome-logo {
    font-size: 4rem;
    color: #eb8825;
    margin-bottom: 20px;
    animation: pulseLogo 2s infinite;
}

.welcome-text-loader nav {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #38bdf8;
    margin-bottom: 10px;
}

.welcome-text-loader h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0;
}

.welcome-text-loader h1 span { color: #eb8825; }

.welcome-text-loader p {
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-top: 5px;
}

.developer-tag {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.developer-tag span { font-size: 9px; text-transform: uppercase; opacity: 0.5; display: block; }
.developer-tag strong { font-size: 12px; letter-spacing: 1px; color: #fff; }

/* Barra de carga sutil */
.loader-line-container {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    margin: 30px auto 0;
    border-radius: 10px;
    overflow: hidden;
}

.loader-line-fill {
    width: 0%;
    height: 100%;
    background: #eb8825;
    animation: loadBar 2.5s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* ANIMACIONES */
@keyframes zoomInIntro {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulseLogo {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes loadBar {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Clase para desaparecer */
.welcome-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Asegura que el modal se vea por encima de todo */
.modal-overlay {
    z-index: 99999 !important; /* Más alto que el menú */
}

.modal-overlay.active {
    display: flex !important;
    animation: fadeInModal 0.3s ease;
}

/* Animación sutil de entrada */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Estilo para el botón cancelar dentro del modal */
.modal-footer .btn-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* ================================================================
   AJUSTE DE TAMAÑO DE LOGOS (VERSIÓN IMPACTO)
   ================================================================ */

/* 1. Logo en el Sidebar (Menú Lateral) */
.brand-logo-small {
    /* Antes era 38px, vamos a subirlo para que luzca el SVG */
    width: 55px !important; 
    height: 55px !important;
    background: transparent !important; /* Quitamos el fondo para que el SVG brille */
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción sin deformar */
}

/* 2. Logo en la Barra Móvil (Arriba en el Celular) */
.mobile-logo-img {
    height: 40px !important; /* Subimos de 30px a 40px */
    width: auto;
    margin-right: 12px;
    vertical-align: middle;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.mobile-logo-name {
    display: flex;
    align-items: center;
    font-size: 1.4rem !important; /* Un pelín más grande el texto también */
}

/* 3. Logo en la Pantalla de Login */
.brand-logo-login {
    /* Antes era 70px, vamos a darle tamaño de marca líder */
    width: 120px !important; 
    height: 120px !important;
    background: white; /* Un fondo blanco circular para que el logo resalte */
    padding: 15px;
    border-radius: 50% !important; /* Lo hacemos circular */
    margin: 0 auto 25px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.login-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 4. Logo en la Pantalla de Bienvenida (Intro Cinemática) */
.intro-logo-anim {
    /* Aquí es donde debe impactar más */
    width: 220px !important; /* Casi el doble de lo anterior */
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(235, 136, 37, 0.5));
}

@media (max-width: 1024px) {
    /* 1. Obligamos a los contenedores de botones a usar todo el ancho */
    .header-actions, 
    .form-actions, 
    .edit-actions, 
    .report-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Los ponemos uno debajo del otro */
        gap: 12px !important;
        margin-top: 15px !important;
    }

    /* 2. Hacemos que CUALQUIER botón o enlace de acción crezca al 100% */
    .btn-primary, 
    .btn-outline, 
    .btn-back-modern, 
    .btn-inventory, 
    .btn-work, 
    .btn-loan-primary,
    .btn-generate,
    .btn-save-full,
    .btn-primary-finance,
    .btn-reset-audit,
    .btn-cancel,
    .btn-cancel-link {
        width: 100% !important; /* Ocupa todo el ancho disponible */
        display: flex !important;
        justify-content: center !important; /* Centra el texto e icono */
        align-items: center !important;
        padding: 15px !important; /* Más gorditos para el dedo */
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Ajuste específico para la cabecera de las páginas */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important; /* Estira todo el contenido */
        text-align: center;
    }

    .header-left {
        margin-bottom: 15px;
    }
}

/* --- RESET DE ENLACES PARA BOTONES --- */
a, 
a:hover, 
a:focus, 
a:active {
    text-decoration: none !important; /* Matamos el subrayado para siempre */
}

/* Específicamente para tus clases de botones por si acaso */
.btn-primary, 
.btn-outline, 
.btn-back-modern, 
.btn-inventory, 
.btn-work, 
.btn-loan-primary,
.btn-cancel-link,
.btn-link-pro {
    text-decoration: none !important;
}


/* El campo de texto en sí */
.textarea-pgc {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    transition: all 0.3s ease;
    resize: vertical; /* 1. Importante: Solo permite agrandar hacia abajo, no hacia los lados */
    min-height: 80px; /* Altura mínima inicial */
    box-sizing: border-box;
}

/* Efecto cuando el usuario hace clic para escribir */
.textarea-pgc:focus {
    border-color: var(--primary-color);
    background: white;
    outline: none;
    /* 2. Brillo naranja suave alrededor */
    box-shadow: 0 0 0 4px rgba(235, 136, 37, 0.15);
    transform: translateY(-2px); /* Un pequeño salto sutil */
}

/* Personalización del Placeholder (el texto de ejemplo) */
.textarea-pgc::placeholder {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7;
}

/* 3. Ajuste para Modo Oscuro */
body.dark .textarea-pgc {
    background: #1e293b;
    border-color: #334155;
}

body.dark .textarea-pgc:focus {
    background: #0f172a;
    border-color: var(--primary-color);
}

/* Ajuste para móvil: más gordo para el dedo */
@media (max-width: 768px) {
    .textarea-pgc {
        font-size: 16px; /* Evita que el iPhone haga zoom automático */
        padding: 12px;
    }
}


/* ================================================================
   DISEÑO TABLA ASISTENCIA (AJAX PREMIUM)
   ================================================================ */

/* 1. Reset y Contenedor */
.table-card-premium {
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    overflow-x: auto; /* Habilitamos scroll lateral en móviles */
    -webkit-overflow-scrolling: touch;
}

.table-premium { width: 100%; border-collapse: collapse; }
.table-premium th { background: var(--bg-system); padding: 15px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.table-premium td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-size: 14px; }

/* 2. Celdas Especiales */
.user-info-cell { display: flex; align-items: center; gap: 10px; }
.user-name-bold { font-weight: 700; color: var(--text-main); }
.code-badge { background: var(--bg-system); padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.role-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; }

/* 3. Feedback Visual de Seleccionado */
.row-checked { background-color: rgba(16, 185, 129, 0.05) !important; }
body.dark .row-checked { background-color: rgba(16, 185, 129, 0.1) !important; }

/* 4. Footer AJAX */
.ajax-table-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 15px 15px;
}
.results-count { font-size: 13px; color: var(--text-muted); }

/* 5. Paginación AJAX Modern */
.ajax-pagination { display: flex; gap: 8px; }
.ajax-pagination a {
    padding: 8px 14px; background: var(--bg-system); color: var(--text-main);
    border: 1px solid var(--border-color); border-radius: 8px;
    text-decoration: none; font-weight: 700; font-size: 13px; transition: 0.3s;
}
.ajax-pagination a.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.ajax-pagination a:hover:not(.active) { background: var(--border-color); }

/* Helpers */
.opacity-30 { opacity: 0.3; }

/* RESPONSIVIDAD */
@media (max-width: 768px) {
    .table-premium { min-width: 600px; } /* Mantiene la tabla legible al deslizar */
    .hide-mobile { display: none; }
    .ajax-table-footer { flex-direction: column; gap: 15px; text-align: center; }
}

/* --- FOOTER DE TABLA AJAX --- */
.ajax-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #1e293b; /* Color oscuro como tu imagen */
    border-radius: 0 0 15px 15px;
}

.results-count {
    color: #94a3b8;
    font-size: 13px;
}

/* --- BOTONCITOS DE PAGINACIÓN --- */
.ajax-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ajax-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #0f172a; /* Fondo oscuro */
    color: white;
    text-decoration: none;
    border-radius: 10px; /* Bordes redondeados modernos */
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s;
    border: 1px solid #334155;
}

.ajax-pagination a:hover {
    background: #334155;
}

.ajax-pagination a.active {
    background: #2563eb; /* Azul brillante como tu imagen */
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.page-dots {
    color: #94a3b8;
    padding: 0 5px;
}

/* Ajuste para que la tabla no tenga padding raro abajo */
.attendance-table-card {
    padding: 0 !important;
    overflow: hidden;
}

/* ================================================================
   BOTÓN "NUEVO" - VERDE MENTA COMPACTO (GLOW & SLIM)
   ================================================================ */

.btn-nuevo {
    /* 1. Gradiente: Menta suave a color de acento del sistema */
    background: linear-gradient(135deg, #071340  0%, var(--accent-color) 100%);
    
    /* 2. Texto en whitesmoke como pediste */
    color: whitesmoke !important; 
    
    /* 3. Tamaño más compacto (Slim) */
    padding: 10px 20px; 
    border-radius: 12px;
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    border: none;
    cursor: pointer;
    text-decoration: none;

    /* 4. Centrado Total */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio entre icono y texto */
    text-align: center;

    /* 5. EL BRILLO (Sutil pero elegante) */
    box-shadow: 0 6px 15px rgba(155, 242, 234, 0.3);
    
    /* 6. Transición profesional */
    transition: all 0.3s ease;
}

.btn-nuevo:hover {
    /* 7. Hover: Flota un poquito y se ilumina */
    background: linear-gradient(135deg, var(--accent-color) 70%, #62FCE9 100%);

    transform: translateY(-3px);
    color: white !important;
    /* Brillo más intenso al acercar el mouse */
    box-shadow: 0 10px 20px rgba(155, 242, 234, 0.5);
    filter: brightness(1.05);
}

.btn-nuevo:active {
    transform: translateY(-1px);
}

/* Icono dentro del botón */
.btn-nuevo i {
    font-size: 1.1rem;
    color: whitesmoke; /* Un color oscuro para que el icono resalte sobre el menta */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* Ajuste para móvil: Que no sea gigante pero ocupe el ancho */
@media (max-width: 768px) {
    .btn-nuevo {
        width: 100%;
        padding: 14px;
        font-size: 14px;
    }
}

/* ================================================================
   CONTENEDOR DE ACCIONES (HEADER ACTIONS PRO)
   ================================================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio real entre los bloques de botones */
    flex-wrap: wrap; /* Para que en pantallas medianas no se rompa */
}

/* Grupo de exportación (PDF y Excel juntos) */
.export-group {
    display: flex;
    align-items: center;
    background: var(--bg-system); /* Un fondo suave para agruparlos */
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    gap: 5px;
}

/* Botones de Exportación Estilizados */
.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Estilo PDF (Rojo elegante) */
.btn-export.pdf {
    color: #ef4444;
    background: transparent;
}
.btn-export.pdf:hover {
    background: #fef2f2;
    border-color: #fecaca;
    transform: translateY(-2px);
}

/* Estilo Excel (Verde elegante) */
.btn-export.excel {
    color: #10b981;
    background: transparent;
}
.btn-export.excel:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
    transform: translateY(-2px);
}

/* Iconos de los botones de exportación */
.btn-export i {
    font-size: 1.1rem;
}

/* ================================================================
   RESPONSIVIDAD (MÓVIL)
   ================================================================ */

@media (max-width: 768px) {
    .header-actions {
        width: 100%;
        flex-direction: column; /* Uno debajo del otro */
        align-items: stretch;
        gap: 10px;
    }

    .export-group {
        width: 100%;
        justify-content: center;
    }

    .btn-export {
        flex: 1; /* Para que PDF y Excel ocupen lo mismo a lo ancho */
        justify-content: center;
        padding: 12px;
    }
}

/* Aseguramos que el encabezado de miembros use el espacio correctamente */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px; /* Más espacio para que no se pegue a la tabla */
    gap: 20px;
}

/* Retoque para el badge de superadmin en el subtítulo */
.status-badge.badge-activo {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    padding: 3px 10px;
    font-size: 10px;
}

/* ================================================================
   AJUSTE DE TABLA DASHBOARD (FULL WIDTH)
   ================================================================ */

/* 1. Obligamos al contenedor de la tabla a usar todo el ancho disponible */
.table-card {
    width: 100% !important;
    max-width: 100% !important; /* Eliminamos cualquier restricción de ancho */
    background: var(--card-bg);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* 2. Aseguramos que la tabla dentro del scroll ocupe el 100% */
.table-responsive table {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* 3. Retoque para las celdas para que no se vean apretadas al estirarse */
.table-premium th, 
.table-premium td,
.table-responsive table th,
.table-responsive table td {
    padding: 18px 15px; /* Un poco más de espacio vertical */
    text-align: left;
}

/* 4. Estilo para los encabezados de esta tabla específica */
.table-card thead tr {
    background: var(--bg-system);
    border-bottom: 2px solid var(--border-color);
}

.table-card thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    color: var(--text-muted);
}

/* 5. Ajuste para que el nombre resalte más en el estiramiento */
.table-card td strong {
    font-size: 15px;
    color: var(--text-main);
}
/* ================================================================
   CORRECCIÓN DE GRÁFICOS Y CARDS (RESPONSIVIDAD TOTAL)
   ================================================================ */

/* 1. Forzamos que el grid principal sea de una sola columna en móvil */
@media (max-width: 768px) {
    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 2. Evitamos que las tarjetas premium empujen el ancho */
    .card-premium {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Corta cualquier desbordamiento */
        padding: 20px !important;
    }

    /* 3. El contenedor del gráfico (CRUCIAL) */
    .chart-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 250px !important; /* Altura fija para que no crezca infinito */
        margin: 0 auto !important;
    }

    /* Forzamos al canvas a obedecer al padre */
    canvas#chartMiembros {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Ajuste general para la lista de recientes */
.recent-list {
    width: 100%;
}

.recent-item {
    max-width: 100%;
}

.btn-nuevo-rojo{
    /* 1. Gradiente: Menta suave a color de acento del sistema */
    background: linear-gradient(135deg, #071340  0%, #FF0337 100%);
    
    /* 2. Texto en whitesmoke como pediste */
    color: whitesmoke !important; 
    
    /* 3. Tamaño más compacto (Slim) */
    padding: 10px 20px; 
    border-radius: 12px;
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    border: none;
    cursor: pointer;
    text-decoration: none;

    /* 4. Centrado Total */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio entre icono y texto */
    text-align: center;

    /* 5. EL BRILLO (Sutil pero elegante) */
    box-shadow: 0 6px 15px rgba(155, 242, 234, 0.3);
    
    /* 6. Transición profesional */
    transition: all 0.3s ease;
}

.btn-nuevo-rojo:hover {
    /* 7. Hover: Flota un poquito y se ilumina */
    background: linear-gradient(135deg, #E6171A 70%, #E61796 100%);
    transform: translateY(-3px);
    color: white !important;
    /* Brillo más intenso al acercar el mouse */
    box-shadow: 0 10px 20px rgba(155, 242, 234, 0.5);
    filter: brightness(1.05);
}

.btn-nuevo-rojo:active {
    transform: translateY(-1px);
}

/* Icono dentro del botón */
.btn-nuevo-rojo i {
    font-size: 1.1rem;
    color: whitesmoke; /* Un color oscuro para que el icono resalte sobre el menta */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* Ajuste para móvil: Que no sea gigante pero ocupe el ancho */
@media (max-width: 768px) {
    .btn-nuevo-rojo {
        width: 100%;
        padding: 14px;
        font-size: 14px;
    }
}

/* ================================================================
   BARRA DE FILTROS CONTABLE (SaaS FINANCE STYLE)
   ================================================================ */

.filter-panel-contable {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.filter-grid-finance {
    display: grid;
    /* 3 columnas: Mes (proporcional), Año (proporcional), Acciones (ajustado) */
    grid-template-columns: 1.5fr 1fr auto; 
    gap: 20px;
    align-items: flex-end; /* Alinea los botones con la base de los inputs */
}

.filter-item-pro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item-pro label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botones de acción de la barra */
.btn-actions-filter {
    display: flex;
    gap: 10px;
}

.btn-primary-finance {
    background: linear-gradient(var(--accent-color)  0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

.btn-primary-finance:hover {
    background: var(--accent-color);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.6);
    transform: translateY(-2px);
}

.btn-reset-finance {
    background: var(--bg-system);
    color: var(--text-muted);
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btn-reset-finance:hover {
    background: white;
    color: #ef4444; /* Rojo para indicar "limpiar/cancelar" */
    border-color: #fecaca;
}
.debt-title {
    font-size: 14px;
    font-weight: 700;
    color: whitesmoke;
}

/* --- RESPONSIVIDAD PARA FILTROS --- */
@media (max-width: 1024px) {
    .filter-grid-finance {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablet */
    }
    .btn-clear-container-pro {
        grid-column: span 2; /* Los botones ocupan todo el ancho abajo */
    }
    .btn-actions-filter {
        width: 100%;
    }
    .btn-primary-finance {
        flex: 3;
    }
    .btn-reset-finance {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .filter-grid-finance {
        grid-template-columns: 1fr; /* 1 sola columna en celular */
        gap: 15px;
    }
    .btn-clear-container-pro {
        grid-column: span 1;
    }
    .filter-panel-contable {
        padding: 20px;
    }
}

/* ================================================================
   BARRA DE FILTROS REUNIONES (SaaS MEETINGS STYLE)
   ================================================================ */

.filter-panel-meetings {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.filter-grid-meetings {
    display: grid;
    /* 1ra columna (Buscador) es el doble de grande que las otras */
    grid-template-columns: 2.5fr 1fr 1fr auto; 
    gap: 20px;
    align-items: flex-end;
}

/* Buscador con estilo premium */
.input-icon-wrapper-v2 {
    position: relative;
    width: 100%;
}

.input-icon-wrapper-v2 input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-system);
    font-size: 14px;
    transition: 0.3s;
}

.input-icon-wrapper-v2 input:focus {
    border-color: var(--accent-color);
    background: white;
    box-shadow: 0 0 0 4px rgba(235, 136, 37, 0.1);
}

/* Botón Limpiar para Reuniones */
.btn-reset-meetings {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: 0.3s;
    border: 1px solid #e2e8f0;
}

.btn-reset-meetings:hover {
    background: white;
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

/* --- RESPONSIVIDAD REUNIONES --- */
@media (max-width: 1100px) {
    .filter-grid-meetings {
        grid-template-columns: 1fr 1fr; /* 2x2 en tablets */
    }
    .btn-reset-wrapper {
        grid-column: span 2;
    }
    .btn-reset-meetings {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .filter-grid-meetings {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 15px;
    }
    .btn-reset-wrapper {
        grid-column: span 1;
    }
    .filter-panel-meetings {
        padding: 20px;
    }
}

/* ================================================================
   BARRA DE FILTROS AUDITORÍA (SaaS AUDIT STYLE)
   ================================================================ */

.filter-panel-audit {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.filter-grid-audit {
    display: grid;
    /* Buscador (2fr) es más grande que los filtros (1fr) */
    grid-template-columns: 2fr 1fr 1fr auto; 
    gap: 20px;
    align-items: flex-end;
}

/* Botón Limpiar para Auditoría */
.btn-reset-audit {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: 0.3s;
    border: 1px solid #e2e8f0;
}

.btn-reset-audit:hover {
    background: white;
    color: #ef4444; /* Rojo suave al limpiar */
    border-color: #fecaca;
    transform: translateY(-2px);
}

/* --- RESPONSIVIDAD AUDITORÍA --- */
@media (max-width: 1100px) {
    .filter-grid-audit {
        grid-template-columns: 1fr 1fr; /* 2x2 en tablets */
    }
    .btn-reset-wrapper {
        grid-column: span 2;
    }
    .btn-reset-audit {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .filter-grid-audit {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 15px;
    }
    .btn-reset-wrapper {
        grid-column: span 1;
    }
    .filter-panel-audit {
        padding: 20px;
    }
}


/* ================================================================
   INTERFAZ DE LOGIN PREMIUM - PGC SYSTEM
   ================================================================ */

/* ================================================================
   INTERFAZ DE LOGIN PREMIUM - VERSIÓN PERFECCIONADA
   ================================================================ */

/* 1. Reset de Fuentes para que no se rompan los iconos */


.login-page *, 
.login-page input, 
.login-page button {
    font-family: 'Lexend', sans-serif; /* Sin !important aquí */
}

/* Regla Maestra para proteger los Iconos del Login */
.login-page i.fas, 
.login-page i.fa-solid, 
.login-page i.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.login-page {
    height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* EL SECRETO: */
    overflow: hidden !important; 
    position: fixed; /* Evita que la pantalla se mueva */
}

.video-container, .video-overlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
/* 2. Video de Fondo */
.video-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
}

#video-background {
    width: 100%; height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(7, 19, 64, 0.85) 0%, rgba(0, 0, 0, 0.6) 100%);
    backdrop-filter: blur(3px);
}

/* 3. Tarjeta de Login (Glassmorphism) */
.login-card-pro {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 35px;
    padding: 50px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.3);
    animation: loginIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loginIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.brand-logo-login {
    width: 100px; height: 100px;
    background: white;
    border-radius: 50%;
    padding: 15px;
    margin: 0 auto 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.login-header h1 { font-size: 1.8rem; font-weight: 800; color: #1e293b; margin: 0; letter-spacing: -1px; }
.login-header h1 span { color: var(--accent-color); } 
.login-header p { font-size: 14px; color: #64748b; margin-top: 5px; font-weight: 500; }

/* 4. Inputs Modernos */
.input-group-pro { margin-bottom: 22px; text-align: left; }
.input-group-pro label { display: block; font-size: 11px; font-weight: 800; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }

.input-field {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.input-field i {
    position: absolute;
    left: 18px;
    color: var(--accent-color); /* Azul brillante para los iconos */
    font-size: 1.1rem;
    z-index: 10;
}

.input-field input {
    width: 100%;
    padding: 15px 15px 15px 50px;
    padding-right: 45px !important; 
    border-radius: 14px;
    border: 2px solid #f1f5f9;
    background: #f8fafc;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
}

.input-field input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.btn-toggle-pwd {
    position: absolute !important;
    /* 2. Lo alejamos un poquito más del borde derecho (de 8px a 15px) */
    right: 25px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important; /* Quitamos paddings que lo ensanchan */
    margin: 0 !important;
    z-index: 20 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important; /* Tamaño fijo para que no se mueva */
    height: 24px !important;
}


/* 5. Botón Acceder (Efecto Gradiente) */
.btn-login-submit {
    width: 100%;
    padding: 18px;
    margin-top: 15px;
    background: linear-gradient(135deg, #2563eb 0%, #eb8825 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.btn-toggle-pwd:hover i {
    color: var(--primary-color) !important; /* Cambia a naranja al pasar el mouse */
}

.btn-login-submit:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
    filter: brightness(1.1);
}

/* Estado de Carga */
.btn-login-submit:disabled {
    background: #64748b;
    cursor: not-allowed;
    transform: none;
    opacity: 0.8;
}

/* 6. Información Legal y Footer */
.login-legal-info { margin-top: 20px; font-size: 12px; color: #94a3b8; line-height: 1.5; }
.login-legal-info a { color: #3b82f6; text-decoration: none; font-weight: 700; }

.login-footer { margin-top: 40px; border-top: 1px solid #f1f5f9; padding-top: 20px; }
.login-footer p { font-size: 13px; font-weight: 700; color: #1e293b; margin: 0; }
.login-footer small { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }

/* Mensaje de Error */
.alert-login-error {
    background: #fef2f2; color: #b91c1c;
    padding: 12px 18px; border-radius: 12px;
    margin-bottom: 25px; border: 1px solid #fecaca;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
    animation: shake 0.4s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (max-width: 480px) {
    .login-page {
        position: relative !important; /* Devolvemos la posición normal */
        height: auto !important;
        min-height: 100dvh !important;
        /* Permitimos scroll SOLO en celular por si el teclado tapa todo */
        overflow-y: auto !important; 
        display: block !important; /* Cambiamos a block para que el scroll fluya mejor */
        padding: 20px 0;
    }

    .login-wrapper {
        margin: 0 auto !important;
        padding: 10px;
    }

    .login-card-pro {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* ================================================================
   DISEÑO DE FILA EXPANDIDA (MODO CELULAR) - PGC STYLE
   ================================================================ */

/* 1. Quitamos el fondo feo y bordes extraños que pone la librería */
table.dataTable > tbody > tr.child {
    background: var(--bg-system) !important; /* Un tono grisáceo para diferenciar */
}

table.dataTable > tbody > tr.child td.child {
    padding: 15px !important;
}

/* 2. Convertimos la lista en una Cuadrícula de 2 Columnas */
ul.dtr-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* ¡Aquí está el truco de las 2 columnas! */
    gap: 15px !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Estilo para cada "celda" de la cuadrícula */
ul.dtr-details > li {
    background: var(--card-bg); /* Fondo blanco/oscuro según el modo */
    padding: 12px !important;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column; /* Título arriba, Dato abajo */
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

/* 4. Estilo de los Títulos (Identificación, Código, etc.) */
ul.dtr-details .dtr-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--accent-color) !important; /* Color naranja para resaltar */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 5. Estilo de los Datos (El contenido) */
ul.dtr-details .dtr-data {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-main);
    word-break: break-word; /* Evita que textos largos rompan el cuadro */
}

/* 6. CASO ESPECIAL: "ACCIONES" debe ocupar las dos columnas */
ul.dtr-details > li:last-child {
    grid-column: span 2 !important; /* Se estira a todo el ancho */
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 20px 0 10px 0 !important;
}

/* Ajuste de los botones de acción para que no se vean pegados */
ul.dtr-details .action-buttons {
    justify-content: center !important;
    gap: 20px !important;
    width: 100%;
}
/* 7. Toque final: Ocultar el bullet (flechita) que a veces sale en móvil */
ul.dtr-details > li::before {
    display: none !important;
}

/* --- AJUSTE PARA PANTALLAS MUY PEQUEÑAS --- */
@media (max-width: 400px) {
    ul.dtr-details {
        grid-template-columns: 1fr !important; /* En pantallas mini, mejor 1 sola columna */
    }
    ul.dtr-details > li:last-child {
        grid-column: span 1 !important;
    }
}
.btn-volver {
    background: var(--bg-system);
    color: var(--text-main);
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.btn-volver:hover {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 6px 15px rgba(235, 136, 37, 0.3);
    transform: translateY(-2px);
}

/* ================================================================
   DISEÑO 2FA PREMIUM (SaaS SECURITY)
   ================================================================ */

.two-factor-box {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: 20px;
}

.sub-title-pro { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

.status-2fa { padding: 15px; border-radius: 12px; background: var(--bg-system); }
.status-2fa.enabled { background: #ecfdf5; border: 1px solid #10b981; display: flex; justify-content: space-between; align-items: center; }

.info-2fa-active { display: flex; align-items: center; gap: 15px; color: #065f46; }
.info-2fa-active i { font-size: 2rem; }
.info-2fa-active span { font-size: 12px; opacity: 0.8; display: block; }

.btn-setup-2fa {
    background: #1e293b; color: white; border: none; padding: 10px 20px;
    border-radius: 10px; font-weight: 700; cursor: pointer; margin-top: 10px;
}

.btn-disable-2fa { background: #fee2e2; color: #b91c1c; border: none; padding: 8px 15px; border-radius: 8px; font-weight: 700; cursor: pointer; }

.qr-box { background: white; padding: 20px; border-radius: 15px; margin: 15px 0; display: inline-block; border: 1px solid #e2e8f0; }
.centered-text { text-align: center; letter-spacing: 5px; font-size: 20px !important; font-weight: 900; }

/* --- ACORDEÓN DE SEGURIDAD PRO --- */
.security-form-wrapper {
    max-height: 0; /* Cerrado por defecto */
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animación fluida */
    padding: 0 25px; /* Quitamos el padding vertical para que no se vea el borde cuando está cerrado */
    background: var(--card-bg);
}

/* Cuando el acordeón esté abierto */
.security-form-wrapper.active {
    max-height: 1000px; /* Un valor grande para que quepa todo */
    padding: 25px; /* Devolvemos el padding */
    border-top: 1px solid var(--border-color);
}

/* Estilo específico para el input del código 2FA */
#otp_code::placeholder {
    letter-spacing: normal; /* Para que el placeholder se lea bien */
    font-size: 14px;
    font-weight: 400;
}

/* Animación para el icono de seguridad */
.brand-logo-login i.fa-user-shield {
    animation: shieldPulse 2s infinite;
}

@keyframes shieldPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Enfoque en el input de seguridad */
#otp_code:focus {
    border-color: #38bdf8 !important; /* Azul cian de seguridad */
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15) !important;
}

.chart-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-wrapper-dashboard {
    height: 300px; /* Altura fija para que la gráfica respire */
    position: relative;
}

.input-pgc-sm {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-system);
    font-size: 13px;
    font-weight: 700;
}

.table-footer-link {
    padding: 15px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.btn-link-pro {
    font-weight: 800;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 13px;
}

.toolbar-planilla { padding: 25px !important; margin-bottom: 25px; }

.filters-grid-pro {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    align-items: flex-end;
}

.mora-badge {
    padding: 4px 10px; border-radius: 6px; font-weight: 800; font-size: 11px;
}
.mora-badge.in-debt { background: #fee2e2; color: #dc2626; }
.mora-badge.clean { background: #dcfce7; color: #16a34a; }

.icon-sky { color: #0ea5e9; }

@media (max-width: 768px) {
    .filters-grid-pro { grid-template-columns: 1fr; }
    .table-matrix .sticky-col { min-width: 140px; font-size: 12px; }
}

/* --- ESTILO PARA CABECERAS ORDENABLES --- */
.table-matrix th.sortable {
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

.table-matrix th.sortable:hover {
    background: #f8fafc;
    color: var(--accent-color);
}

.table-matrix th i {
    margin-left: 5px;
    font-size: 12px;
}

.opacity-20 { opacity: 0.2; }

/* Ajuste para que la flecha de la columna pegajosa no se tape */
.table-matrix .sticky-col.sortable {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================================================
   AJUSTES DE CONTRASTE: PLANILLA DE TRABAJO (CLARO/OSCURO)
   ================================================================ */

/* 1. El contenedor de la tabla debe seguir el tema */
.table-card-premium {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}

/* 2. CORRECCIÓN DE FILAS: Evita el color blanco fijo */
.table-premium tr {
    background: transparent !important;
    transition: background 0.3s ease;
}

/* Fila cuando se selecciona (Feedback visual) */
.row-attendance.row-selected {
    /* Usamos un color de acento con mucha transparencia */
    background-color: rgba(235, 136, 37, 0.08) !important; 
}

/* Hover de la fila */
.table-premium tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

body.dark .table-premium tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* 3. BOTONES DE ESTADO (TILES) - DISEÑO PREMIUM */
.tile-btn {
    background: var(--bg-system); /* Se adapta al fondo del sistema */
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 12px;
    font-weight: 800;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efectos al estar seleccionado */

/* SI (Asistió) - Verde Esmeralda */
.status-tile input[value="1"]:checked + .tile-btn {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* RE (Reemplazo) - Azul Cielo */
.status-tile input[value="2"]:checked + .tile-btn {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* NO (Faltó) - Rojo Coral */
.status-tile input[value="0"]:checked + .tile-btn {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
    border-color: #f43f5e !important;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.2);
}

/* 4. EL BUSCADOR (Integrated Look) */
.search-container-work {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.search-container-work input {
    background: var(--bg-system) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

/* 5. EL WIDGET DE PROCESADOS (Arriba a la derecha) */
.progress-widget {
    background: var(--card-bg) !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}

.progress-label { color: #f59e0b !important; }
.progress-value { color: var(--text-main) !important; }

/* 6. TEXTOS DE LA TABLA */
.user-full-name { color: var(--text-main) !important; }
.code-tag-sm { background: var(--bg-system) !important; color: var(--text-muted) !important; }

/* --- BOTONES DE ACCIÓN EN TABLA DE MULTAS --- */
.action-btns-flex {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
    border: none;
}

/* Color Verde para Pagar */
.btn-table-action.pay {
    background: #10b981;
    color: white;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.btn-table-action.pay:hover {
    background: #059669;
    transform: translateY(-2px);
}

/* Color Ámbar para Excusar */
.btn-table-action.excuse {
    background: #f59e0b;
    color: white;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}
.btn-table-action.excuse:hover {
    background: #d97706;
    transform: translateY(-2px);
}

.finalized-label {
    font-size: 11px;
    color: #10b981;
    font-weight: 700;
    font-style: italic;
}

/* Resaltar filas con deuda */
.row-debt {
    background-color: rgba(239, 68, 68, 0.02);
}

/* --- GESTIÓN DE MULTAS POR MIEMBRO --- */

.user-meta-row { display: flex; gap: 10px; margin-top: 5px; }
.badge-doc { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-system); padding: 2px 8px; border-radius: 4px; }

/* Hero de Deuda */
.debt-hero-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 30px; border-radius: 20px; color: white;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px; box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,0.1);
}

.debt-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; opacity: 0.6; }
.debt-amount { font-size: 2.5rem; font-weight: 900; margin-top: 5px; color: #f59e0b; }
.debt-icon { font-size: 3rem; opacity: 0.2; }

/* Grid de Gestión */
.gestionar-grid-pro { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 25px; }

/* Fine Card Premium */
.fine-card-premium {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 18px; padding: 20px; margin-bottom: 15px;
    display: flex; justify-content: space-between; align-items: center;
    transition: 0.3s;
}
.fine-card-premium:hover { border-color: #f59e0b; transform: translateY(-3px); }

.fc-title { display: block; font-weight: 800; color: var(--text-main); font-size: 15px; }
.fc-date { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.fc-value { font-size: 1.4rem; font-weight: 900; color: #ef4444; margin-top: 10px; }

.fc-actions { display: flex; flex-direction: column; gap: 8px; }

.btn-fc {
    padding: 10px 20px; border-radius: 10px; font-weight: 800; font-size: 11px;
    text-decoration: none; text-align: center; transition: 0.3s;
}
.btn-fc.pay { background: #10b981; color: white; }
.btn-fc.excuse { background: #f59e0b; color: white; }
.btn-fc:hover { filter: brightness(1.1); transform: scale(1.05); }

/* Tabla Historial */
.table-mini-history th { background: var(--bg-system); padding: 12px; font-size: 10px; text-transform: uppercase; color: var(--text-muted); }
.table-mini-history td { padding: 12px; border-bottom: 1px solid var(--bg-system); font-size: 13px; }
.h-title { font-weight: 700; color: var(--text-main); }
.h-date { font-size: 10px; color: var(--text-muted); font-weight: 600; }

@media (max-width: 900px) {
    .gestionar-grid-pro { grid-template-columns: 1fr; }
}

/* --- ESTILO PARA CABECERAS ORDENABLES --- */
th.sortable {
    cursor: pointer !important;
    user-select: none;
    transition: background 0.3s ease;
}

th.sortable:hover {
    background: var(--bg-system) !important;
    color: var(--accent-color) !important;
}

/* Reducimos la opacidad de los iconos que no están activos */
.opacity-30 {
    opacity: 0.3;
}


.sortable {
    cursor: pointer !important;
    transition: background 0.3s ease;
}
.sortable:hover {
    background: rgba(255,255,255,0.05);
    color: var(--accent-color);
}
.opacity-30 { opacity: 0.3; font-size: 0.8rem; margin-left: 5px; }

/* Ajuste de Paginación en modo Oscuro */
.ajax-table-footer {
    display: flex;
    justify-content: center;
    padding: 15px;
    border-top: 1px solid var(--border-color);
}

/* ================================================================
   ESTILO ASISTENCIA TRABAJO Y PAGINACIÓN PRO
   ================================================================ */

/* 1. Widget de Progreso Dinámico */
.progress-widget {
    background: var(--card-bg);
    border: 2px solid #f59e0b;
    padding: 10px 20px;
    border-radius: 15px;
    transition: 0.3s;
}
.progress-widget.completed {
    background: #f0fdf4;
    border-color: #10b981;
}
.progress-widget.completed .progress-label { color: #16a34a; }

/* 2. Paginación AJAX (Estilo SaaS Premium) */
.ajax-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--bg-system);
    border-top: 1px solid var(--border-color);
}

.ajax-pagination {
    display: flex;
    gap: 8px;
}

.ajax-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--card-bg);
    color: var(--text-main);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}

.ajax-pagination a:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    transform: translateY(-2px);
}

.ajax-pagination a.active {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* 3. Encabezados Ordenables */
.sortable {
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}
.sortable:hover {
    background: rgba(245, 158, 11, 0.05) !important;
    color: #f59e0b;
}

/* 4. Estado de Fila Seleccionada */
.row-selected {
    background-color: rgba(245, 158, 11, 0.03) !important;
}

/* Responsive para la planilla */
@media (max-width: 768px) {
    .ajax-table-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}


/* Estilos extra para la tabla de reuniones */
.attendance-stat-circle {
    font-size: 13px;
    color: var(--text-muted);
}
.attendance-stat-circle.active { color: var(--text-main); }
.attendance-stat-circle b { font-size: 16px; color: var(--primary-color); }

.quorum-dot { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.meta-row-sm { display: flex; gap: 12px; margin-top: 5px; }

/* ================================================================
   CARTERA INDIVIDUAL DE REUNIONES (SaaS STYLE)
   ================================================================ */

.member-title-pro { font-weight: 900; letter-spacing: -1px; margin: 5px 0; }

/* 1. Debt Summary Card (Hero) */
.debt-summary-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    padding: 35px !important; border-radius: 25px !important;
    display: flex; justify-content: space-between; align-items: center;
    position: relative; overflow: hidden; margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}
.debt-label { font-size: 11px; font-weight: 800; color: #94a3b8; letter-spacing: 2px; }
.debt-amount { font-size: 2.8rem; font-weight: 900; color: #f59e0b; margin-top: 5px; }
.debt-icon-bg { font-size: 5rem; color: white; opacity: 0.05; position: absolute; right: -10px; bottom: -20px; }

/* 2. Grid Pro */
.gestionar-grid-pro { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 25px; width: 100%; }

/* 3. Fine Cards v2 */
.fine-card-pro-v2 {
    background: var(--card-bg); padding: 20px; border-radius: 18px;
    border: 1px solid var(--border-color); display: flex;
    justify-content: space-between; align-items: center; margin-bottom: 15px;
    transition: 0.3s;
}
.fine-card-pro-v2:hover { border-color: var(--primary-color); transform: translateY(-3px); }

.fc-reunion { display: block; font-weight: 800; color: var(--text-main); font-size: 15px; }
.fc-meta { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.fc-price { font-size: 1.4rem; font-weight: 900; color: #ef4444; margin-top: 5px; }

.fc-btns { display: flex; flex-direction: column; gap: 8px; }

.btn-fc-action {
    padding: 8px 15px; border-radius: 10px; border: none; font-weight: 800; font-size: 10px; cursor: pointer; transition: 0.3s;
}
.btn-fc-action.pay { background: #ecfdf5; color: #10b981; }
.btn-fc-action.excuse { background: #fff7ed; color: #f59e0b; }
.btn-fc-action:hover { filter: brightness(0.9); transform: scale(1.05); }

/* 4. Table Mini History */
.table-premium-mini { width: 100%; border-collapse: collapse; }
.table-premium-mini th { background: var(--bg-system); padding: 12px; font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.table-premium-mini td { padding: 12px; border-bottom: 1px solid var(--bg-system); font-size: 13px; }
.hist-name { font-weight: 700; color: var(--text-main); }
.hist-date { font-size: 10px; color: var(--text-muted); }

/* 5. Modal Saas Confirm */
.modal-confirm-saas { max-width: 400px !important; text-align: center; }
.modal-ga-icon { width: 60px; height: 60px; background: var(--bg-system); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 2rem; }
.modal-form-pro { margin-top: 20px; text-align: left; }

/* RESPONSIVIDAD DEFINITIVA */
@media (max-width: 1024px) {
    .gestionar-grid-pro { grid-template-columns: 1fr; }
    .debt-summary-card { flex-direction: column; text-align: center; padding: 25px !important; }
}

@media (max-width: 768px) {
    .fine-card-pro-v2 { flex-direction: column; text-align: center; gap: 20px; }
    .fc-btns { width: 100%; flex-direction: row; }
    .btn-fc-action { flex: 1; padding: 15px; font-size: 12px; }
    .debt-amount { font-size: 2rem; }
}

/* --- AJUSTE DE BOTONES EN MODAL DE GESTIÓN --- */
.modal-footer-grid {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    justify-content: center;
}

/* Forzamos el estilo en el botón de confirmar */
.modal-footer-grid .btn-primary {
    flex: 1;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: white !important;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modal-footer-grid .btn-cancel {
    flex: 1;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px 25px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.modal-footer-grid .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* --- HOVER ESPECÍFICO PARA EL BOTÓN ACTIVO --- */
.nav-link-parent.active:hover {
    /* 1. Mantenemos el movimiento pero un poquito más marcado */
    transform: translateX(6px) !important; 
    
    /* 2. Como ya tiene un gradiente, lo hacemos brillar con brillo (filter) */
    filter: brightness(1.15); 
    
    /* 3. Aumentamos la sombra para que parezca que se eleva más */
    box-shadow: 0 8px 20px rgba(37, 222, 235, 0.5) !important;
    
    /* 4. Mantenemos el color blanco (porque sobre el azul/naranja el naranja no se leería) */
    color: var(--accent-color) !important; 
}

/* También hacemos que el icono crezca cuando el botón activo reciba hover */
.nav-link-parent.active:hover i:first-child {
    transform: scale(1.2);
    color: var(--accent-color)
}


/* ================================================================
   FIX: BOTONES SIMÉTRICOS EN MODALES (MOBILE)
   ================================================================ */

@media (max-width: 480px) {
    /* Forzamos a que el pie del modal sea siempre una fila */
    #pgc-modal .modal-footer, 
    .modal-footer-grid {
        display: flex !important;
        flex-direction: row !important; /* ¡Obligatorio uno al lado del otro! */
        gap: 10px !important;
        padding: 15px 0 0 0 !important;
        width: 100% !important;
    }

    /* Hacemos que los botones del modal midan lo mismo */
    #pgc-modal .modal-footer button,
    #pgc-modal .modal-footer a,
    .modal-footer-grid button {
        flex: 1 !important; /* Se reparten el espacio 50/50 */
        margin: 0 !important;
        padding: 12px 5px !important;
        font-size: 13px !important; /* Bajamos un pelín la letra para que quepa bien */
        white-space: nowrap !important; /* Evita que el texto se parta en dos líneas */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Ajuste para los inputs con máscara de dinero */
.input-money-wrapper input, 
.input-money-wrapper-v3 input {
    font-variant-numeric: tabular-nums; /* Mantiene los números alineados */
    letter-spacing: 1px;
    font-weight: 800 !important;
    font-size: 1.5rem !important; /* Tamaño grande como el de tu foto */
}

/* Quitamos las flechitas de subir/bajar que salen en algunos navegadores */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}