/* ==========================================================================
   1. CONFIGURACIÓN GLOBAL (Digital Mind Intranet)
   ========================================================================== */
:root {
    --dm-azul: #004586;
    --dm-verde: #28a745;
    --dm-blanco: #ffffff;
    --dm-oscuro: #121212;
}

body {
    margin: 0;
    padding: 0;
    background: var(--dm-oscuro);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   2. HEADER Y LOGOTIPO
   ========================================================================== */
header {
    text-align: center;
    padding: 10px 0;
    background: var(--dm-blanco);
    border-bottom: 3px solid var(--dm-azul);
    margin-bottom: 20px;
}

.logo-dm {
    width: 280px;
    height: auto;
    margin: 20px 0;
    
}

/* ==========================================================================
   3. COMPONENTES DE CARGA (Loader / Spinner)
   ========================================================================== */
.loader-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.spinner-dm {
    width: 45px;
    height: 45px;
    margin: 20px auto; /* Compatibilidad con salir.php */
    border: 5px solid rgba(0, 69, 134, 0.1); /* Base ligera */
    border-top: 5px solid var(--dm-azul);
    border-radius: 50%;
    animation: spin-dm 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

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

/* ==========================================================================
   4. CLASES DE COMPONENTES (Cards, Botones, Inputs)
   ========================================================================== */
.card-dm {
    background: var(--dm-blanco);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-bottom: 5px solid var(--dm-azul);
    margin-bottom: 20px;
    color: #333;
}

.card-logout {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 50px 20px;
    border-top: 5px solid var(--dm-azul);
}

.label-dm {
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: #555;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.input-dm {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s;
}

.input-dm:focus {
    border-color: var(--dm-azul);
    outline: none;
    box-shadow: 0 0 8px rgba(0,69,134,0.2);
}

.btn-dm {
    background: var(--dm-azul);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-dm:hover { 
    background: #003366; 
    filter: brightness(1.2); 
    transform: translateY(-2px); 
}

/* ==========================================================================
   5. PANEL OPERATIVO (Header de Issabel / Gestión)
   ========================================================================== */
.panel-container { 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    width: 100%; 
    max-width: 1100px; 
    margin: 10px auto; 
    overflow: hidden; 
}

.panel-header { 
    background: #004586; 
    color: white; 
    padding: 8px 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 3px solid #28a745; 
    position: relative; 
}

.panel-header-title { 
    flex-grow: 1; 
    text-align: center; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    font-size: 12px; 
    padding: 0 5px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-header-nav { 
    background: rgba(255, 255, 255, 0.1); 
    color: white !important; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    padding: 5px 8px; 
    border-radius: 6px; 
    font-size: 11px; 
    font-weight: bold; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
    transition: 0.3s; 
}

.btn-header-up { background: #d9534f !important; border: none; }
.btn-header-salir { background: rgba(0,0,0,0.4); color: white !important; padding: 5px 10px; border-radius: 6px; font-size: 14px; text-decoration: none; border: 1px solid rgba(255,255,255,0.1); }

.notif-container { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: #ffc107; }
.notif-badge { 
    position: absolute; top: -6px; right: -8px; 
    background: #fd7e14; color: white; 
    padding: 1px 5px; border-radius: 10px; 
    font-size: 9px; font-weight: bold; 
    border: 1px solid #004586;
    line-height: 1.2;
}

.id-display { background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 11px; color: #abd5ff; }

/* ==========================================================================
   6. GESTIÓN (Tablas y Alertas)
   ========================================================================== */
.alert-success { background:#dcfce7; color:#166534; padding:15px; border-radius:10px; margin-bottom:20px; text-align:center; border:1px solid #bbf7d0; font-size:13px; }
.alert-info { background:#d1edff; color:#004586; padding:15px; border-radius:10px; margin-bottom:20px; text-align:center; border:1px solid #b8daff; font-size:13px; }
.alert-danger { background:#fee2e2; color:#b91c1c; padding:15px; border-radius:10px; margin-bottom:20px; text-align:center; border:1px solid #fecaca; font-size:13px; }

.fila-super { background: #f8fafc !important; opacity: 0.7; filter: grayscale(1); pointer-events: none; }
.fila-propia { border-left: 5px solid #004586 !important; background: #f0f9ff !important; }

.paginacion-btn { text-decoration:none; padding: 8px 14px; border-radius: 6px; border: 1px solid #cbd5e1; background: white; color: #475569; font-weight: bold; }
.paginacion-btn.active { background: #004586; color: white; border-color: #004586; }

/* ==========================================================================
   7. MOSAICO HOME (Dashboard)
   ========================================================================== */
.mosaico-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 15px;
    padding: 15px 10px;
    max-width: 900px;
    margin: 0 auto;
}

.mosaico-item {
    width: 135px;
    text-align: center;
    margin-bottom: 10px;
}

.mosaico-btn:not(.mosaico-btn-invitado):hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.mosaico-btn:not(.mosaico-btn-invitado):hover div {
    box-shadow: 0 8px 15px rgba(0,69,134,0.3) !important;
    border-bottom-color: #28a745 !important; 
}

.mosaico-btn-invitado {
    filter: grayscale(100%) contrast(0.8);
    opacity: 0.6;
    cursor: not-allowed !important;
    position: relative;
    pointer-events: none;
}

.mosaico-btn-invitado div {
    border-bottom: 4px solid #999 !important; 
    background: rgba(245, 245, 245, 0.9) !important;
}

.mosaico-btn-invitado::after {
    content: '\f023'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 12px;
    color: #666;
    font-size: 12px;
    z-index: 10;
}

/* ==========================================================================
   8. RESPONSIVIDAD (Móviles)
   ========================================================================== */
@media (max-width: 768px) {
    .d-none-mobile { display: none; }
    .panel-header-title { font-size: 11px; }
    .panel-container { width: 98%; }
}

@media (max-width: 480px) {
    .mosaico-item { width: 45%; }
    .mosaico-container { gap: 10px; padding: 10px 5px; }
}
/* ==========================================================================
   AGREGADO PARA GESTIÓN (Digital Mind)
   ========================================================================== */
.card-dm-gestion {
    background: var(--dm-blanco);
    border-radius: 12px;
    border-top: 5px solid var(--dm-azul);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    padding: 20px;
}

.table-container-dm {
    background: var(--dm-blanco);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.table-dm {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.table-dm thead tr {
    background: var(--dm-azul);
    color: white;
    text-align: left;
}

.table-dm th, .table-dm td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
}

.table-dm tbody tr:hover {
    background-color: #f8fafc;
}