/* ==========================================================================
   PALETA DE GRISES PROFESIONAL - CSIC RESERVAS
   Override de colores Bootstrap con una rampa de grises moderna
   ========================================================================== */

/* Variables CSS para la paleta de grises */
:root {
    /* Grises principales */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f4;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    /* Grises especiales */
    --gray-dark: #1a1a1a;
    --gray-medium: #666666;
    --gray-light: #cccccc;
    --gray-lighter: #e6e6e6;
    --gray-lightest: #f5f5f5;
    
    /* Override variables de Bootstrap */
    --bs-gray-100: var(--gray-100);
    --bs-gray-200: var(--gray-200);
    --bs-gray-300: var(--gray-300);
    --bs-gray-400: var(--gray-400);
    --bs-gray-500: var(--gray-500);
    --bs-gray-600: var(--gray-600);
    --bs-gray-700: var(--gray-700);
    --bs-gray-800: var(--gray-800);
    --bs-gray-900: var(--gray-900);
    
    /* Colores de acento manteniendo identidad CSIC */
    --accent-primary: var(--csic-red, #de203a);
    --accent-secondary: var(--gray-600);
    --accent-success: var(--gray-700);
    --accent-warning: var(--gray-500);
    --accent-danger: var(--gray-800);
    --accent-info: var(--gray-600);
}

/* ==========================================================================
   OVERRIDE DE COMPONENTES BOOTSTRAP
   ========================================================================== */

/* Botones con paleta de grises */
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    color: white;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--gray-700);
    border-color: var(--gray-700);
    color: white;
}

.btn-light {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-800);
}

.btn-light:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-900);
}

.btn-dark {
    background-color: var(--gray-800);
    border-color: var(--gray-800);
    color: white;
}

.btn-dark:hover {
    background-color: var(--gray-900);
    border-color: var(--gray-900);
    color: white;
}

/* Cards con grises */
.card {
    background-color: white;
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card-header {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-800);
}

.card-footer {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* Alertas con grises */
.alert-secondary {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

.alert-light {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-700);
}

.alert-dark {
    background-color: var(--gray-800);
    border-color: var(--gray-900);
    color: white;
}

/* Badges con grises */
.badge-secondary {
    background-color: var(--gray-600);
    color: white;
}

.badge-light {
    background-color: var(--gray-200);
    color: var(--gray-800);
}

.badge-dark {
    background-color: var(--gray-800);
    color: white;
}

/* ==========================================================================
   FORMULARIOS CON GRISES
   ========================================================================== */

.form-control {
    border-color: var(--gray-300);
    background-color: white;
}

.form-control:focus {
    border-color: var(--gray-500);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

.form-control:disabled {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-600);
}

.form-select {
    border-color: var(--gray-300);
    background-color: white;
}

.form-select:focus {
    border-color: var(--gray-500);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

/* Labels y texto de formularios */
.form-label {
    color: var(--gray-700);
    font-weight: 500;
}

.form-text {
    color: var(--gray-600);
}

/* ==========================================================================
   NAVEGACIÓN CON GRISES
   ========================================================================== */

.navbar-light {
    background-color: var(--gray-50);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--gray-700);
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--gray-900);
}

.navbar-dark {
    background-color: var(--gray-800);
}

.nav-tabs .nav-link {
    color: var(--gray-600);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--gray-900);
    background-color: white;
    border-color: var(--gray-300);
    border-bottom-color: white;
}

.nav-tabs .nav-link:hover {
    color: var(--gray-800);
    border-color: var(--gray-300);
}

/* ==========================================================================
   TABLAS CON GRISES
   ========================================================================== */

.table {
    color: var(--gray-800);
}

.table th {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.table td {
    border-color: var(--gray-200);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--gray-50);
}

.table-hover > tbody > tr:hover > td {
    background-color: var(--gray-100);
}

/* ==========================================================================
   MODALES CON GRISES
   ========================================================================== */

.modal-header {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.modal-footer {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.modal-content {
    border: 1px solid var(--gray-300);
}

/* ==========================================================================
   UTILIDADES DE TEXTO Y COLORES
   ========================================================================== */

.text-muted {
    color: var(--gray-600) !important;
}

.text-secondary {
    color: var(--gray-600) !important;
}

.text-light {
    color: var(--gray-400) !important;
}

.text-dark {
    color: var(--gray-800) !important;
}

/* Fondos */
.bg-light {
    background-color: var(--gray-100) !important;
}

.bg-secondary {
    background-color: var(--gray-600) !important;
}

.bg-dark {
    background-color: var(--gray-800) !important;
}

/* Bordes */
.border {
    border-color: var(--gray-300) !important;
}

.border-light {
    border-color: var(--gray-200) !important;
}

.border-secondary {
    border-color: var(--gray-400) !important;
}

.border-dark {
    border-color: var(--gray-700) !important;
}

/* ==========================================================================
   SPINNER Y LOADING CON GRISES
   ========================================================================== */

.spinner-border {
    color: var(--gray-600);
}

.spinner-border-sm {
    color: var(--gray-500);
}

/* ==========================================================================
   BREADCRUMB CON GRISES
   ========================================================================== */

.breadcrumb {
    background-color: var(--gray-100);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--gray-500);
}

.breadcrumb-item a {
    color: var(--gray-600);
}

.breadcrumb-item.active {
    color: var(--gray-800);
}

/* ==========================================================================
   PAGINACIÓN CON GRISES
   ========================================================================== */

.page-link {
    color: var(--gray-600);
    background-color: white;
    border-color: var(--gray-300);
}

.page-link:hover {
    color: var(--gray-800);
    background-color: var(--gray-100);
    border-color: var(--gray-400);
}

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

.page-item.disabled .page-link {
    color: var(--gray-400);
    background-color: white;
    border-color: var(--gray-300);
}

/* ==========================================================================
   COMPONENTES PERSONALIZADOS CSIC CON GRISES
   ========================================================================== */

/* Cards de sala con efecto hover gris */
.sala-card {
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    background-color: white;
}

.sala-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gray-400);
    transform: translateY(-2px);
}

/* Iconos de equipamiento en grises */
.equipamiento-icon {
    color: var(--gray-600);
    font-size: 1.2rem;
}

.equipamiento-icon.disponible {
    color: var(--gray-800);
}

.equipamiento-icon.no-disponible {
    color: var(--gray-400);
}

/* Indicadores de estado con grises */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-disponible {
    background-color: var(--gray-600);
}

.status-ocupado {
    background-color: var(--gray-800);
}

.status-mantenimiento {
    background-color: var(--gray-400);
}

/* Sombras suaves en grises */
.shadow-gray {
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.15);
}

.shadow-gray-lg {
    box-shadow: 0 4px 16px rgba(108, 117, 125, 0.2);
}

/* ==========================================================================
   MEDIA QUERIES - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border: 1px solid var(--gray-200);
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* ==========================================================================
   OVERRIDE PARA MANTENER COLORES INSTITUCIONALES IMPORTANTES
   ========================================================================== */

/* Mantener el rojo CSIC en elementos importantes */
.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-primary:hover {
    background-color: #c01e39;
    border-color: #c01e39;
}

.alert-danger {
    background-color: rgba(222, 32, 58, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

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

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

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