/**
 * Bienestar Municipal - Estilos Personalizados
 * Paleta: #a7154f (magenta) + escala de grises
 */

:root {
    /* Colores principales */
    --bm-primary: #a7154f;
    --bm-primary-dark: #8c1142;
    --bm-primary-darker: #6b0d33;
    --bm-primary-light: #c91a5f;
    --bm-primary-lighter: #e8467a;
    
    /* Escala de grises */
    --bm-gray-900: #1a1a1a;
    --bm-gray-800: #a7a6a6;
    --bm-gray-700: #3d3d3d;
    --bm-gray-600: #4d4d4d;
    --bm-gray-500: #6b6b6b;
    --bm-gray-400: #8a8a8a;
    --bm-gray-300: #b0b0b0;
    --bm-gray-200: #d4d4d4;
    --bm-gray-100: #e8e8e8;
    --bm-gray-50: #f5f5f5;
    
    /* Estados */
    --bm-success: #28a745;
    --bm-warning: #ffc107;
    --bm-danger: #dc3545;
    --bm-info: #17a2b8;
    
    /* Sombras */
    --bm-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --bm-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    --bm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    --bm-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    
    /* Transiciones */
    --bm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bm-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ESTILOS GLOBALES
   ======================================== */

body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bm-gray-100);
}

/* ========================================
   BOTONES
   ======================================== */

/* Estilos base para todos los botones */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 1rem;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn:focus {
    box-shadow: 0 0 0 3px rgba(167, 21, 79, 0.25);
}

/* Botón Primary - Color principal magenta */
.btn-primary {
    background: linear-gradient(135deg, #a7154f 0%, #8c1142 100%);
    border: none;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #c91a5f 0%, #a7154f 100%);
    color: #fff;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #8c1142 0%, #6b0d33 100%);
    color: #fff;
}

/* Botón Success - Verde moderno */
.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    border: none;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #34ce57 0%, #28a745 100%);
    color: #fff;
}

.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
    color: #fff;
}

/* Botón Danger - Rojo moderno */
.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    border: none;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: linear-gradient(135deg, #e4606d 0%, #dc3545 100%);
    color: #fff;
}

.btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #bd2130 0%, #921925 100%);
    color: #fff;
}

/* Botón Warning - Amarillo/Naranja */
.btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border: none;
    color: #212529;
}

.btn-warning:hover,
.btn-warning:focus {
    background: linear-gradient(135deg, #ffcd39 0%, #ffc107 100%);
    color: #212529;
}

.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #e0a800 0%, #c69500 100%);
    color: #212529;
}

/* Botón Info - Azul moderno */
.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    border: none;
    color: #fff;
}

.btn-info:hover,
.btn-info:focus {
    background: linear-gradient(135deg, #1fc8e3 0%, #17a2b8 100%);
    color: #fff;
}

.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #117a8b 0%, #0c5460 100%);
    color: #fff;
}

/* Botón Secondary - Gris neutro */
.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    border: none;
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
    color: #fff;
}

.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #545b62 0%, #3d4246 100%);
    color: #fff;
}

/* Botón Dark */
.btn-dark {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
    border: none;
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(135deg, #4b545c 0%, #343a40 100%);
    color: #fff;
}

/* Botón Light */
.btn-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    color: #495057;
}

.btn-light:hover,
.btn-light:focus {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    color: #212529;
}

/* Botones Outline */
.btn-outline-primary {
    background: transparent;
    border: 2px solid #a7154f;
    color: #a7154f;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #a7154f;
    border-color: #a7154f;
    color: #fff;
}

.btn-outline-secondary {
    background: transparent;
    border: 2px solid #6c757d;
    color: #6c757d;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-outline-success {
    background: transparent;
    border: 2px solid #28a745;
    color: #28a745;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

.btn-outline-danger {
    background: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-outline-warning {
    background: transparent;
    border: 2px solid #ffc107;
    color: #856404;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-outline-info {
    background: transparent;
    border: 2px solid #17a2b8;
    color: #17a2b8;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

/* Tamaños de botones */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 10px;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* Botón con icono */
.btn i,
.btn .fas,
.btn .far,
.btn .fab {
    margin-right: 0.4rem;
}

.btn-icon-only i,
.btn-icon-only .fas,
.btn-icon-only .far,
.btn-icon-only .fab {
    margin-right: 0;
}

/* Botón block */
.btn-block {
    border-radius: 8px;
}

/* Grupo de botones */
.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: 8px 0 0 8px;
}

.btn-group .btn:last-child {
    border-radius: 0 8px 8px 0;
}

.btn-group-vertical .btn:first-child {
    border-radius: 8px 8px 0 0;
}

.btn-group-vertical .btn:last-child {
    border-radius: 0 0 8px 8px;
}

/* Botones personalizados Bienestar */
.btn-bm-primary {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
    border: none;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: var(--bm-transition);
    box-shadow: var(--bm-shadow-sm);
}

.btn-bm-primary:hover {
    background: linear-gradient(135deg, var(--bm-primary-light) 0%, var(--bm-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--bm-shadow);
    color: #fff;
}

.btn-bm-primary:active {
    transform: translateY(0);
    box-shadow: var(--bm-shadow-sm);
}

.btn-bm-outline {
    background: transparent;
    border: 2px solid var(--bm-primary);
    color: var(--bm-primary);
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--bm-transition);
}

.btn-bm-outline:hover {
    background: var(--bm-primary);
    color: #fff;
}

/* ========================================
   SIDEBAR ADMINLTE
   ======================================== */

.main-sidebar {
    background: linear-gradient(180deg, #4a4a4a 0%, #5a5a5a 100%) !important;
    border-right: none !important;
    box-shadow: var(--bm-shadow-lg);
}

.main-sidebar .brand-link {
    background: var(--bm-primary) !important;
    border-bottom: none !important;
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    min-height: 56px;
    transition: var(--bm-transition);
}

.main-sidebar .brand-link:hover {
    background: var(--bm-primary-dark) !important;
}

.main-sidebar .brand-link .brand-text {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.025em;
    font-size: 1rem;
}

.main-sidebar .brand-link .brand-image {
    max-height: 30px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover;
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Navegación del sidebar */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%) !important;
    color: #fff !important;
    border-radius: 0 25px 25px 0;
    margin-right: 0.75rem;
    box-shadow: var(--bm-shadow);
}

.sidebar .nav-sidebar .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.75rem 1rem;
    margin: 2px 0;
    border-radius: 0 25px 25px 0;
    margin-right: 0.75rem;
    transition: var(--bm-transition);
}

.sidebar .nav-sidebar .nav-item > .nav-link:hover {
    background: rgba(167, 21, 79, 0.2) !important;
    color: #fff !important;
}

.sidebar .nav-sidebar .nav-item > .nav-link > .nav-icon {
    color: var(--bm-primary-lighter) !important;
    transition: var(--bm-transition);
}

.sidebar .nav-sidebar .nav-item > .nav-link:hover > .nav-icon,
.sidebar .nav-sidebar .nav-item > .nav-link.active > .nav-icon {
    color: #fff !important;
}

/* Headers del sidebar */
.sidebar .nav-header {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.25rem 1rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
}

.sidebar .nav-header:first-child {
    border-top: none;
    margin-top: 0;
}

/* Submenu */
.sidebar .nav-treeview {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 8px 0;
    margin-right: 0.75rem;
    padding: 0.5rem 0;
}

.sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar .nav-treeview > .nav-item > .nav-link:hover {
    color: #fff !important;
    background: transparent !important;
}

.sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: transparent !important;
    color: var(--bm-primary-lighter) !important;
    font-weight: 600;
}

/* User panel */
.sidebar .user-panel {
    border-bottom: 1px solid var(--bm-gray-700) !important;
    padding: 1rem;
}

.sidebar .user-panel .info a {
    color: #fff !important;
    font-weight: 500;
}

/* ========================================
   NAVBAR
   ======================================== */

.main-header.navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--bm-gray-200);
    box-shadow: var(--bm-shadow-sm);
}

.main-header .nav-link {
    color: var(--bm-gray-700) !important;
    transition: var(--bm-transition);
}

.main-header .nav-link:hover {
    color: var(--bm-primary) !important;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--bm-shadow);
    transition: var(--bm-transition);
}

.card:hover {
    box-shadow: var(--bm-shadow-lg);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--bm-gray-200);
    padding: 1.25rem 1.5rem;
}

.card-header.header-custom {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.card-header.header-custom .card-title {
    color: #fff;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

/* Card con borde de color */
.card.card-bm-primary {
    border-top: 4px solid var(--bm-primary);
}

/* ========================================
   FORMULARIOS
   ======================================== */

.form-control {
    border: 2px solid var(--bm-gray-200);
    border-radius: 8px;
    /* padding: 0.5rem 1rem; */
    transition: var(--bm-transition);
}

.form-control:focus {
    border-color: var(--bm-primary);
    box-shadow: 0 0 0 3px rgba(167, 21, 79, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--bm-gray-700);
    margin-bottom: 0.5rem;
}

.input-group-text {
    background: var(--bm-gray-100);
    border: 2px solid var(--bm-gray-200);
    border-left: none;
    color: var(--bm-gray-500);
}

/* ========================================
   TABLAS
   ======================================== */

.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background: var(--bm-gray-600);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border: none;
}

.table tbody tr {
    transition: var(--bm-transition-fast);
}

.table tbody tr:hover {
    background: rgba(167, 21, 79, 0.05);
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-color: var(--bm-gray-200);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    padding: 0.5em 0.75em;
    font-weight: 600;
    border-radius: 6px;
}

.badge.bg-bm-primary {
    background: var(--bm-primary) !important;
}

/* ========================================
   INFO BOXES
   ======================================== */

.info-box {
    border-radius: 12px;
    box-shadow: var(--bm-shadow);
    transition: var(--bm-transition);
}

.info-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--bm-shadow-lg);
}

.info-box.bg-bm-primary {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%) !important;
}

/* ========================================
   SMALL BOX (Widgets)
   ======================================== */

.small-box {
    border-radius: 12px;
    overflow: hidden;
    transition: var(--bm-transition);
}

.small-box:hover {
    transform: translateY(-4px);
}

.small-box.bg-bm-primary {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination .page-link {
    border: none;
    color: var(--bm-gray-700);
    padding: 0.75rem 1rem;
    margin: 0 2px;
    border-radius: 8px;
    transition: var(--bm-transition);
}

.pagination .page-link:hover {
    background: var(--bm-gray-200);
    color: var(--bm-primary);
}

.pagination .page-item.active .page-link {
    background: var(--bm-primary);
    color: #fff;
}

/* ========================================
   ALERTAS
   ======================================== */

.alert {
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    box-shadow: var(--bm-shadow-sm);
}

.alert-bm-primary {
    background: rgba(167, 21, 79, 0.1);
    color: var(--bm-primary-dark);
    border-left: 4px solid var(--bm-primary);
}

/* ========================================
   MODAL
   ======================================== */

.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--bm-shadow-xl);
}

.modal-header {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
    color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 600;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ========================================
   SCROLLBAR PERSONALIZADO
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bm-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--bm-gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bm-primary);
}

/* ========================================
   ANIMACIONES
   ======================================== */

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   UTILIDADES
   ======================================== */

.text-bm-primary {
    color: var(--bm-primary) !important;
}

.bg-bm-primary {
    background-color: var(--bm-primary) !important;
}

.border-bm-primary {
    border-color: var(--bm-primary) !important;
}

.shadow-bm {
    box-shadow: var(--bm-shadow) !important;
}

.shadow-bm-lg {
    box-shadow: var(--bm-shadow-lg) !important;
}

/* Gradientes de fondo */
.bg-gradient-bm {
    background: linear-gradient(135deg, var(--bm-primary) 0%, var(--bm-primary-dark) 100%);
}

.bg-gradient-bm-dark {
    background: linear-gradient(135deg, var(--bm-gray-800) 0%, var(--bm-gray-900) 100%);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .card {
        border-radius: 8px;
    }
    
    .card-header {
        padding: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}