/* ============================================================
   HUF — Componente: MetricCard (.hd-metric-card) — indicador operativo
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-metric-card> (AdminPortal/TagHelpers/
   HdMetricCardTagHelper.cs). No es un KPI decorativo: HVL §7.3 exige
   que todo indicador declare la acción que dispara ("¿y qué hago con
   esto?"). Sin ícono en círculo de color (HVL §5.5) — si hay ícono, va
   inline junto a la etiqueta, sin fondo. Cero sombra (HVL §5.2); si el
   widget es interactivo, el hover cambia el color del borde, nunca
   eleva ni desplaza.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §MetricCard.
   ============================================================ */

.hd-metric-card {
    padding: var(--hd-space-5);
    border-radius: var(--hd-radius-md);
    background: var(--hd-theme-surface);
    border: 1px solid var(--hd-color-border);
    transition: border-color var(--hd-motion-standard) var(--hd-ease);
}

.hd-metric-card--interactive:hover {
    border-color: rgba(var(--hd-theme-accent-rgb), 0.30);
}

.hd-metric-card__label-row {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
}

/* Ícono opcional: inline, 18px, sin fondo — acompaña a la etiqueta,
   nunca decora (HVL §5.5). */
.hd-metric-card__icon {
    font-size: 18px;
    line-height: 1;
    color: var(--hd-theme-text-muted);
    flex-shrink: 0;
}

.hd-metric-card__label {
    font-size: var(--hd-text-micro);
    font-weight: 600;
    color: var(--hd-theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hd-metric-card__value {
    margin-top: var(--hd-space-2);
    font-size: var(--hd-text-indicator);
    font-weight: 700;
    line-height: 1;
    color: var(--hd-theme-text);
    font-variant-numeric: tabular-nums;
}

.hd-metric-card__value--hero {
    font-size: var(--hd-text-indicator-hero);
}

.hd-metric-card__trend {
    margin-top: var(--hd-space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    font-size: var(--hd-text-meta);
    font-weight: 600;
}

.hd-metric-card__trend--up { color: var(--hd-color-success); }
.hd-metric-card__trend--down { color: var(--hd-color-error); }

/* Acción declarada (HVL §7.3): todo indicador de la zona de acción
   (Workspace §7.2 zona B) debe traer esta acción. En la zona D (rail,
   subordinada) es legítimo omitirla. Link de texto, nunca un botón. */
.hd-metric-card__action {
    margin-top: var(--hd-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    color: var(--hd-theme-accent-text);
    font-size: var(--hd-text-meta);
    font-weight: 600;
    text-decoration: none;
}

.hd-metric-card__action:hover {
    text-decoration: underline;
}

/* ── Variantes de tinte (método de pago, categoría, etc.) ─────
   Fondos sólidos de baja opacidad — no son degradados, ya conformes a
   HVL §5.3.1. Recalibrados para el fondo oscuro de Neo Industrial. */
.hd-metric-card--tint {
    background: var(--hd-tint-bg, var(--hd-theme-surface));
    border-color: var(--hd-tint-border, var(--hd-color-border));
}

.hd-metric-card--tint .hd-metric-card__value { color: var(--hd-tint-fg, var(--hd-theme-text)); }
.hd-metric-card--tint .hd-metric-card__label,
.hd-metric-card--tint .hd-metric-card__icon { color: var(--hd-tint-fg, var(--hd-theme-text-muted)); opacity: 0.85; }

.hd-metric-card--efectivo      { --hd-tint-bg:#0f2e20; --hd-tint-border:#1f5a3c; --hd-tint-fg:#22c55e; }
.hd-metric-card--transferencia { --hd-tint-bg:#0b2e33; --hd-tint-border:#155e66; --hd-tint-fg:#22d3ee; }
.hd-metric-card--nequi         { --hd-tint-bg:#3a0f26; --hd-tint-border:#6b1d47; --hd-tint-fg:#ec4899; }
.hd-metric-card--datafono      { --hd-tint-bg:#0b2440; --hd-tint-border:#164a7a; --hd-tint-fg:#38bdf8; }
.hd-metric-card--wompi         { --hd-tint-bg:#3a2a06; --hd-tint-border:#6b4d0e; --hd-tint-fg:#f59e0b; }
.hd-metric-card--credito       { --hd-tint-bg:#1f2937; --hd-tint-border:#374151; --hd-tint-fg:#cbd5e1; }

/* ── Variante clara (data-hd-mode="light") ─────────────────────
   Los 6 pares de arriba están "recalibrados para el fondo oscuro de
   Neo Industrial" (comentario original) — literal: son islas oscuras
   que sobre un tema claro se verían fuera de lugar. Mismos hue, tinte
   pastel + texto oscuro saturado, cada fg calculado ≥4.5:1 sobre su
   propio bg (docs/auditoria-tematizacion-2026-08-09.md). */
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--efectivo      { --hd-tint-bg:#DCFCE7; --hd-tint-border:#86EFAC; --hd-tint-fg:#166534; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--transferencia { --hd-tint-bg:#CFFAFE; --hd-tint-border:#67E8F9; --hd-tint-fg:#0E7490; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--nequi         { --hd-tint-bg:#FCE7F3; --hd-tint-border:#F9A8D4; --hd-tint-fg:#BE185D; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--datafono      { --hd-tint-bg:#DBEAFE; --hd-tint-border:#93C5FD; --hd-tint-fg:#1D4ED8; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--wompi         { --hd-tint-bg:#FEF3C7; --hd-tint-border:#FCD34D; --hd-tint-fg:#92400E; }
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-metric-card--credito       { --hd-tint-bg:#F1F5F9; --hd-tint-border:#CBD5E1; --hd-tint-fg:#334155; }

/* ── Variantes categóricas de modo pastel (2026-08-13) ─────────────
   A diferencia de las variantes de método de pago (arriba, visibles en
   oscuro y claro por igual), estas son EXCLUSIVAS de data-hd-mode="pastel":
   fuera de ese modo --hd-tint-bg/--hd-tint-fg quedan sin definir y la
   tarjeta cae al fallback neutro de .hd-metric-card--tint (var(--hd-theme-
   surface)/var(--hd-theme-text)) — cero cambio visual en oscuro o claro.

   Clasifican por CATEGORÍA DE INDICADOR, no por vertical: "dinero" es verde
   en gimnasio y en restaurante por igual. Es lo que permite que la misma
   pantalla se lea igual entre negocios, y lo que separa esta capa del acento
   de vertical (que sí cambia). Cada par fg/bg calculado, no mirado:
   8.87 · 8.95 · 7.20 · 8.19 : 1 respectivamente.
   Ver docs/hednora-visual-language.md §5.3.2. */
[data-hd-mode="pastel"] .hd-metric-card--dinero {
    --hd-tint-bg:#ECFDF3; --hd-tint-border:#A8E6C1; --hd-tint-fg:#0F5132;
    --hd-chip-bg:#A7F3D0; --hd-chip-fg:#065F46;
}
[data-hd-mode="pastel"] .hd-metric-card--clientes {
    --hd-tint-bg:#EFF6FF; --hd-tint-border:#A9CDF6; --hd-tint-fg:#12408F;
    --hd-chip-bg:#BFDBFE; --hd-chip-fg:#1E40AF;
}
[data-hd-mode="pastel"] .hd-metric-card--agenda {
    --hd-tint-bg:#FDF2F8; --hd-tint-border:#F5B6D3; --hd-tint-fg:#9D1750;
    --hd-chip-bg:#FBCFE8; --hd-chip-fg:#9D174D;
}
[data-hd-mode="pastel"] .hd-metric-card--tendencia {
    --hd-tint-bg:#F5F3FF; --hd-tint-border:#C4B5FD; --hd-tint-fg:#5B21B6;
    --hd-chip-bg:#DDD6FE; --hd-chip-fg:#5B21B6;
}

/* ── Forma del modo pastel (2026-08-13, decisión 29) ───────────────
   EXCEPCIÓN aprobada a HVL §5.2 (sombra solo en lo que flota) y §5.5 (ícono
   sin círculo de color), acotada a data-hd-mode="pastel". El motivo está
   documentado en §5.3.2: una paleta pastel sobre la geometría austera del
   modo oscuro queda en tierra de nadie — ni la crudeza precisa del oscuro ni
   la calidez que el color promete. La forma acompaña al color o el color se
   lee como desteñido. Oscuro y claro NO heredan nada de este bloque. */
[data-hd-mode="pastel"] .hd-metric-card {
    /* Dos capas: una línea de contacto de 1px que asienta la tarjeta sobre el
       fondo, y una difusa que da el aire. Ambas neutras y de opacidad muy
       baja — no es una sombra de color, que sería un degradado encubierto. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 5px 14px rgba(15, 23, 42, .055);
}

/* La insignia: el ícono deja de ir inline y pasa a un círculo del color de su
   categoría. Sin categoría (--tint ausente) cae a un chip neutro, nunca a un
   círculo sin color de fondo, para que no queden dos tratamientos de ícono
   conviviendo en la misma fila de widgets. */
[data-hd-mode="pastel"] .hd-metric-card__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--hd-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hd-chip-bg, rgba(148, 163, 184, .22));
    color: var(--hd-chip-fg, var(--hd-theme-text-muted));
    opacity: 1;
}

/* El valor manda dentro de la tarjeta; la etiqueta lo acompaña atenuada. Sin
   esto el tinte fg pinta ambos con el mismo peso y el número deja de ser lo
   primero que se lee (HVL §7.3: el indicador existe para disparar una acción,
   no para decorar). */
[data-hd-mode="pastel"] .hd-metric-card--tint .hd-metric-card__label { opacity: .78; }