.scrollable-content {
        overflow-y: auto;
        overflow-x: hidden;
    }
    /* Cards Base */
    .card {
        background: #ffffff;
        border: none;
        border-radius: 16px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
    }
    
    /* Card Hover Effect */
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }
    
    /* Card Header */
    .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 1.5rem;
    }
    
    /* Card Body */
    .card-body {
        padding: 1.5rem;
        height: 420px;
        overflow-y: auto;
    }

    .birthday-card-body {
        height: 200px !important;
    }
    
    /* Border Left Styles */
    .border-left-primary,
    .border-left-warning,
    .border-left-info,
    .border-left-secondary {
        border-left: none;
        position: relative;
    }
    
    .border-left-primary::before,
    .border-left-warning::before,
    .border-left-info::before,
    .border-left-secondary::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        border-radius: 4px 0 0 4px;
    }
    
    .border-left-primary::before { background: #A17CE1; }
    .border-left-warning::before { background: #6F5B8A; }
    .border-left-info::before { background: #E6DDD8; }
    .border-left-secondary::before { background: #F7D969; }
    
    /* Buttons */
    .btn {
        padding: 0.6rem 1.2rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.25s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    /* List Items */
    .list-group-item {
        border: none;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        padding: 1rem;
        background: #f8f9fa;
        transition: all 0.2s ease;
    }
    
    .list-group-item:hover {
        background: #f1f3f5;
        transform: translateX(4px);
    }
    
    /* Status Indicators */
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        bottom: 2px;
        right: 2px;
        border: 2px solid white;
    }
    
    /* Notification Badge */
    .notification-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #dc3545;
        color: white;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(220,53,69,0.3);
    }
    
    /* Profile Images */
    .profile-pic {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Custom Scrollbar */
    .card-body::-webkit-scrollbar {
        width: 6px;
    }
    
    .card-body::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .card-body::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
}

/* Estilizar la barra de desplazamiento */
.employee-unclocking-container::-webkit-scrollbar {
    width: 6px;
}

.employee-unclocking-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.employee-unclocking-container::-webkit-scrollbar-thumb {
    background: #f0ad4e;
    border-radius: 10px;
}

.employee-unclocking-container::-webkit-scrollbar-thumb:hover {
    background: #e0a800;
}

/* Estilo para el listado scrollable */
.scrollable-list {
    overflow-y: auto; /* Habilita el scroll vertical */
    padding-right: 5px; /* Espaciado para evitar que el contenido quede pegado */
}

/* Personalización de la barra de desplazamiento */
.scrollable-list::-webkit-scrollbar {
    width: 6px;
}

.scrollable-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollable-list::-webkit-scrollbar-thumb {
    background: #28a745; /* Color verde para coincidir con el tema */
    border-radius: 10px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
    background: #218838; /* Color más oscuro al pasar el mouse */
}

/* Estilos específicos para la sección de Novedades en home.php */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-item {
  align-items: flex-start;
}

.news-thumb img {
  border-radius: .25rem;
  background-color: #f3f6f8;
}

.news-body .news-meta time {
  display: inline-block;
}

.news-body h3 a {
  color: #1e7e34; /* verde similar a .text-success */
  text-decoration: none;
}
.news-body h3 a:hover,
.news-body h3 a:focus {
  text-decoration: underline;
}

.news-body p {
  margin-bottom: .5rem;
}

.news-body .btn {
  padding: .25rem .6rem;
  font-size: .85rem;
}

@media (max-width: 576px) {
  .news-item {
    flex-direction: row;
    gap: .75rem;
  }
  .news-thumb img {
    width: 64px !important;
    height: 64px !important;
  }
}