/*
 * AtlasChartPanel — panel de gráfica con selector de escala.
 *
 * GLOBAL a propósito, no scoped: lo consume el componente compartido
 * `Pages/Components/Common/AtlasChartPanel.razor`, que se instancia desde páginas de áreas
 * distintas (Access Control, Site Presence…). Un `.razor.css` scoped marcaría el atributo b-xxxxx
 * del COMPONENTE, no el de la página, y hasta ahí bien — pero estas reglas también las heredan los
 * fragmentos que la página inyecta (HeaderExtra / Footer), que sí llevan el atributo de la página.
 * Con scoped esos fragmentos se quedarían sin estilo.
 *
 * Estas clases son la version renombrada de las `ac-date-*` / `ac-chart-*` que vivían sueltas en
 * AccessControlDashboard.razor.css. Aquel dashboard ya no las declara: consume el componente.
 */

.atlas-chart-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.atlas-chart-panel-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--atlas-gray-900);
    margin: 0;
}

.atlas-chart-panel-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ── Selector de fechas ─────────────────────────────────────────────────── */

.atlas-chart-dates {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 1px solid var(--atlas-gray-200);
    border-radius: 8px;
    background: var(--atlas-white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.atlas-chart-dates > i { color: var(--text-secondary); font-size: .95rem; }

.atlas-chart-dates-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.atlas-chart-date-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-primary);
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}

.atlas-chart-date-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.atlas-chart-date-sep { color: var(--text-secondary); font-size: .85rem; margin: 0 .2rem; }

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */

.atlas-chart-hint {
    font-size: .72rem;
    color: var(--text-secondary);
    margin-bottom: .4rem;
}

.atlas-chart-body {
    width: 100%;
    position: relative;
}

.atlas-chart-canvas { width: 100%; height: 100%; }

.atlas-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    border-radius: 8px;
}

.atlas-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: .8rem;
    color: var(--text-secondary);
}

.atlas-chart-footer {
    font-size: .72rem;
    color: var(--text-secondary);
    margin-top: .5rem;
}