/* ==========================================================================
   Data Rights — hoja de reclamaciones digital (spec B1B2 §W6).
   --------------------------------------------------------------------------
   Todo en tokens `--atlas-*` (tokens.css): esta pantalla se ve en los mismos tres temas que el
   resto de la app y un color literal aquí sería el que se queda ilegible en modo oscuro.
   Ver Front/docs/style-guide/. Nada de CSS inline en el .razor.
   ========================================================================== */

.dr-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Banner ─────────────────────────────────────────────────────────────── */
.dr-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--atlas-radius-lg, .5rem);
    background: var(--atlas-surface-2, #f5f6f8);
    border: 1px solid var(--atlas-border, #e2e5ea);
}

.dr-banner-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--atlas-text, #1f2933);
}

.dr-banner-sub {
    font-size: .8125rem;
    color: var(--atlas-text-muted, #6b7280);
    margin-top: .25rem;
    max-width: 70ch;
}

/* El limite (no hay login de trabajador) se dice en la pantalla, no solo en el plan. */
.dr-scope-note {
    font-size: .8125rem;
    margin-bottom: 0;
}

.dr-project-picker {
    max-width: 22rem;
}

/* ── KPIs de plazo ──────────────────────────────────────────────────────── */
.dr-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
}

.dr-kpi {
    padding: .75rem 1rem;
    border-radius: var(--atlas-radius, .375rem);
    background: var(--atlas-surface, #fff);
    border: 1px solid var(--atlas-border, #e2e5ea);
}

.dr-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--atlas-text, #1f2933);
}

.dr-kpi-label {
    font-size: .75rem;
    color: var(--atlas-text-muted, #6b7280);
    margin-top: .125rem;
}

.dr-kpi-warn .dr-kpi-value { color: var(--atlas-warning, #d97706); }
.dr-kpi-danger .dr-kpi-value { color: var(--atlas-danger, #dc2626); }

/* ── Grid ───────────────────────────────────────────────────────────────── */
.dr-type {
    font-weight: 500;
}

.dr-status {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 600;
    background: var(--atlas-surface-2, #f5f6f8);
    color: var(--atlas-text-muted, #6b7280);
}

.dr-status-received,
.dr-status-in_progress { color: var(--atlas-info, #2563eb); }
.dr-status-extended { color: var(--atlas-warning, #d97706); }
.dr-status-resolved { color: var(--atlas-success, #16a34a); }
.dr-status-rejected,
.dr-status-withdrawn { color: var(--atlas-text-muted, #6b7280); }

/*
   El semaforo del plazo. El estado lo calcula el SERVIDOR (`deadline_state`) y aqui solo se
   colorea: el vencimiento de un expediente legal no puede depender del reloj del navegador.
*/
.dr-deadline {
    font-weight: 600;
}

.dr-deadline-on_time { color: var(--atlas-text, #1f2933); }
.dr-deadline-due_soon { color: var(--atlas-warning, #d97706); }
.dr-deadline-overdue { color: var(--atlas-danger, #dc2626); }
.dr-deadline-closed { color: var(--atlas-text-muted, #6b7280); font-weight: 400; }

/* ── Modales ────────────────────────────────────────────────────────────── */
.dr-modal {
    background: rgba(0, 0, 0, .45);
}

.dr-required {
    color: var(--atlas-danger, #dc2626);
}

.dr-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .5rem 1rem;
    font-size: .875rem;
}

.dr-detail-block {
    margin-top: .75rem;
    font-size: .875rem;
    white-space: pre-wrap;
}

.dr-detail-label {
    display: block;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--atlas-text-muted, #6b7280);
    font-weight: 600;
}

.dr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dr-panel {
    margin-top: .75rem;
    padding: .75rem;
    border-radius: var(--atlas-radius, .375rem);
    background: var(--atlas-surface-2, #f5f6f8);
    border: 1px solid var(--atlas-border, #e2e5ea);
}

/* ── Traza ──────────────────────────────────────────────────────────────── */
.dr-audit-head {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--atlas-text-muted, #6b7280);
    margin-bottom: .5rem;
}

.dr-audit-empty {
    font-size: .8125rem;
    color: var(--atlas-text-muted, #6b7280);
}

.dr-audit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.dr-audit-item {
    display: grid;
    grid-template-columns: 9rem 9rem 10rem 1fr;
    gap: .5rem;
    font-size: .75rem;
    padding: .375rem .5rem;
    border-radius: var(--atlas-radius-sm, .25rem);
    background: var(--atlas-surface-2, #f5f6f8);
}

.dr-audit-action {
    font-weight: 600;
    color: var(--atlas-text, #1f2933);
}

.dr-audit-when,
.dr-audit-actor {
    color: var(--atlas-text-muted, #6b7280);
}

.dr-audit-detail {
    color: var(--atlas-text, #1f2933);
    word-break: break-word;
}

/* La rejilla de 4 columnas de la traza no cabe en movil: se apila. */
@media (max-width: 767.98px) {
    .dr-audit-item {
        grid-template-columns: 1fr;
    }
}