/* ==========================================================================
   Eesier Badges & Identidade (design system component)
   CSS-only, como buttons.css: .eesier-badge, .eesier-chip, .eesier-status-dot,
   .eesier-avatar. Documentação: /Design/Badges.

   Um badge é ESTADO, não ação: superfície semântica suave + texto na cor
   semântica cheia. Só existem as cinco tintas semânticas do sistema — neutro
   (primário), sucesso, alerta, perigo e desabilitado. Um chip é FILTRO (um
   controle de 48px que liga/desliga um recorte da lista). Um avatar é a
   inicial da pessoa sobre a superfície primária — nunca uma foto obrigatória.

   Cores fluem dos tokens com fallback literal — este arquivo também é
   consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-badge {
    --eb-color: var(--color-palette-primary, #1c91e4);
    --eb-surface: var(--color-palette-primary-surface, #eef7ff);

    display: inline-flex;
    align-items: center;
    gap: var(--space-tight, 6px);
    width: fit-content;
    padding: var(--space-tight, 6px) var(--space-small, 12px);
    border-radius: var(--radius-pill, 999px);
    background: var(--eb-surface);
    color: var(--eb-color);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    white-space: nowrap;
}


/* VARIANTES SEMÂNTICAS — SÓ AS TINTAS DO SISTEMA, NENHUM TOM NOVO */

.eesier-badge.eesier-badge-success {
    --eb-color: color-mix(in srgb, var(--color-success, #22c55e) 75%, var(--color-canvas-dark, #0a1628));
    --eb-surface: var(--color-success-surface, #f0fdf4);
}


.eesier-badge.eesier-badge-warning {
    --eb-color: color-mix(in srgb, var(--color-warning, #f59e0b) 75%, var(--color-canvas-dark, #0a1628));
    --eb-surface: var(--color-warning-surface, #fffbeb);
}


.eesier-badge.eesier-badge-danger {
    --eb-color: var(--color-danger, #ef4444);
    --eb-surface: var(--color-danger-surface, #fef2f2);
}


.eesier-badge.eesier-badge-neutral {
    --eb-color: var(--color-muted, #475569);
    --eb-surface: color-mix(in srgb, var(--color-text-dark, #0f172a) 6%, transparent);
}


/* NO ESCURO, A SUPERFÍCIE SUAVE É A PRÓPRIA TINTA A 16% SOBRE O CANVAS —
   MESMO GESTO PARA TODAS AS VARIANTES, NENHUMA COR NOVA */

.dark .eesier-badge,
.eesier-badge.dark {
    --eb-color: var(--color-palette-secondary, #4fbefe);
    --eb-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
}


.dark .eesier-badge.eesier-badge-success,
.eesier-badge.eesier-badge-success.dark {
    --eb-color: var(--color-success, #22c55e);
    --eb-surface: color-mix(in srgb, var(--color-success, #22c55e) 16%, transparent);
}


.dark .eesier-badge.eesier-badge-warning,
.eesier-badge.eesier-badge-warning.dark {
    --eb-color: var(--color-warning, #f59e0b);
    --eb-surface: color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent);
}


/* NO ESCURO O VERMELHO PURO PERDE LEITURA SOBRE O NAVY — O TEXTO CLAREIA PELO
   GESTO ESPELHADO DA FÓRMULA DO CLARO: LÁ A TINTA APROFUNDA 75% RUMO AO
   CANVAS; AQUI ELA SOBE 75% RUMO AO TEXTO-SOBRE-ESCURO. */

.dark .eesier-badge.eesier-badge-danger,
.eesier-badge.eesier-badge-danger.dark {
    --eb-color: color-mix(in srgb, var(--color-danger, #ef4444) 75%, var(--color-text-on-dark, #ffffff));
    --eb-surface: color-mix(in srgb, var(--color-danger, #ef4444) 16%, transparent);
}


.dark .eesier-badge.eesier-badge-neutral,
.eesier-badge.eesier-badge-neutral.dark {
    --eb-color: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --eb-surface: color-mix(in srgb, var(--color-text-on-dark, #ffffff) 10%, transparent);
}


/* PONTO VIVO DENTRO DO BADGE — PULSO DISCRETO PARA "AO VIVO"/"ATIVO".
   O PONTO PULSA EM OPACIDADE (ESTADO), NUNCA EM TAMANHO. */

.eesier-badge > .eesier-badge-dot {
    width: var(--space-tight, 6px);
    height: var(--space-tight, 6px);
    border-radius: var(--radius-pill, 999px);
    background: currentColor;
    animation: eesier-badge-pulse calc(var(--motion-standard, 0.36s) * 4) var(--ease-state, ease-in-out) infinite;
}


@keyframes eesier-badge-pulse {
    0%, 100% {
        opacity: 1;
    }


    50% {
        opacity: 0.3;
    }
}


/* ------------------------------------------------------------------------------ */


/* CHIP — UM FILTRO CLICÁVEL DE 48px (ALVO DE CONTROLE PADRÃO), TEXTO PURO EM
   REPOUSO E SUPERFÍCIE PRIMÁRIA QUANDO ATIVO — O MESMO GESTO DO TAB ATIVO E
   DO ITEM ATIVO DO MENU LATERAL. */

.eesier-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small, 12px);
}


.eesier-chip {
    --echp-text: var(--color-muted, #475569);
    --echp-active: var(--color-palette-primary, #1c91e4);
    --echp-active-surface: var(--color-palette-primary-surface, #eef7ff);
    --echp-border: var(--color-border, #e2e8f0);

    display: inline-flex;
    align-items: center;
    gap: var(--space-small, 12px);
    height: var(--control-height, 48px);
    padding: 0 var(--space-medium, 24px);
    border: 1px solid var(--echp-border);
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    color: var(--echp-text);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    text-transform: lowercase;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), background-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), border-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.dark .eesier-chip,
.eesier-chip.dark {
    --echp-text: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --echp-active: var(--color-palette-secondary, #4fbefe);
    --echp-active-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    --echp-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
}


/* O ÍCONE DO CHIP TEM O TAMANHO DO ÍCONE DO MENU LATERAL (--space-small, 12px)
   — A CAIXA FIXA DE .eicon. DIMENSIONADO AQUI PORQUE ESTE ARQUIVO TAMBÉM É
   CONSUMIDO SEM site.css. O ÍCONE NUNCA MUDA DE TAMANHO. */

.eesier-chip > .eicon {
    flex-shrink: 0;
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


/* O CHIP PODE EMBRULHAR O CONTROLE REAL — UM <label> COM UM radio OU CHECKBOX
   DENTRO. O CONTROLE SOME DE VISTA MAS CONTINUA NA ÁRVORE DE ACESSIBILIDADE E
   NO POST DO FORMULÁRIO: QUEM DESENHA O ESTADO É O CHIP, QUEM GUARDA O ESTADO
   É O PRÓPRIO CAMPO — NENHUM JAVASCRIPT PARA SINCRONIZAR CLASSE. */

.eesier-chip > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}


@media (hover: hover) {

    .eesier-chip:hover:not(.is-active):not(:has(> input:checked)):not(:has(> input:disabled)) {
        color: var(--echp-active);
        border-color: var(--echp-active);
    }
}


.eesier-chip.is-active,
.eesier-chip:has(> input:checked) {
    color: var(--echp-active);
    font-weight: 700;
    border-color: transparent;
    background: var(--echp-active-surface);
}


/* O CONTROLE EMBRULHADO É INVISÍVEL, ENTÃO O FOCO DELE PRECISA APARECER NO
   CHIP — SENÃO NAVEGAR PELO TECLADO NÃO MOSTRA ONDE SE ESTÁ. */

.eesier-chip:focus-visible,
.eesier-chip:has(> input:focus-visible) {
    outline: 2px solid var(--echp-active);
    outline-offset: 2px;
}


.eesier-chip:has(> input:disabled) {
    color: var(--echp-text);
    cursor: not-allowed;
    opacity: .5;
}


/* CONTAGEM DENTRO DO CHIP — UM NÚMERO MUDO, NUNCA UM SEGUNDO BADGE COLORIDO */

.eesier-chip > .eesier-chip-count {
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 700;
    opacity: 0.7;
}


/* ------------------------------------------------------------------------------ */


/* PONTO DE STATUS — O MENOR SINAL DO SISTEMA: UM PONTO DE 6px AO LADO DE UM
   RÓTULO QUE O EXPLICA. NUNCA UM PONTO SEM RÓTULO. */

.eesier-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight, 6px);
    font-size: var(--type-size-small, 0.875rem);
    color: var(--color-muted, #475569);
}


.dark .eesier-status,
.eesier-status.dark {
    color: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


.eesier-status > .eesier-status-dot {
    flex-shrink: 0;
    width: var(--space-tight, 6px);
    height: var(--space-tight, 6px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-disabled, #94a3b8);
}


.eesier-status > .eesier-status-dot.eesier-status-dot-success {
    background: var(--color-success, #22c55e);
}


.eesier-status > .eesier-status-dot.eesier-status-dot-warning {
    background: var(--color-warning, #f59e0b);
}


.eesier-status > .eesier-status-dot.eesier-status-dot-danger {
    background: var(--color-danger, #ef4444);
}


.eesier-status > .eesier-status-dot.eesier-status-dot-primary {
    background: var(--color-palette-primary, #1c91e4);
}


/* ------------------------------------------------------------------------------ */


/* AVATAR — A INICIAL SOBRE A SUPERFÍCIE PRIMÁRIA, SEMPRE REDONDO. TAMANHO
   PADRÃO = CONTROLE (48px); COMPACTO = MARCA (24px) PARA LINHAS DENSAS. */

.eesier-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-palette-primary-surface, #eef7ff);
    color: var(--color-palette-primary, #1c91e4);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-base, 1rem);
    font-weight: 700;
    text-transform: lowercase;
    -webkit-user-select: none;
    user-select: none;
}


.dark .eesier-avatar,
.eesier-avatar.dark {
    background: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    color: var(--color-palette-secondary, #4fbefe);
}


.eesier-avatar.eesier-avatar-small {
    width: var(--space-medium, 24px);
    height: var(--space-medium, 24px);
    font-size: var(--type-size-xs, 0.75rem);
}


.eesier-avatar > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}


/* PILHA DE AVATARES — SOBREPOSIÇÃO DE 6px COM ARO DA SUPERFÍCIE DA PÁGINA
   (EXCEÇÃO DE MARGEM: gap NÃO EXPRESSA SOBREPOSIÇÃO NEGATIVA). */

.eesier-avatar-stack {
    display: flex;
}


.eesier-avatar-stack > .eesier-avatar {
    box-shadow: 0 0 0 2px var(--color-surface, #ffffff);
}


.dark .eesier-avatar-stack > .eesier-avatar {
    box-shadow: 0 0 0 2px var(--color-surface-dark, #101f38);
}


.eesier-avatar-stack > .eesier-avatar + .eesier-avatar {
    margin-left: calc(var(--space-tight, 6px) * -1);
}