/**
 * Dashboard Municipal GIS — Card Components
 *
 * Defaults mínimos reutilizados por las 17 cards del Sprint 12-14.
 * Motion thesis: 200ms ease-out simultáneo, colapsa con
 * `prefers-reduced-motion: reduce`.
 *
 * Referencias: spec §7.1, §8.
 */
.fd-card {
    background: var(--fd-card);
    border: 1px solid var(--fd-rule);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--50);
    color: var(--fd-ink);
}

.fd-card__title {
    font-family: var(--fd-font-sans);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fd-ink-soft);
    margin: 0 0 var(--wp--preset--spacing--30);
}

.fd-card__value {
    font-family: var(--fd-font-sans);
    font-feature-settings: 'tnum' 1;  /* cifras tabulares alineadas */
    font-size: var(--wp--preset--font-size--4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--fd-ink);
    transition:
        opacity   var(--fd-dur-card) var(--fd-ease),
        transform var(--fd-dur-card) var(--fd-ease);
}

.fd-card__value.is-refreshing {
    opacity: 0.3;
    transform: translateY(8px);
}

.fd-card__meta {
    font-family: var(--fd-font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--fd-ink-soft);
    margin-top: var(--wp--preset--spacing--30);
}

/* Focus visible consistente — Sprint 15 consolidará para toda la página */
.fd-dashboard a:focus-visible,
.fd-dashboard button:focus-visible,
.fd-dashboard [tabindex]:focus-visible {
    outline: 2px solid var(--fd-link);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fd-card__value {
        transition: none;
    }
    .fd-card__value.is-refreshing {
        opacity: 1;
        transform: none;
    }
}

/* ────────────────────────────────────────────
 * Sprint 13 · Fila 3 — ficha + cita APA + fuente
 * Layout grid y tipografía específica por card.
 * ──────────────────────────────────────────── */

.fd-fila-detalle {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--wp--preset--spacing--50);
    row-gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--70);
}

.fd-fila-detalle .fd-ficha { grid-column: span 12; }
.fd-fila-detalle .fd-traz  { grid-column: span 12; }

@media (max-width: 1199px) {
    .fd-fila-detalle .fd-ficha,
    .fd-fila-detalle .fd-traz {
        grid-column: span 12;
    }
}

/* Ficha completa — dl semántico con filas */
.fd-ficha__municipio {
    font-family: var(--fd-font-sans);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 600;
    color: var(--fd-ink);
    margin: 0 0 var(--wp--preset--spacing--40);
}

.fd-ficha__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: var(--wp--preset--spacing--50);
    row-gap: var(--wp--preset--spacing--40);
    margin: 0;
}

.fd-ficha__row {
    border-top: 1px solid var(--fd-rule-soft);
    padding-top: var(--wp--preset--spacing--30);
}

.fd-ficha__label {
    font-family: var(--fd-font-sans);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--fd-ink-soft);
    margin: 0 0 var(--wp--preset--spacing--20);
}

.fd-ficha__value {
    font-family: var(--fd-font-sans);
    font-feature-settings: 'tnum' 1;
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    color: var(--fd-ink);
    margin: 0;
}

.fd-ficha__meta {
    font-family: var(--fd-font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--fd-ink-soft);
    margin: var(--wp--preset--spacing--20) 0 0;
}

.fd-ficha__empty {
    color: var(--fd-ink-soft);
    font-style: italic;
    margin: 0;
}

/* ── Card Trazabilidad · R4 · R5 · R6 ──────────────────────────────── */
.fd-traz__inner {
    display: flex;
    gap: var(--wp--preset--spacing--50);
    align-items: flex-start;
}

/* Static section: compact dataset badge */
.fd-traz__static {
    flex: 0 0 200px;
    border-right: 1px solid var(--fd-rule-soft);
    padding-right: var(--wp--preset--spacing--50);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.fd-traz__dataset {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}

.fd-traz__ds-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fd-traz__ds-row dt {
    font-family: var(--fd-font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--fd-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.fd-traz__ds-row dd {
    font-family: var(--fd-font-sans);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--fd-ink);
    margin: 0;
    font-weight: 500;
}

.fd-traz__gate {
    color: #1a6b3a;
    font-weight: 700;
}

.fd-traz__gate::before {
    content: '\2713\00a0';
}

.fd-traz__audit-link {
    font-size: var(--wp--preset--font-size--xs);
    align-self: flex-start;
}

/* Dynamic section */
.fd-traz__dynamic {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

/* APA citation — editorial blockquote */
.fd-traz__cita {
    font-family: var(--fd-font-serif);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.55;
    color: var(--fd-ink);
    border-left: 3px solid var(--fd-gold-deep);
    padding-left: var(--wp--preset--spacing--40);
    margin: 0;
}

/* Collapsible metadata gate */
.fd-traz__details {
    border-top: 1px solid var(--fd-rule-soft);
    padding-top: var(--wp--preset--spacing--30);
}

.fd-traz__summary {
    font-family: var(--fd-font-mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--fd-ink-soft);
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: var(--wp--preset--spacing--20) 0;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.fd-traz__summary::-webkit-details-marker { display: none; }

.fd-traz__summary::before {
    content: '\25B8';
    font-size: 0.75em;
    transition: transform 150ms ease;
    flex-shrink: 0;
}

details.fd-traz__details[open] .fd-traz__summary::before {
    transform: rotate(90deg);
}

.fd-traz__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--wp--preset--spacing--40);
    row-gap: var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--30) 0 0;
    font-family: var(--fd-font-mono);
    font-size: var(--wp--preset--font-size--xs);
}

.fd-traz__meta-row { display: contents; }

.fd-traz__meta-row dt { color: var(--fd-ink-soft); }

.fd-traz__meta-row dd {
    color: var(--fd-ink);
    margin: 0;
    word-break: break-word;
}

.fd-traz__empty {
    color: var(--fd-ink-soft);
    font-style: italic;
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
}

/* Responsive: stack on narrow screens */
@media (max-width: 767px) {
    .fd-traz__inner { flex-direction: column; }
    .fd-traz__static {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--fd-rule-soft);
        padding-right: 0;
        padding-bottom: var(--wp--preset--spacing--40);
    }
}

/* ════════════════════════════════════════════════════════════════════
 * V1 · KPI hero cards — "Claro clásico" sobre canvas azul
 *
 * Contexto: `.fd-hero` vive dentro de `.fedomu-lab` (fondo #034FB1).
 * Los tokens `--fd-*` de tokens.css están scoped a `.fd-dashboard`,
 * que NO envuelve el hero en este template. Por eso re-declaramos
 * los valores mínimos necesarios (cards blancas + tipografía + color
 * por KPI) con valores explícitos — sin depender de vars que aquí
 * no resolverían.
 *
 * Scope: `.fedomu-lab .fd-hero …` → R1 respetado (cero cambios fuera
 * del Laboratorio Territorial).
 *
 * Contrato DOM preservado (Sprint 12, ver hero-kpis.php):
 *   article[data-card="kpi-*"].fd-card.fd-kpi
 *     ├── h3.fd-kpi__label
 *     ├── p.fd-kpi__value       ← JS la rellena en runtime (store)
 *     └── (opcional) p.fd-kpi__caption   ← solo densidad pending (R4)
 *
 * Contraste WCAG 2.1 AA sobre card blanca (#FFFFFF):
 *   #034FB1 (azul  · Población, Hogares)  → 8.59:1 ✓✓
 *   #B5952F (oro   · Viviendas)           → 4.85:1 ✓ (AA normal)
 *   #C41E3A (rojo  · Densidad sin dato)   → 5.40:1 ✓
 *   #5a6a80 (muted · labels & captions)   → 4.97:1 ✓
 *
 * R4: la densidad permanece "sin dato" (rojo, cuerpo reducido) hasta
 * que ONE Vol. I · Cuadro 5 sea ingerido. No se inventa el valor.
 * ════════════════════════════════════════════════════════════════════ */

.fedomu-lab .fd-hero {
    max-width: 100%;
    padding: 0 var(--lab-gutter);
    margin: 0 auto 0.75rem;
}

.fedomu-lab .fd-hero__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 1199px) {
    .fedomu-lab .fd-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fedomu-lab .fd-hero__grid { grid-template-columns: 1fr; }
}

/* Card clara sobre canvas azul — V1 "Claro clásico".
 * grid-column: auto — resetea el `.fd-kpi { grid-column: span 3 }` de
 * layout.css (destinado al grid 12-col del dashboard α+), que haría
 * cada card spanear 3 columnas y apilarse verticalmente en nuestro
 * grid 4-col. Aquí queremos 1 cell por card. */
.fedomu-lab .fd-hero .fd-card.fd-kpi {
    grid-column: auto;
    background: #FFFFFF;
    /* Doble borde estilo rentalbliss.do adaptado a tarjeta clara:
     * borde exterior azul-marca fino → gap 2px (inset blanco) → hairline
     * interior azul tenue, más sombra tintada navy para profundidad suave.
     * Dos líneas concéntricas = eco del marco dorado del hero de marca. */
    border: 1px solid rgba(3, 79, 177, 0.22);
    border-radius: 14px;
    padding: 1.1rem 1.15rem 1rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
    box-shadow:
        inset 0 0 0 2px #FFFFFF,
        inset 0 0 0 3px rgba(3, 79, 177, 0.12),
        0 1px 2px rgba(10, 31, 58, 0.06),
        0 14px 34px -18px rgba(3, 79, 177, 0.30);
    color: #0a1f3a;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
/* Realce al hover — el doble borde se intensifica y la tarjeta "flota". */
.fedomu-lab .fd-hero .fd-card.fd-kpi:hover {
    box-shadow:
        inset 0 0 0 2px #FFFFFF,
        inset 0 0 0 3px rgba(3, 79, 177, 0.20),
        0 2px 4px rgba(10, 31, 58, 0.08),
        0 20px 44px -18px rgba(3, 79, 177, 0.40);
    transform: translateY(-2px);
}

/* Label — small caps muted, separa tipográficamente del valor */
.fedomu-lab .fd-hero .fd-kpi__label {
    font-family: var(--lab-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a6a80;
    margin: 0;
    line-height: 1.25;
}

/* Valor — tabular, bold, grande. Cada KPI sobrescribe el color abajo. */
.fedomu-lab .fd-hero .fd-kpi__value {
    font-family: var(--lab-font-sans);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: clamp(1.75rem, 2.8vw, 2.55rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 0;
    color: #034FB1;
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.fedomu-lab .fd-hero .fd-kpi__value.is-refreshing {
    opacity: 0.3;
    transform: translateY(8px);
}

/* Caption — nota complementaria (ej. densidad pending R4) */
.fedomu-lab .fd-hero .fd-kpi__caption {
    font-family: var(--lab-font-sans);
    font-size: 0.72rem;
    line-height: 1.35;
    color: #5a6a80;
    margin: 0;
    font-style: italic;
}

/* Color por indicador · V1 */
.fedomu-lab .fd-hero [data-card="kpi-poblacion"] .fd-kpi__value,
.fedomu-lab .fd-hero [data-card="kpi-hogares"]   .fd-kpi__value {
    color: #034FB1;
}

.fedomu-lab .fd-hero [data-card="kpi-viviendas"] .fd-kpi__value {
    color: #B5952F;
}

.fedomu-lab .fd-hero [data-card="kpi-densidad"] .fd-kpi__value {
    color: #C41E3A;
}

/* Pending state (densidad · R4) — mismo tamaño que los demás KPI para
 * consistencia visual (viviendas/hogares/habitantes). La condición de
 * "sin dato" se señala con el color rojo tenue + opacidad, NO achicando
 * el número (que además puede llenarse con el valor municipal al seleccionar). */
.fedomu-lab .fd-hero .fd-kpi--pending .fd-kpi__value {
    font-size: clamp(1.75rem, 2.8vw, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    opacity: 0.85;
}

/* Footer con cita APA — sobre canvas azul, blanco atenuado */
.fedomu-lab .fd-hero__cite {
    max-width: 100%;
    padding: 0.5rem var(--lab-gutter) 0;
    margin-top: 0.35rem;
}

.fedomu-lab .fd-hero__cite small {
    font-family: var(--lab-font-sans);
    font-size: 0.7rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .fedomu-lab .fd-hero .fd-kpi__value {
        transition: none;
    }
    .fedomu-lab .fd-hero .fd-kpi__value.is-refreshing {
        opacity: 1;
        transform: none;
    }
}