/* Paleta de colores de Valle Colorete */
:root {
    --color-principal: #767bfc;
    --color-enfasis: #6446bd; 
    --color-tercero: #72e6d9;
}

body { 
    background-color: #f4f7f6; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar general */
.navbar { 
    background-color: var(--color-enfasis) !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}


/* Tarjetas y Contenedores */
.card { 
    border: none; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: transform 0.2s;
}

/* Pestañas (Tabs) Responsivas */
.nav-tabs { 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
    scrollbar-width: none; 
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs::-webkit-scrollbar { 
    display: none; 
}

.nav-tabs .nav-link { 
    color: #6c757d; 
    white-space: nowrap; 
    border: none;
    padding: 10px 20px;
}

.nav-tabs .nav-link.active { 
    font-weight: bold; 
    color: var(--color-enfasis); 
    border-bottom: 3px solid var(--color-enfasis); 
    background: none;
}

/* Botones Personalizados */
.btn-primary { 
    background-color: var(--color-principal); 
    border-color: var(--color-principal); 
}

.btn-primary:hover { 
    background-color: var(--color-enfasis); 
    border-color: var(--color-enfasis); 
}

.btn-dark { 
    background-color: var(--color-enfasis); 
    border-color: var(--color-enfasis); 
}

.btn-dark:hover { 
    background-color: var(--color-principal); 
    border-color: var(--color-principal); 
}

.btn-warning { 
    background-color: var(--color-tercero); 
    border-color: var(--color-tercero); 
    color: #000; 
    font-weight: 600;
}

.btn-warning:hover { 
    background-color: #5bc8bc; 
    border-color: #5bc8bc; 
    color: #000; 
}

/* Animaciones y utilidades */
.btn-firmar { 
    transition: 0.3s; 
}

.btn-firmar:hover { 
    transform: scale(1.05); 
}

.icon-lg { 
    font-size: 4rem; 
}

/* =========================================
   PARCHES RESPONSIVOS (Móviles y Tablas) 
   ========================================= */

.table-responsive, .table-responsive-lg { 
    border-radius: 8px; 
}

@media (max-width: 768px) {
    .btn-sm-block { 
        width: 100%; 
        margin-bottom: 5px; 
    }
    
    .card { 
        margin-bottom: 15px; 
    }
}