/* ============================================================
   HUF — Componente: BadgeEstado (.hd-badge)
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-badge-estado> (AdminPortal/TagHelpers/
   HdBadgeEstadoTagHelper.cs). Resuelve la colisión de nombre-con-valor-
   distinto encontrada en la auditoría: .badge-estado-activa existía a
   la vez en admin-portal.css y en _ClienteLayout.cshtml con colores
   distintos (plan §1.2). Con el TagHelper, el mapeo valor→clase vive en
   un solo lugar en C# — nunca se escribe la clase a mano en un .cshtml.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §BadgeEstado.
   ============================================================ */

.hd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding: 4px 10px;
    max-height: 24px;
    border-radius: var(--hd-radius-pill);
    font-size: var(--hd-text-meta);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.hd-badge--estado-activa      { background: rgba(34, 197, 94, 0.16);  color: #4ade80; }
.hd-badge--estado-confirmada  { background: rgba(34, 197, 94, 0.16);  color: #4ade80; }
.hd-badge--estado-pendiente   { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.hd-badge--estado-completada  { background: rgba(0, 194, 168, 0.16);  color: #2dd4bf; }
.hd-badge--estado-cancelada   { background: rgba(239, 68, 68, 0.16);  color: #f87171; }
.hd-badge--estado-vencida     { background: rgba(239, 68, 68, 0.16);  color: #f87171; }

/* Fallback si el valor recibido no está en el mapa del TagHelper — se
   ve distinto a propósito (gris neutro) para que un valor no soportado
   sea visible en QA en vez de fallar en silencio con un color al azar. */
.hd-badge--neutral { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

/* Badges de color semántico directo (no "estado" de negocio) — indicadores
   en vivo del sidebar/topbar (pedidos pendientes, alertas sin leer). */
.hd-badge--danger  { background: rgba(239, 68, 68, 0.16);  color: #f87171; }

/* "En preparación" — no tiene equivalente en el set estado-* (pensado para
   suscripción/cita, no para el ciclo de vida de un pedido). Se agrega como
   clase directa, mismo trato que los badges por vertical de abajo: sin
   TagHelper propio porque Discoteca/Caja también la escribe desde JS
   (pedidoCardBodyHtml, regenerado en cada evento SignalR), donde no hay
   forma de invocar <hd-badge-estado>. */
.hd-badge--preparando { background: rgba(0, 149, 255, 0.16); color: #38bdf8; }

/* Llama la atención sobre un badge que necesita una acción YA (HVL §4.2: la
   animación se reserva a "algo pasando ahora mismo"). Reemplaza el
   @keyframes suelto que Discoteca/Caja traía en un <style> de la vista. */
@keyframes hd-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hd-badge--pulse { animation: hd-badge-pulse 1.2s ease-in-out infinite; }

/* ── Badges por vertical (opcional, plan §19 "v2") ────────────
   Se dejan listos porque el token de color ya existe (tokens.css) y el
   costo marginal es mínimo, pero sin TagHelper propio todavía — usar la
   clase directamente hasta que haya 3+ usos reales que justifiquen
   <hd-badge-vertical>. */
.hd-badge--bar    { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }
.hd-badge--gym    { background: rgba(16, 185, 129, 0.16); color: #34d399; }
.hd-badge--rest   { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.hd-badge--beauty { background: rgba(244, 63, 94, 0.16);  color: #fb7185; }
.hd-badge--intel  { background: rgba(6, 182, 212, 0.16);  color: #22d3ee; }

/* ── Variantes de FONDO CLARO (data-hd-mode="light" y "pastel") ──
   Mismas clases, mismo hue base — solo bg más sólido y texto más
   oscuro/saturado. El pastel + texto brillante de arriba está
   calibrado para dark (línea 26-65): sobre blanco da 2.1-3.8:1, no
   pasa WCAG AA. Cada par de abajo está calculado, no solo mirado —
   contraste ≥4.5:1 sobre su propio fondo, ver docs/auditoria-
   tematizacion-2026-08-09.md.

   El selector agrupa los DOS modos de fondo claro con :is() (2026-08-13).
   Al agregarse el modo pastel quedó gateado solo a "light", así que en
   pastel los badges caían al valor de modo OSCURO: --neutral resolvía a
   texto #cbd5e1 sobre casi-blanco, ~1.5:1 — ilegible, regresión real de
   accesibilidad. Lo que decide estos colores es si el SUELO es claro u
   oscuro, no cuál de los dos modos claros esté activo. :is() y no :where()
   a propósito: conserva la especificidad exacta que ya tenían (0,3,0),
   así el resto de la cascada no cambia. */
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-activa,
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-confirmada {
    background: rgba(34, 197, 94, 0.14); color: #166534;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-pendiente {
    background: rgba(245, 158, 11, 0.16); color: #92400E;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-completada {
    background: rgba(0, 194, 168, 0.16); color: #00695C;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-cancelada,
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--estado-vencida {
    background: rgba(239, 68, 68, 0.14); color: #B91C1C;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--neutral {
    background: rgba(148, 163, 184, 0.20); color: #334155;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--danger {
    background: rgba(239, 68, 68, 0.14); color: #B91C1C;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--preparando {
    background: rgba(0, 149, 255, 0.14); color: #075985;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--bar {
    background: rgba(139, 92, 246, 0.16); color: #6D28D9;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--gym {
    background: rgba(16, 185, 129, 0.16); color: #047857;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--rest {
    background: rgba(245, 158, 11, 0.16); color: #92400E;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--beauty {
    background: rgba(244, 63, 94, 0.16); color: #BE123C;
}
[data-hd-theme="neo-industrial"]:is([data-hd-mode="light"], [data-hd-mode="pastel"]) .hd-badge--intel {
    background: rgba(6, 182, 212, 0.16); color: #0E7490;
}