/* ==========================================================================
   Data Protection — hub RGPD (/data-protection).
   --------------------------------------------------------------------------
   Solo lo que no existe ya: el banner y los KPIs reutilizan las clases `dr-*` de dataRights.css
   (cargado globalmente en _Host.cshtml) para que las dos pantallas de privacidad se vean iguales.
   Todo en tokens `--atlas-*` (tokens/tokens.css). Nada de CSS inline en el .razor (WARNINGS §38).
   ========================================================================== */

.dp-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

/* ── Bloques ────────────────────────────────────────────────────────────── */
.dp-section-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--atlas-text-muted, #6b7280);
    margin-bottom: .5rem;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.dp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.dp-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--atlas-radius-lg, .5rem);
    background: var(--atlas-surface, #fff);
    border: 1px solid var(--atlas-border, #e2e5ea);
}

.dp-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--atlas-text, #1f2933);
}

.dp-card-desc {
    font-size: .8125rem;
    color: var(--atlas-text-muted, #6b7280);
}

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

.dp-card-meta {
    font-size: .8125rem;
    color: var(--atlas-text-muted, #6b7280);
}

/* El pie de la tarjeta (botón / link) se pega abajo aunque el texto de al lado sea más largo. */
.dp-card-actions {
    margin-top: auto;
    padding-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* ── Registro de solicitudes ────────────────────────────────────────────── */
.dp-register-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--atlas-text-muted, #6b7280);
}

/* ── Modales de solo lectura (términos, aviso) ──────────────────────────── */
.dp-modal {
    background: rgba(0, 0, 0, .45);
}

.dp-notice p {
    font-size: .875rem;
}