/* =====================================================
   Dashboard — ERP Fundación Red
   CSS puro, sin dependencias externas
   ===================================================== */

/* ─── Contenedor principal ─── */
.dash-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

/* ─── Alertas ─── */
.dash-alerts { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.dash-alert__icon { font-size: 1rem; flex-shrink: 0; }
.dash-alert--danger  { background: var(--color-danger-bg);  color: #991b1b; border-color: rgba(239,68,68,0.2); }
.dash-alert--warning { background: var(--color-warning-bg); color: #92400e; border-color: rgba(245,158,11,0.2); }
.dash-alert--info    { background: var(--color-info-bg);    color: #1e40af; border-color: rgba(59,130,246,0.2); }

/* ─── KPI Grid ─── */
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (min-width: 1200px) { .dash-kpi-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px)  { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .dash-kpi-grid { grid-template-columns: 1fr; } }

/* Skeleton loader */
.kpi-skeleton {
    height: 120px;
    background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-color) 50%, var(--bg-hover) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: var(--border-radius-md);
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* KPI Card */
.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    border-top: 3px solid transparent;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card--success { border-top-color: var(--color-success); }
.kpi-card--danger  { border-top-color: var(--color-danger); }
.kpi-card--warning { border-top-color: var(--color-warning); }

.kpi-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.kpi-card__icon   { font-size: 1.4rem; line-height: 1; }
.kpi-card__trend  { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--border-radius-full); }
.trend--success { background: var(--color-success-bg); color: var(--color-success); }
.trend--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.trend--warning { background: var(--color-warning-bg); color: var(--color-warning); }

.kpi-card__value { font-size: 1.625rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.kpi-card__label { font-size: 0.775rem; color: var(--text-muted); font-weight: 500; }

.kpi-card__bar { height: 4px; background: var(--border-color); border-radius: 4px; margin-top: 0.625rem; overflow: hidden; }
.kpi-card__bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.bar--success { background: var(--color-success); }
.bar--danger  { background: var(--color-danger); }
.bar--warning { background: var(--color-warning); }

/* ─── Barra de Filtros ─── */
.dash-filters-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-surface);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 0.75rem; }
.filter-group label { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 180px;
}
.btn-refresh {
    background: none; border: none; font-size: 1.25rem; cursor: pointer;
    transition: transform 0.3s ease;
}
.btn-refresh:hover { transform: rotate(180deg); }

/* ─── Layout Grid de Agenda Extendida ─── */
.dash-grid-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 vs 2/3 */
    gap: 1.25rem;
}
.dash-side-col { display: flex; flex-direction: column; gap: 1.25rem; }
.dash-main-col { display: flex; }

@media (max-width: 1100px) {
    .dash-grid-layout { grid-template-columns: 1fr; }
}

/* ─── Tarjetas del dashboard ─── */
.dash-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-xs);
    width: 100%;
}
.dash-card--full-height { height: 100%; }

.calendar-legend { display: flex; gap: 1rem; font-size: 0.75rem; font-weight: 600; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.dot-task { width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; }
.dot-holiday { width: 8px; height: 8px; background: #f1c40f; border-radius: 50%; }

.dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.dash-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dash-card__badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-full);
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

/* ─── Gráficas ─── */
.chart-wrap { position: relative; height: 280px; width: 100%; }
.chart-wrap--donut { height: 200px; }

/* ─── Leyenda dona ─── */
.donut-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.donut-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.donut-legend__item strong { margin-left: auto; color: var(--text-primary); font-weight: 700; }
.donut-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ─── Timeline ─── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-color);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.timeline-body { flex: 1; min-width: 0; }
.timeline-text { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-time { font-size: 0.75rem; color: var(--text-muted); }

/* ─── Lista de Tareas ─── */
.task-list { display: flex; flex-direction: column; gap: 0.5rem; }
.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-hover);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}
.task-item:hover { background: var(--border-color); }
.task-item__info { flex: 1; min-width: 0; }
.task-item__title { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-item__date  { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }

.task-priority {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}
.priority--urgente { background: #fee2e2; color: #991b1b; } /* Rojo oscuro */
.priority--alta    { background: #ffedd5; color: #9a3412; } /* Naranja/Rojo */
.priority--media   { background: #dbeafe; color: #1e40af; } /* Azul */
.priority--baja    { background: #f0fdf4; color: #166534; } /* Verde */

/* ─── Estado vacío ─── */
.dash-empty { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.875rem; }

/* ─── FAB Logout ─── */
.fab-logout {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.7rem 1.25rem;
    border-radius: var(--border-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(229,57,53,0.4);
    transition: all var(--transition-fast);
    z-index: 100;
}
.fab-logout:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229,57,53,0.5);
}
@media (max-width: 480px) {
    .fab-logout span { display: none; }
    .fab-logout { padding: 0.875rem; border-radius: 50%; }
}

/* ─── FullCalendar overrides ─── */
#mini-calendar .fc { font-family: var(--font-primary); font-size: 0.8rem; }
#mini-calendar .fc-toolbar-title { font-size: 0.9rem !important; font-weight: 700 !important; }
#mini-calendar .fc-button {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-xs) !important;
    font-size: 0.75rem !important;
    padding: 0.2rem 0.5rem !important;
    box-shadow: none !important;
}
#mini-calendar .fc-button:hover { background: var(--border-color) !important; }
#mini-calendar .fc-daygrid-day-number { font-size: 0.75rem; color: var(--text-secondary); }
#mini-calendar .fc-col-header-cell-cushion { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
#mini-calendar .fc-event { font-size: 0.7rem !important; border-radius: 3px !important; }
#mini-calendar .fc-daygrid-day.fc-day-today { background: var(--color-primary-bg) !important; }

/* Estilos específicos para festivos */
.event-holiday {
    border: none !important;
    background: transparent !important;
    color: #856404 !important;
    font-weight: 600 !important;
}
.fc-bg-event { opacity: 0.3 !important; }
.event-task { cursor: pointer; }