/* ==========================================================================
   Archivo: public/css/actividad.css
   Descripción: Estilos para el Centro de Actividad con Feather Icons.
   ========================================================================== */
:root {
    --kenner-gold: #D4AF37; --kenner-bg: #111827; --kenner-surface: #1F2937;
    --kenner-border: #374151; --kenner-text-primary: #F9FAFB; --kenner-text-secondary: #9CA3AF;
    --status-green: #10B981; --status-red: #EF4444; --status-blue: #3B82F6; --status-yellow: #F59E0B;
}
body.activity-body { background-color: var(--kenner-bg); color: var(--kenner-text-secondary); font-family: 'Inter', sans-serif; }
.kenner-header { background-color: rgba(31, 41, 55, 0.8); border-bottom: 1px solid var(--kenner-border); padding: 0.75rem 2rem; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
.kenner-header .header-content { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.kenner-header .header-brand { display: flex; align-items: center; text-decoration: none; color: var(--kenner-text-primary); font-weight: 700; font-size: 1.25rem; }
.kenner-header .header-brand img { height: 40px; margin-right: 12px; }
.kenner-header .header-nav a { color: var(--kenner-text-secondary); text-decoration: none; font-weight: 600; margin-left: 1.5rem; transition: color 0.2s ease; }
.kenner-header .header-nav a:hover { color: var(--kenner-gold); }
.activity-container { max-width: 900px; margin: 3rem auto; padding: 0 2rem; }
.page-header { text-align: center; margin-bottom: 3rem; }
.page-title { font-size: 2.5rem; font-weight: 800; color: var(--kenner-text-primary); }
.page-subtitle { font-size: 1.1rem; color: var(--kenner-text-secondary); margin-top: 0.5rem; }

/* --- Feed de Actividad con Feather Icons --- */
.activity-feed { display: flex; flex-direction: column; gap: 1rem; }
.activity-item { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background-color: var(--kenner-surface); border: 1px solid var(--kenner-border); border-radius: 12px; }
.activity-icon { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
/* Estilos para los íconos SVG de Feather */
.activity-icon svg { stroke-width: 2.5; width: 24px; height: 24px; }

/* Colores para cada tipo de notificación */
.icon-transferencia { background-color: var(--status-blue); color: white; }
.icon-compra { background-color: var(--status-red); color: white; }
.icon-oferta { background-color: var(--status-yellow); color: white; }
.icon-sueldo { background-color: var(--status-green); color: white; }
.icon-default { background-color: var(--kenner-border); color: var(--kenner-text-primary); }

.activity-details p { margin: 0; color: var(--kenner-text-primary); font-weight: 500; line-height: 1.5; }
.activity-details .timestamp { font-size: 0.8rem; color: var(--kenner-text-secondary); margin-top: 0.25rem; }
#loading-message { text-align: center; padding: 3rem; font-size: 1.2rem; color: var(--kenner-text-secondary); }

.anuncio-info .btn-cancelar {
    background-color: var(--color-danger);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background-color 0.2s ease;
}
.anuncio-info .btn-cancelar:hover {
    background-color: #c13a3a; /* Un rojo más oscuro */
}