/* /Components/Apresentacao/Apresentacao.razor.rz.scp.css */
/* Página de apresentação. Só as paletas de azul do tema Tickit padrão (variáveis --tk-*); o tema escolhido no sistema não vale aqui. */

.ap[b-q3mspujz6h] {
    overflow-x: clip;
    color: var(--tk-texto);
    background: var(--tk-branco);
    scroll-behavior: smooth;
}

.ap-miolo[b-q3mspujz6h] {
    width: 100%;
    max-width: 1160px;
    padding: 0 24px;
    margin: 0 auto;
}

/* ------------------------------ Botões ------------------------------ */

.ap-botao[b-q3mspujz6h] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: transform var(--tk-transicao), background var(--tk-transicao), box-shadow var(--tk-transicao), color var(--tk-transicao);
}

.ap-botao:hover[b-q3mspujz6h] {
    transform: translateY(-2px);
}

.ap-botao-grande[b-q3mspujz6h] {
    height: 50px;
    padding: 0 26px;
    font-size: 16px;
    border-radius: 12px;
}

.ap-botao-claro[b-q3mspujz6h] {
    color: var(--tk-azul-800);
    background: #fff;
    box-shadow: 0 6px 18px rgba(7, 31, 77, .25);
}

.ap-botao-claro:hover[b-q3mspujz6h] {
    color: var(--tk-azul-800);
    box-shadow: 0 10px 26px rgba(7, 31, 77, .35);
}

.ap-botao-fantasma[b-q3mspujz6h] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
}

.ap-botao-fantasma:hover[b-q3mspujz6h] {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

/* Um brilho passa pelo botão principal a cada poucos segundos. */
.ap-botao-claro[b-q3mspujz6h]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(11, 94, 215, .22), transparent);
    transform: skewX(-20deg);
    animation: ap-brilho-b-q3mspujz6h 4.5s ease-in-out infinite;
}

.ap-botao[b-q3mspujz6h]  .tk-icone {
    width: 18px;
    height: 18px;
    transition: transform var(--tk-transicao);
}

.ap-botao:hover[b-q3mspujz6h]  .tk-icone {
    transform: translateX(4px);
}

/* ------------------------------ Topo ------------------------------ */

.ap-topo[b-q3mspujz6h] {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.ap-topo.rolado[b-q3mspujz6h] {
    background: color-mix(in srgb, #fff 92%, transparent);
    box-shadow: 0 4px 24px rgba(11, 46, 107, .12);
    backdrop-filter: blur(10px);
}

.ap-topo-linha[b-q3mspujz6h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 68px;
}

.ap-marca[b-q3mspujz6h] {
    text-decoration: none;
}

.ap-marca[b-q3mspujz6h]  .tk-logo {
    color: #fff;
    transition: color .3s ease;
}

.ap-topo.rolado .ap-marca[b-q3mspujz6h]  .tk-logo {
    color: var(--tk-azul-800);
}

.ap-nav[b-q3mspujz6h] {
    display: flex;
    gap: 6px;
}

.ap-nav a[b-q3mspujz6h] {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    border-radius: 8px;
    transition: color var(--tk-transicao), background var(--tk-transicao);
}

.ap-nav a:hover[b-q3mspujz6h],
.ap-nav a.ativo[b-q3mspujz6h] {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.ap-topo.rolado .ap-nav a[b-q3mspujz6h] {
    color: var(--tk-cinza-600);
}

.ap-topo.rolado .ap-nav a:hover[b-q3mspujz6h],
.ap-topo.rolado .ap-nav a.ativo[b-q3mspujz6h] {
    color: var(--tk-azul-700);
    background: var(--tk-azul-100);
}

.ap-acoes[b-q3mspujz6h] {
    display: flex;
    gap: 10px;
}

/* Com o fundo claro (topo rolado) os botões trocam de cor para continuar legíveis. */
.ap-topo.rolado .ap-botao-fantasma[b-q3mspujz6h] {
    color: var(--tk-azul-700);
    background: transparent;
    border-color: var(--tk-azul-200);
}

.ap-topo.rolado .ap-botao-fantasma:hover[b-q3mspujz6h] {
    background: var(--tk-azul-50);
}

.ap-topo.rolado .ap-botao-claro[b-q3mspujz6h] {
    color: #fff;
    background: var(--tk-azul-600);
    box-shadow: 0 6px 16px rgba(11, 94, 215, .3);
}

.ap-topo.rolado .ap-botao-claro:hover[b-q3mspujz6h] {
    color: #fff;
    background: var(--tk-azul-700);
}

/* Barra de leitura: cresce com a rolagem. */
.ap-progresso[b-q3mspujz6h] {
    height: 3px;
    background: transparent;
}

.ap-progresso span[b-q3mspujz6h] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tk-azul-500), #7FB3FF);
    transform: scaleX(0);
    transform-origin: left;
}

/* ------------------------------ Herói ------------------------------ */

.ap-heroi[b-q3mspujz6h] {
    position: relative;
    padding: 148px 0 150px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 18%, rgba(47, 128, 237, .55), transparent 46%),
        linear-gradient(135deg, var(--tk-azul-950) 0%, var(--tk-azul-800) 55%, var(--tk-azul-600) 100%);
}

.ap-heroi-linha[b-q3mspujz6h] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.ap-etiqueta[b-q3mspujz6h] {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
}

.ap-etiqueta-azul[b-q3mspujz6h] {
    color: var(--tk-azul-700);
    background: var(--tk-azul-100);
    border-color: var(--tk-azul-200);
}

.ap-heroi h1[b-q3mspujz6h] {
    margin: 0 0 18px;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
}

.ap-heroi h1 span[b-q3mspujz6h] {
    background: linear-gradient(90deg, #BBD7FF, #fff 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ap-heroi-texto p[b-q3mspujz6h] {
    max-width: 560px;
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.ap-heroi-botoes[b-q3mspujz6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ap-heroi-pontos[b-q3mspujz6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 0;
    margin: 28px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    list-style: none;
}

.ap-heroi-pontos li[b-q3mspujz6h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ap-heroi-pontos[b-q3mspujz6h]  .tk-icone {
    width: 18px;
    height: 18px;
    color: #8FE0B8;
}

/* Entrada do herói: sobe e aparece ao abrir a página (CSS puro, sem esperar o JavaScript). */
.ap-entra[b-q3mspujz6h] {
    animation: ap-entrada-b-q3mspujz6h .8s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--atraso, 0ms);
}

/* Círculos de luz que flutuam no fundo e descem um pouco mais devagar que a página (parallax). */
.ap-bolha[b-q3mspujz6h] {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 70%);
    pointer-events: none;
}

.ap-bolha-1[b-q3mspujz6h] { top: 80px; left: -90px; width: 320px; height: 320px; animation: ap-deriva-b-q3mspujz6h 14s ease-in-out infinite; transform: translateY(calc(var(--py, 0) * .12px)); }
.ap-bolha-2[b-q3mspujz6h] { right: 6%; bottom: 120px; width: 200px; height: 200px; animation: ap-deriva-b-q3mspujz6h 11s ease-in-out -4s infinite; }
.ap-bolha-3[b-q3mspujz6h] { top: 22%; right: 40%; width: 90px; height: 90px; animation: ap-deriva-b-q3mspujz6h 9s ease-in-out -2s infinite; }
.ap-bolha-4[b-q3mspujz6h] { top: -80px; left: 8%; width: 260px; height: 260px; animation: ap-deriva-b-q3mspujz6h 13s ease-in-out infinite; }
.ap-bolha-5[b-q3mspujz6h] { right: -60px; bottom: -90px; width: 300px; height: 300px; animation: ap-deriva-b-q3mspujz6h 15s ease-in-out -6s infinite; }

/* Onda na base do herói (duas camadas em velocidades diferentes). */
.ap-onda[b-q3mspujz6h] {
    position: absolute;
    inset: auto 0 -1px 0;
    z-index: 2;
    width: 100%;
    height: 90px;
    fill: #fff;
}

/* ------------------------------ Janela do sistema (desenho) ------------------------------ */

.ap-heroi-visual[b-q3mspujz6h] {
    position: relative;
    padding: 18px 0 18px 20px;
}

.ap-janela[b-q3mspujz6h] {
    overflow: hidden;
    color: var(--tk-texto);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(3, 15, 40, .45);
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(calc(var(--py, 0) * -.05px));
    transition: transform .5s ease;
}

.ap-heroi-visual:hover .ap-janela[b-q3mspujz6h] {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

.ap-janela-barra[b-q3mspujz6h] {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    background: var(--tk-azul-50);
    border-bottom: 1px solid var(--tk-cinza-200);
}

.ap-janela-barra i[b-q3mspujz6h] {
    width: 10px;
    height: 10px;
    background: var(--tk-azul-200);
    border-radius: 50%;
}

.ap-janela-corpo[b-q3mspujz6h] {
    display: flex;
    min-height: 300px;
}

.ap-janela-menu[b-q3mspujz6h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 52px;
    padding: 16px 12px;
    background: var(--tk-azul-900);
}

.ap-janela-menu span[b-q3mspujz6h] {
    height: 26px;
    background: rgba(255, 255, 255, .14);
    border-radius: 7px;
}

.ap-janela-menu span.ativo[b-q3mspujz6h] {
    background: var(--tk-azul-500);
}

.ap-janela-conteudo[b-q3mspujz6h] {
    flex: 1;
    min-width: 0;
    padding: 18px;
    background: var(--tk-cinza-50);
}

.ap-janela-saudacao[b-q3mspujz6h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    margin-bottom: 12px;
    color: #fff;
    background: linear-gradient(120deg, var(--tk-azul-800), var(--tk-azul-500));
    border-radius: 12px;
}

.ap-janela-saudacao small[b-q3mspujz6h] {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .85);
}

.ap-janela-kpis[b-q3mspujz6h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.ap-janela-kpis div[b-q3mspujz6h] {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--tk-cinza-200);
    border-radius: 10px;
}

.ap-janela-kpis b[b-q3mspujz6h] {
    font-size: 22px;
    line-height: 1.1;
    color: var(--tk-azul-700);
}

.ap-janela-kpis small[b-q3mspujz6h] {
    font-size: 11px;
    color: var(--tk-cinza-600);
}

.ap-janela-lista[b-q3mspujz6h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-janela-lista div[b-q3mspujz6h] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--tk-cinza-200);
    border-radius: 9px;
}

.ap-janela-lista .num[b-q3mspujz6h] {
    font-weight: 700;
    color: var(--tk-azul-700);
}

.ap-janela-lista .tit[b-q3mspujz6h] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-janela-lista .st[b-q3mspujz6h] {
    padding: 1px 9px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    border-radius: 999px;
}

.st-ok[b-q3mspujz6h] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.st-atend[b-q3mspujz6h] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.st-aberto[b-q3mspujz6h] { color: var(--tk-azul-700); background: var(--tk-azul-100); }

/* Cartões que "flutuam" em volta da janela. */
.ap-solto[b-q3mspujz6h] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    color: var(--tk-texto);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(3, 15, 40, .35);
}

.ap-solto strong[b-q3mspujz6h] {
    display: block;
    font-size: 13px;
}

.ap-solto small[b-q3mspujz6h] {
    font-size: 11.5px;
    color: var(--tk-cinza-600);
}

.ap-solto .ic[b-q3mspujz6h] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.ap-solto .ic[b-q3mspujz6h]  .tk-icone {
    width: 19px;
    height: 19px;
}

.ic-verde[b-q3mspujz6h] { color: var(--tk-verde-forte); background: var(--tk-verde-suave); }
.ic-azul[b-q3mspujz6h] { color: var(--tk-azul-600); background: var(--tk-azul-100); }
.ic-roxo[b-q3mspujz6h] { color: var(--tk-roxo-forte); background: var(--tk-roxo-suave); }

.ap-solto-1[b-q3mspujz6h] { top: -6px; left: -18px; animation: ap-flutuar-b-q3mspujz6h 6s ease-in-out infinite; }
.ap-solto-2[b-q3mspujz6h] { right: -18px; bottom: 96px; animation: ap-flutuar-b-q3mspujz6h 7s ease-in-out -2s infinite; }
.ap-solto-3[b-q3mspujz6h] { bottom: -8px; left: 30px; animation: ap-flutuar-b-q3mspujz6h 8s ease-in-out -4s infinite; }

/* ------------------------------ Seções ------------------------------ */

.ap-secao[b-q3mspujz6h] {
    padding: 96px 0;
    scroll-margin-top: 20px;
}

.ap-secao-clara[b-q3mspujz6h] {
    background: linear-gradient(180deg, var(--tk-azul-50), #fff);
}

.ap-titulo[b-q3mspujz6h] {
    max-width: 680px;
    margin: 0 auto 52px;
    text-align: center;
}

.ap-titulo h2[b-q3mspujz6h],
.ap-agenda-texto h2[b-q3mspujz6h] {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--tk-azul-900);
}

.ap-titulo p[b-q3mspujz6h],
.ap-agenda-texto p[b-q3mspujz6h] {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tk-cinza-600);
}

/* Cartões de recursos */
.ap-grade-recursos[b-q3mspujz6h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ap-cartao[b-q3mspujz6h] {
    position: relative;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--tk-cinza-200);
    border-radius: 18px;
    box-shadow: var(--tk-sombra-suave);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ap-cartao:hover[b-q3mspujz6h] {
    border-color: var(--tk-azul-200);
    box-shadow: 0 22px 50px rgba(11, 46, 107, .16);
    transform: translateY(-6px);
}

.ap-cartao-destaque[b-q3mspujz6h] {
    background: linear-gradient(160deg, #fff, var(--tk-azul-50));
    border-color: var(--tk-azul-200);
}

.ap-icone[b-q3mspujz6h] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--tk-azul-600), var(--tk-azul-500));
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(11, 94, 215, .28);
    transition: transform .4s cubic-bezier(.2, .8, .3, 1.4);
}

.ap-icone[b-q3mspujz6h]  .tk-icone {
    width: 26px;
    height: 26px;
}

.ap-cartao:hover .ap-icone[b-q3mspujz6h],
.ap-perfil:hover .ap-icone[b-q3mspujz6h] {
    transform: rotate(-8deg) scale(1.1);
}

.ap-cartao h3[b-q3mspujz6h],
.ap-perfil h3[b-q3mspujz6h] {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--tk-azul-900);
}

.ap-cartao p[b-q3mspujz6h] {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tk-cinza-600);
}

.ap-cartao ul[b-q3mspujz6h],
.ap-perfil ul[b-q3mspujz6h] {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ap-cartao li[b-q3mspujz6h],
.ap-perfil li[b-q3mspujz6h] {
    position: relative;
    padding: 4px 0 4px 24px;
    font-size: 14px;
    color: var(--tk-texto);
}

.ap-cartao li[b-q3mspujz6h]::before,
.ap-perfil li[b-q3mspujz6h]::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: var(--tk-azul-500);
    border-radius: 50%;
}

/* "Tudo conectado": o fluxo de um chamado, com setas ligando cada etapa. */
.ap-conexoes[b-q3mspujz6h] {
    padding: 36px 32px 34px;
    margin-top: 48px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 85% 0%, rgba(47, 128, 237, .5), transparent 50%),
        linear-gradient(135deg, var(--tk-azul-950) 0%, var(--tk-azul-800) 55%, var(--tk-azul-600) 100%);
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(11, 46, 107, .28);
}

.ap-conexoes h3[b-q3mspujz6h] {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.ap-conexoes > p[b-q3mspujz6h] {
    max-width: 560px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, .88);
}

.ap-conexoes ol[b-q3mspujz6h] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ap-conexoes li[b-q3mspujz6h] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* A seta que liga uma etapa à próxima. */
.ap-conexoes li:not(:last-child)[b-q3mspujz6h]::after {
    content: "";
    position: absolute;
    top: 24px;
    left: calc(50% + 40px);
    width: calc(100% - 54px);
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 8px, transparent 8px 14px);
    animation: ap-fluxo-b-q3mspujz6h 1.2s linear infinite;
}

.ap-conexao-icone[b-q3mspujz6h] {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    color: var(--tk-azul-800);
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(3, 15, 40, .35);
}

.ap-conexao-icone[b-q3mspujz6h]  .tk-icone {
    width: 24px;
    height: 24px;
}

.ap-conexoes li strong[b-q3mspujz6h] {
    font-size: 16px;
    color: #fff;
}

.ap-conexoes li small[b-q3mspujz6h] {
    max-width: 220px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

/* ------------------------------ Agenda ------------------------------ */

.ap-agenda[b-q3mspujz6h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.ap-agenda-texto h2[b-q3mspujz6h] {
    margin-top: 6px;
}

.ap-lista-icone[b-q3mspujz6h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    margin: 26px 0 0;
    list-style: none;
}

.ap-lista-icone li[b-q3mspujz6h] {
    display: flex;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.5;
}

.ap-lista-icone[b-q3mspujz6h]  .tk-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--tk-azul-600);
}

.ap-calendario[b-q3mspujz6h] {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--tk-cinza-200);
    border-radius: 20px;
    box-shadow: var(--tk-sombra-forte);
}

.ap-calendario-topo[b-q3mspujz6h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tk-cinza-200);
}

.ap-calendario-topo strong[b-q3mspujz6h] {
    font-size: 20px;
    color: var(--tk-azul-900);
}

.ap-calendario-topo small[b-q3mspujz6h] {
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.ap-evento[b-q3mspujz6h] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-left: 4px solid var(--tk-azul-200);
    margin-top: 8px;
    border-radius: 4px 12px 12px 4px;
    background: var(--tk-azul-50);
}

.ap-evento time[b-q3mspujz6h] {
    width: 48px;
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-azul-700);
}

.ap-evento > div[b-q3mspujz6h] {
    flex: 1;
    min-width: 0;
}

.ap-evento strong[b-q3mspujz6h] {
    display: block;
    font-size: 14.5px;
}

.ap-evento small[b-q3mspujz6h] {
    font-size: 12.5px;
    color: var(--tk-cinza-600);
}

.ap-evento-agora[b-q3mspujz6h] {
    background: var(--tk-azul-100);
    border-left-color: var(--tk-azul-600);
}

.ap-evento em[b-q3mspujz6h] {
    padding: 2px 11px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 800;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 999px;
    animation: ap-pulso-b-q3mspujz6h 2s ease-out infinite;
}

.ap-evento-convite[b-q3mspujz6h] {
    background: var(--tk-roxo-suave);
    border-left-color: var(--tk-roxo-forte);
}

.ap-evento-convite time[b-q3mspujz6h] {
    color: var(--tk-roxo-texto);
}

.ap-convite-botoes i[b-q3mspujz6h] {
    padding: 4px 12px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: #fff;
    background: var(--tk-roxo-forte);
    border-radius: 8px;
}

/* ------------------------------ Como funciona ------------------------------ */

.ap-passos[b-q3mspujz6h] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: passo;
}

/* A linha que liga os passos se desenha quando a lista aparece. */
.ap-passos[b-q3mspujz6h]::before {
    content: "";
    position: absolute;
    top: 29px;
    left: 16.6%;
    right: 16.6%;
    height: 3px;
    background: linear-gradient(90deg, var(--tk-azul-500), var(--tk-azul-200));
    border-radius: 3px;
    transform-origin: left;
}

.ap-passos li[b-q3mspujz6h] {
    position: relative;
    padding: 0 12px;
    text-align: center;
}

.ap-passo-numero[b-q3mspujz6h] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--tk-azul-700), var(--tk-azul-500));
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(11, 94, 215, .35);
}

.ap-passos h3[b-q3mspujz6h] {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--tk-azul-900);
}

.ap-passos p[b-q3mspujz6h] {
    max-width: 300px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tk-cinza-600);
}

/* ------------------------------ Perfis ------------------------------ */

.ap-grade-perfis[b-q3mspujz6h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ap-perfil[b-q3mspujz6h] {
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--tk-azul-200);
    border-radius: 20px;
    box-shadow: var(--tk-sombra-suave);
    transition: transform .3s ease, box-shadow .3s ease;
}

.ap-perfil:hover[b-q3mspujz6h] {
    box-shadow: 0 22px 50px rgba(11, 46, 107, .16);
    transform: translateY(-6px);
}

/* ------------------------------ Chamada final ------------------------------ */

.ap-final[b-q3mspujz6h] {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, var(--tk-azul-950), var(--tk-azul-700));
}

.ap-final-conteudo[b-q3mspujz6h] {
    position: relative;
    z-index: 1;
}

.ap-final h2[b-q3mspujz6h] {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.ap-final p[b-q3mspujz6h] {
    margin: 0 0 28px;
    font-size: 18px;
    color: rgba(255, 255, 255, .88);
}

.ap-final-botoes[b-q3mspujz6h] {
    justify-content: center;
}

.ap-rodape[b-q3mspujz6h] {
    padding: 26px 0;
    color: var(--tk-cinza-600);
    background: var(--tk-azul-50);
}

.ap-rodape-linha[b-q3mspujz6h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.ap-rodape[b-q3mspujz6h]  .tk-logo {
    font-size: 18px;
}

.ap-rodape[b-q3mspujz6h]  .tk-logo img {
    width: 26px;
    height: 26px;
}

/* ------------------------------ Aparecer ao rolar (liga com a classe "anim" do JavaScript) ------------------------------ */

html.anim [data-revelar][b-q3mspujz6h] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--atraso, 0ms);
}

html.anim [data-revelar="esquerda"][b-q3mspujz6h] { transform: translateX(-50px); }
html.anim [data-revelar="direita"][b-q3mspujz6h] { transform: translateX(50px); }
html.anim [data-revelar="zoom"][b-q3mspujz6h] { transform: scale(.92); }

html.anim [data-revelar].visivel[b-q3mspujz6h] {
    opacity: 1;
    transform: none;
}

/* As etapas do fluxo entram uma depois da outra quando o bloco aparece. */
html.anim .ap-conexoes li[b-q3mspujz6h] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--atraso, 0ms);
}

html.anim .ap-conexoes.visivel li[b-q3mspujz6h] {
    opacity: 1;
    transform: none;
}

/* Os cartões e as peças de dentro de um bloco entram um depois do outro, pelo --atraso de cada um. */
html.anim .ap-passos[b-q3mspujz6h]::before {
    transform: scaleX(0);
    transition: transform 1.6s cubic-bezier(.4, 0, .2, 1) .2s;
}

html.anim .ap-passos.visivel[b-q3mspujz6h]::before {
    transform: scaleX(1);
}

html.anim .ap-passos li[b-q3mspujz6h] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--atraso, 0ms);
}

html.anim .ap-passos.visivel li[b-q3mspujz6h] {
    opacity: 1;
    transform: none;
}

html.anim .ap-evento[b-q3mspujz6h] {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--atraso, 0ms);
}

html.anim .ap-agenda-visual.visivel .ap-evento[b-q3mspujz6h] {
    opacity: 1;
    transform: none;
}

/* ------------------------------ Animações ------------------------------ */

@keyframes ap-entrada-b-q3mspujz6h {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@keyframes ap-flutuar-b-q3mspujz6h {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes ap-deriva-b-q3mspujz6h {
    0%, 100% { translate: 0 0; }
    50% { translate: 24px -30px; }
}

@keyframes ap-brilho-b-q3mspujz6h {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

@keyframes ap-fluxo-b-q3mspujz6h {
    to { background-position: 14px 0; }
}

@keyframes ap-pulso-b-q3mspujz6h {
    0% { box-shadow: 0 0 0 0 rgba(11, 94, 215, .5); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(11, 94, 215, 0); }
}

/* Quem pede menos movimento ao sistema operacional recebe a página parada. */
@media (prefers-reduced-motion: reduce) {
    .ap[b-q3mspujz6h] { scroll-behavior: auto; }

    .ap *[b-q3mspujz6h],
    .ap *[b-q3mspujz6h]::before,
    .ap *[b-q3mspujz6h]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------ Telas menores ------------------------------ */

@media (max-width: 960px) {
    .ap-nav[b-q3mspujz6h] { display: none; }

    .ap-heroi[b-q3mspujz6h] { padding: 120px 0 120px; }

    .ap-heroi-linha[b-q3mspujz6h],
    .ap-agenda[b-q3mspujz6h] {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .ap-grade-recursos[b-q3mspujz6h],
    .ap-grade-perfis[b-q3mspujz6h],
    .ap-conexoes ol[b-q3mspujz6h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-conexoes li[b-q3mspujz6h]::after { display: none; }

    /* Em telas estreitas a janela fica reta (a inclinação sairia do quadro). */
    .ap-janela[b-q3mspujz6h] { transform: none; }

    .ap-heroi-visual:hover .ap-janela[b-q3mspujz6h] { transform: none; }
}

@media (max-width: 700px) {
    .ap-miolo[b-q3mspujz6h] { padding: 0 18px; }

    .ap-topo-linha[b-q3mspujz6h] { height: 60px; }

    /* No celular fica só um botão no topo; o outro está no herói. */
    .ap-botao-cadastro[b-q3mspujz6h] { display: none; }

    .ap-secao[b-q3mspujz6h] { padding: 68px 0; }

    .ap-grade-recursos[b-q3mspujz6h],
    .ap-grade-perfis[b-q3mspujz6h],
    .ap-passos[b-q3mspujz6h],
    .ap-conexoes ol[b-q3mspujz6h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-conexoes[b-q3mspujz6h] { padding: 28px 18px; }

    .ap-passos[b-q3mspujz6h]::before { display: none; }

    .ap-solto[b-q3mspujz6h] { display: none; }

    .ap-heroi-visual[b-q3mspujz6h] { padding: 0; }

    /* No celular o texto do herói precisa de mais respiro: o título, o parágrafo e os botões ficam mais afastados. */
    .ap-etiqueta[b-q3mspujz6h] { margin-bottom: 24px; }

    .ap-heroi h1[b-q3mspujz6h] { margin-bottom: 28px; }

    .ap-heroi-texto p[b-q3mspujz6h] {
        margin-bottom: 40px;
        font-size: 16.5px;
        line-height: 1.7;
    }

    .ap-heroi-pontos[b-q3mspujz6h] { margin-top: 32px; }

    .ap-botao-grande[b-q3mspujz6h] { width: 100%; }
}
/* /Components/Apresentacao/PaginaLegal.razor.rz.scp.css */
/* Páginas de texto legal (Política de Privacidade e Termos de Serviço): leitura limpa, sem enfeites.
   Usa as variáveis --tk-* do tema Tickit padrão (como a apresentação). O texto de cada página chega como conteúdo filho,
   por isso as regras dele usam ::deep. */

.pv[b-ijlbm3l0as] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--tk-texto);
    background: var(--tk-branco);
}

.pv-miolo[b-ijlbm3l0as] {
    width: 100%;
    max-width: 860px;
    padding: 0 24px;
    margin: 0 auto;
}

/* ------------------------------ Topo ------------------------------ */

.pv-topo[b-ijlbm3l0as] {
    border-bottom: 1px solid var(--tk-cinza-200);
    background: var(--tk-branco);
}

.pv-topo-linha[b-ijlbm3l0as] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
}

.pv-marca[b-ijlbm3l0as] {
    display: inline-flex;
}

.pv-voltar[b-ijlbm3l0as] {
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-azul-700);
    text-decoration: none;
}

.pv-voltar:hover[b-ijlbm3l0as] {
    text-decoration: underline;
}

/* ------------------------------ Corpo ------------------------------ */

.pv-corpo[b-ijlbm3l0as] {
    flex: 1;
    padding-top: 40px;
    padding-bottom: 56px;
    line-height: 1.65;
}

.pv-corpo h1[b-ijlbm3l0as] {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 800;
    color: var(--tk-azul-800);
}

.pv-data[b-ijlbm3l0as] {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--tk-cinza-600);
}

.pv-corpo[b-ijlbm3l0as]  h2 {
    margin: 40px 0 10px;
    padding-top: 6px;
    font-size: 21px;
    font-weight: 700;
    color: var(--tk-azul-800);
    scroll-margin-top: 16px;
}

.pv-corpo[b-ijlbm3l0as]  h3 {
    margin: 22px 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.pv-corpo[b-ijlbm3l0as]  p {
    margin: 0 0 12px;
}

.pv-corpo[b-ijlbm3l0as]  ul,
.pv-corpo[b-ijlbm3l0as]  ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.pv-corpo[b-ijlbm3l0as]  li {
    margin-bottom: 6px;
}

.pv-corpo[b-ijlbm3l0as]  a {
    color: var(--tk-azul-700);
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.pv-corpo[b-ijlbm3l0as]  code {
    padding: 1px 6px;
    font-size: 13px;
    background: var(--tk-azul-50);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.pv-corpo[b-ijlbm3l0as]  .pv-intro {
    font-size: 17px;
}

/* ------------------------------ Índice ------------------------------ */

.pv-corpo[b-ijlbm3l0as]  .pv-indice {
    margin: 22px 0 8px;
    padding: 16px 20px;
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-cinza-200);
    border-radius: 12px;
}

.pv-corpo[b-ijlbm3l0as]  .pv-indice ol {
    margin: 8px 0 0;
    columns: 2;
    column-gap: 32px;
}

.pv-corpo[b-ijlbm3l0as]  .pv-indice li {
    break-inside: avoid;
    margin-bottom: 4px;
}

/* ------------------------------ Tabelas ------------------------------ */

.pv-corpo[b-ijlbm3l0as]  .pv-tabela {
    margin: 14px 0 16px;
    overflow-x: auto;
    border: 1px solid var(--tk-cinza-200);
    border-radius: 12px;
}

.pv-corpo[b-ijlbm3l0as]  .pv-tabela table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.pv-corpo[b-ijlbm3l0as]  .pv-tabela th,
.pv-corpo[b-ijlbm3l0as]  .pv-tabela td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--tk-cinza-200);
}

.pv-corpo[b-ijlbm3l0as]  .pv-tabela th {
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-azul-800);
    background: var(--tk-azul-50);
}

.pv-corpo[b-ijlbm3l0as]  .pv-tabela tr:last-child td {
    border-bottom: 0;
}

.pv-corpo[b-ijlbm3l0as]  .pv-tabela td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------ Destaque ------------------------------ */

.pv-corpo[b-ijlbm3l0as]  .pv-destaque {
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--tk-azul-50);
    border-left: 4px solid var(--tk-azul-600);
    border-radius: 0 10px 10px 0;
}

/* ------------------------------ Rodapé ------------------------------ */

.pv-rodape[b-ijlbm3l0as] {
    padding: 26px 0;
    color: var(--tk-cinza-600);
    background: var(--tk-azul-50);
}

.pv-rodape-linha[b-ijlbm3l0as] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
}

.pv-rodape a[b-ijlbm3l0as] {
    color: var(--tk-azul-700);
}

@media (max-width: 640px) {
    .pv-corpo h1[b-ijlbm3l0as] {
        font-size: 27px;
    }

    .pv-corpo[b-ijlbm3l0as]  .pv-indice ol {
        columns: 1;
    }

    .pv-corpo[b-ijlbm3l0as]  .pv-tabela td:first-child {
        white-space: normal;
    }
}

@media print {
    .pv-topo[b-ijlbm3l0as],
    .pv-rodape[b-ijlbm3l0as],
    .pv-corpo[b-ijlbm3l0as]  .pv-indice {
        display: none;
    }
}
/* /Components/Layout/ContaLayout.razor.rz.scp.css */
/* Layout das telas de conta: painel azul da marca (esquerda) + formulário (direita). Só as paletas de azul do tema Tickit padrão. */

.conta[b-ve4gdmi5jr] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    background: #fff;
}

/* ------------------------------ Painel da marca ------------------------------ */

/* O painel azul tem a altura da janela (e fica parado enquanto o formulário rola, como no cadastro da empresa): a arte
   fica atrás do texto, sem empurrá-lo para fora da tela. */
.conta-marca[b-ve4gdmi5jr] {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 56px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 12%, rgba(47, 128, 237, .55), transparent 48%),
        linear-gradient(135deg, var(--tk-azul-950) 0%, var(--tk-azul-800) 55%, var(--tk-azul-600) 100%);
}

.conta-marca > *[b-ve4gdmi5jr] {
    position: relative;
    z-index: 1;
}

.conta-marca-logo[b-ve4gdmi5jr] {
    align-self: flex-start;
    text-decoration: none;
}

.conta-marca-logo[b-ve4gdmi5jr]  .tk-logo {
    font-size: 30px;
    color: #fff;
}

.conta-marca-logo[b-ve4gdmi5jr]  .tk-logo img {
    width: 44px;
    height: 44px;
}

.conta-marca-texto[b-ve4gdmi5jr] {
    max-width: 480px;
    animation: conta-entrada-b-ve4gdmi5jr .8s cubic-bezier(.2, .7, .2, 1) both;
}

.conta-marca-texto h2[b-ve4gdmi5jr] {
    margin: 0 0 14px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
}

.conta-marca-texto p[b-ve4gdmi5jr] {
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.conta-marca-lista[b-ve4gdmi5jr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.conta-marca-lista li[b-ve4gdmi5jr] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    animation: conta-entrada-b-ve4gdmi5jr .7s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--atraso, 0ms);
}

.conta-marca-lista[b-ve4gdmi5jr]  .tk-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #8FE0B8;
}

/* Círculos de luz que flutuam devagar no fundo. */
.conta-bolha[b-ve4gdmi5jr] {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 70%);
    pointer-events: none;
}

.conta-bolha-1[b-ve4gdmi5jr] { top: -70px; right: -50px; width: 260px; height: 260px; animation: conta-deriva-b-ve4gdmi5jr 13s ease-in-out infinite; }
.conta-bolha-2[b-ve4gdmi5jr] { bottom: 90px; left: -70px; width: 200px; height: 200px; animation: conta-deriva-b-ve4gdmi5jr 11s ease-in-out -4s infinite; }
.conta-bolha-3[b-ve4gdmi5jr] { top: 46%; right: 14%; width: 80px; height: 80px; animation: conta-deriva-b-ve4gdmi5jr 9s ease-in-out -2s infinite; }

/* ------------------------------ Arte da marca ------------------------------ */

/* Camada de decoração atrás do texto. Nada aqui é conteúdo: tudo com aria-hidden e sem clique. */
.conta-arte[b-ve4gdmi5jr] {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

/* Ondas ao fundo: vetor (nítido em qualquer tela), mais largas que o painel e deslizando devagar, cada uma no seu ritmo. */
.conta-ondas[b-ve4gdmi5jr] {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 42%;
}

.conta-onda-1[b-ve4gdmi5jr] { animation: conta-onda-b-ve4gdmi5jr 14s ease-in-out infinite alternate; }
.conta-onda-2[b-ve4gdmi5jr] { animation: conta-onda-b-ve4gdmi5jr 11s ease-in-out -4s infinite alternate-reverse; }
.conta-onda-3[b-ve4gdmi5jr] { animation: conta-onda-b-ve4gdmi5jr 17s ease-in-out -8s infinite alternate; }

/* Anéis de sinal (círculos vetoriais, com traço fino e nítido) abrindo a partir do canto superior direito. */
.conta-aneis[b-ve4gdmi5jr] {
    position: absolute;
    top: -300px;
    right: -300px;
    width: 780px;
    height: 780px;
    fill: none;
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 1.4;
    -webkit-mask-image: radial-gradient(circle, #000 0%, #000 45%, transparent 72%);
    mask-image: radial-gradient(circle, #000 0%, #000 45%, transparent 72%);
    animation: conta-respira-b-ve4gdmi5jr 9s ease-in-out infinite;
}

.conta-aneis circle[b-ve4gdmi5jr] {
    vector-effect: non-scaling-stroke;
}

.conta-anel-tracejado[b-ve4gdmi5jr] {
    stroke: rgba(255, 255, 255, .45);
    stroke-dasharray: 2 12;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    animation: conta-gira-anel-b-ve4gdmi5jr 60s linear infinite;
}

/* O segundo grupo de anéis ocupa o canto de baixo à direita, onde antes não havia nada. */
.conta-aneis-2[b-ve4gdmi5jr] {
    top: auto;
    right: -130px;
    bottom: 40px;
    width: 420px;
    height: 420px;
    stroke: rgba(255, 255, 255, .16);
    animation-delay: -4s;
}

/* Dois cantos de pontos, para dar textura. */
.conta-pontos[b-ve4gdmi5jr] {
    position: absolute;
    opacity: .38;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%);
    mask-image: linear-gradient(135deg, #000, transparent 75%);
}

.conta-pontos-1[b-ve4gdmi5jr] { top: 118px; left: 40px; }
.conta-pontos-2[b-ve4gdmi5jr] { right: 36px; bottom: 200px; transform: rotate(180deg); }
/* O símbolo do Tickit, enorme e quase invisível, saindo pelo canto de baixo: marca d'água. */
.conta-marca-gigante[b-ve4gdmi5jr] {
    position: absolute;
    bottom: -150px;
    left: -170px;
    width: 560px;
    height: 560px;
    filter: brightness(0) invert(1);
    opacity: .07;
    transform: rotate(14deg);
    animation: conta-gira-b-ve4gdmi5jr 22s ease-in-out infinite;
}

/* A linha que liga os três nós; a de cima é tracejada e "corre". */
.conta-fluxo[b-ve4gdmi5jr] {
    position: absolute;
    inset: 48px 0 auto 0;
    width: 100%;
    height: 46%;
    overflow: visible;
}

.conta-fluxo path[b-ve4gdmi5jr] {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.conta-fluxo-base[b-ve4gdmi5jr] {
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 2;
}

.conta-fluxo-corre[b-ve4gdmi5jr] {
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 2;
    stroke-dasharray: 3 14;
    animation: conta-corre-b-ve4gdmi5jr 1.6s linear infinite;
}

/* Uma segunda linha, mais fina e discreta, correndo por baixo da principal. */
.conta-fluxo-fino[b-ve4gdmi5jr] {
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 1;
    stroke-dasharray: 2 10;
    animation: conta-corre-b-ve4gdmi5jr 3.2s linear infinite;
}

/* Brilhos em forma de estrela, que acendem e apagam em tempos diferentes. */
.conta-brilho[b-ve4gdmi5jr] {
    position: absolute;
    fill: #fff;
    opacity: .8;
    animation: conta-brilha-b-ve4gdmi5jr 4s ease-in-out infinite;
}

.conta-brilho-1[b-ve4gdmi5jr] { top: 15%; left: 70%; width: 16px; height: 16px; animation-delay: -1s; }
.conta-brilho-2[b-ve4gdmi5jr] { top: 38%; left: 8%; width: 11px; height: 11px; animation-delay: -2.4s; animation-duration: 5s; }
.conta-brilho-3[b-ve4gdmi5jr] { top: 47%; left: 88%; width: 20px; height: 20px; animation-delay: -.2s; animation-duration: 6s; }
.conta-brilho-4[b-ve4gdmi5jr] { top: 70%; left: 82%; width: 12px; height: 12px; animation-delay: -3s; }
.conta-brilho-5[b-ve4gdmi5jr] { top: 8%; left: 30%; width: 9px; height: 9px; animation-delay: -1.8s; animation-duration: 4.6s; }
/* Cada nó é um disco de vidro com um ícone e o nome embaixo. Ficam em porcentagens, para acompanhar o tamanho do painel. */
.conta-no[b-ve4gdmi5jr] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    translate: -50% -50%;
}

.conta-no small[b-ve4gdmi5jr] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
}

.conta-no-disco[b-ve4gdmi5jr] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(3, 15, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
}

.conta-no-disco[b-ve4gdmi5jr]  .tk-icone {
    width: 28px;
    height: 28px;
}

/* Tamanhos, posições e tempos diferentes: nada se move junto, para não parecer programado. */
.conta-no-a[b-ve4gdmi5jr] { top: calc(46% * .74 + 48px); left: 18%; animation: conta-flutua-a-b-ve4gdmi5jr 7s ease-in-out infinite; }
.conta-no-b[b-ve4gdmi5jr] { top: calc(46% * .36 + 48px); left: 52%; animation: conta-flutua-b-b-ve4gdmi5jr 9s ease-in-out -3s infinite; }
.conta-no-b .conta-no-disco[b-ve4gdmi5jr] { width: 86px; height: 86px; background: rgba(255, 255, 255, .22); }
.conta-no-b .conta-no-disco[b-ve4gdmi5jr]  .tk-icone { width: 38px; height: 38px; }
.conta-no-c[b-ve4gdmi5jr] { top: calc(46% * .58 + 48px); left: 84%; animation: conta-flutua-c-b-ve4gdmi5jr 11s ease-in-out -6s infinite; }
/* ------------------------------ Lado do formulário ------------------------------ */

.conta-lado[b-ve4gdmi5jr] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 48px 32px 32px;
    background:
        radial-gradient(circle at 100% 0%, var(--tk-azul-50), transparent 45%),
        #fff;
}

.conta-voltar[b-ve4gdmi5jr] {
    position: absolute;
    top: 28px;
    right: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-cinza-600);
    text-decoration: none;
    transition: color var(--tk-transicao), transform var(--tk-transicao);
}

.conta-voltar:hover[b-ve4gdmi5jr] {
    color: var(--tk-azul-700);
    transform: translateX(-3px);
}

.conta-voltar[b-ve4gdmi5jr]  .tk-icone {
    width: 16px;
    height: 16px;
}

.conta-cartao[b-ve4gdmi5jr] {
    width: 100%;
    max-width: 420px;
    animation: conta-entrada-b-ve4gdmi5jr .7s cubic-bezier(.2, .7, .2, 1) .1s both;
}

/* Os componentes das páginas (títulos, campos, botões) ficam um pouco maiores e à esquerda neste layout. */
.conta-cartao[b-ve4gdmi5jr]  .conta-cabecalho {
    margin-bottom: 28px;
    text-align: left;
}

.conta-cartao[b-ve4gdmi5jr]  .conta-cabecalho h1 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tk-azul-900);
}

.conta-cartao[b-ve4gdmi5jr]  .conta-cabecalho p {
    font-size: 15px;
    line-height: 1.55;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-entrada input {
    height: 48px;
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-200);
}

.conta-cartao[b-ve4gdmi5jr]  .tk-entrada input:focus {
    background: #fff;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-entrada-codigo input {
    height: 58px;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao {
    height: 48px;
    font-size: 15px;
}

/* Botão principal das telas de conta: mais alto, texto maior e uma seta que avança ao passar o mouse; um brilho cruza o botão. */
.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario {
    position: relative;
    height: 56px;
    gap: 10px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    background: linear-gradient(135deg, var(--tk-azul-800) 0%, var(--tk-azul-600) 55%, var(--tk-azul-500) 100%);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(11, 94, 215, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario::after {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .7s ease;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario:hover {
    background: linear-gradient(135deg, var(--tk-azul-800) 0%, var(--tk-azul-600) 55%, var(--tk-azul-500) 100%);
    box-shadow: 0 16px 34px rgba(11, 94, 215, .42), inset 0 1px 0 rgba(255, 255, 255, .3);
    filter: brightness(1.06);
    transform: translateY(-2px);
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario:hover::after {
    transform: translateX(5px);
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario:hover::before {
    left: 130%;
}

.conta-cartao[b-ve4gdmi5jr]  .tk-botao-primario:active {
    transform: translateY(0);
}

.conta-rodape[b-ve4gdmi5jr] {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

@keyframes conta-entrada-b-ve4gdmi5jr {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

@keyframes conta-onda-b-ve4gdmi5jr {
    from { transform: translateX(-3%); }
    to { transform: translateX(3%) translateY(6px); }
}

@keyframes conta-gira-anel-b-ve4gdmi5jr {
    to { transform: rotate(360deg); }
}

@keyframes conta-brilha-b-ve4gdmi5jr {
    0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
    50% { opacity: .95; transform: scale(1) rotate(45deg); }
}
@keyframes conta-respira-b-ve4gdmi5jr {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.07); opacity: .75; }
}

@keyframes conta-gira-b-ve4gdmi5jr {
    0%, 100% { transform: rotate(14deg); }
    50% { transform: rotate(20deg) translateY(-14px); }
}

@keyframes conta-corre-b-ve4gdmi5jr {
    to { stroke-dashoffset: -17; }
}

@keyframes conta-flutua-a-b-ve4gdmi5jr {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(6px, -14px); }
}

@keyframes conta-flutua-b-b-ve4gdmi5jr {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-8px, 12px); }
}

@keyframes conta-flutua-c-b-ve4gdmi5jr {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -10px); }
}
@keyframes conta-deriva-b-ve4gdmi5jr {
    0%, 100% { translate: 0 0; }
    50% { translate: 20px -26px; }
}

@media (prefers-reduced-motion: reduce) {
    .conta *[b-ve4gdmi5jr],
    .conta *[b-ve4gdmi5jr]::before,
    .conta *[b-ve4gdmi5jr]::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------ Telas menores ------------------------------ */

@media (max-width: 1100px) {
    .conta-marca[b-ve4gdmi5jr] { padding: 36px 36px; }
}

/* Janelas baixas: os nós e a linha ficariam por cima do texto; sobram os anéis, os pontos e a marca d'água. */
@media (max-height: 780px) {
    .conta-no[b-ve4gdmi5jr],
    .conta-fluxo[b-ve4gdmi5jr] {
        display: none;
    }
}

/* Celular e tablet em pé: o painel azul vira uma faixa curta no topo e o formulário sobe por cima. */
@media (max-width: 900px) {
    .conta[b-ve4gdmi5jr] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .conta-marca[b-ve4gdmi5jr] {
        position: relative;
        height: auto;
        gap: 0;
        padding: 26px 24px 64px;
    }

    .conta-arte[b-ve4gdmi5jr],
    .conta-marca-texto[b-ve4gdmi5jr],
    .conta-bolha-2[b-ve4gdmi5jr],
    .conta-bolha-3[b-ve4gdmi5jr] {
        display: none;
    }

    .conta-lado[b-ve4gdmi5jr] {
        justify-content: flex-start;
        padding: 30px 22px 28px;
        margin-top: -34px;
        background: #fff;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -10px 30px rgba(7, 31, 77, .18);
    }

    .conta-voltar[b-ve4gdmi5jr] { display: none; }
}

@media (max-width: 480px) {
    .conta-cartao[b-ve4gdmi5jr]  .conta-cabecalho h1 {
        font-size: 24px;
    }
}
/* /Components/Layout/JanelaFotoPerfil.razor.rz.scp.css */
.foto-janela-corpo[b-elvaxxcn2j] {
    display: grid;
    place-items: center;
    padding: 18px 0 30px;
}

/* Remover à esquerda, Selecionar à direita. */
.foto-janela-acoes[b-elvaxxcn2j] {
    justify-content: space-between;
}

/* Rótulo que funciona como botão azul de "Selecionar Foto" (o input de arquivo fica escondido). */
.foto-selecionar[b-elvaxxcn2j] {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-weight: 600;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
    transition: background var(--tk-transicao);
}

.foto-selecionar:hover[b-elvaxxcn2j] {
    background: var(--tk-azul-800);
}

.foto-recorte-dica[b-elvaxxcn2j] {
    margin: 0 0 12px;
    text-align: center;
}
/* /Components/Layout/LembretesTarefa.razor.rz.scp.css */
/* Cartões de lembrete: fixos no canto superior direito, por cima de qualquer tela. */
.lembretes[b-czzui6jgei] {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(480px, calc(100vw - 32px));
}

.lembrete[b-czzui6jgei] {
    display: flex;
    gap: 12px;
    padding: 14px;
    overflow: visible;
    border-left: 4px solid var(--tk-azul-600);
    box-shadow: 0 8px 24px rgba(15, 35, 70, .18);
}

.lembrete-icone[b-czzui6jgei] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-100, var(--tk-azul-100));
    border-radius: 50%;
}

.lembrete-icone[b-czzui6jgei]  .tk-icone {
    width: 20px;
    height: 20px;
}

.lembrete-corpo[b-czzui6jgei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lembrete-titulo[b-czzui6jgei] {
    overflow-wrap: anywhere;
    color: var(--tk-azul-800);
}

.lembrete-quando[b-czzui6jgei] {
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.lembrete-acoes[b-czzui6jgei] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
}

.lembrete-botao[b-czzui6jgei] {
    /* Os três botões dividem a linha por igual; se o texto não couber, quebra DENTRO do botão. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 4px 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    font: inherit;
    font-size: 13px;
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.lembrete-botao:hover[b-czzui6jgei] {
    border-color: var(--tk-azul-600);
}

.lembrete-botao-destaque[b-czzui6jgei] {
    color: #fff;
    background: var(--tk-azul-600);
    border-color: var(--tk-azul-600);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout principal: menu lateral + barra superior + conteúdo. */

.app[b-hk9r98rdt0] {
    display: flex;
    min-height: 100vh;
    /* Fundo com um tom de azul suave no topo que vai clareando para o cinza claro. */
    background: linear-gradient(180deg, var(--tk-azul-100) 0, var(--tk-azul-100) 280px, var(--tk-cinza-50) 700px) no-repeat var(--tk-cinza-50);
}

/* ---------------- Menu lateral ---------------- */

.app-menu[b-hk9r98rdt0] {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--tk-largura-menu);
    height: 100vh;
    background: linear-gradient(180deg, var(--tk-cinza-50) 0%, var(--tk-azul-100) 100%);
    border-right: 1px solid var(--tk-azul-200);
    transition: width var(--tk-transicao), transform var(--tk-transicao);
}

.app-menu-recolhido .app-menu[b-hk9r98rdt0] {
    width: var(--tk-largura-menu-recolhido);
}

.app-menu-topo[b-hk9r98rdt0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--tk-altura-topo);
    padding: 0 12px 0 18px;
    border-bottom: 1px solid var(--tk-azul-100);
}

.app-menu-recolhido .app-menu-topo[b-hk9r98rdt0] {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 14px 0 10px;
}

.app-logo[b-hk9r98rdt0] {
    display: flex;
    align-items: center;
}

/* Menu recolhido (desktop): itens mostram apenas o ícone, centralizado.
   ::deep alcança os elementos gerados pelos componentes filhos (NavMenu e ItemMenu). */
@media (min-width: 901px) {
    .app-menu-recolhido[b-hk9r98rdt0]  .item-menu {
        justify-content: center;
        padding: 0;
    }

    .app-menu-recolhido[b-hk9r98rdt0]  .item-menu-texto {
        display: none;
    }

    /* A bolinha de não lidas sobe para o canto do ícone. */
    .app-menu-recolhido[b-hk9r98rdt0]  .item-menu-contador {
        position: absolute;
        top: 3px;
        right: 4px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
        border: 2px solid var(--tk-branco);
        box-sizing: content-box;
    }

    .app-menu-recolhido[b-hk9r98rdt0]  .menu-secao {
        margin: 14px 0 4px;
        text-align: center;
    }
}

/* ---------------- Área de conteúdo ---------------- */

.app-conteudo[b-hk9r98rdt0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.app-topo[b-hk9r98rdt0] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--tk-altura-topo);
    padding: 0 20px;
    background: color-mix(in srgb, var(--tk-azul-50) 85%, transparent);
    border-bottom: 1px solid var(--tk-azul-200);
}

/* O efeito de vidro fica num elemento interno: "backdrop-filter" no próprio topo faria os filhos com position: fixed
   (a camada que fecha o menu do usuário e o sino ao clicar fora) cobrirem só a barra, e não a tela inteira. */
.app-topo[b-hk9r98rdt0]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.app-topo-espaco[b-hk9r98rdt0] {
    flex: 1;
}

.app-pagina[b-hk9r98rdt0] {
    flex: 1;
    width: 100%;
    max-width: 1880px;   /* telas largas aproveitam melhor o espaço; acima disso o conteúdo fica centralizado */
    margin: 0 auto;
    padding: 24px 28px 40px;
}

/* ---------------- Botões de ícone ---------------- */

.app-botao-icone[b-hk9r98rdt0] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.app-botao-icone:hover[b-hk9r98rdt0] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
}

.app-botao-hamburguer[b-hk9r98rdt0],
.app-sombra-mobile[b-hk9r98rdt0] {
    display: none;
}

/* ---------------- Celular / tablet (até 900px) ---------------- */

@media (max-width: 900px) {
    .app-menu[b-hk9r98rdt0],
    .app-menu-recolhido .app-menu[b-hk9r98rdt0] {
        position: fixed;
        left: 0;
        width: 280px;
        transform: translateX(-100%);
    }

    .app-menu-mobile-aberto .app-menu[b-hk9r98rdt0] {
        transform: translateX(0);
        box-shadow: var(--tk-sombra-forte); /* sombra só com o menu aberto, para não "vazar" na borda */
    }

    /* No celular o menu sempre aparece completo (com textos). */
    .app-menu-recolhido .app-menu-topo[b-hk9r98rdt0] {
        flex-direction: row;
        height: var(--tk-altura-topo);
        padding: 0 12px 0 18px;
    }

    .app-botao-recolher[b-hk9r98rdt0] {
        display: none;
    }

    .app-botao-hamburguer[b-hk9r98rdt0] {
        display: grid;
    }

    .app-menu-mobile-aberto .app-sombra-mobile[b-hk9r98rdt0] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(7, 31, 77, .35);
    }

    .app-topo[b-hk9r98rdt0] {
        padding: 0 12px;
    }

    .app-pagina[b-hk9r98rdt0] {
        padding: 16px 16px 32px;
    }
}

/* Ícones da barra superior: crescem de leve ao passar o mouse. */
.app-botao-icone .tk-icone[b-hk9r98rdt0] {
    transition: transform var(--tk-transicao);
}

.app-botao-icone:hover .tk-icone[b-hk9r98rdt0] {
    transform: scale(1.12);
}
/* /Components/Layout/MarcaEmpresa.razor.rz.scp.css */
/* Marca da empresa na barra superior. */

.marca-empresa[b-si4oyc3tlv] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 52px;
}

/* Logotipo: altura limitada para caber na barra, que tem 64px (a medida ideal é 250x70px). */
.marca-empresa-logo[b-si4oyc3tlv] {
    display: block;
    max-width: 260px;
    max-height: 48px;
    object-fit: contain;
}

.marca-empresa-nome[b-si4oyc3tlv] {
    max-width: 240px;
    overflow: hidden;
    font-weight: 700;
    color: var(--tk-azul-800);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.marca-empresa[b-si4oyc3tlv]  .marca-empresa-icone {
    flex-shrink: 0;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

@media (max-width: 600px) {
    .marca-empresa-logo[b-si4oyc3tlv] {
        max-width: 140px;
    }

    .marca-empresa-nome[b-si4oyc3tlv] {
        max-width: 120px;
    }
}
/* /Components/Layout/MenuUsuario.razor.rz.scp.css */
/* Avatar e menu do usuário na barra superior. */

.usuario[b-ben9zi0cme] {
    position: relative;
}

.usuario-botao[b-ben9zi0cme] {
    position: relative;
    z-index: 42;   /* acima da camada que fecha o menu, para o cursor de mãozinha continuar com o menu aberto */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;   /* folga entre a foto/nome e a borda do fundo azul que aparece ao passar o mouse */
    font: inherit;
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease;
}

/* Ao passar o mouse: um fundo azul suave, de cantos arredondados, que aparece devagar, e o nome fica azul.
   (O topo já é um azul quase branco: o fundo precisa ser um pouco mais forte que ele para aparecer.) */
.usuario-botao:hover[b-ben9zi0cme],
.usuario-botao[aria-expanded="true"][b-ben9zi0cme] {
    background: rgba(11, 94, 215, .09);
    box-shadow: inset 0 0 0 1px rgba(11, 94, 215, .10);
}

.usuario-botao .usuario-nome[b-ben9zi0cme] {
    transition: color .25s ease;
}

.usuario-botao:hover .usuario-nome[b-ben9zi0cme],
.usuario-botao[aria-expanded="true"] .usuario-nome[b-ben9zi0cme] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.usuario-dados[b-ben9zi0cme] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.usuario-nome[b-ben9zi0cme] {
    max-width: 180px;
    overflow: hidden;
    font-weight: 600;
    color: var(--tk-texto);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.usuario-perfil[b-ben9zi0cme] {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

/* Camada invisível que fecha o menu ao clicar fora dele. */
.usuario-fundo[b-ben9zi0cme] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.usuario-menu[b-ben9zi0cme] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 41;
    /* A largura acompanha o nome e o e-mail (numa linha só), entre 280 e 420 px, sem passar da tela no celular. */
    width: max-content;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 16px));
    padding: 6px;
    box-shadow: var(--tk-sombra);
    transform-origin: top right;   /* abre "saindo" do botão do perfil */
    animation: usuario-menu-abrir-b-ben9zi0cme .18s ease-out;
}

@keyframes usuario-menu-abrir-b-ben9zi0cme {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.usuario-menu-cabecalho[b-ben9zi0cme] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--tk-cinza-100);
}

.usuario-menu-identificacao[b-ben9zi0cme] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* O e-mail fica numa linha só; só um e-mail maior que o menu inteiro ganha "..." no fim (o completo aparece ao passar o mouse). */
.usuario-menu-identificacao span[b-ben9zi0cme] {
    overflow: hidden;
    font-size: 12px;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Foto do menu: ao passar o mouse, aparece uma câmera por cima, indicando que dá para trocar a foto. */
.usuario-foto-botao[b-ben9zi0cme] {
    position: relative;
    flex: none;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.usuario-foto-troca[b-ben9zi0cme] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(11, 36, 71, .55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--tk-transicao);
}

.usuario-foto-troca[b-ben9zi0cme]  .tk-icone {
    width: 22px;
    height: 22px;
}

.usuario-foto-botao:hover .usuario-foto-troca[b-ben9zi0cme],
.usuario-foto-botao:focus-visible .usuario-foto-troca[b-ben9zi0cme] {
    opacity: 1;
}

.usuario-menu-item[b-ben9zi0cme] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--tk-texto);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.usuario-menu-item:hover[b-ben9zi0cme] {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

/* Itens de navegação (links) ficam azuis ao passar o mouse; só o "Sair" fica vermelho. */
.usuario-menu-link[b-ben9zi0cme] {
    text-decoration: none;
}

.usuario-menu-link:hover[b-ben9zi0cme] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-50);
}

/* Escolha do cliente em uso (usuário CLIENTE com mais de um cliente). */
.usuario-menu-secao[b-ben9zi0cme] {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-cinza-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.usuario-menu-texto[b-ben9zi0cme] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-menu-ativo[b-ben9zi0cme],
.usuario-menu-ativo:disabled[b-ben9zi0cme] {
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-50);
    cursor: default;
}

.usuario-menu-divisor[b-ben9zi0cme] {
    height: 1px;
    margin: 6px 0;
    background: var(--tk-cinza-100);
}

@media (max-width: 600px) {
    .usuario-dados[b-ben9zi0cme] {
        display: none;
    }

    .usuario-botao[b-ben9zi0cme] {
        padding: 2px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Lista de itens do menu lateral. */

.menu[b-fc5kyfet5g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    overflow-y: auto;
}

.menu-secao[b-fc5kyfet5g] {
    margin: 16px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    white-space: nowrap;
}

/* Linha que separa o log de erros dos itens de administração. */
.menu-separador[b-fc5kyfet5g] {
    height: 1px;
    margin: 12px 10px;
    background: var(--tk-azul-600);
    opacity: .25;
}

/* Itens do menu (componente ItemMenu). ::deep é necessário porque o <a> é gerado pelo NavLink,
   que é outro componente; o CSS isolado só alcança elementos filhos através do ::deep. */
.menu[b-fc5kyfet5g]  .item-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    font-weight: 500;
    color: var(--tk-cinza-600);
    border-radius: 10px;
    white-space: nowrap;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

/* Ícones em azul claro; o texto continua cinza para não pesar. */
.menu[b-fc5kyfet5g]  .item-menu .tk-icone {
    color: var(--tk-azul-500);
}

.menu[b-fc5kyfet5g]  .item-menu:hover {
    color: var(--tk-azul-800);
    background: color-mix(in srgb, var(--tk-branco) 75%, transparent);
}

/* Item da página atual: cartão branco com a barra azul à esquerda. */
.menu[b-fc5kyfet5g]  .item-menu.active {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    font-weight: 600;
    background: var(--tk-branco);
    box-shadow: inset 3px 0 0 var(--tk-azul-600), var(--tk-sombra-suave);
}

.menu[b-fc5kyfet5g]  .item-menu.active .tk-icone {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* Bolinha de "não lidas" (Conversas): à direita do texto. Com o menu recolhido, vai para o canto do ícone (veja o MainLayout.razor.css). */
.menu[b-fc5kyfet5g]  .item-menu {
    position: relative;
}

.menu[b-fc5kyfet5g]  .item-menu-contador {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 999px;
}

/* Animação dos ícones do menu: crescem e "andam" um pouco ao passar o mouse. */
.menu[b-fc5kyfet5g]  .item-menu:hover .tk-icone {
    transform: translateX(2px) scale(1.12);
}
/* /Components/Layout/Notificacoes.razor.rz.scp.css */
/* Sino de notificações da barra superior (bolinha vermelha + lista suspensa). */

.sino[b-m7w3x6yx0o] {
    position: relative;
}

.sino-botao[b-m7w3x6yx0o] {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

/* Acima da camada que fecha o menu: com o menu aberto, o botão continua clicável e com o cursor de mãozinha. */
.sino-botao[b-m7w3x6yx0o] {
    z-index: 42;
}

.sino-botao:hover[b-m7w3x6yx0o] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
}

.sino-botao[b-m7w3x6yx0o]  .tk-icone {
    width: 22px;
    height: 22px;
    transform-origin: 50% 10%;   /* o sino balança pendurado pelo topo */
}

/* Ao passar o mouse, o sino balança. */
.sino-botao:hover[b-m7w3x6yx0o]  .tk-icone {
    animation: sino-balancar-b-m7w3x6yx0o .7s ease-in-out;
}

@keyframes sino-balancar-b-m7w3x6yx0o {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(16deg); }
    30%  { transform: rotate(-14deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-7deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

/*
   O site.css zera as animações quando o Windows está com "efeitos de animação" desligados (prefers-reduced-motion). O balançar
   do sino é um pedido explícito e é curto, então ele volta a durar o tempo normal. Se um dia quiserem respeitar essa opção do
   Windows, apague este bloco.
*/
@media (prefers-reduced-motion: reduce) {
    .sino-botao:hover[b-m7w3x6yx0o]  .tk-icone {
        animation-duration: .7s !important;
    }
}

/* Bolinha vermelha no canto de cima do sino, com o número de chamados com mensagens novas. */
.sino-contador[b-m7w3x6yx0o] {
    position: absolute;
    top: 2px;
    right: 1px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--tk-erro);
    border: 2px solid var(--tk-cinza-50);
    border-radius: 999px;
    box-sizing: content-box;
    transform: translate(2px, -1px);
}

/* Camada invisível que fecha o menu ao clicar fora. */
.sino-fundo[b-m7w3x6yx0o] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.sino-menu[b-m7w3x6yx0o] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 41;
    width: min(380px, 92vw);
    padding: 0;
    box-shadow: var(--tk-sombra);
}

/* Celular: o sino fica longe da borda direita, então o menu ancorado nele sairia pela esquerda. Aqui ele ocupa a largura da tela, com uma margem. */
@media (max-width: 480px) {
    .sino-menu[b-m7w3x6yx0o] {
        position: fixed;
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
    }
}

.sino-menu-topo[b-m7w3x6yx0o] {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--tk-azul-900);
    border-bottom: 1px solid var(--tk-cinza-100);
}

.sino-vazio[b-m7w3x6yx0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: var(--tk-cinza-500);
}

.sino-vazio[b-m7w3x6yx0o]  .tk-icone {
    width: 28px;
    height: 28px;
    opacity: .6;
}

.sino-lista[b-m7w3x6yx0o] {
    max-height: min(420px, 70vh);
    overflow-y: auto;
}

.sino-item[b-m7w3x6yx0o] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    font: inherit;
    color: var(--tk-texto);
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tk-cinza-100);
    cursor: pointer;
}

.sino-item:last-child[b-m7w3x6yx0o] {
    border-bottom: none;
}

.sino-item:hover[b-m7w3x6yx0o] {
    background: var(--tk-azul-50);
}

.sino-item-texto[b-m7w3x6yx0o] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sino-item-titulo[b-m7w3x6yx0o],
.sino-item-mensagem[b-m7w3x6yx0o] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sino-item-titulo strong[b-m7w3x6yx0o] {
    color: var(--tk-azul-800);
}

.sino-item-mensagem[b-m7w3x6yx0o] {
    font-size: 13px;
    color: var(--tk-cinza-600);
}

/* Aviso de chamado resolvido: ícone verde no lugar da foto. */
.sino-item-resolvido[b-m7w3x6yx0o] {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
    border-radius: 50%;
}

.sino-item-resolvido[b-m7w3x6yx0o]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* Chamado resolvido (só o aviso): faixa verde à esquerda, fundo verde bem claro, texto em duas linhas e o prazo de encerramento. */
.sino-item-sucesso[b-m7w3x6yx0o] {
    align-items: flex-start;
    background: var(--tk-verde-suave);
    box-shadow: inset 4px 0 0 var(--tk-verde-texto);
}

.sino-item-sucesso:hover[b-m7w3x6yx0o] {
    background: var(--tk-verde-suave);
    filter: brightness(.97);
}

.sino-item-sucesso .sino-item-resolvido[b-m7w3x6yx0o] {
    color: #fff;
    background: var(--tk-verde-texto);
}

.sino-item-quebra[b-m7w3x6yx0o] {
    white-space: normal;
    line-height: 1.35;
}

/* O aviso das 24 h: um bloco à parte (com respiro em cima), colado na mesma margem do texto de cima; o ícone fica na linha, e a segunda linha volta para a margem. */
.sino-item-sucesso .sino-item-texto[b-m7w3x6yx0o] {
    gap: 4px;
}

.sino-resolvido-prazo[b-m7w3x6yx0o] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tk-verde-texto);
}

.sino-resolvido-prazo[b-m7w3x6yx0o]  .tk-icone {
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
}

.sino-item-sucesso .sino-convite-selo[b-m7w3x6yx0o] {
    background: var(--tk-verde-texto);
    color: #fff;
}

.sino-item-resolvido-texto[b-m7w3x6yx0o] {
    color: var(--tk-verde-texto);
}

.sino-item-lado[b-m7w3x6yx0o] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Convite de compromisso: o título em destaque, quem convidou e quando em linhas separadas, e o selo "Convite" no canto. */
.sino-convite-selo[b-m7w3x6yx0o] {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-verde-texto);
    background: rgba(19, 128, 79, .12);
    border-radius: 999px;
}

.sino-convite-quando[b-m7w3x6yx0o] {
    font-weight: 600;
    color: var(--tk-azul-800);
}

.sino-item-hora[b-m7w3x6yx0o] {
    font-size: 11px;
    color: var(--tk-cinza-500);
}

/* Quantas mensagens novas há naquele chamado. */
.sino-item-qtd[b-m7w3x6yx0o] {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--tk-erro);
    border-radius: 999px;
}
/* /Components/Pages/Admin/CategoriasSubcategorias.razor.rz.scp.css */
/* Estilos da tela Administração > Categorias (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

/* Dois painéis lado a lado no computador; um embaixo do outro em telas estreitas. */
.cat-grade[b-bc5pwg0i15] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .cat-grade[b-bc5pwg0i15] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cat-nome[b-bc5pwg0i15] {
    margin-right: 8px;
    font-weight: 600;
}

.cat-grade[b-bc5pwg0i15]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

.cat-grade[b-bc5pwg0i15]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Admin/Clientes.razor.rz.scp.css */
/* Estilos da tela Administração > Clientes (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

.cli-nome[b-9izn0rb2qx] {
    margin-right: 8px;
    font-weight: 600;
}

/* Grade ocupando todo o cartão, sem borda própria. */
section[b-9izn0rb2qx]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

section[b-9izn0rb2qx]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Admin/Filas.razor.rz.scp.css */
/* Estilos da tela Administração > Filas de atendimento (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

.fila-nome[b-ybqz4lmqu6] {
    margin-right: 8px;
    font-weight: 600;
}

/* Bolinha com a cor da fila, antes do nome. */
.fila-cor[b-ybqz4lmqu6] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Seletor de cor nativo do navegador, no mesmo tamanho dos outros campos. */
.fila-campo-cor[b-ybqz4lmqu6] {
    width: 100%;
    height: 34px;
    padding: 2px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-300);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

/* Grade ocupando todo o cartão, sem borda própria. */
section[b-ybqz4lmqu6]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

section[b-ybqz4lmqu6]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Admin/JanelaAcessosUsuario.razor.rz.scp.css */
.acessos-ajuda[b-f085a5ro3v] {
    margin: 0 0 12px;
}

.acessos-acoes[b-f085a5ro3v] {
    justify-content: flex-end;
    width: 100%;
}
/* /Components/Pages/Admin/JanelaSessoesUsuarios.razor.rz.scp.css */
.sessoes-topo[b-0nl5k3r9yz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.sessoes-topo p[b-0nl5k3r9yz] {
    margin: 0;
}

.sessoes-nome[b-0nl5k3r9yz] {
    margin-right: 6px;
    font-weight: 600;
}

.sessoes-email[b-0nl5k3r9yz] {
    display: block;
    font-size: 12px;
    color: var(--tk-cinza-500);
}
/* /Components/Pages/Admin/LogsErro.razor.rz.scp.css */
.logs-filtro[b-vnrcxi7i73] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 170px;
}

.logs-empresa[b-vnrcxi7i73] {
    min-width: 300px;
}

.logs-filtro label[b-vnrcxi7i73] {
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.logs-aviso[b-vnrcxi7i73] {
    margin: 0 0 8px;
}

/* O log inteiro: letra de máquina, quebra linhas compridas e rola dentro da janela. */
.logs-texto[b-vnrcxi7i73] {
    max-height: 70vh;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--tk-texto);
    background: var(--tk-cinza-50, var(--tk-cinza-50));
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 8px;
}
/* /Components/Pages/Admin/Prioridades.razor.rz.scp.css */
/* Estilos da tela Administração > Prioridades (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

.prio-nome[b-qgympph1hf] {
    margin-right: 8px;
    font-weight: 600;
}

/* Bolinha com a cor da prioridade, antes do nome. */
.prio-cor[b-qgympph1hf] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

/* Seletor de cor nativo do navegador, no mesmo tamanho dos outros campos. */
.prio-campo-cor[b-qgympph1hf] {
    width: 100%;
    height: 34px;
    padding: 2px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-300);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

/* Grade ocupando todo o cartão, sem borda própria. */
section[b-qgympph1hf]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

section[b-qgympph1hf]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Admin/TiposChamado.razor.rz.scp.css */
/* Estilos da tela Administração > Tipos de chamado (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

/* Grade ocupando todo o cartão, sem borda própria. */
section[b-pxiftsbjvi]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

section[b-pxiftsbjvi]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Admin/Usuarios.razor.rz.scp.css */
/* Estilos da tela Administração > Usuários (CSS isolado: vale só para esta página).
   O destaque da linha selecionada das grades é global (classe tk-linha-selecionada no site.css). */

.usu-nome[b-g27ycotolv] {
    margin-right: 8px;
    font-weight: 600;
}

/* Grade ocupando todo o cartão, sem borda própria. */
section[b-g27ycotolv]  .dxbl-grid {
    border: none;
    border-radius: 0 0 var(--tk-raio) var(--tk-raio);
}

section[b-g27ycotolv]  .dxbl-grid tbody tr {
    cursor: pointer;
}
/* /Components/Pages/Agenda.razor.rz.scp.css */
.agenda-topo-acoes[b-xvxvc4y6g1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.agenda-navegacao[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.agenda-botao[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: color-mix(in srgb, var(--tk-branco) 75%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.agenda-botao:hover:not(:disabled)[b-xvxvc4y6g1] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

.agenda-botao:disabled[b-xvxvc4y6g1] {
    cursor: default;
    opacity: .6;
}

.agenda-botao[b-xvxvc4y6g1]  .tk-icone {
    width: 16px;
    height: 16px;
}

/* ---- Calendário do mês ---- */
.agenda-calendario[b-xvxvc4y6g1] {
    padding: 0;
    overflow: hidden;
}

.agenda-semana[b-xvxvc4y6g1],
.agenda-grade[b-xvxvc4y6g1] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-semana[b-xvxvc4y6g1] {
    background: var(--tk-azul-50, var(--tk-azul-50));
    border-bottom: 1px solid var(--tk-azul-200);
}

.agenda-semana-dia[b-xvxvc4y6g1] {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tk-azul-800);
}

.agenda-celula[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 118px;
    padding: 6px;
    border-right: 1px solid var(--tk-azul-200);
    border-bottom: 1px solid var(--tk-azul-200);
    cursor: pointer;
    min-width: 0;
}

.agenda-celula:nth-child(7n)[b-xvxvc4y6g1] {
    border-right: 0;
}

.agenda-celula:hover[b-xvxvc4y6g1] {
    background: rgba(37, 99, 235, .04);
}

.agenda-celula-fora[b-xvxvc4y6g1] {
    background: rgba(15, 23, 42, .03);
}

.agenda-celula-fora .agenda-numero[b-xvxvc4y6g1] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    opacity: .7;
}

.agenda-numero[b-xvxvc4y6g1] {
    align-self: flex-start;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
}

.agenda-numero:hover[b-xvxvc4y6g1] {
    background: var(--tk-azul-200);
}

.agenda-celula-hoje[b-xvxvc4y6g1] {
    background: rgba(37, 99, 235, .07);
}

.agenda-celula-hoje .agenda-numero[b-xvxvc4y6g1] {
    color: #fff;
    background: var(--tk-azul-600);
}

.agenda-compromisso[b-xvxvc4y6g1] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 2px 6px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-left: 3px solid var(--tk-azul-600);
    border-radius: 4px;
    cursor: pointer;
}

.agenda-compromisso:hover[b-xvxvc4y6g1] {
    border-color: var(--tk-azul-600);
}

/* Dia inteiro e vários dias: faixa cheia, para se destacar das reuniões com horário. */
.agenda-compromisso-longo[b-xvxvc4y6g1] {
    color: #fff;
    background: var(--tk-azul-600);
    border-color: var(--tk-azul-600);
}

.agenda-hora[b-xvxvc4y6g1] {
    flex: 0 0 auto;
    font-weight: 700;
}

.agenda-titulo[b-xvxvc4y6g1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-mais[b-xvxvc4y6g1] {
    align-self: flex-start;
    padding: 0 4px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: transparent;
    border: 0;
    cursor: pointer;
}

.agenda-mais:hover[b-xvxvc4y6g1] {
    text-decoration: underline;
}

/* ---- Visões: Mês | Semana | Dia ---- */
/* Mês / Semana / Dia: três botões da mesma largura; o destaque azul é UM bloco atrás deles, que desliza até o escolhido
   (posição = --visao, 0, 1 ou 2, vinda da tela). O texto troca de cor junto. */
.agenda-visao[b-xvxvc4y6g1] {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    background: color-mix(in srgb, var(--tk-branco) 60%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.agenda-visao-destaque[b-xvxvc4y6g1] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    background: var(--tk-azul-600);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(11, 94, 215, .3);
    transform: translateX(calc(var(--visao, 0) * 100%));
    transition: transform .3s cubic-bezier(.3, .9, .3, 1.15);   /* passa um tiquinho e volta: dá a sensação de "encaixe" */
}

.agenda-visao-botao[b-xvxvc4y6g1] {
    position: relative;   /* fica por cima do destaque */
    height: 28px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color .25s ease;
}

.agenda-visao-botao:not(.agenda-visao-ativa):hover[b-xvxvc4y6g1] {
    background: rgba(37, 99, 235, .08);
}

.agenda-visao-ativa[b-xvxvc4y6g1] {
    color: #fff;
}

/* O deslize é o próprio aviso de que a visão mudou: continua mesmo com "reduzir animações" ligado no Windows
   (como as outras animações da Agenda). */
@media (prefers-reduced-motion: reduce) {
    .agenda-visao-destaque[b-xvxvc4y6g1] {
        transition-duration: .3s !important;
    }
}

/* ---- Animações: o bloco é recriado a cada visão/período (@key), então elas tocam sozinhas ---- */
.agenda-vista[b-xvxvc4y6g1] {
    animation-duration: .28s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    animation-fill-mode: both;
}

.agenda-anim-troca[b-xvxvc4y6g1] {
    animation-name: agenda-troca-b-xvxvc4y6g1;
}

.agenda-anim-proximo[b-xvxvc4y6g1] {
    animation-name: agenda-proximo-b-xvxvc4y6g1;
}

.agenda-anim-anterior[b-xvxvc4y6g1] {
    animation-name: agenda-anterior-b-xvxvc4y6g1;
}

@keyframes agenda-troca-b-xvxvc4y6g1 {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes agenda-proximo-b-xvxvc4y6g1 {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes agenda-anterior-b-xvxvc4y6g1 {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
}

/* O site.css zera todas as animações quando o Windows está com as animações desligadas (prefers-reduced-motion). Esta animação é pedida
   pelo usuário e curta, então ela é religada aqui (o mesmo jeito do toast e do chat). */
@media (prefers-reduced-motion: reduce) {
    .agenda-vista[b-xvxvc4y6g1] {
        animation-duration: .28s !important;
        animation-iteration-count: 1 !important;
    }
}
/* ---- Semana e Dia: a régua de horas ---- */
.agenda-tempo[b-xvxvc4y6g1] {
    padding: 0;
    overflow: hidden;
}

.agenda-tempo-rolagem[b-xvxvc4y6g1] {
    /* A altura máxima vem do js/preencher-altura.js (até o fim da janela). */
    min-height: 420px;
    overflow-y: auto;
    position: relative;
}

.agenda-tempo-topo[b-xvxvc4y6g1] {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--tk-branco);
    border-bottom: 1px solid var(--tk-azul-200);
}

.agenda-tempo-linha[b-xvxvc4y6g1] {
    display: grid;
    grid-template-columns: 56px repeat(var(--colunas), minmax(0, 1fr));
}

.agenda-tempo-canto[b-xvxvc4y6g1] {
    min-width: 0;
}

.agenda-tempo-canto-texto[b-xvxvc4y6g1] {
    padding: 6px 6px 6px 0;
    font-size: 11px;
    text-align: right;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.agenda-tempo-diacab[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    font: inherit;
    color: var(--tk-azul-800);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--tk-azul-200);
    cursor: pointer;
}

.agenda-tempo-diacab:disabled[b-xvxvc4y6g1] {
    cursor: default;
}

.agenda-tempo-sem[b-xvxvc4y6g1] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.agenda-tempo-num[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: 20px;
    border-radius: 18px;
    transition: background-color .15s ease;
}

.agenda-tempo-diacab:not(:disabled):hover .agenda-tempo-num[b-xvxvc4y6g1] {
    background: var(--tk-azul-200);
}

.agenda-tempo-hoje .agenda-tempo-num[b-xvxvc4y6g1] {
    color: #fff;
    background: var(--tk-azul-600);
}

.agenda-tempo-diainteiro[b-xvxvc4y6g1] {
    border-top: 1px solid var(--tk-azul-200);
}

.agenda-tempo-diacol[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 4px;
    border-left: 1px solid var(--tk-azul-200);
}

.agenda-tempo-corpo[b-xvxvc4y6g1] {
    display: grid;
    grid-template-columns: 56px repeat(var(--colunas), minmax(0, 1fr));
}

.agenda-horas[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
}

.agenda-hora-rotulo[b-xvxvc4y6g1] {
    flex: 0 0 60px;
    height: 60px;
    padding-right: 8px;
    font-size: 11px;
    line-height: 1;
    text-align: right;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    transform: translateY(-5px);
}

.agenda-coluna[b-xvxvc4y6g1] {
    position: relative;
    height: 1440px;
    min-width: 0;
    border-left: 1px solid var(--tk-azul-200);
}

.agenda-coluna-hoje[b-xvxvc4y6g1] {
    background: rgba(37, 99, 235, .04);
}

.agenda-faixa[b-xvxvc4y6g1] {
    height: 60px;
    border-bottom: 1px solid var(--tk-azul-200);
    cursor: pointer;
}

.agenda-faixa:hover[b-xvxvc4y6g1] {
    background: rgba(37, 99, 235, .06);
}

.agenda-bloco[b-xvxvc4y6g1] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    overflow: hidden;
    font: inherit;
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    color: #fff;
    background: var(--tk-azul-600);
    border: 1px solid var(--tk-branco);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
    transition: box-shadow .15s ease, filter .15s ease;
}

.agenda-bloco:hover[b-xvxvc4y6g1] {
    z-index: 3;
    filter: brightness(1.08);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
}

.agenda-bloco-titulo[b-xvxvc4y6g1] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-bloco-quando[b-xvxvc4y6g1],
.agenda-bloco-local[b-xvxvc4y6g1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .92;
}

/* A linha vermelha de "agora". */
.agenda-agora[b-xvxvc4y6g1] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 2px;
    background: #D93025;
    pointer-events: none;
}

.agenda-agora[b-xvxvc4y6g1]::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #D93025;
    border-radius: 50%;
}
/* ---- Formulário ---- */
.agenda-form-linha[b-xvxvc4y6g1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.agenda-input[b-xvxvc4y6g1] {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.agenda-input:disabled[b-xvxvc4y6g1] {
    opacity: .55;
}

.agenda-dia-inteiro label[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.tk-form-acoes[b-xvxvc4y6g1]  .agenda-excluir {
    margin-right: auto;
}

@media (max-width: 720px) {
    .agenda-celula[b-xvxvc4y6g1] {
        min-height: 84px;
        padding: 3px;
    }

    .agenda-hora[b-xvxvc4y6g1] {
        display: none;
    }
}

.agenda-ajuda-serie[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agenda-ajuda-serie[b-xvxvc4y6g1]  .tk-icone,
.agenda-bloco-titulo[b-xvxvc4y6g1]  .tk-icone {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
}

/* ---- Cor por tipo de compromisso ----
   azul = criado aqui (o padrão), roxo = reunião marcada numa conversa, verde-água = Outlook/Google, âmbar claro = feriado.
   "Dia inteiro" e "vários dias" são a mesma cor, só mais forte (faixa cheia). */
.agenda-compromisso.tipo-reuniao[b-xvxvc4y6g1] {
    color: var(--tk-roxo-texto);
    border-color: var(--tk-roxo-borda);
    border-left-color: #6D3FC4;
}

.agenda-compromisso.tipo-externo[b-xvxvc4y6g1] {
    border-left-color: #0E7C86;
}

.agenda-compromisso.tipo-feriado[b-xvxvc4y6g1] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
    border-color: var(--tk-ambar-borda);
    border-left-color: #D99A00;
}

.agenda-compromisso-longo.tipo-reuniao[b-xvxvc4y6g1] {
    color: #fff;
    background: #6D3FC4;
    border-color: #6D3FC4;
}

.agenda-compromisso-longo.tipo-externo[b-xvxvc4y6g1] {
    color: #fff;
    background: #0E7C86;
    border-color: #0E7C86;
}

/* Feriado não é compromisso de trabalho: fica claro, com o texto escuro, mesmo em dia inteiro. */
.agenda-compromisso-longo.tipo-feriado[b-xvxvc4y6g1] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
    border-color: var(--tk-ambar-borda);
}

.agenda-bloco.tipo-reuniao[b-xvxvc4y6g1] {
    background: #6D3FC4;
}

.agenda-bloco.tipo-externo[b-xvxvc4y6g1] {
    background: #0E7C86;
}

/* Legenda (embaixo do título) e o pontinho colorido do card. */
.agenda-tipos[b-xvxvc4y6g1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 12px;
    padding: 0;
    font-size: 12.5px;
    color: var(--tk-cinza-600);
    list-style: none;
}

.agenda-tipos li[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agenda-cartao-linha .agenda-ponto[b-xvxvc4y6g1] {
    margin-top: 4px;
}

.agenda-ponto[b-xvxvc4y6g1] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--tk-azul-600);
    border-radius: 50%;
}

.agenda-ponto.tipo-reuniao[b-xvxvc4y6g1] {
    background: #6D3FC4;
}

.agenda-ponto.tipo-externo[b-xvxvc4y6g1] {
    background: #0E7C86;
}

.agenda-ponto.tipo-feriado[b-xvxvc4y6g1] {
    background: #E0A21B;
}

.agenda-aviso-externo[b-xvxvc4y6g1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-ciano-texto);
    background: var(--tk-ciano-suave);
    border: 1px solid var(--tk-ciano-borda);
    border-radius: var(--tk-raio-p);
}

/* ---- Card de detalhes do compromisso ---- */
.agenda-cartao-fundo[b-xvxvc4y6g1] {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.agenda-cartao[b-xvxvc4y6g1] {
    position: fixed;
    z-index: 901;
    width: 400px;
    max-width: calc(100vw - 16px);
    padding: 16px 20px 18px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .22);
}

/* ---- Card do dia ("+N mais" do mês): todos os compromissos do dia, numa lista que rola se for grande ---- */
.agenda-cartao-dia[b-xvxvc4y6g1] {
    width: 300px;
    padding: 14px 14px 12px;
}

.agenda-dia-cab[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}

.agenda-dia-semana[b-xvxvc4y6g1] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tk-cinza-500);
}

/* O número do dia leva para o dia hora a hora. */
.agenda-dia-numero[b-xvxvc4y6g1] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--tk-texto);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.agenda-dia-numero:hover[b-xvxvc4y6g1] {
    background: var(--tk-azul-50);
}

.agenda-dia-numero-hoje[b-xvxvc4y6g1],
.agenda-dia-numero-hoje:hover[b-xvxvc4y6g1] {
    color: #fff;
    background: var(--tk-azul-600);
}

.agenda-dia-lista[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(360px, 55vh);
    overflow-y: auto;
}

.agenda-dia-lista .agenda-compromisso[b-xvxvc4y6g1] {
    flex: none;
    padding: 4px 8px;
    font-size: 13px;
}

/* Os botões ficam por cima, no canto: assim o título sobe até o topo do card. */
.agenda-cartao-acoes[b-xvxvc4y6g1] {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 2px;
}

.agenda-cartao-botao[b-xvxvc4y6g1] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--tk-cinza-600);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.agenda-cartao-botao:hover[b-xvxvc4y6g1] {
    background: var(--tk-cinza-100);
}

.agenda-cartao-botao[b-xvxvc4y6g1]  .tk-icone {
    width: 18px;
    height: 18px;
}

.agenda-cartao-titulo[b-xvxvc4y6g1] {
    margin: 0 0 4px;
    padding-right: 104px;   /* não passa por baixo dos botões do canto */
    font-size: 20px;
    font-weight: 600;
    word-break: break-word;
}

.agenda-cartao-quando[b-xvxvc4y6g1] {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.agenda-cartao-linha[b-xvxvc4y6g1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 13px;
    word-break: break-word;
}

.agenda-cartao-linha[b-xvxvc4y6g1]  .tk-icone {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--tk-cinza-600);
}

.agenda-cartao-obs[b-xvxvc4y6g1] {
    margin: 4px 0 10px;
    font-size: 13px;
    white-space: pre-line;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.agenda-cartao-origem[b-xvxvc4y6g1] {
    margin: 10px 0 0;
    color: var(--tk-cinza-600);
}

/* "Trazer também minhas tarefas", embaixo de cada conta conectada. */
.agenda-conta-tarefas[b-xvxvc4y6g1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    cursor: pointer;
}

/* ---- Participantes (no card) e convites ---- */
.agenda-participantes[b-xvxvc4y6g1] {
    margin: 8px 0 4px;
    font-size: 13px;
}

.agenda-participantes ul[b-xvxvc4y6g1] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.agenda-participantes li[b-xvxvc4y6g1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.agenda-participante-estado[b-xvxvc4y6g1] {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
}

.agenda-participante-organizador[b-xvxvc4y6g1] {
    color: var(--tk-roxo-texto);
    background: var(--tk-roxo-suave);
}

.agenda-participante-vai[b-xvxvc4y6g1] {
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
}

.agenda-participante-nao[b-xvxvc4y6g1] {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
}

.agenda-participante-pendente[b-xvxvc4y6g1] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
}

/* Janela "Convites": um card por convite, um embaixo do outro. */
.agenda-convites[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-convite[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200);
    border-left: 4px solid #6D3FC4;   /* roxo da reunião na Agenda */
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 42, 90, .06);
}

.agenda-convite-topo[b-xvxvc4y6g1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.agenda-convite-selo[b-xvxvc4y6g1] {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #6D3FC4;
    background: var(--tk-roxo-suave);
    border-radius: 10px;
}

.agenda-convite-selo[b-xvxvc4y6g1]  .tk-icone {
    width: 20px;
    height: 20px;
}

.agenda-convite-cab[b-xvxvc4y6g1] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.agenda-convite-titulo[b-xvxvc4y6g1] {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.3;
    color: var(--tk-texto);
    overflow-wrap: anywhere;
}

.agenda-convite-quem[b-xvxvc4y6g1] {
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

/* "Horário mudou": etiqueta âmbar no canto do card. */
.agenda-convite-tag[b-xvxvc4y6g1] {
    flex: none;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tk-ambar-texto);
    white-space: nowrap;
    background: var(--tk-ambar-suave, var(--tk-ambar-suave));
    border-radius: 999px;
}

/* Quando e onde: num bloco cinza claro, cada um com o ícone. */
.agenda-convite-dados[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--tk-cinza-50);
    border-radius: 8px;
}

.agenda-convite-linha[b-xvxvc4y6g1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--tk-texto);
    overflow-wrap: anywhere;
}

.agenda-convite-linha:first-child[b-xvxvc4y6g1] {
    font-weight: 600;
}

.agenda-convite-linha[b-xvxvc4y6g1]  .tk-icone {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--tk-cinza-500);
}

.agenda-convite-choque[b-xvxvc4y6g1] {
    margin: 0;
}

.agenda-convite-acoes[b-xvxvc4y6g1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.agenda-convites-vazio[b-xvxvc4y6g1] {
    margin: 0;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

/* Aviso de choque de horário: âmbar (atenção, não erro), a pessoa decide se salva mesmo assim. */
.agenda-aviso-choque[b-xvxvc4y6g1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
    border: 1px solid var(--tk-ambar-borda);
    border-radius: var(--tk-raio-p);
}

.agenda-aviso-choque[b-xvxvc4y6g1]  .tk-icone,
.agenda-aviso-externo[b-xvxvc4y6g1]  .tk-icone {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

/* ---- Janela "Agendas conectadas" ---- */
.agenda-conta[b-xvxvc4y6g1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.agenda-conta-info[b-xvxvc4y6g1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agenda-conta-acoes[b-xvxvc4y6g1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.agenda-conta-erro[b-xvxvc4y6g1] {
    font-size: 12px;
    color: var(--tk-vermelho-texto);
}
/* /Components/Pages/AnexosChamado.razor.rz.scp.css */
/* Aba "Imagens e Anexos": seletor Imagens/Anexos, miniaturas, lista de arquivos e a imagem ampliada. */

.anexos[b-6mmm5025tm] {
    margin-top: 8px;
}

.anexos-topo[b-6mmm5025tm] {
    display: flex;
    margin-bottom: 14px;
}

/* Seletor em duas opções (como um interruptor): a escolhida fica azul. */
.anexos-seletor[b-6mmm5025tm] {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 12px;
}

.anexos-opcao[b-6mmm5025tm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.anexos-opcao[b-6mmm5025tm]  .tk-icone {
    width: 18px;
    height: 18px;
}

.anexos-opcao:hover[b-6mmm5025tm] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
}

.anexos-opcao-ativa[b-6mmm5025tm],
.anexos-opcao-ativa:hover[b-6mmm5025tm] {
    color: #fff;
    background: var(--tk-azul-600);
}

.anexos-qtd[b-6mmm5025tm] {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 12px;
    text-align: center;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border-radius: 999px;
}

.anexos-opcao-ativa .anexos-qtd[b-6mmm5025tm] {
    color: #fff;
    background: rgba(255, 255, 255, .25);
}

/* ---------- Imagens ---------- */

.anexos-grade[b-6mmm5025tm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.anexos-imagem[b-6mmm5025tm] {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11, 36, 71, .06);
    transition: box-shadow .18s ease, transform .18s ease !important;
}

.anexos-imagem:hover[b-6mmm5025tm] {
    box-shadow: 0 8px 18px rgba(11, 36, 71, .14);
    transform: translateY(-2px);
}

.anexos-miniatura[b-6mmm5025tm] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    background: var(--tk-cinza-200);
    border: none;
    cursor: zoom-in;
}

.anexos-miniatura img[b-6mmm5025tm] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anexos-imagem figcaption[b-6mmm5025tm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    min-width: 0;
}

.anexos-legenda-nome[b-6mmm5025tm],
.anexos-legenda-meta[b-6mmm5025tm] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anexos-legenda-nome[b-6mmm5025tm] {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-texto);
}

.anexos-legenda-meta[b-6mmm5025tm] {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

/* ---------- Anexos (lista) ---------- */

.anexos-lista[b-6mmm5025tm] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 12px;
}

.anexos-arquivo[b-6mmm5025tm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tk-cinza-100);
}

.anexos-arquivo:last-child[b-6mmm5025tm] {
    border-bottom: none;
}

.anexos-arquivo:hover[b-6mmm5025tm] {
    background: var(--tk-azul-50);
}

/* Selo com a extensão (PDF, XLSX...) no lugar do ícone do arquivo. */
.anexos-selo[b-6mmm5025tm] {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    font-size: 11px;
    font-weight: 800;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100);
    border-radius: 10px;
}

.anexos-arquivo-texto[b-6mmm5025tm] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.anexos-arquivo-nome[b-6mmm5025tm] {
    overflow: hidden;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anexos-arquivo-nome:hover[b-6mmm5025tm] {
    text-decoration: underline;
}

.anexos-arquivo-meta[b-6mmm5025tm] {
    overflow: hidden;
    font-size: 12px;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anexos-baixar[b-6mmm5025tm] {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    border-radius: 10px;
}

.anexos-baixar:hover[b-6mmm5025tm] {
    color: var(--tk-azul-800);
    background: var(--tk-azul-100);
}

.anexos-baixar[b-6mmm5025tm]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* ---------- Imagem ampliada ---------- */

.anexos-visor[b-6mmm5025tm] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 64px 64px 24px;
    background: rgba(7, 20, 40, .86);
    outline: none;
}

.anexos-visor-topo[b-6mmm5025tm] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #fff;
    cursor: default;
}

.anexos-visor-titulo[b-6mmm5025tm] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.anexos-visor-titulo strong[b-6mmm5025tm],
.anexos-visor-titulo small[b-6mmm5025tm] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anexos-visor-titulo small[b-6mmm5025tm] {
    opacity: .75;
}

.anexos-visor-botao[b-6mmm5025tm],
.anexos-visor-seta[b-6mmm5025tm] {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.anexos-visor-botao:hover[b-6mmm5025tm],
.anexos-visor-seta:hover[b-6mmm5025tm] {
    background: rgba(255, 255, 255, .28);
}

.anexos-visor-botao[b-6mmm5025tm]  .tk-icone,
.anexos-visor-seta[b-6mmm5025tm]  .tk-icone {
    width: 22px;
    height: 22px;
}

.anexos-visor-seta[b-6mmm5025tm] {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    transform: translateY(-50%);
}

.anexos-visor-anterior[b-6mmm5025tm] { left: 12px; }
.anexos-visor-proxima[b-6mmm5025tm]  { right: 12px; }

.anexos-visor-imagem[b-6mmm5025tm] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--tk-branco);
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    cursor: default;
}

@media (max-width: 700px) {
    .anexos-seletor[b-6mmm5025tm] {
        width: 100%;
    }

    .anexos-opcao[b-6mmm5025tm] {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
    }

    .anexos-grade[b-6mmm5025tm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .anexos-arquivo[b-6mmm5025tm] {
        padding: 10px 12px;
        gap: 10px;
    }

    .anexos-visor[b-6mmm5025tm] {
        padding: 60px 8px 12px;
    }

    .anexos-visor-seta[b-6mmm5025tm] {
        width: 40px;
        height: 40px;
    }

    .anexos-visor-anterior[b-6mmm5025tm] { left: 4px; }
    .anexos-visor-proxima[b-6mmm5025tm]  { right: 4px; }
}
/* /Components/Pages/BuscaChamados.razor.rz.scp.css */
/* Busca de chamados antigos: filtros numa linha, depois um cartão por chamado achado. */

.busca-voltar[b-g9oltziobo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
}

.busca-voltar:hover[b-g9oltziobo] {
    text-decoration: underline;
}

.busca-voltar[b-g9oltziobo]  .tk-icone {
    width: 16px;
    height: 16px;
}

.busca-filtros[b-g9oltziobo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.busca-campo-texto[b-g9oltziobo] {
    flex: 1 1 320px;
    min-width: 0;
}

.busca-campo[b-g9oltziobo] {
    flex: 0 0 auto;
}

.busca-filtros label[b-g9oltziobo] {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.busca-filtros select[b-g9oltziobo],
.busca-filtros input[type="date"][b-g9oltziobo],
.busca-entrada[b-g9oltziobo] {
    height: 38px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.busca-filtros select[b-g9oltziobo],
.busca-filtros input[type="date"][b-g9oltziobo] {
    padding: 0 10px;
}

.busca-entrada[b-g9oltziobo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

.busca-entrada:focus-within[b-g9oltziobo],
.busca-filtros select:focus[b-g9oltziobo],
.busca-filtros input[type="date"]:focus[b-g9oltziobo] {
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 1px;
}

.busca-entrada[b-g9oltziobo]  .tk-icone {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.busca-entrada input[b-g9oltziobo] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
}

/* O "x" que limpa o campo (do próprio navegador) também mostra a mãozinha. */
.busca-entrada input[b-g9oltziobo]::-webkit-search-cancel-button {
    cursor: pointer;
}

.busca-botao[b-g9oltziobo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--tk-azul-600);
    border: 0;
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.busca-botao:hover:not(:disabled)[b-g9oltziobo] {
    background: var(--tk-azul-800);
}

.busca-botao:disabled[b-g9oltziobo] {
    cursor: default;
    opacity: .7;
}

.busca-botao[b-g9oltziobo]  .tk-icone {
    width: 16px;
    height: 16px;
}

.busca-resumo[b-g9oltziobo] {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.busca-lista[b-g9oltziobo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.busca-item[b-g9oltziobo] {
    padding: 14px 16px;
}

.busca-item-topo[b-g9oltziobo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.busca-item-titulo[b-g9oltziobo] {
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
}

.busca-item-titulo:hover[b-g9oltziobo] {
    text-decoration: underline;
}

.busca-numero[b-g9oltziobo] {
    margin-right: 4px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.busca-status[b-g9oltziobo] {
    flex: 0 0 auto;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
}

.busca-status-1[b-g9oltziobo] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.busca-status-2[b-g9oltziobo] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.busca-status-3[b-g9oltziobo] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.busca-status-4[b-g9oltziobo] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.busca-meta[b-g9oltziobo] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.busca-trecho[b-g9oltziobo] {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* A resposta do suporte num chamado já resolvido: é onde está a solução. */
.busca-solucao[b-g9oltziobo] {
    padding: 8px 10px;
    background: var(--tk-cinza-100);
    border-left: 3px solid #13804F;
    border-radius: 0 var(--tk-raio-p) var(--tk-raio-p) 0;
}
/* /Components/Pages/CartaoReuniao.razor.rz.scp.css */
.rn[b-q8umtodb11] {
    width: 100%;
    min-width: 260px;
    padding: 2px 0 6px;
}

.rn-topo[b-q8umtodb11] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rn-selo[b-q8umtodb11] {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 10px;
}

.rn-selo[b-q8umtodb11]  .tk-icone {
    width: 20px;
    height: 20px;
}

.rn-titulos[b-q8umtodb11] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rn-titulos small[b-q8umtodb11] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tk-cinza-500);
}

.rn-titulo[b-q8umtodb11] {
    font-size: 15px;
    line-height: 1.25;
    word-break: break-word;
}

.rn-quando[b-q8umtodb11] {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.rn-linha[b-q8umtodb11] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13px;
    word-break: break-word;
}

.rn-linha[b-q8umtodb11]  .tk-icone {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--tk-cinza-500);
}

.rn-obs[b-q8umtodb11] {
    margin: 0 0 8px;
    max-height: 90px;
    overflow-y: auto;
    font-size: 13px;
    white-space: pre-line;
    word-break: break-word;
}

.rn-convidados[b-q8umtodb11] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 8px 0 10px;
    padding: 8px 0 0;
    list-style: none;
    border-top: 1px solid rgba(11, 36, 71, .14);
}

.rn-convidados li[b-q8umtodb11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
}

.rn-estado[b-q8umtodb11] {
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tk-cinza-500);
    background: color-mix(in srgb, var(--tk-branco) 70%, transparent);
    border-radius: 999px;
}

.rn-estado-vai[b-q8umtodb11] {
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
}

.rn-estado-nao[b-q8umtodb11] {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
}

.rn-acoes[b-q8umtodb11] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* Os botões ficam juntos, pequenos e grudados na direita (se faltar espaço, descem e continuam à direita). */
.rn-botoes[b-q8umtodb11] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

.rn-botao[b-q8umtodb11] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: 8px;
    cursor: pointer;
}

.rn-botao:hover:not(:disabled)[b-q8umtodb11] {
    border-color: var(--tk-azul-600);
}

.rn-botao:disabled[b-q8umtodb11] {
    opacity: .55;
    cursor: default;
}

/* Mesmo azul vivo do botão "Nova conversa". */
.rn-botao-primario[b-q8umtodb11] {
    color: #fff;
    background: #2563EB;
    border-color: #2563EB;
}

.rn-botao-primario:hover:not(:disabled)[b-q8umtodb11] {
    background: #1D4ED8;
    border-color: #1D4ED8;
}

.rn-botao-perigo[b-q8umtodb11] {
    color: #fff;
    background: #C62828;
    border-color: #C62828;
}

.rn-botao-perigo-contorno[b-q8umtodb11] {
    color: var(--tk-vermelho-texto);
    border-color: var(--tk-vermelho-borda);
}

.rn-aviso[b-q8umtodb11] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.rn-aviso-ok[b-q8umtodb11] {
    color: var(--tk-verde-texto);
}

.rn-aviso[b-q8umtodb11]  .tk-icone {
    width: 15px;
    height: 15px;
}

/* Reunião cancelada: o conteúdo fica riscado e esmaecido. */
.rn-cancelada .rn-titulo[b-q8umtodb11],
.rn-cancelada .rn-quando[b-q8umtodb11] {
    text-decoration: line-through;
}

.rn-cancelada[b-q8umtodb11] {
    opacity: .7;
}

.rn-cancelada .rn-selo[b-q8umtodb11] {
    background: #8794AB;
}
/* /Components/Pages/Chamados.razor.rz.scp.css */
/* O cartão do título fica por cima: os indicadores sobem "para dentro" dele ao esconder e descem "de dentro" dele ao mostrar. */
.tk-titulo-pagina[b-gdqe739h76] {
    z-index: 2;
}

.chamados-topo-acoes[b-gdqe739h76] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Botão que esconde ou mostra os indicadores. */
.chamados-kpis-botao[b-gdqe739h76] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: color-mix(in srgb, var(--tk-branco) 70%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--tk-transicao), border-color var(--tk-transicao);
}

.chamados-kpis-botao:hover[b-gdqe739h76] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

/* "Buscar chamados" é um link com o mesmo visual do botão "Indicadores". */
.chamados-buscar[b-gdqe739h76] {
    text-decoration: none;
}

.chamados-kpis-botao[b-gdqe739h76]  .tk-icone {
    width: 16px;
    height: 16px;
    transition: transform .4s ease;
}

.chamados-kpis-botao-fechado[b-gdqe739h76]  .tk-icone {
    transform: rotate(180deg);
}

/*
   Esconder/mostrar com animação: a altura anima de 1fr para 0fr (grid) e os cartões sobem (ou descem) ao mesmo tempo.
   O "miolo" recorta o que passa da altura; o padding/margem de 4px só evita cortar a sombra dos cartões.
*/
.chamados-kpis-area[b-gdqe739h76] {
    display: grid;
    grid-template-rows: 1fr;
    margin-bottom: 18px;
    transition: grid-template-rows .45s ease, margin-bottom .45s ease;
    /* O site.css zera todas as transições quando o Windows está com "efeitos de animação" desligados (RDP, por exemplo).
       Esconder/mostrar é uma animação pedida de propósito, então ela mantém a duração mesmo assim. */
    transition-duration: .45s !important;
}

.chamados-kpis-ocultos[b-gdqe739h76] {
    grid-template-rows: 0fr;
    margin-bottom: 0;
}

.chamados-kpis-miolo[b-gdqe739h76] {
    min-height: 0;
    padding: 4px;
    margin: -4px;
    overflow: hidden;
}

.chamados-kpis-ocultos .chamados-kpis[b-gdqe739h76] {
    transform: translateY(-100%) scale(.96);
    opacity: 0;
}

/* Linha de cartões de indicador (KPI) no topo da lista. O número de colunas (--colunas) vem do js/grade-equilibrada.js, que
   deixa as linhas com a mesma quantidade de cartões; sem o script, cai no "auto-fit". */
.chamados-kpis[b-gdqe739h76] {
    display: grid;
    grid-template-columns: repeat(var(--colunas, auto-fit), minmax(180px, 210px));
    justify-content: center;   /* cartões mais estreitos, centralizados na linha */
    gap: 14px;
    transition: transform .45s ease, opacity .35s ease;
    transition-duration: .45s, .35s !important;   /* veja o comentário em .chamados-kpis-area */
}

@media (max-width: 700px) {
    .chamados-kpis-area[b-gdqe739h76] {
        margin-bottom: 14px;
    }

    .chamados-kpis-area.chamados-kpis-ocultos[b-gdqe739h76] {
        margin-bottom: 0;
    }

    .chamados-kpis[b-gdqe739h76] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: normal;
        gap: 10px;
    }
}

.chamado-numero[b-gdqe739h76] {
    display: inline-block;
    padding: 2px 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tk-azul-texto, var(--tk-azul-800));
    background: var(--tk-azul-100);
    border-radius: 8px;
}

/* Botão (olho) que abre os detalhes do chamado, na primeira coluna da lista. */
.chamado-detalhes[b-gdqe739h76] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: 50%;
    transition: background var(--tk-transicao), color var(--tk-transicao), border-color var(--tk-transicao), transform var(--tk-transicao);
}

.chamado-detalhes:hover[b-gdqe739h76] {
    color: #fff;
    background: var(--tk-azul-600);
    border-color: var(--tk-azul-600);
    transform: scale(1.1);
}

.chamado-detalhes[b-gdqe739h76]  .tk-icone {
    width: 18px;
    height: 18px;
}

/* Bolinha colorida da prioridade, antes do nome. */
.chamado-cor[b-gdqe739h76] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}

/* Status do chamado (1 = Aberto, 2 = Em Atendimento, 3 = Resolvido, 4 = Encerrado). */
.chamado-status-1[b-gdqe739h76] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.chamado-status-2[b-gdqe739h76] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.chamado-status-3[b-gdqe739h76] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.chamado-status-4[b-gdqe739h76] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

/* Na lista, o status ganha uma bolinha colorida na frente e uma borda fina da cor dele, com texto em negrito (destaque discreto). */
.chamado-status-destaque[b-gdqe739h76] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid currentColor;
}

.chamado-status-destaque[b-gdqe739h76]::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
}

.chamado-status-destaque.chamado-status-1[b-gdqe739h76] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.chamado-status-destaque.chamado-status-2[b-gdqe739h76] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.chamado-status-destaque.chamado-status-3[b-gdqe739h76] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.chamado-status-destaque.chamado-status-4[b-gdqe739h76] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }
/* Prazo de SLA vencido. */
.chamado-vencido[b-gdqe739h76] {
    font-weight: 600;
    color: var(--tk-erro);
}

/* Resolvido dentro do prazo. */
.chamado-no-prazo[b-gdqe739h76] {
    font-weight: 600;
    color: var(--tk-verde-texto);
}

/* O avatar é um bloco (display:grid), então o "centralizar texto" da coluna não o move: o span que o envolve centraliza. */
.chamado-foto-centro[b-gdqe739h76] {
    display: flex;
    justify-content: center;
}

.chamado-responsavel[b-gdqe739h76] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    font-weight: 500;
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100);
    border-radius: 999px;
}

/* Ninguém assumiu: etiqueta tracejada, pedindo para alguém pegar. */
.chamado-sem-responsavel[b-gdqe739h76] {
    display: inline-block;
    padding: 3px 12px;
    font-size: 12.5px;
    color: var(--tk-cinza-500);
    border: 1px dashed var(--tk-cinza-300);
    border-radius: 999px;
}

/* ------------------------------ Etiquetas da grade ------------------------------ */

/* Prioridade: bolinha, fundo e borda saem da cor cadastrada (variável --cor, vinda do chamado). */
.chamado-prio[b-gdqe739h76] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--cor) 55%, var(--tk-texto));
    background: color-mix(in srgb, var(--cor) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor) 38%, transparent);
    border-radius: 999px;
}

.chamado-prio i[b-gdqe739h76] {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--cor);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent);
}

/* Tipo do chamado (Incidente, Requisição...). */
.chamado-tag[b-gdqe739h76] {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-700);
    background: var(--tk-cinza-100);
    border-radius: 6px;
}

/* Datas de limite: etiqueta neutra; vermelha com relógio se venceu, verde com visto se foi cumprida no prazo. */
.chamado-prazo[b-gdqe739h76] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--tk-cinza-700);
    background: var(--tk-cinza-100);
    border-radius: 8px;
}

.chamado-prazo.chamado-vencido[b-gdqe739h76] {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
}

.chamado-prazo.chamado-no-prazo[b-gdqe739h76] {
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
}

.chamado-prazo[b-gdqe739h76]  .tk-icone {
    width: 14px;
    height: 14px;
}

/* ------------------------------ Grade de chamados ------------------------------ */

.tk-cartao[b-gdqe739h76]  .grade-chamados {
    --dxbl-grid-h-line-color: var(--tk-azul-100);
    --dxbl-grid-v-line-color: transparent;
    --dxbl-grid-hover-bg: var(--tk-azul-50);
    overflow: hidden;
    border: 1px solid var(--tk-azul-100);
    border-radius: 14px;
}

/* Cabeçalho: mesmas palavras de sempre (sem maiúsculas), com um fundo em degradê azul e um traço mais forte embaixo. */
.tk-cartao[b-gdqe739h76]  .grade-chamados .dxbl-grid-header-row > th {
    font-weight: 600;
    color: var(--tk-azul-900);
    background: linear-gradient(180deg, var(--tk-azul-50), var(--tk-azul-100));
    border-bottom: 2px solid var(--tk-azul-200);
}

/* Faixa à esquerda com a cor da prioridade (a linha selecionada troca para o azul do site). */
.tk-cartao[b-gdqe739h76]  .grade-chamados tr.chamado-linha > td:first-child {
    box-shadow: inset 4px 0 0 var(--cor-prio, transparent);
}

.tk-cartao[b-gdqe739h76]  .grade-chamados tr.chamado-linha.tk-linha-selecionada > td:first-child {
    box-shadow: inset 4px 0 0 var(--tk-azul-600);
}

/* Prazo vencido: a linha inteira ganha um tom avermelhado bem leve. */
.tk-cartao[b-gdqe739h76]  .grade-chamados tr.chamado-linha-vencida:not(.tk-linha-selecionada) > td {
    background-color: color-mix(in srgb, var(--tk-erro) 5%, var(--tk-branco));
}

.tk-cartao[b-gdqe739h76]  .grade-chamados tr.chamado-linha:not(.tk-linha-selecionada):hover > td {
    background-color: var(--tk-azul-50);
}

/* O título do chamado se destaca do resto da linha. */
.tk-cartao[b-gdqe739h76]  .grade-chamados tbody > tr > td:nth-child(3) {
    font-weight: 600;
    color: var(--tk-azul-900);
}
/* /Components/Pages/ChatConversa.razor.rz.scp.css */
/* O painel da conversa aberta: cabeçalho, mensagens (rolam) e campo de escrever. */
.cv[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.cv-erro[b-3k26isf6lx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

/* ---------------------------------------------------------------- Cabeçalho */

.cv-topo[b-3k26isf6lx] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--tk-branco);
    border-bottom: 1px solid var(--cv-borda, var(--tk-cinza-200));
}

/* O cabeçalho todo (foto, nome e subtítulo) é um botão que abre o painel de dados da conversa. */
.cv-topo-info[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 8px;
    font: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.cv-topo-info:hover[b-3k26isf6lx] {
    background: var(--tk-cinza-100);
}

.cv-topo-texto[b-3k26isf6lx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cv-topo-nome[b-3k26isf6lx] {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-texto);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cv-topo-sub[b-3k26isf6lx] {
    overflow: hidden;
    font-size: 12.5px;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Voltar para a lista: só em telas estreitas. */
.cv-voltar[b-3k26isf6lx] {
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cv-voltar:hover[b-3k26isf6lx] {
    background: var(--tk-cinza-100);
}

/* ---------------------------------------------------------------- Mensagens */

.cv-mensagens[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    padding: 16px 24px;
    overflow-x: hidden;   /* a setinha de "arrastar para responder" começa fora da tela e não pode criar rolagem lateral */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-cinza-300) transparent;
}

.cv-mensagens[b-3k26isf6lx]::-webkit-scrollbar {
    width: 6px;
}

.cv-mensagens[b-3k26isf6lx]::-webkit-scrollbar-thumb {
    background: var(--tk-cinza-300);
    border-radius: 999px;
}

/* Separador do dia ("Hoje", "Ontem", "12/10/2026"): etiqueta branca discreta no meio. */
.cv-dia[b-3k26isf6lx] {
    display: flex;
    justify-content: center;
    margin: 12px 0 6px;
}

.cv-dia span[b-3k26isf6lx] {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-500);
    background: var(--tk-branco);
    border: 1px solid var(--cv-borda, var(--tk-cinza-200));
    border-radius: 999px;
}

.cv-linha[b-3k26isf6lx] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.cv-linha-minha[b-3k26isf6lx] {
    flex-direction: row-reverse;
}

/* ---------------------------------------------------------------- Arrastar a mensagem para responder (celular, js/conversas.js) */

/* A linha volta para o lugar com animação ao soltar o dedo; enquanto arrasta, acompanha o dedo sem atraso. */
.cv-linha[b-3k26isf6lx] {
    position: relative;
    transition: transform .2s ease;
}

.cv-linha-arrastando[b-3k26isf6lx] {
    transition: none;
}

/* A setinha de responder (criada pelo JavaScript) aparece do lado de onde a mensagem saiu. */
.cv[b-3k26isf6lx]  .cv-arrastar-icone {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--tk-cinza-600);
    background: rgba(17, 24, 39, .08);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease, background .15s ease, color .15s ease;
    pointer-events: none;
}

.cv[b-3k26isf6lx]  .cv-arrastar-icone-esq {
    left: -44px;
}

.cv[b-3k26isf6lx]  .cv-arrastar-icone-dir {
    right: -44px;
}

/* Passou do limite: soltar o dedo agora responde. */
.cv[b-3k26isf6lx]  .cv-arrastar-icone-pronto {
    color: #fff;
    background: var(--tk-azul-600);
}

/* No toque, o navegador cuida só da rolagem vertical: o movimento na horizontal fica para o arrasto. */
@media (pointer: coarse) {
    .cv-linha[b-3k26isf6lx] {
        touch-action: pan-y;
    }
}

.cv-avatar[b-3k26isf6lx] {
    flex: none;
}

.cv-balao[b-3k26isf6lx] {
    position: relative;
    min-width: 0;
    max-width: min(72%, 640px);
    padding: 8px 12px 5px;
    background: var(--tk-branco);
    border: 1px solid var(--cv-borda-forte, #DCDFE5);   /* borda visível: o branco sozinho some sobre o fundo cinza claro */
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
}

/* As suas mensagens: índigo claro, à direita. */
.cv-balao-minha[b-3k26isf6lx] {
    background: var(--tk-azul-100);
    border-color: transparent;
    border-radius: 18px 18px 6px 18px;
    box-shadow: none;
}

.cv-autor[b-3k26isf6lx] {
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.cv-texto[b-3k26isf6lx] {
    overflow-wrap: anywhere;
    font-size: 14.5px;
    font-weight: 500;   /* um pouco mais de peso que o normal: a letra fina fica clara demais no balão */
    line-height: 1.45;
    color: var(--tk-texto);
}

.cv-rodape[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 1px;
}

.cv-hora[b-3k26isf6lx] {
    font-size: 11px;
    color: var(--tk-cinza-400);
}

.cv-balao-minha .cv-hora[b-3k26isf6lx],
.cv-balao-minha .cv-visto[b-3k26isf6lx] {
    color: var(--cv-balao-meta, #6B6FA8);   /* cinza-índigo: legível sobre o balão índigo claro */
}

.cv-visto[b-3k26isf6lx] {
    display: inline-flex;
    color: var(--tk-cinza-500);
}

.cv-visto[b-3k26isf6lx]  .tk-icone {
    width: 16px;
    height: 16px;
}

.cv-visto-sim[b-3k26isf6lx],
.cv-balao-minha .cv-visto-sim[b-3k26isf6lx] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* Aviso do topo da lista: "Carregando mensagens..." (ou o botão para carregar). Altura fixa para a rolagem não pular. */
.cv-antigas[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.cv-antigas-girando[b-3k26isf6lx] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--tk-azul-100, #D6E6FB);
    border-top-color: var(--tk-azul-600);
    border-radius: 50%;
    animation: cv-girar-b-3k26isf6lx .8s linear infinite;
}

@keyframes cv-girar-b-3k26isf6lx {
    to { transform: rotate(360deg); }
}

/* O giro é o próprio aviso de carregando: continua mesmo com "reduzir animações" ligado no Windows. */
@media (prefers-reduced-motion: reduce) {
    .cv-antigas-girando[b-3k26isf6lx] {
        animation-duration: .8s !important;
        animation-iteration-count: infinite !important;
    }
}

.cv-antigas-botao[b-3k26isf6lx] {
    min-height: 30px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
    cursor: pointer;
}

.cv-antigas-botao:hover[b-3k26isf6lx] {
    background: var(--tk-azul-100, #D6E6FB);
}

/* ---------------------------------------------------------------- Campo de escrever */

.cv-compositor[b-3k26isf6lx] {
    flex: none;
    padding: 12px 16px 14px;
    background: var(--tk-branco);
    border-top: 1px solid var(--cv-borda, var(--tk-cinza-200));
}

.cv-compositor-linha[b-3k26isf6lx] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.cv-campo[b-3k26isf6lx] {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    max-height: 160px;
    padding: 10px 16px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--tk-texto);
    resize: none;
    background: var(--tk-cinza-100);   /* o fundo cinza já mostra onde é o campo, sem precisar de borda escura */
    border: 1.5px solid var(--cv-borda, var(--tk-cinza-200));
    border-radius: 22px;
    outline: none;
    transition: background var(--tk-transicao), border-color var(--tk-transicao), box-shadow var(--tk-transicao);
    field-sizing: content;   /* cresce sozinho com o texto, até o limite (navegadores sem suporte ficam com uma linha e rolagem) */
}

.cv-campo[b-3k26isf6lx]::placeholder {
    color: var(--tk-cinza-500);
}

.cv-campo:focus[b-3k26isf6lx] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-500);
    box-shadow: 0 0 0 3px var(--tk-azul-100);
}

.cv-enviar[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    background: var(--tk-azul-600);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--tk-transicao), box-shadow var(--tk-transicao);
}

.cv-enviar:hover:not(:disabled)[b-3k26isf6lx] {
    background: var(--tk-azul-700);
    box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

.cv-enviar:disabled[b-3k26isf6lx] {
    color: var(--tk-cinza-400);
    background: var(--tk-cinza-200);
    cursor: not-allowed;
}

.cv-enviar[b-3k26isf6lx]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* ---------------------------------------------------------------- Avisos do sistema (entrou, saiu, removido...) */

.cv-sistema[b-3k26isf6lx] {
    display: flex;
    justify-content: center;
    margin: 6px 0;
}

.cv-sistema span[b-3k26isf6lx] {
    max-width: min(86%, 460px);
    padding: 4px 14px;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
    color: var(--tk-cinza-600);
    background: rgba(17, 24, 39, .06);   /* avisos do sistema em cinza preenchido, sem borda: não se confundem com mensagens nem com o dia (branco) */
    border-radius: 999px;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- "Digitando..." */

.cv-topo-sub-digitando[b-3k26isf6lx] {
    font-weight: 600;
    color: var(--cv-digitando, #16A34A);
}

/* Balão com três pontinhos que sobem e descem, no fim da conversa. */
.cv-balao-digitando[b-3k26isf6lx] {
    padding: 8px 14px;
}

.cv-pontos[b-3k26isf6lx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.cv-pontos i[b-3k26isf6lx] {
    display: block;
    width: 7px;
    height: 7px;
    background: var(--tk-cinza-500);
    border-radius: 50%;
    animation: cv-pulo-b-3k26isf6lx 1.2s ease-in-out infinite;
}

.cv-pontos i:nth-child(2)[b-3k26isf6lx] {
    animation-delay: .18s;
}

.cv-pontos i:nth-child(3)[b-3k26isf6lx] {
    animation-delay: .36s;
}

@keyframes cv-pulo-b-3k26isf6lx {
    0%, 60%, 100% { opacity: .45; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-4px); }
}

/* A animação é o próprio aviso de "digitando": continua mesmo com "reduzir animações" ligado no Windows. */
@media (prefers-reduced-motion: reduce) {
    .cv-pontos i[b-3k26isf6lx] {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ---------------------------------------------------------------- Responder, editar e apagar */

/* Mensagem citada dentro de uma resposta: faixa colorida à esquerda, nome e começo do texto. Clicar leva até a original. */
.cv-citacao[b-3k26isf6lx] {
    margin: 2px 0 6px;
    padding: 5px 10px;
    cursor: pointer;
    background: rgba(17, 24, 39, .05);
    border-left: 3px solid #0D9488;
    border-radius: 8px;
}

.cv-citacao:hover[b-3k26isf6lx] {
    background: rgba(17, 24, 39, .09);
}

.cv-citacao-minha[b-3k26isf6lx] {
    border-left-color: var(--tk-azul-600);
}

.cv-citacao strong[b-3k26isf6lx] {
    display: block;
    font-size: 12px;
    color: #0D9488;
}

.cv-citacao-minha strong[b-3k26isf6lx] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.cv-citacao span[b-3k26isf6lx] {
    display: -webkit-box;
    font-size: 13px;
    color: var(--tk-cinza-600);
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cv-citacao-apagada span[b-3k26isf6lx] {
    font-style: italic;
}

/* Mensagem apagada para todos: sem conteúdo, só o aviso. */
.cv-balao-apagada[b-3k26isf6lx] {
    background: var(--tk-cinza-50, var(--tk-cinza-50));
    border-style: dashed;
}

.cv-texto-apagada[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
    color: var(--tk-cinza-500);
}

.cv-texto-apagada[b-3k26isf6lx]  .tk-icone {
    flex: none;
    width: 15px;
    height: 15px;
}

.cv-editada[b-3k26isf6lx] {
    font-size: 11px;
    font-style: italic;
    color: var(--tk-cinza-500);
}

/* ---------------------------------------------------------------- Reações (emojis pendurados na borda de baixo do balão) */

/* Espaço para os emojis, que ficam quase todos para fora do balão. */
.cv-linha-reagida[b-3k26isf6lx] {
    margin-bottom: 20px;
}

.cv-reacoes[b-3k26isf6lx] {
    position: absolute;
    bottom: -20px;
    left: 8px;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.cv-balao-minha .cv-reacoes[b-3k26isf6lx] {
    right: 8px;
    left: auto;
}

.cv-reacao[b-3k26isf6lx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 7px;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .12);
    cursor: pointer;
    transition: transform .12s ease;
}

.cv-reacao:hover[b-3k26isf6lx],
.cv-reacao:focus-visible[b-3k26isf6lx] {
    transform: scale(1.08);
}

/* O emoji surge com um "pulinho" (cresce passando do tamanho e assenta); o próprio emoji dá uma sacudidinha. Toca quando o botão é criado:
   reação nova ou quantidade que mudou. Quem pede menos movimento no sistema não vê a animação. */
.cv-reacao[b-3k26isf6lx] {
    animation: cv-reacao-surge-b-3k26isf6lx .38s cubic-bezier(.2, 1.4, .4, 1) both;
}

.cv-reacao-emoji[b-3k26isf6lx] {
    display: inline-block;
    animation: cv-reacao-emoji-b-3k26isf6lx .5s ease-out .05s both;
}

@keyframes cv-reacao-surge-b-3k26isf6lx {
    0%   { transform: scale(.2) translateY(6px); opacity: 0; }
    60%  { transform: scale(1.3) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes cv-reacao-emoji-b-3k26isf6lx {
    0%   { transform: scale(.6) rotate(-25deg); }
    55%  { transform: scale(1.25) rotate(14deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cv-reacao[b-3k26isf6lx],
    .cv-reacao-emoji[b-3k26isf6lx] {
        animation: none;
    }
}

/* A reação da própria pessoa: azul claro (clicar nela tira a reação). */
.cv-reacao-minha[b-3k26isf6lx] {
    background: var(--tk-azul-100);
    border-color: var(--tk-azul-600);
}

.cv-reacao-qtd[b-3k26isf6lx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

/* Botões ao lado do balão (responder, editar, apagar): só aparecem ao passar o mouse. */
.cv-acoes[b-3k26isf6lx] {
    display: flex;
    flex: none;
    align-items: center;
    align-self: center;
    gap: 4px;
}

.cv-acao[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}

.cv-acao[b-3k26isf6lx]  .tk-icone {
    width: 15px;
    height: 15px;
}

.cv-linha:hover .cv-acao[b-3k26isf6lx],
.cv-acao:focus-visible[b-3k26isf6lx] {
    opacity: 1;
}

.cv-acao:hover[b-3k26isf6lx] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.cv-acao-perigo:hover[b-3k26isf6lx] {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

/* Telas de toque: nada de botões ao lado do balão; segurar o dedo na mensagem abre o menu (.cv-folha, abaixo). */
@media (pointer: coarse) {
    .cv-acoes[b-3k26isf6lx] {
        display: none;
    }

    /* Sem o "selecionar texto" do sistema no toque longo (o menu tem "Copiar texto"). */
    .cv-balao[data-msg][b-3k26isf6lx] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Mensagem com o menu de ações aberto. */
.cv-balao-selecionado[b-3k26isf6lx] {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .45);
}

/* Menu de ações da mensagem: folha que sobe de baixo da tela. */
.cv-folha-fundo[b-3k26isf6lx] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(8, 18, 33, .45);
}

.cv-folha[b-3k26isf6lx] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin: 0 auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--tk-branco);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(11, 36, 71, .25);
    animation: cv-folha-sobe-b-3k26isf6lx .18s ease-out;
}

@keyframes cv-folha-sobe-b-3k26isf6lx {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.cv-folha-previa[b-3k26isf6lx] {
    margin: 4px 10px 6px;
    padding-bottom: 8px;
    overflow: hidden;
    font-size: 13px;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--tk-cinza-100);
}

.cv-folha-item[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.cv-folha-item:active[b-3k26isf6lx],
.cv-folha-item:hover[b-3k26isf6lx] {
    background: var(--tk-azul-50);
}

.cv-folha-item[b-3k26isf6lx]  .tk-icone {
    width: 22px;
    height: 22px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.cv-folha-item-perigo[b-3k26isf6lx],
.cv-folha-item-perigo[b-3k26isf6lx]  .tk-icone {
    color: var(--tk-erro);
}

/* Ao chegar numa mensagem pelo clique na citação, o balão pisca em amarelo suave. */
.cv-linha.chat-destaque .cv-balao[b-3k26isf6lx] {
    animation: cv-pisca-b-3k26isf6lx 1.6s ease;
}

@keyframes cv-pisca-b-3k26isf6lx {
    0%, 55% { box-shadow: 0 0 0 4px rgba(245, 190, 40, .55); }
    100%    { box-shadow: 0 1px 1px rgba(11, 36, 71, .05); }
}

@media (prefers-reduced-motion: reduce) {
    .cv-linha.chat-destaque .cv-balao[b-3k26isf6lx] {
        animation-duration: 1.6s !important;
    }
}

/* Barra "Respondendo a..." / "Editando mensagem" em cima do campo. */
.cv-barra[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 6px 8px 6px 12px;
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100);
    border-left: 3px solid var(--tk-azul-600);
    border-radius: 10px;
}

.cv-barra-edicao[b-3k26isf6lx] {
    background: var(--tk-alerta-fundo);
    border-color: var(--tk-ambar-borda);
    border-left-color: #E0A100;
}

.cv-barra-texto[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
}

.cv-barra-texto strong[b-3k26isf6lx] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.cv-barra-edicao .cv-barra-texto strong[b-3k26isf6lx] {
    color: var(--tk-ambar-texto);
}

.cv-barra-texto span[b-3k26isf6lx] {
    overflow: hidden;
    color: var(--tk-cinza-600);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cv-barra-fechar[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cv-barra-fechar:hover[b-3k26isf6lx] {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

.cv-barra-fechar[b-3k26isf6lx]  .tk-icone {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------- Fotos e documentos dentro da mensagem */

.cv-balao-anexos[b-3k26isf6lx] {
    width: min(100%, 340px);
    max-width: min(75%, 340px);
}

.cv-fotos[b-3k26isf6lx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    margin: 0 0 4px;
}

.cv-foto[b-3k26isf6lx] {
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--tk-cinza-100);
    border: none;
    border-radius: 12px;
    cursor: zoom-in;
    aspect-ratio: 1;
}

.cv-foto img[b-3k26isf6lx] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Foto sozinha: aparece inteira (sem cortar), com limite de altura. */
.cv-fotos-uma[b-3k26isf6lx] {
    grid-template-columns: 1fr;
}

.cv-fotos-uma .cv-foto[b-3k26isf6lx] {
    aspect-ratio: auto;
    min-height: 90px;
}

.cv-fotos-uma .cv-foto img[b-3k26isf6lx] {
    height: auto;
    max-height: 340px;
    object-fit: contain;
}

.cv-doc[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 8px 10px;
    color: var(--tk-texto);
    text-decoration: none;
    background: color-mix(in srgb, var(--tk-branco) 65%, transparent);
    border: 1px solid rgba(11, 36, 71, .12);
    border-radius: 10px;
}

.cv-doc:hover[b-3k26isf6lx] {
    background: color-mix(in srgb, var(--tk-branco) 90%, transparent);
}

.cv-doc-selo[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 8px;
}

.cv-doc-texto[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.cv-doc-nome[b-3k26isf6lx] {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cv-doc-meta[b-3k26isf6lx] {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

.cv-doc-baixar[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.cv-doc-baixar[b-3k26isf6lx]  .tk-icone {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- Menu "+" e documentos escolhidos */

.cv-anexar[b-3k26isf6lx] {
    position: relative;
    flex: none;
}

.cv-anexar-botao[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cv-anexar-botao:hover[b-3k26isf6lx],
.cv-anexar-botao[aria-expanded="true"][b-3k26isf6lx] {
    background: var(--tk-azul-100, var(--tk-azul-100));
}

.cv-anexar-botao[b-3k26isf6lx]  .tk-icone {
    width: 24px;
    height: 24px;
}

/* Clicar fora do menu fecha. */
.cv-menu-fundo[b-3k26isf6lx] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.cv-menu[b-3k26isf6lx] {
    position: absolute;
    bottom: 50px;
    left: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    padding: 6px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 36, 71, .18);
}

.cv-menu-item[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    font: inherit;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.cv-menu-item:hover[b-3k26isf6lx] {
    background: var(--tk-azul-50);
}

.cv-menu-item small[b-3k26isf6lx] {
    display: block;
    font-size: 12px;
    color: var(--tk-cinza-500);
}

.cv-menu-icone[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    border-radius: 50%;
}

.cv-menu-icone-fotos[b-3k26isf6lx] {
    background: #7F5AF0;
}

.cv-menu-icone-docs[b-3k26isf6lx] {
    background: #1677E5;
}

.cv-menu-icone-reuniao[b-3k26isf6lx] {
    background: #1F9D6B;
}

/* O balão do cartão da reunião tem largura própria (o texto das mensagens se ajusta ao conteúdo, o cartão não). */
.cv-balao-reuniao[b-3k26isf6lx] {
    width: min(100%, 360px);
}

/* Janela "Nova reunião". */
.cv-rn-linha[b-3k26isf6lx] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
}

.cv-rn-input[b-3k26isf6lx] {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.cv-rn-texto[b-3k26isf6lx] {
    height: auto;
    padding: 6px 8px;
    resize: vertical;
}

@media (max-width: 520px) {
    .cv-rn-linha[b-3k26isf6lx] {
        grid-template-columns: 1fr 1fr;
    }

    .cv-rn-linha > :first-child[b-3k26isf6lx] {
        grid-column: 1 / -1;
    }
}

.cv-menu-icone[b-3k26isf6lx]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* O seletor nativo de arquivos fica escondido (o menu o aciona). */
.cv-entrada-documentos[b-3k26isf6lx] {
    display: none;
}

.cv-pendentes[b-3k26isf6lx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.cv-pendente[b-3k26isf6lx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 4px 4px 10px;
    font-size: 13px;
    color: var(--tk-azul-800);
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
}

.cv-pendente[b-3k26isf6lx]  .tk-icone {
    flex: none;
    width: 16px;
    height: 16px;
}

.cv-pendente-nome[b-3k26isf6lx] {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 220px;
}

.cv-pendente small[b-3k26isf6lx] {
    color: var(--tk-cinza-500);
}

.cv-pendente button[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--tk-azul-800);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.cv-pendente button:hover[b-3k26isf6lx] {
    background: rgba(11, 36, 71, .12);
}

.cv-pendente button[b-3k26isf6lx]  .tk-icone {
    width: 12px;
    height: 12px;
}

/* ---------------------------------------------------------------- Editor de fotos (tela cheia) */

.ef[b-3k26isf6lx] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--tk-branco);
}

.ef-topo[b-3k26isf6lx] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--tk-cinza-200, #D9DEE5);
}

.ef-ferramentas[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ef-separador[b-3k26isf6lx] {
    width: 1px;
    height: 24px;
    margin: 0 6px;
    background: var(--tk-cinza-200, #D9DEE5);
}

.ef-botao[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--tk-azul-900);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.ef-botao:hover:not(:disabled)[b-3k26isf6lx] {
    background: var(--tk-azul-50);
}

.ef-botao:disabled[b-3k26isf6lx] {
    color: var(--tk-cinza-300, #B9C1CC);
    cursor: default;
}

.ef-botao-ativo[b-3k26isf6lx],
.ef-botao-ativo:hover:not(:disabled)[b-3k26isf6lx] {
    color: #fff;
    background: var(--tk-azul-600);
}

.ef-botao[b-3k26isf6lx]  .tk-icone {
    width: 22px;
    height: 22px;
}

.ef-cor[b-3k26isf6lx] {
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--cor);
    border: 2px solid var(--tk-cinza-300, #B9C1CC);
    border-radius: 50%;
    cursor: pointer;
}

.ef-cor-ativa[b-3k26isf6lx] {
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 2px var(--tk-branco), 0 0 0 4px var(--tk-azul-600);
}

/* Botões "A-" e "A+" (tamanho da letra, ferramenta Texto). */
.ef-botao-letra[b-3k26isf6lx] {
    font-size: 16px;
    font-weight: 700;
}

.ef-botao-letra small[b-3k26isf6lx] {
    margin-left: 1px;
    font-size: 11px;
    font-weight: 700;
}

.ef-ponto[b-3k26isf6lx] {
    display: block;
    width: var(--lado);
    height: var(--lado);
    background: currentColor;
    border-radius: 50%;
}

/* A foto ocupa o espaço que sobra, inteira, sem cortar. */
.ef-palco[b-3k26isf6lx] {
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: center;
    padding: 12px;
    overflow: hidden;
    background: var(--tk-cinza-50, var(--tk-cinza-50));
}

.ef-tela[b-3k26isf6lx] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: var(--tk-branco);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(11, 36, 71, .25);
    cursor: crosshair;
    touch-action: none;        /* o dedo desenha em vez de rolar a página */
    user-select: none;
}

.ef-rodape[b-3k26isf6lx] {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--tk-cinza-200, #D9DEE5);
}

.ef-rodape-linha[b-3k26isf6lx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ef-legenda[b-3k26isf6lx] {
    width: min(100%, 620px);
    height: 42px;
    padding: 0 16px;
    font: inherit;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 1.5px solid var(--cv-borda-forte, var(--tk-cinza-300));
    border-radius: 21px;
    outline: none;
}

.ef-legenda:focus[b-3k26isf6lx] {
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 3px var(--tk-azul-100, #D6E6FB);
}

.ef-miniaturas[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ef-mini-caixa[b-3k26isf6lx] {
    position: relative;
    display: inline-flex;
}

.ef-mini[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    background: var(--tk-branco);
    border: 2px solid var(--tk-cinza-300, #B9C1CC);
    border-radius: 8px;
    cursor: pointer;
}

.ef-mini img[b-3k26isf6lx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ef-mini-ativa[b-3k26isf6lx] {
    border-color: var(--tk-azul-600);
}

.ef-mini-mais[b-3k26isf6lx] {
    color: var(--tk-azul-900);
}

.ef-mini-mais[b-3k26isf6lx]  .tk-icone {
    width: 22px;
    height: 22px;
}

.ef-mini-tirar[b-3k26isf6lx] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: #fff;
    background: var(--tk-cinza-600);
    border: 2px solid var(--tk-branco);
    border-radius: 50%;
    cursor: pointer;
}

.ef-mini-tirar:hover[b-3k26isf6lx] {
    background: #C0392B;
}

.ef-mini-tirar[b-3k26isf6lx]  .tk-icone {
    width: 10px;
    height: 10px;
}

.ef-enviar[b-3k26isf6lx] {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #fff;
    background: var(--tk-azul-600);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.ef-enviar:hover:not(:disabled)[b-3k26isf6lx] {
    background: var(--tk-azul-700);
}

.ef-enviar:disabled[b-3k26isf6lx] {
    cursor: wait;
}

.ef-enviar[b-3k26isf6lx]  .tk-icone {
    width: 24px;
    height: 24px;
}

.ef-girando[b-3k26isf6lx] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: var(--tk-branco);
    border-radius: 50%;
    animation: cv-girar-b-3k26isf6lx .8s linear infinite;
}

/* ---------------------------------------------------------------- Foto ampliada */

.fv[b-3k26isf6lx] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 64px 56px 24px;
    background: rgba(8, 18, 33, .92);
    outline: none;
}

.fv-topo[b-3k26isf6lx] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #fff;
}

.fv-titulo[b-3k26isf6lx] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.fv-titulo strong[b-3k26isf6lx] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fv-titulo small[b-3k26isf6lx] {
    color: rgba(255, 255, 255, .7);
}

.fv-botao[b-3k26isf6lx],
.fv-seta[b-3k26isf6lx] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .14);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.fv-botao:hover[b-3k26isf6lx],
.fv-seta:hover[b-3k26isf6lx] {
    background: rgba(255, 255, 255, .28);
}

.fv-seta[b-3k26isf6lx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fv-anterior[b-3k26isf6lx] {
    left: 8px;
}

.fv-proxima[b-3k26isf6lx] {
    right: 8px;
}

.fv-imagem[b-3k26isf6lx] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    object-fit: contain;
}

@media (max-width: 800px) {
    .cv-voltar[b-3k26isf6lx] {
        display: grid;
    }

    .cv-mensagens[b-3k26isf6lx] {
        padding: 12px 10px;
    }

    .cv-balao[b-3k26isf6lx] {
        max-width: 86%;
    }

    .cv-balao-anexos[b-3k26isf6lx] {
        max-width: 86%;
    }


    .ef-topo[b-3k26isf6lx] {
        gap: 4px;
        padding: 6px 8px;
    }

    .ef-botao[b-3k26isf6lx] {
        width: 36px;
        height: 36px;
    }

    .ef-separador[b-3k26isf6lx] {
        margin: 0 2px;
    }

    .fv[b-3k26isf6lx] {
        padding: 60px 8px 16px;
    }

    .fv-seta[b-3k26isf6lx] {
        display: none;
    }
}
/* /Components/Pages/Conversas.razor.rz.scp.css */
/* Com um tema escolhido no menu do perfil (qualquer um menos o padrão), as Conversas seguem as cores do tema como o resto do
   sistema: as variáveis voltam a ser as do <html> ("inherit") em vez do índigo, e as --cv-* saem delas. Fica antes do bloco
   .conv no arquivo, mas vale por cima dele: "html[data-tema-familia] .conv" é mais específico que ".conv". */
html[data-tema-familia] .conv[b-t9tzqytvlo] {
    --tk-azul-950: inherit;
    --tk-azul-900: inherit;
    --tk-azul-800: inherit;
    --tk-azul-700: inherit;
    --tk-azul-600: inherit;
    --tk-azul-500: inherit;
    --tk-azul-200: inherit;
    --tk-azul-100: inherit;
    --tk-azul-50:  inherit;
    --tk-cinza-50:  inherit;
    --tk-cinza-100: inherit;
    --tk-cinza-200: inherit;
    --tk-cinza-300: inherit;
    --tk-cinza-400: inherit;
    --tk-cinza-500: inherit;
    --tk-cinza-600: inherit;
    --tk-texto:     inherit;

    --cv-fundo-chat: color-mix(in srgb, var(--tk-texto) 5%, var(--tk-cinza-50));
    --cv-borda-forte: var(--tk-cinza-300);
    --cv-divisoria: var(--tk-cinza-100);
    --cv-item-hover: var(--tk-cinza-100);
    --cv-item-ativo: var(--tk-azul-50);
    --cv-balao-meta: var(--tk-cinza-500);
}

/* Tela de Conversas: lista à esquerda, conversa à direita. A altura vem do js/chat-chamado.js (esticar), até o fim da janela.

   Visual próprio das conversas (diferente do resto do sistema, de propósito):
   - Fonte Plus Jakarta Sans: moderna, letras abertas e bem espaçadas, muito legível em tamanho pequeno, boa para ler mensagens.
   - Fundo neutro (cinza quase branco, sem tom azulado), poucas bordas e sombras leves: o que chama a atenção são as mensagens.
   - Cor de destaque índigo. Para não reescrever cada regra, a tela troca aqui as variáveis do sistema (--tk-azul-*, --tk-cinza-*,
     --tk-texto): tudo o que está dentro de .conv (a conversa aberta, o cartão da reunião...) passa a usar a paleta nova sozinho.
   As cores próprias da tela ficam nas variáveis --cv-* abaixo. */
.conv[b-t9tzqytvlo] {
    /* Paleta índigo no lugar do azul do sistema (mesmos nomes, outros valores). */
    --tk-azul-950: #1E1B4B;
    --tk-azul-900: #312E81;
    --tk-azul-800: #3730A3;
    --tk-azul-700: #4338CA;
    --tk-azul-600: #4F46E5;   /* destaque */
    --tk-azul-500: #6366F1;
    --tk-azul-200: #C7D2FE;
    --tk-azul-100: #E0E7FF;
    --tk-azul-50:  #EEF2FF;

    /* Cinzas neutros (sem azul). */
    --tk-cinza-50:  #F9FAFB;
    --tk-cinza-100: #F3F4F6;
    --tk-cinza-200: #E5E7EB;
    --tk-cinza-300: #D1D5DB;
    --tk-cinza-400: #9CA3AF;
    --tk-cinza-500: #6B7280;
    --tk-cinza-600: #4B5563;
    --tk-texto:     #111827;

    --cv-fonte: "Plus Jakarta Sans", var(--tk-fonte);
    --cv-fundo-chat: #ECEEF2;        /* fundo da conversa: cinza o bastante para o balão branco se destacar */
    --cv-borda: var(--tk-cinza-200);             /* bordas dos elementos */
    --cv-borda-forte: #D1D5DB;       /* bordas que precisam aparecer mais (campo de escrever) */
    --cv-divisoria: #EEF0F3;         /* divisórias */
    --cv-item-hover: #F3F4F6;
    --cv-item-ativo: #EEF2FF;
    --cv-online: #16A34A;
    --cv-digitando: #16A34A;

    --cv-balao-meta: #6B6FA8;        /* hora/“lida” dentro do balão índigo claro (as minhas mensagens) */

    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    min-height: 380px;
    overflow: hidden;
    font-family: var(--cv-fonte);
    color: var(--tk-texto);
    background: var(--cv-fundo-chat);
    border: 1px solid var(--cv-borda);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
}

/* Botões e campos não herdam a fonte sozinhos. */
.conv[b-t9tzqytvlo]  button,
.conv[b-t9tzqytvlo]  input,
.conv[b-t9tzqytvlo]  textarea {
    font-family: inherit;
}

/* ---------------------------------------------------------------- Lista lateral (branca) */

.conv-lateral[b-t9tzqytvlo] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--tk-branco);
    border-right: 1px solid var(--cv-borda);
}

.conv-lateral-topo[b-t9tzqytvlo] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 16px 14px;
}

.conv-lateral-topo h1[b-t9tzqytvlo] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tk-texto);
}

/* Botão "+ Nova conversa": pílula em azul vivo (mesma intensidade do índigo da tela, mas azul), com o "+" antes do texto. */
.conv-nova[b-t9tzqytvlo] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: #2563EB;
    border: none;
    border-radius: 999px;
    transition: background var(--tk-transicao), box-shadow var(--tk-transicao);
}

.conv-nova:hover[b-t9tzqytvlo] {
    background: #1D4ED8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

.conv-nova:active[b-t9tzqytvlo] {
    background: #1E40AF;
}

.conv-nova:focus-visible[b-t9tzqytvlo] {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

.conv-nova-icone[b-t9tzqytvlo] {
    display: grid;
    flex: none;
    place-items: center;
}

.conv-nova-icone[b-t9tzqytvlo]  .tk-icone {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke-width: 2.6;
}

.conv-nova-texto[b-t9tzqytvlo] {
    white-space: nowrap;
}

/* Versão grande, no convite da primeira conversa. */
.conv-nova-grande[b-t9tzqytvlo] {
    padding: 11px 24px 11px 18px;
    font-size: 15px;
}

.conv-nova-grande .conv-nova-icone[b-t9tzqytvlo]  .tk-icone {
    width: 18px;
    height: 18px;
}

/* Pesquisa: campo cinza, sem borda; ganha borda de destaque ao clicar. */
.conv-busca[b-t9tzqytvlo] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 0 12px;
    color: var(--tk-cinza-400);
    background: var(--tk-cinza-100);
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: background var(--tk-transicao), border-color var(--tk-transicao), box-shadow var(--tk-transicao);
}

.conv-busca:focus-within[b-t9tzqytvlo] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-branco);
    border-color: var(--tk-azul-500);
    box-shadow: 0 0 0 3px var(--tk-azul-100);
}

.conv-busca[b-t9tzqytvlo]  .tk-icone {
    flex: none;
    width: 18px;
    height: 18px;
}

.conv-busca-campo[b-t9tzqytvlo] {
    flex: 1;
    min-width: 0;
    height: 38px;
    font: inherit;
    font-size: 14px;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    outline: none;
}

.conv-busca-campo[b-t9tzqytvlo]::placeholder {
    color: var(--tk-cinza-500);
}

/* O "x" do campo de pesquisa (apagar o que foi digitado) com a mãozinha. */
.conv-busca-campo[b-t9tzqytvlo]::-webkit-search-cancel-button {
    cursor: pointer;
}

.conv-lista[b-t9tzqytvlo] {
    flex: 1;
    min-height: 0;
    padding: 2px 8px 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-cinza-300) transparent;
}

.conv-lista-vazia[b-t9tzqytvlo] {
    padding: 16px;
    text-align: center;
    color: var(--tk-cinza-500);
}

/* Cada conversa é um "cartão" com cantos arredondados, sem linhas entre eles. */
.conv-item[b-t9tzqytvlo] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 2px;
    padding: 10px 10px;
    font: inherit;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--tk-transicao);
}

.conv-item:hover[b-t9tzqytvlo] {
    background: var(--cv-item-hover);
}

/* Conversa aberta: fundo índigo bem claro. */
.conv-item-ativo[b-t9tzqytvlo],
.conv-item-ativo:hover[b-t9tzqytvlo] {
    background: var(--cv-item-ativo);
}

.conv-item-avatar[b-t9tzqytvlo] {
    position: relative;
    flex: none;
}

/* Bolinha verde: a outra pessoa está online (conversa direta). */
.conv-item-online[b-t9tzqytvlo] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: var(--cv-online);
    border: 2px solid var(--tk-branco);
    border-radius: 50%;
}

/* Selo de grupo no canto da foto. */
.conv-item-grupo[b-t9tzqytvlo] {
    position: absolute;
    right: -4px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--tk-cinza-600);
    background: var(--tk-branco);
    border: 1px solid var(--cv-borda);
    border-radius: 50%;
}

.conv-item-grupo[b-t9tzqytvlo]  .tk-icone {
    width: 10px;
    height: 10px;
}

.conv-item-texto[b-t9tzqytvlo] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.conv-item-linha[b-t9tzqytvlo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.conv-item-nome[b-t9tzqytvlo],
.conv-item-previa[b-t9tzqytvlo] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conv-item-nome[b-t9tzqytvlo] {
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-texto);
}

.conv-item-previa[b-t9tzqytvlo] {
    font-size: 13.5px;
    color: var(--tk-cinza-500);
}

/* ---------------------------------------------------------------- Pesquisa de mensagens (resultados abaixo das conversas) */

.conv-secao[b-t9tzqytvlo] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 6px -8px 0;
    padding: 10px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tk-cinza-500);
    background: var(--tk-branco);
    border-top: 1px solid var(--cv-divisoria);
}

.conv-busca-grupo[b-t9tzqytvlo] {
    padding-bottom: 4px;
}

.conv-busca-cab[b-t9tzqytvlo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 4px;
    color: var(--tk-texto);
}

.conv-busca-cab strong[b-t9tzqytvlo] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conv-busca-qtd[b-t9tzqytvlo] {
    flex: none;
    min-width: 20px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border-radius: 999px;
}

.conv-busca-item[b-t9tzqytvlo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 6px 10px 6px 48px;
    font: inherit;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.conv-busca-item:hover[b-t9tzqytvlo] {
    background: var(--cv-item-hover);
}

.conv-busca-linha[b-t9tzqytvlo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.conv-busca-quem[b-t9tzqytvlo] {
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.conv-busca-data[b-t9tzqytvlo] {
    flex: none;
    color: var(--tk-cinza-500);
}

.conv-busca-trecho[b-t9tzqytvlo] {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 13px;
    color: var(--tk-cinza-600);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.conv-busca-trecho mark[b-t9tzqytvlo] {
    padding: 0 2px;
    color: inherit;
    font-weight: 700;
    background: #FEF08A;
    border-radius: 3px;
}

.conv-busca-mais[b-t9tzqytvlo] {
    display: block;
    margin: 2px 0 8px 48px;
    padding: 3px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.conv-busca-mais:hover[b-t9tzqytvlo] {
    background: var(--tk-azul-50);
}

/* "digitando..." na lista: verde, no lugar da última mensagem, com três pontinhos animados. */
.conv-item-digitando[b-t9tzqytvlo] {
    font-weight: 600;
    color: var(--cv-digitando);
}

.conv-pontos[b-t9tzqytvlo] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 3px;
    vertical-align: middle;
}

.conv-pontos i[b-t9tzqytvlo] {
    display: block;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    animation: conv-pulo-b-t9tzqytvlo 1.2s ease-in-out infinite;
}

.conv-pontos i:nth-child(2)[b-t9tzqytvlo] {
    animation-delay: .18s;
}

.conv-pontos i:nth-child(3)[b-t9tzqytvlo] {
    animation-delay: .36s;
}

@keyframes conv-pulo-b-t9tzqytvlo {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* A animação é o próprio aviso de "digitando": continua mesmo com "reduzir animações" ligado no Windows. */
@media (prefers-reduced-motion: reduce) {
    .conv-pontos i[b-t9tzqytvlo] {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
}

.conv-item-hora[b-t9tzqytvlo] {
    flex: none;
    font-size: 12px;
    color: var(--tk-cinza-400);
}

.conv-item-hora-nova[b-t9tzqytvlo] {
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.conv-item-nao-lidas[b-t9tzqytvlo] {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 999px;
}

/* Conversa com mensagens novas: nome e prévia mais fortes. */
.conv-item:has(.conv-item-nao-lidas) .conv-item-previa[b-t9tzqytvlo] {
    font-weight: 500;
    color: var(--tk-texto);
}

/* ---------------------------------------------------------------- Lado direito (fundo neutro) */

.conv-painel[b-t9tzqytvlo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--cv-fundo-chat);
}

/* Aviso do lado direito (nenhuma conversa aberta): cartão branco. */
.conv-painel[b-t9tzqytvlo] >  .tk-estado-vazio {
    max-width: min(420px, 88%);
    margin: auto;
    padding: 30px 26px;
    background: var(--tk-branco);
    border: 1px solid var(--cv-borda);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .05);
}

/* ---------------------------------------------------------------- Celular e tablet estreito: uma coisa de cada vez */

@media (max-width: 800px) {
    .conv[b-t9tzqytvlo] {
        grid-template-columns: 1fr;
    }

    /* Sem conversa aberta: só a lista. Com conversa aberta: só a conversa (com o botão de voltar). */
    .conv-com-selecao .conv-lateral[b-t9tzqytvlo],
    .conv-sem-selecao .conv-painel[b-t9tzqytvlo] {
        display: none;
    }

    /* Ainda sem nenhuma conversa: só o convite para a primeira. */
    .conv-sem-conversas.conv-sem-selecao .conv-painel[b-t9tzqytvlo] {
        display: flex;
    }

    .conv-sem-conversas.conv-sem-selecao .conv-lateral[b-t9tzqytvlo] {
        display: none;
    }
}
/* /Components/Pages/DetalheChamado.razor.rz.scp.css */
/* Tela de detalhes do chamado. */

.detalhe-voltar[b-imyueznf1d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

.detalhe-voltar:hover[b-imyueznf1d] {
    color: var(--tk-azul-800);
    text-decoration: underline;
}

.detalhe-voltar[b-imyueznf1d]  .tk-icone {
    width: 16px;
    height: 16px;
}

/* ---------- Cabeçalho minimizável (animado) ---------- */

.detalhe-cabecalho[b-imyueznf1d] {
    flex-wrap: nowrap;
    transition: padding .3s ease, margin-bottom .3s ease;
}

.detalhe-cabecalho-texto[b-imyueznf1d] {
    min-width: 0;
    flex: 1;
}

.detalhe-cabecalho-acoes[b-imyueznf1d] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
}

/* Trechos que somem ao minimizar: a altura vai de "tudo" a zero (grid 1fr -> 0fr), junto com a transparência. */
.detalhe-colapsavel[b-imyueznf1d] {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows .3s ease, opacity .25s ease;
}

.detalhe-colapsavel > div[b-imyueznf1d] {
    min-height: 0;
    overflow: hidden;
}

.detalhe-cabecalho h1[b-imyueznf1d] {
    display: flex;
    align-items: center;
    min-width: 0;
    transition: font-size .3s ease;
}

/* Só existem minimizado: o botão de voltar (ícone) e o título ao lado do número. Crescem de zero para aparecer. */
.detalhe-voltar-min[b-imyueznf1d],
.detalhe-titulo-min[b-imyueznf1d] {
    max-width: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: max-width .3s ease, opacity .25s ease, margin .3s ease;
}

.detalhe-voltar-min[b-imyueznf1d] {
    display: inline-flex;
    flex: none;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.detalhe-voltar-min[b-imyueznf1d]  .tk-icone {
    width: 20px;
    height: 20px;
}

.detalhe-titulo-min[b-imyueznf1d] {
    font-size: 14px;
    font-weight: 500;
    color: var(--tk-cinza-600);
}

.detalhe-cabecalho-min[b-imyueznf1d] {
    padding: 8px 16px;
    margin-bottom: 8px;
}

.detalhe-cabecalho-min .detalhe-colapsavel[b-imyueznf1d] {
    grid-template-rows: 0fr;
    opacity: 0;
}

.detalhe-cabecalho-min h1[b-imyueznf1d] {
    font-size: 17px;
}

.detalhe-cabecalho-min .detalhe-voltar-min[b-imyueznf1d] {
    max-width: 24px;
    margin-right: 10px;
    opacity: 1;
}

.detalhe-cabecalho-min .detalhe-titulo-min[b-imyueznf1d] {
    max-width: min(60vw, 720px);
    margin-left: 12px;
    opacity: 1;
}

/* Botão da seta: o ícone é uma seta para cima e gira para baixo quando está minimizado. */
.detalhe-recolher[b-imyueznf1d] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: color-mix(in srgb, var(--tk-branco) 70%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.detalhe-recolher:hover[b-imyueznf1d] {
    color: var(--tk-azul-800);
    background: var(--tk-branco);
}

.detalhe-recolher[b-imyueznf1d]  .tk-icone {
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}

.detalhe-cabecalho-min .detalhe-recolher[b-imyueznf1d]  .tk-icone {
    transform: rotate(180deg);
}

/*
   O site.css zera todas as animações quando o Windows está com "efeitos de animação" desligados (prefers-reduced-motion). A
   minimização do cabeçalho é um pedido explícito de animação e é lenta o bastante para não incomodar, então ela volta a durar
   o tempo normal (mesma ideia do aviso/toast). Se um dia quiserem respeitar essa opção do Windows, apague este bloco.
*/
@media (prefers-reduced-motion: reduce) {
    .detalhe-cabecalho[b-imyueznf1d],
    .detalhe-colapsavel[b-imyueznf1d],
    .detalhe-cabecalho h1[b-imyueznf1d],
    .detalhe-voltar-min[b-imyueznf1d],
    .detalhe-titulo-min[b-imyueznf1d],
    .detalhe-recolher[b-imyueznf1d]  .tk-icone {
        transition-duration: .3s !important;
    }
}

/* Bolinha verde ao lado do nome da aba "Interações com o suporte": há mensagens novas. */
.detalhe-bolinha[b-imyueznf1d] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    vertical-align: middle;
    background: #1FAE72;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(31, 174, 114, .2);
}

.detalhe-status[b-imyueznf1d] {
    margin-left: 10px;
    font-size: 13px;
    vertical-align: middle;
}

/* Celular: o título fica numa linha só (o selo não encolhe); minimizado, o título do chamado some para sobrar espaço. */
@media (max-width: 700px) {
    .detalhe-cabecalho h1[b-imyueznf1d] {
        font-size: 20px;
        white-space: nowrap;
    }

    .detalhe-status[b-imyueznf1d] {
        flex: none;
        margin-left: 8px;
        white-space: nowrap;
    }

    .detalhe-cabecalho-min[b-imyueznf1d] {
        padding: 6px 10px;
    }

    .detalhe-cabecalho-min .detalhe-titulo-min[b-imyueznf1d] {
        display: none;
    }

    .detalhe-cabecalho-acoes[b-imyueznf1d] {
        gap: 6px;
    }
}

/* Status do chamado (1 = Aberto, 2 = Em Atendimento, 3 = Resolvido, 4 = Encerrado): as mesmas cores da lista. */
.chamado-status-1[b-imyueznf1d] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.chamado-status-2[b-imyueznf1d] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.chamado-status-3[b-imyueznf1d] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.chamado-status-4[b-imyueznf1d] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

/* Aviso de chamado resolvido (aba de informações). */
.detalhe-resolvido[b-imyueznf1d] {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px;
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
    border: 1px solid var(--tk-verde-borda);
    border-radius: var(--tk-raio);
}

.detalhe-resolvido[b-imyueznf1d]  .tk-icone {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.detalhe-resolvido p[b-imyueznf1d] {
    margin: 4px 0 0;
}

/* Aviso de chamado encerrado (aba de informações), com o motivo quando o cliente o deu. */
.detalhe-encerrado[b-imyueznf1d] {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 18px;
    color: var(--tk-cinza-700);
    background: var(--tk-cinza-100);
    border: 1px solid var(--tk-cinza-300);
    border-radius: var(--tk-raio);
}

.detalhe-encerrado[b-imyueznf1d]  .tk-icone {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.detalhe-encerrado p[b-imyueznf1d] {
    margin: 4px 0 0;
}

.detalhe-encerrado-motivo[b-imyueznf1d] {
    padding: 8px 12px;
    background: var(--tk-alerta-fundo);
    border-left: 4px solid var(--tk-ambar-borda);
    border-radius: 8px;
}

.detalhe-encerrado-motivo span[b-imyueznf1d] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-ambar-texto);
}

/* Pesquisa de satisfação: cartão "Como foi o atendimento?" (cliente) e a avaliação já enviada (todos). */
.detalhe-avaliacao[b-imyueznf1d] {
    margin-top: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--tk-ambar-suave) 0%, var(--tk-ambar-suave) 100%);
    border: 1px solid var(--tk-ambar-borda);
    border-radius: var(--tk-raio);
}

.detalhe-avaliacao h2[b-imyueznf1d] {
    margin: 0;
    font-size: 17px;
    color: var(--tk-azul-900);
}

.detalhe-avaliacao p[b-imyueznf1d] {
    margin: 4px 0 0;
    color: var(--tk-cinza-600);
}

.detalhe-avaliacao-nota[b-imyueznf1d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.detalhe-avaliacao-texto[b-imyueznf1d] {
    min-width: 130px;
    font-weight: 600;
    color: var(--tk-ambar-texto);
}

.detalhe-avaliacao .tk-form-acoes[b-imyueznf1d] {
    margin-top: 12px;
}

.detalhe-avaliacao-feita[b-imyueznf1d] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-200);
}

.detalhe-avaliacao-feita .detalhe-avaliacao-nota[b-imyueznf1d] {
    margin: 8px 0 4px;
}

.detalhe-avaliacao-meta[b-imyueznf1d] {
    font-size: 13px;
}

.detalhe-avaliacao-comentario[b-imyueznf1d] {
    margin-top: 10px;
    padding: 8px 12px;
    color: var(--tk-cinza-800, #2B3645);
    white-space: pre-line;
    background: var(--tk-azul-50);
    border-left: 4px solid var(--tk-azul-200);
    border-radius: 8px;
}

.detalhe-avaliacao-pendente[b-imyueznf1d] {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--tk-cinza-500);
}

/* Botões de ação do atendente (assumir, transferir, resolver). */
.detalhe-acoes[b-imyueznf1d] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* "Criar tarefa": link com cara de botão secundário, para não competir com as ações do chamado. */
.detalhe-tarefa-link[b-imyueznf1d] {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.detalhe-tarefa-link:hover[b-imyueznf1d] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

.detalhe-acoes + .detalhe-cartao[b-imyueznf1d] {
    margin-top: 10px;
}

.detalhe-cartao[b-imyueznf1d] {
    padding: 22px 26px;
    margin-top: 14px;
}

.detalhe-secao[b-imyueznf1d] {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tk-azul-800);
}

.detalhe-secao:not(:first-child)[b-imyueznf1d] {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--tk-cinza-100);
}

/* Pares "rótulo / valor" em colunas que se ajustam à largura da tela. */
.detalhe-grade[b-imyueznf1d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.detalhe-grade dt[b-imyueznf1d] {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-500);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.detalhe-grade dd[b-imyueznf1d] {
    margin: 0;
    color: var(--tk-texto);
    overflow-wrap: anywhere;
}

.detalhe-pessoa[b-imyueznf1d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.detalhe-cor[b-imyueznf1d] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
}

.detalhe-vazio[b-imyueznf1d] {
    color: var(--tk-cinza-500);
}

.detalhe-detalhe[b-imyueznf1d] {
    display: block;
    font-size: 12px;
    color: var(--tk-cinza-500);
}

.detalhe-atraso[b-imyueznf1d] {
    font-weight: 600;
    color: var(--tk-erro);
}

.detalhe-no-prazo[b-imyueznf1d] {
    font-weight: 600;
    color: var(--tk-verde-texto);
}

.detalhe-descricao[b-imyueznf1d] {
    padding: 14px 16px;
    background: var(--tk-cinza-50, var(--tk-cinza-50));
    border: 1px solid var(--tk-cinza-100);
    border-radius: 10px;
    overflow-wrap: anywhere;
}

.detalhe-aviso[b-imyueznf1d] {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--tk-cinza-500);
}

.detalhe-edicao[b-imyueznf1d] {
    max-width: 980px;
}
/* /Components/Pages/HistoricoChamado.razor.rz.scp.css */
/* Aba "Histórico do Chamado": linha do tempo (do mais novo para o mais antigo). */

.historico[b-z4fgillbro] {
    margin-top: 8px;
}

.historico-lista[b-z4fgillbro] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Linha vertical que liga as marcas. */
.historico-lista[b-z4fgillbro]::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 17px;
    width: 2px;
    background: var(--tk-cinza-100);
}

.historico-item[b-z4fgillbro] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Marca redonda com o ícone da ação; a cor muda conforme a ação. */
.historico-marca[b-z4fgillbro] {
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-50);
    border: 2px solid var(--tk-branco);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--tk-azul-100);
}

.historico-marca[b-z4fgillbro]  .tk-icone {
    width: 18px;
    height: 18px;
}

.historico-chamado_aberto[b-z4fgillbro]          { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.historico-responsavel_assumido[b-z4fgillbro]    { color: var(--tk-roxo-texto); background: var(--tk-roxo-suave); }
.historico-status_alterado[b-z4fgillbro]         { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.historico-primeiro_atendimento[b-z4fgillbro]    { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.historico-chamado_transferido[b-z4fgillbro]     { color: var(--tk-ciano-texto); background: var(--tk-ciano-suave); }
.historico-chamado_editado[b-z4fgillbro]         { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }
.historico-encerramento_automatico[b-z4fgillbro] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.historico-cartao[b-z4fgillbro] {
    flex: 1;
    min-width: 0;
    padding: 10px 16px 12px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(11, 36, 71, .05);
}

.historico-topo[b-z4fgillbro] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
}

.historico-quem[b-z4fgillbro] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.historico-quem strong[b-z4fgillbro] {
    color: var(--tk-azul-800);
}

.historico-acao[b-z4fgillbro] {
    color: var(--tk-texto);
}

.historico-sistema[b-z4fgillbro] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--tk-cinza-600);
    background: var(--tk-cinza-100);
    border-radius: 50%;
}

.historico-sistema[b-z4fgillbro]  .tk-icone {
    width: 16px;
    height: 16px;
}

.historico-data[b-z4fgillbro] {
    flex: none;
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

/* "De -> Para" (status, responsável). */
.historico-troca[b-z4fgillbro] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.historico-troca[b-z4fgillbro]  .tk-icone {
    width: 16px;
    height: 16px;
    color: var(--tk-cinza-500);
}

.historico-valor[b-z4fgillbro] {
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
}

.historico-valor-neutro[b-z4fgillbro] { color: var(--tk-azul-800); background: var(--tk-azul-50); }
.historico-st-aberto[b-z4fgillbro]       { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.historico-st-ematendimento[b-z4fgillbro] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.historico-st-resolvido[b-z4fgillbro]    { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.historico-st-encerrado[b-z4fgillbro]    { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.historico-detalhe[b-z4fgillbro] {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

@media (max-width: 700px) {
    .historico-lista[b-z4fgillbro]::before {
        left: 13px;
    }

    .historico-item[b-z4fgillbro] {
        gap: 10px;
    }

    .historico-marca[b-z4fgillbro] {
        width: 28px;
        height: 28px;
    }

    .historico-marca[b-z4fgillbro]  .tk-icone {
        width: 15px;
        height: 15px;
    }

    .historico-cartao[b-z4fgillbro] {
        padding: 8px 12px 10px;
    }
}
/* /Components/Pages/HistoricoMeuDia.razor.rz.scp.css */
.hist-topo-acoes[b-x50qepnzhe] {
    display: flex;
    align-items: center;
}

.hist-voltar[b-x50qepnzhe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

.hist-voltar:hover[b-x50qepnzhe] {
    text-decoration: underline;
}

.hist-voltar[b-x50qepnzhe]  .tk-icone {
    width: 16px;
    height: 16px;
}

.hist-semana[b-x50qepnzhe] {
    margin-bottom: 16px;
}

.hist-semana-topo[b-x50qepnzhe] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tk-azul-100);
}

.hist-semana-topo h2[b-x50qepnzhe] {
    margin: 0;
    font-size: 16px;
    color: var(--tk-azul-800);
}

.hist-semana-total[b-x50qepnzhe] {
    font-size: 14px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.hist-lista[b-x50qepnzhe] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hist-dia[b-x50qepnzhe] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--tk-azul-100);
}

.hist-dia:last-child[b-x50qepnzhe] {
    border-bottom: 0;
}

.hist-dia-linha[b-x50qepnzhe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px auto;
    align-items: center;
    gap: 12px;
}

.hist-dia-nome[b-x50qepnzhe] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hist-dia-detalhe[b-x50qepnzhe] {
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.hist-barra[b-x50qepnzhe] {
    display: block;
    height: 8px;
    background: var(--tk-azul-100, var(--tk-azul-100));
    border-radius: 999px;
    overflow: hidden;
}

.hist-barra-cheia[b-x50qepnzhe] {
    display: block;
    height: 100%;
    background: #13804F;
    border-radius: 999px;
}

.hist-dia-acoes[b-x50qepnzhe] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.hist-acao[b-x50qepnzhe] {
    height: 30px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.hist-acao:hover:not(:disabled)[b-x50qepnzhe] {
    border-color: var(--tk-azul-600);
}

.hist-acao:disabled[b-x50qepnzhe] {
    opacity: .6;
    cursor: default;
}

.hist-detalhe[b-x50qepnzhe] {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--tk-cinza-50);
    border-radius: var(--tk-raio-p);
}

.hist-feitas[b-x50qepnzhe] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hist-feitas li[b-x50qepnzhe] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.hist-feitas[b-x50qepnzhe]  .tk-icone {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--tk-verde-texto);
}

.hist-feita-texto[b-x50qepnzhe] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hist-feita-tempo[b-x50qepnzhe] {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

@media (max-width: 720px) {
    .hist-dia-linha[b-x50qepnzhe] {
        grid-template-columns: 1fr;
    }

    .hist-dia-acoes[b-x50qepnzhe] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/InfoConversa.razor.rz.scp.css */
/* Painel "Dados da conversa / do grupo": gaveta que abre pela direita. */

.inf-fundo[b-0nl9jnlre4] {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(8, 18, 33, .4);
}

.inf[b-0nl9jnlre4] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 901;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--tk-cinza-100);
    border-left: 1px solid var(--tk-cinza-300);
    box-shadow: -8px 0 28px rgba(11, 36, 71, .25);
    animation: inf-entra-b-0nl9jnlre4 .2s ease-out;
}

@keyframes inf-entra-b-0nl9jnlre4 {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.inf-topo[b-0nl9jnlre4] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--tk-azul-900);
    background: var(--tk-branco);
    border-bottom: 1px solid var(--tk-cinza-300);
}

.inf-fechar[b-0nl9jnlre4],
.inf-icone-botao[b-0nl9jnlre4] {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.inf-fechar:hover[b-0nl9jnlre4],
.inf-icone-botao:hover[b-0nl9jnlre4] {
    background: var(--tk-azul-50);
}

.inf-icone-perigo:hover[b-0nl9jnlre4] {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

.inf-fechar[b-0nl9jnlre4]  .tk-icone,
.inf-icone-botao[b-0nl9jnlre4]  .tk-icone {
    width: 20px;
    height: 20px;
}

.inf-corpo[b-0nl9jnlre4] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ---------------------------------------------------------------- Perfil */

.inf-perfil[b-0nl9jnlre4] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px 8px;
    text-align: center;
}

/* Foto do grupo: o dono vê um botão de câmera no canto do círculo. */
.inf-avatar[b-0nl9jnlre4] {
    position: relative;
    display: inline-flex;
}

.inf-avatar-botao[b-0nl9jnlre4] {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: var(--tk-azul-600);
    border: 3px solid var(--tk-branco);
    border-radius: 50%;
    cursor: pointer;
}

.inf-avatar-botao:hover:not(:disabled)[b-0nl9jnlre4] {
    background: var(--tk-azul-700);
}

.inf-avatar-botao:focus-visible[b-0nl9jnlre4] {
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 2px;
}

.inf-avatar-botao[b-0nl9jnlre4]  .tk-icone {
    width: 16px;
    height: 16px;
}

.inf-texto-perigo[b-0nl9jnlre4] {
    padding: 2px 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-erro);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.inf-texto-perigo:hover:not(:disabled)[b-0nl9jnlre4] {
    background: var(--tk-erro-fundo);
}

.inf-nome[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.inf-nome h2[b-0nl9jnlre4] {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 20px;
    color: var(--tk-azul-900);
}

.inf-sub[b-0nl9jnlre4] {
    margin: 0;
    color: var(--tk-cinza-500);
}

.inf-dados[b-0nl9jnlre4] {
    display: grid;
    flex: none;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 8px 16px 12px;
    padding: 12px 14px;
    font-size: 14px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-300);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(11, 46, 107, .07);
}

.inf-dados dt[b-0nl9jnlre4] {
    color: var(--tk-cinza-500);
}

.inf-dados dd[b-0nl9jnlre4] {
    margin: 0;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Pesquisar mensagens nesta conversa */

.inf-busca[b-0nl9jnlre4] {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 0 12px;
    color: var(--tk-cinza-500);
    background: var(--tk-branco);
    border: 1.5px solid var(--tk-cinza-300);
    border-radius: 999px;
}

.inf-busca:focus-within[b-0nl9jnlre4] {
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 3px var(--tk-azul-100, #D6E6FB);
}

.inf-busca[b-0nl9jnlre4]  .tk-icone {
    flex: none;
    width: 18px;
    height: 18px;
}

.inf-busca-campo[b-0nl9jnlre4] {
    flex: 1;
    min-width: 0;
    height: 38px;
    font: inherit;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    outline: none;
}

/* O "x" do campo de pesquisa (apagar o que foi digitado) com a mãozinha. */
.inf-busca-campo[b-0nl9jnlre4]::-webkit-search-cancel-button {
    cursor: pointer;
}

.inf-res-total[b-0nl9jnlre4] {
    margin: 0 4px 6px;
    font-size: 13px;
    color: var(--tk-cinza-500);
}

.inf-res-item[b-0nl9jnlre4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px;
    font: inherit;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tk-cinza-100);
    border-radius: 8px;
    cursor: pointer;
}

.inf-res-item:hover[b-0nl9jnlre4] {
    background: var(--tk-azul-100);
}

.inf-res-linha[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.inf-res-quem[b-0nl9jnlre4] {
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.inf-res-data[b-0nl9jnlre4] {
    flex: none;
    color: var(--tk-cinza-500);
}

.inf-res-trecho[b-0nl9jnlre4] {
    overflow-wrap: anywhere;
    font-size: 14px;
    color: var(--tk-cinza-600);
}

.inf-res-trecho mark[b-0nl9jnlre4] {
    padding: 0 1px;
    color: inherit;
    font-weight: 700;
    background: #FFE58A;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- Abas */

.inf-abas[b-0nl9jnlre4] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex: none;
    overflow-x: auto;
    background: var(--tk-branco);
    border-top: 1px solid var(--tk-cinza-300);
    border-bottom: 1px solid var(--tk-cinza-300);
    scrollbar-width: none;
}

.inf-aba[b-0nl9jnlre4] {
    flex: 1;
    padding: 10px 10px;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.inf-aba span[b-0nl9jnlre4] {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.inf-aba:hover[b-0nl9jnlre4] {
    color: var(--tk-azul-800);
}

.inf-aba-ativa[b-0nl9jnlre4] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    border-bottom-color: var(--tk-azul-600);
}

.inf-conteudo[b-0nl9jnlre4] {
    flex: 1;
    padding: 12px 12px 8px;
}

.inf-aviso[b-0nl9jnlre4] {
    padding: 16px;
    text-align: center;
    color: var(--tk-cinza-500);
}

.inf-lista[b-0nl9jnlre4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------------- Participantes */

.inf-adicionar[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 6px;
    padding: 8px;
    font: inherit;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.inf-adicionar:hover[b-0nl9jnlre4] {
    background: var(--tk-azul-50);
}

.inf-adicionar-icone[b-0nl9jnlre4] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 50%;
}

.inf-adicionar-icone[b-0nl9jnlre4]  .tk-icone {
    width: 20px;
    height: 20px;
}

.inf-pessoa[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
}

.inf-pessoa:hover[b-0nl9jnlre4] {
    background: var(--tk-azul-100);
}

.inf-pessoa-texto[b-0nl9jnlre4] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.inf-pessoa-texto strong[b-0nl9jnlre4],
.inf-pessoa-texto small[b-0nl9jnlre4] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.inf-pessoa-texto small[b-0nl9jnlre4] {
    color: var(--tk-cinza-500);
}

.inf-selo-dono[b-0nl9jnlre4] {
    flex: none;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #1F8A70;
    background: var(--tk-verde-suave);
    border-radius: 999px;
}

/* ---------------------------------------------------------------- Mídia, documentos e links */

.inf-fotos[b-0nl9jnlre4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.inf-foto[b-0nl9jnlre4] {
    display: block;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--tk-cinza-200);
    border: none;
    border-radius: 4px;
    cursor: zoom-in;
}

.inf-foto img[b-0nl9jnlre4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inf-mais[b-0nl9jnlre4] {
    display: block;
    margin: 12px auto 4px;
    padding: 8px 18px;
    font: inherit;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
    cursor: pointer;
}

.inf-mais:disabled[b-0nl9jnlre4] {
    cursor: wait;
    opacity: .7;
}

.inf-doc[b-0nl9jnlre4],
.inf-link[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: var(--tk-texto);
    text-decoration: none;
    border-radius: 10px;
}

.inf-doc:hover[b-0nl9jnlre4],
.inf-link:hover[b-0nl9jnlre4] {
    background: var(--tk-azul-100);
}

.inf-doc-selo[b-0nl9jnlre4] {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 8px;
}

.inf-doc-texto[b-0nl9jnlre4],
.inf-link[b-0nl9jnlre4] {
    min-width: 0;
}

.inf-doc-texto[b-0nl9jnlre4] {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.inf-link[b-0nl9jnlre4] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.inf-doc-texto strong[b-0nl9jnlre4],
.inf-link strong[b-0nl9jnlre4] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.inf-link strong[b-0nl9jnlre4] {
    color: var(--tk-azul-texto, var(--tk-azul-700));
    text-decoration: underline;
}

.inf-doc-texto small[b-0nl9jnlre4],
.inf-link small[b-0nl9jnlre4] {
    color: var(--tk-cinza-500);
}

.inf-doc[b-0nl9jnlre4]  .tk-icone {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* ---------------------------------------------------------------- Sair / excluir */

.inf-perigo[b-0nl9jnlre4] {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding: 8px 12px 14px;
    background: var(--tk-branco);
    border-top: 1px solid var(--tk-cinza-300);
}

.inf-acao-perigo[b-0nl9jnlre4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    font: inherit;
    font-weight: 600;
    color: var(--tk-erro);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.inf-acao-perigo:hover[b-0nl9jnlre4] {
    background: var(--tk-erro-fundo);
}

.inf-acao-perigo[b-0nl9jnlre4]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* Anel claro em volta da foto do perfil/grupo e das pessoas, para ela se destacar do fundo azulado. */
.inf-avatar[b-0nl9jnlre4]  .avatar-usuario,
.inf-pessoa[b-0nl9jnlre4]  .avatar-usuario {
    box-shadow: 0 0 0 3px var(--tk-branco), 0 0 0 4px var(--tk-cinza-300);
}
/* /Components/Pages/Inicio.razor.rz.scp.css */
/* Página inicial ("painel do dia"): faixa de boas-vindas, indicadores, e dois blocos de colunas. Só variáveis --tk-* nas cores (os temas as trocam). */

.inicio-boas-vindas[b-5fvhz72u0j] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    margin-bottom: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, var(--tk-azul-800) 0%, var(--tk-azul-600) 60%, var(--tk-azul-500) 100%);
    border-radius: var(--tk-raio-g);
    box-shadow: var(--tk-sombra);
}

.inicio-boas-vindas h1[b-5fvhz72u0j] {
    margin-bottom: 6px;
    font-size: 24px;
    color: #fff;
}

.inicio-boas-vindas p[b-5fvhz72u0j] {
    max-width: 640px;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .9);
}

/* "Novo chamado": botão translúcido, que combina com o degradê de qualquer tema. */
.inicio-botao-novo[b-5fvhz72u0j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 10px;
    transition: background var(--tk-transicao), transform var(--tk-transicao);
}

.inicio-botao-novo:hover[b-5fvhz72u0j] {
    color: #fff;
    background: rgba(255, 255, 255, .3);
    transform: translateY(-1px);
}

.inicio-botao-novo[b-5fvhz72u0j]  .tk-icone {
    width: 18px;
    height: 18px;
}

.inicio-ilustracao[b-5fvhz72u0j] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .25));
    transform: rotate(-8deg);
}

/* O ícone do banner flutua devagar, dando vida à página inicial. */
@keyframes inicio-flutuar-b-5fvhz72u0j {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-8px) rotate(-5deg); }
}

.inicio-ilustracao[b-5fvhz72u0j] {
    animation: inicio-flutuar-b-5fvhz72u0j 5s ease-in-out infinite;
}

/* ------------------------------ Indicadores ------------------------------ */

.inicio-painel[b-5fvhz72u0j] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inicio-kpis[b-5fvhz72u0j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

/* ------------------------------ Colunas e blocos ------------------------------ */

.inicio-colunas[b-5fvhz72u0j] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.inicio-coluna[b-5fvhz72u0j] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.inicio-bloco[b-5fvhz72u0j] {
    padding: 0 0 6px;
}

.inicio-bloco-topo[b-5fvhz72u0j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 10px;
}

.inicio-bloco-topo h2[b-5fvhz72u0j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--tk-azul-900);
}

.inicio-bloco-topo h2[b-5fvhz72u0j]  .tk-icone {
    width: 18px;
    height: 18px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.inicio-contagem[b-5fvhz72u0j] {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-100);
    border-radius: 999px;
}

.inicio-link[b-5fvhz72u0j] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.inicio-lista[b-5fvhz72u0j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
    margin: 0;
    list-style: none;
}

.inicio-rodape-nota[b-5fvhz72u0j] {
    margin: 4px 18px 8px;
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

/* ------------------------------ Estados vazios ------------------------------ */

.inicio-vazio[b-5fvhz72u0j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px 20px;
    text-align: center;
    color: var(--tk-cinza-500);
}

.inicio-vazio[b-5fvhz72u0j]  .tk-icone {
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    color: var(--tk-cinza-300);
}

.inicio-vazio strong[b-5fvhz72u0j] {
    color: var(--tk-texto);
}

.inicio-vazio-ok[b-5fvhz72u0j]  .tk-icone {
    color: var(--tk-verde-forte);
}

/* ------------------------------ Precisa da sua atenção ------------------------------ */

.inicio-item[b-5fvhz72u0j] {
    --tom-fundo: var(--tk-azul-100);
    --tom-forte: var(--tk-azul-texto, var(--tk-azul-600));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    color: var(--tk-texto);
    border-radius: 10px;
    transition: background var(--tk-transicao);
}

.inicio-item:hover[b-5fvhz72u0j] {
    color: var(--tk-texto);
    background: var(--tk-azul-50);
}

.inicio-tom-vermelho[b-5fvhz72u0j] { --tom-fundo: var(--tk-erro-fundo); --tom-forte: var(--tk-erro); }
.inicio-tom-laranja[b-5fvhz72u0j]  { --tom-fundo: var(--tk-ambar-suave); --tom-forte: var(--tk-ambar-forte); }
.inicio-tom-roxo[b-5fvhz72u0j]     { --tom-fundo: var(--tk-roxo-suave); --tom-forte: var(--tk-roxo-forte); }
.inicio-tom-verde[b-5fvhz72u0j]    { --tom-fundo: var(--tk-verde-suave); --tom-forte: var(--tk-verde-forte); }

.inicio-item-icone[b-5fvhz72u0j] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--tom-forte);
    background: var(--tom-fundo);
    border-radius: 10px;
}

.inicio-item-icone[b-5fvhz72u0j]  .tk-icone {
    width: 18px;
    height: 18px;
}

.inicio-item-texto[b-5fvhz72u0j] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.inicio-item-texto strong[b-5fvhz72u0j],
.inicio-item-texto small[b-5fvhz72u0j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-item-texto small[b-5fvhz72u0j] {
    color: var(--tk-cinza-500);
}

.inicio-item[b-5fvhz72u0j] >  .tk-icone {
    width: 16px;
    height: 16px;
    color: var(--tk-cinza-400);
    transition: transform var(--tk-transicao);
}

.inicio-item:hover[b-5fvhz72u0j] >  .tk-icone {
    transform: translateX(3px);
}

/* ------------------------------ Chamados em foco ------------------------------ */

.inicio-chamado[b-5fvhz72u0j] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 10px;
    color: var(--tk-texto);
    border-radius: 10px;
    transition: background var(--tk-transicao);
}

.inicio-chamado:hover[b-5fvhz72u0j] {
    color: var(--tk-texto);
    background: var(--tk-azul-50);
}

.inicio-chamado-numero[b-5fvhz72u0j] {
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.inicio-chamado-titulo[b-5fvhz72u0j] {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-selo[b-5fvhz72u0j] {
    padding: 1px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border-radius: 999px;
}

.inicio-st-1[b-5fvhz72u0j] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.inicio-st-2[b-5fvhz72u0j] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.inicio-st-3[b-5fvhz72u0j] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.inicio-st-4[b-5fvhz72u0j] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.inicio-prazo[b-5fvhz72u0j] {
    min-width: 96px;
    font-size: 12.5px;
    text-align: right;
    white-space: nowrap;
    color: var(--tk-cinza-500);
}

.inicio-prazo-vencido[b-5fvhz72u0j] {
    font-weight: 700;
    color: var(--tk-vermelho-texto);
}

.inicio-prazo-hoje[b-5fvhz72u0j] {
    font-weight: 600;
    color: var(--tk-ambar-texto);
}

/* ------------------------------ Tarefas de hoje ------------------------------ */

.inicio-progresso[b-5fvhz72u0j] {
    height: 6px;
    margin: 0 18px 10px;
    overflow: hidden;
    background: var(--tk-cinza-100);
    border-radius: 999px;
}

.inicio-progresso > span[b-5fvhz72u0j] {
    display: block;
    height: 100%;
    background: var(--tk-verde-forte);
    border-radius: inherit;
    transition: width .4s ease;
}

.inicio-tarefa[b-5fvhz72u0j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--tk-cinza-300);
    border-radius: 10px;
}

.inicio-prio-1[b-5fvhz72u0j] { border-left-color: var(--tk-erro); }
.inicio-prio-2[b-5fvhz72u0j] { border-left-color: var(--tk-ambar-forte); }
.inicio-prio-3[b-5fvhz72u0j] { border-left-color: var(--tk-cinza-400); }

.inicio-tarefa:hover[b-5fvhz72u0j] {
    background: var(--tk-azul-50);
}

/* A bolinha de concluir: vazia até passar o mouse, quando mostra o "visto". */
.inicio-tarefa-check[b-5fvhz72u0j] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: transparent;
    background: var(--tk-branco);
    border: 2px solid var(--tk-cinza-300);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--tk-transicao), background var(--tk-transicao), border-color var(--tk-transicao);
}

.inicio-tarefa-check:hover[b-5fvhz72u0j] {
    color: #fff;
    background: var(--tk-verde-forte);
    border-color: var(--tk-verde-forte);
}

.inicio-tarefa-check[b-5fvhz72u0j]  .tk-icone {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.inicio-tarefa-texto[b-5fvhz72u0j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inicio-tarefa-texto strong[b-5fvhz72u0j] {
    overflow: hidden;
    font-weight: 500;
    color: var(--tk-texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-tarefa-texto small[b-5fvhz72u0j] {
    display: flex;
    gap: 10px;
    color: var(--tk-cinza-500);
}

/* ------------------------------ Telas menores ------------------------------ */

@media (max-width: 1000px) {
    .inicio-colunas[b-5fvhz72u0j] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .inicio-boas-vindas[b-5fvhz72u0j] {
        padding: 22px 20px;
    }

    .inicio-ilustracao[b-5fvhz72u0j] {
        display: none;
    }

    .inicio-kpis[b-5fvhz72u0j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    /* O número, o título e o selo ficam na primeira linha; o prazo desce para a segunda. */
    .inicio-chamado[b-5fvhz72u0j] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .inicio-prazo[b-5fvhz72u0j] {
        grid-column: 1 / -1;
        min-width: 0;
        text-align: left;
    }
}
/* /Components/Pages/InteracoesChamado.razor.rz.scp.css */
/* Aba "Interações com o suporte": o chat do chamado. */

/*
   Um quadro só, esticado até o fim da janela (a altura vem do js/chat-chamado.js): as mensagens ocupam todo o espaço que
   sobrar e o campo de mensagem fica colado embaixo, dentro do mesmo quadro.
*/
.chat[b-f5sug0o7v3] {
    display: flex;
    flex-direction: column;
    min-height: 380px;
    margin-top: 8px;
    overflow: hidden;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 14px;
}

.chat-mensagens[b-f5sug0o7v3] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 12px 10px 12px 14px;
    overflow-y: auto;
    background: var(--tk-cinza-200);   /* azul-acinzentado suave: os balões brancos e o azul do suporte se destacam */
}

/* Barra de rolagem fina (a da lista de mensagens e a da área de escrita). */
.chat-mensagens[b-f5sug0o7v3],
.chat-compositor[b-f5sug0o7v3]  .chat-editor .dx-htmleditor-content {
    scrollbar-width: thin;
    scrollbar-color: #A9B8C4 transparent;
}

.chat-mensagens[b-f5sug0o7v3]::-webkit-scrollbar,
.chat-compositor[b-f5sug0o7v3]  .chat-editor .dx-htmleditor-content::-webkit-scrollbar {
    width: 6px;
}

.chat-mensagens[b-f5sug0o7v3]::-webkit-scrollbar-thumb,
.chat-compositor[b-f5sug0o7v3]  .chat-editor .dx-htmleditor-content::-webkit-scrollbar-thumb {
    background: #A9B8C4;
    border-radius: 999px;
}

.chat-mensagens[b-f5sug0o7v3]::-webkit-scrollbar-thumb:hover {
    background: #8497A6;
}

.chat-dia[b-f5sug0o7v3] {
    display: flex;
    justify-content: center;
    margin: 4px 0;
}

.chat-dia span[b-f5sug0o7v3] {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-500);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 999px;
}

.chat-linha[b-f5sug0o7v3] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    max-width: 78%;
}

/* As minhas mensagens ficam à direita, com a foto no lado de fora. */
.chat-linha-minha[b-f5sug0o7v3] {
    flex-direction: row-reverse;
    align-self: flex-end;
}

/*
   Balão de conversa. O canto de baixo, do lado da foto, é reto e termina num "rabinho" (triângulo) que sai em direção à foto,
   como se o balão saísse dela. O rabinho tem duas camadas: uma na cor da borda e, por cima, outra na cor do fundo.
*/
.chat-balao[b-f5sug0o7v3] {
    --balao-fundo: var(--tk-branco);
    --balao-borda: #DDE3EC;
    position: relative;
    min-width: 0;
    padding: 9px 14px 8px;
    background: var(--balao-fundo);
    border: 1px solid var(--balao-borda);
    border-radius: 16px 16px 16px 0;
    box-shadow: 0 1px 2px rgba(16, 40, 80, .06);
}

.chat-balao[b-f5sug0o7v3]::before,
.chat-balao[b-f5sug0o7v3]::after {
    content: "";
    position: absolute;
    left: -10px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.chat-balao[b-f5sug0o7v3]::before {
    bottom: -1px;
    width: 11px;
    height: 13px;
    background: var(--balao-borda);
}

.chat-balao[b-f5sug0o7v3]::after {
    bottom: 0;
    width: 11px;
    height: 11px;
    background: var(--balao-fundo);
}

/* As minhas mensagens: foto à direita, então o canto reto e o rabinho ficam à direita. */
.chat-linha-minha .chat-balao[b-f5sug0o7v3] {
    border-radius: 16px 16px 0 16px;
}

.chat-linha-minha .chat-balao[b-f5sug0o7v3]::before,
.chat-linha-minha .chat-balao[b-f5sug0o7v3]::after {
    left: auto;
    right: -10px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Mensagens do SUPORTE: balão azul, nome em destaque e a etiqueta "Suporte" (clientes ficam em branco). */
.chat-balao-suporte[b-f5sug0o7v3] {
    --balao-fundo: #C7DCFA;   /* azul bem mais forte que o fundo do chat: o balão não parece transparente */
    --balao-borda: #7FA6E0;
}

.chat-balao-suporte .chat-balao-topo strong[b-f5sug0o7v3] {
    color: var(--tk-azul-800);
}

/* Topo da lista, quando há mensagens mais antigas: aviso de "carregando" (ou o botão para carregar). Altura fixa para a rolagem não pular. */
.chat-antigas[b-f5sug0o7v3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
}

.chat-antigas-girando[b-f5sug0o7v3] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--tk-azul-100, #D6E6FB);
    border-top-color: var(--tk-azul-600);
    border-radius: 50%;
    animation: chat-girar-b-f5sug0o7v3 .8s linear infinite;
}

@keyframes chat-girar-b-f5sug0o7v3 {
    to { transform: rotate(360deg); }
}

/* O giro é o próprio aviso de carregando: continua mesmo com "reduzir animações" ligado no Windows. */
@media (prefers-reduced-motion: reduce) {
    .chat-antigas-girando[b-f5sug0o7v3] {
        animation-duration: .8s !important;
        animation-iteration-count: infinite !important;
    }
}

.chat-antigas-botao[b-f5sug0o7v3] {
    min-height: 30px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
    cursor: pointer;
}

.chat-antigas-botao:hover[b-f5sug0o7v3] {
    background: var(--tk-azul-100, #D6E6FB);
}

/* Nota privada: amarelo de "post-it" com borda tracejada, bem diferente das mensagens que o cliente vê. */
.chat-balao-privado[b-f5sug0o7v3] {
    --balao-fundo: #FFE9A8;
    --balao-borda: #D9A62E;
    border-style: dashed;
}

/* Com um tema escolhido no menu do perfil, os balões saem das cores do tema (o azul e o amarelo diluídos no fundo do tema). */
html[data-tema-familia] .chat-balao[b-f5sug0o7v3] {
    --balao-borda: var(--tk-cinza-200);
}

html[data-tema-familia] .chat-balao-suporte[b-f5sug0o7v3] {
    --balao-fundo: color-mix(in srgb, var(--tk-azul-600) 24%, var(--tk-branco));
    --balao-borda: color-mix(in srgb, var(--tk-azul-600) 50%, var(--tk-branco));
}

html[data-tema-familia] .chat-balao-privado[b-f5sug0o7v3] {
    --balao-fundo: color-mix(in srgb, #F5C84C 26%, var(--tk-branco));
    --balao-borda: color-mix(in srgb, #D9A62E 60%, var(--tk-branco));
}

.chat-balao-privado .chat-balao-topo strong[b-f5sug0o7v3] {
    color: var(--tk-ambar-texto);
}

.chat-etiqueta-privada[b-f5sug0o7v3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tk-ambar-texto);
    background: #F5C84C;
}

.chat-etiqueta-privada[b-f5sug0o7v3]  .tk-icone {
    width: 12px;
    height: 12px;
}

/* Interruptor "Nota privada" (só o suporte) em cima do botão Enviar. */
.chat-privada-opcao[b-f5sug0o7v3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px;
}

.chat-privada-texto[b-f5sug0o7v3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.chat-privada-texto[b-f5sug0o7v3]  .tk-icone {
    width: 14px;
    height: 14px;
}

.chat-privada-ajuda[b-f5sug0o7v3] {
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

/* Campo em modo nota privada: fundo amarelo, para ninguém mandar a nota achando que o cliente vai ver (ou o contrário). */
.chat-compositor-privado[b-f5sug0o7v3] {
    background: var(--tk-ambar-suave);
    border-top-color: var(--tk-ambar-borda);
}

.chat-compositor-privado .chat-privada-ajuda[b-f5sug0o7v3] {
    font-weight: 600;
    color: var(--tk-ambar-texto);
}

.chat-balao-topo[b-f5sug0o7v3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 13px;
}

.chat-hora[b-f5sug0o7v3] {
    margin-left: auto;
    padding-left: 12px;
    font-size: 11px;
    color: var(--tk-cinza-500);
}

/* Nome do cliente de quem enviou: letra menor (o tamanho vem da tela, conforme o tamanho do nome) e corta com "..." se faltar espaço. */
.chat-cliente[b-f5sug0o7v3] {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    font-weight: 500;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Visto, ao lado da hora (só nas minhas mensagens): cinza = enviada; azul = vista pelo outro lado. */
.chat-visto[b-f5sug0o7v3] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--tk-cinza-500);
}

.chat-visto[b-f5sug0o7v3]  .tk-icone {
    width: 16px;
    height: 16px;
}

.chat-visto-sim[b-f5sug0o7v3] {
    color: #1D8FF0;
}

.chat-etiqueta[b-f5sug0o7v3] {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 999px;
}

.chat-texto[b-f5sug0o7v3] {
    overflow-wrap: anywhere;
}

/* ---------- Responder (como no WhatsApp) ---------- */

/* Mensagem citada dentro de uma resposta: faixa colorida à esquerda, nome e começo do texto. Clicar leva até a original. */
.chat-citacao[b-f5sug0o7v3] {
    margin: 2px 0 7px;
    padding: 5px 10px;
    cursor: pointer;
    background: rgba(16, 40, 80, .06);
    border-left: 4px solid #1F8A70;
    border-radius: 8px;
}

.chat-citacao-minha[b-f5sug0o7v3] {
    border-left-color: var(--tk-azul-600);
}

.chat-citacao:hover[b-f5sug0o7v3] {
    background: rgba(16, 40, 80, .1);
}

.chat-citacao strong[b-f5sug0o7v3] {
    display: block;
    font-size: 12px;
    color: #1F8A70;
}

.chat-citacao-minha strong[b-f5sug0o7v3] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.chat-citacao span[b-f5sug0o7v3] {
    display: -webkit-box;
    font-size: 13px;
    color: var(--tk-cinza-600);
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Botão de responder: fica ao lado do balão e só aparece ao passar o mouse (no celular, sempre discreto). */
.chat-responder[b-f5sug0o7v3] {
    display: grid;
    flex: none;
    align-self: center;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-100);
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}

.chat-responder[b-f5sug0o7v3]  .tk-icone {
    width: 16px;
    height: 16px;
}

.chat-linha:hover .chat-responder[b-f5sug0o7v3],
.chat-responder:focus-visible[b-f5sug0o7v3] {
    opacity: 1;
}

.chat-responder:hover[b-f5sug0o7v3] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

@media (hover: none) {
    .chat-responder[b-f5sug0o7v3] {
        opacity: .65;
    }
}

/* Ao chegar numa mensagem pelo clique na citação, o balão pisca em amarelo suave. */
.chat-linha.chat-destaque .chat-balao[b-f5sug0o7v3] {
    animation: chat-pisca-b-f5sug0o7v3 1.6s ease;
}

@keyframes chat-pisca-b-f5sug0o7v3 {
    0%, 55% { box-shadow: 0 0 0 4px rgba(245, 190, 40, .55); }
    100%    { box-shadow: 0 1px 2px rgba(16, 40, 80, .06); }
}

/* O site.css zera as animações com "efeitos de animação" do Windows desligados; este pisca é curto e é a única pista visual. */
@media (prefers-reduced-motion: reduce) {
    .chat-linha.chat-destaque .chat-balao[b-f5sug0o7v3] {
        animation-duration: 1.6s !important;
    }
}

/* Barra "Respondendo a ..." em cima do campo de mensagem. */
.chat-resposta-barra[b-f5sug0o7v3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 8px 6px 12px;
    background: var(--tk-azul-50);
    border-left: 4px solid var(--tk-azul-600);
    border-radius: 8px;
}

.chat-resposta-texto[b-f5sug0o7v3] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
}

.chat-resposta-texto strong[b-f5sug0o7v3] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.chat-resposta-texto span[b-f5sug0o7v3] {
    overflow: hidden;
    color: var(--tk-cinza-600);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-resposta-fechar[b-f5sug0o7v3] {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.chat-resposta-fechar:hover[b-f5sug0o7v3] {
    color: var(--tk-erro);
    background: var(--tk-erro-fundo);
}

.chat-resposta-fechar[b-f5sug0o7v3]  .tk-icone {
    width: 16px;
    height: 16px;
}

.chat-texto[b-f5sug0o7v3]  p {
    margin: 0 0 6px;
}

.chat-texto[b-f5sug0o7v3]  p:last-child {
    margin-bottom: 0;
}

/* Campo de mensagem: dentro do quadro, embaixo, separado das mensagens por uma linha. */
.chat-compositor[b-f5sug0o7v3] {
    display: flex;
    flex: none;
    flex-direction: column;
    padding: 6px 8px 8px;
    background: var(--tk-branco);
    border-top: 1px solid var(--tk-cinza-100);
}

/*
   Sem "gap" de propósito: o editor traz elementos invisíveis (scripts e o painel de carregamento do DevExpress) que também
   viravam itens da coluna e, com o espaçamento, somavam uma faixa branca vazia acima do campo.
*/
.chat-compositor[b-f5sug0o7v3]  dxbl-resource-script,
.chat-compositor[b-f5sug0o7v3]  dxbl-loading-panel {
    display: none;
}

/*
   Altura do editor: começa com 2 linhas e cresce conforme o texto, até o limite (a área de escrita ganha barra de rolagem).
   O editor tem altura automática; quem limita é a área de escrita.
*/
.chat-compositor[b-f5sug0o7v3]  .chat-editor {
    height: auto;
}

.chat-compositor[b-f5sug0o7v3]  .chat-editor .dx-htmleditor-content {
    min-height: 54px;
    max-height: 180px;
    overflow-y: auto;
}

.chat-compositor-rodape[b-f5sug0o7v3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
}

.chat-aviso[b-f5sug0o7v3] {
    flex: none;
    margin: 0;
    padding: 14px 18px;
    color: var(--tk-cinza-500);
    background: var(--tk-branco);
    border-top: 1px solid var(--tk-cinza-100);
}

/* Botão "Anexar" da barra do editor: clipe de papel antes do texto. */
.chat-compositor[b-f5sug0o7v3]  .chat-anexar-botao::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.1-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chat-avatar[b-f5sug0o7v3] {
    display: flex;
    flex: none;
}

/* Aviso do sistema (chamado resolvido): balão diferente dos de mensagem, centralizado e em verde. */
.chat-aviso-sistema[b-f5sug0o7v3] {
    display: flex;
    justify-content: center;
    margin: 6px 0;
}

.chat-aviso-sistema-balao[b-f5sug0o7v3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(620px, 92%);
    padding: 10px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
    border: 1px solid var(--tk-verde-borda);
    border-radius: 14px;
}

/* Chamado encerrado: cinza. Motivo do encerramento: âmbar, com o texto alinhado à esquerda. */
.chat-aviso-encerrado[b-f5sug0o7v3] {
    color: var(--tk-cinza-700);
    background: var(--tk-cinza-100);
    border-color: var(--tk-cinza-300);
}

.chat-aviso-motivo[b-f5sug0o7v3] {
    max-width: min(620px, 92%);
    color: var(--tk-ambar-texto);
    text-align: left;
    background: var(--tk-alerta-fundo);
    border-color: var(--tk-ambar-borda);
}

.chat-aviso-sistema-balao.chat-aviso-motivo strong[b-f5sug0o7v3] {
    justify-content: flex-start;
}

.chat-aviso-motivo-quem[b-f5sug0o7v3] {
    font-size: 12px;
    opacity: .8;
}

.chat-aviso-sistema-balao strong[b-f5sug0o7v3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
}

.chat-aviso-sistema-balao[b-f5sug0o7v3]  .tk-icone {
    width: 18px;
    height: 18px;
}

/* Tablet: balões um pouco mais largos. */
@media (max-width: 1000px) {
    .chat-linha[b-f5sug0o7v3] {
        max-width: 88%;
    }
}

/*
   Celular: sem foto (o nome está no balão) e, por isso, sem o "rabinho"; os balões usam quase a largura toda, o botão de
   responder fica menor, o cabeçalho do balão quebra linha quando falta espaço e a dica do campo de mensagem some.
*/
@media (max-width: 700px) {
    .chat-mensagens[b-f5sug0o7v3] {
        gap: 8px;
        padding: 10px 8px;
    }

    .chat-linha[b-f5sug0o7v3] {
        gap: 4px;
        max-width: 94%;
    }

    .chat-avatar[b-f5sug0o7v3] {
        display: none;
    }

    .chat-balao[b-f5sug0o7v3],
    .chat-linha-minha .chat-balao[b-f5sug0o7v3] {
        padding: 8px 11px 7px;
        border-radius: 14px;
    }

    .chat-balao[b-f5sug0o7v3]::before,
    .chat-balao[b-f5sug0o7v3]::after {
        display: none;
    }

    .chat-balao-topo[b-f5sug0o7v3] {
        flex-wrap: wrap;
        gap: 2px 8px;
    }

    .chat-cliente[b-f5sug0o7v3] {
        max-width: 48vw;
    }

    .chat-responder[b-f5sug0o7v3] {
        width: 26px;
        height: 26px;
    }

    .chat-compositor[b-f5sug0o7v3] {
        padding: 6px 6px 8px;
    }

    .chat-compositor .tk-ajuda[b-f5sug0o7v3] {
        display: none;
    }

    .chat-compositor-rodape[b-f5sug0o7v3] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/JanelaNovaConversa.razor.rz.scp.css */
.nova-conversa[b-dqwbfdsqip] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Pessoas já escolhidas, no alto. */
.nova-conversa-chips[b-dqwbfdsqip] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nova-conversa-chip[b-dqwbfdsqip] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
}

.nova-conversa-chip button[b-dqwbfdsqip] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--tk-azul-800);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.nova-conversa-chip button:hover[b-dqwbfdsqip] {
    background: rgba(11, 36, 71, .12);
}

.nova-conversa-chip button[b-dqwbfdsqip]  .tk-icone {
    width: 12px;
    height: 12px;
}

.nova-conversa-busca[b-dqwbfdsqip] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font: inherit;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-300, #B9C1CC);
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
}

.nova-conversa-busca:focus[b-dqwbfdsqip] {
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 3px var(--tk-azul-100, #D6E6FB);
}

/* Lista de pessoas: rola dentro da janela. */
.nova-conversa-lista[b-dqwbfdsqip] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: 8px;
    scrollbar-width: thin;
}

.nova-conversa-aviso[b-dqwbfdsqip] {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    color: var(--tk-cinza-500);
}

.nova-conversa-pessoa[b-dqwbfdsqip] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: var(--tk-texto);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tk-cinza-100);
    cursor: pointer;
}

.nova-conversa-pessoa:last-child[b-dqwbfdsqip] {
    border-bottom: none;
}

.nova-conversa-pessoa:hover[b-dqwbfdsqip] {
    background: var(--tk-azul-50);
}

.nova-conversa-pessoa-marcada[b-dqwbfdsqip] {
    background: var(--tk-azul-50);
}

.nova-conversa-pessoa-texto[b-dqwbfdsqip] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.nova-conversa-pessoa-texto strong[b-dqwbfdsqip],
.nova-conversa-pessoa-texto small[b-dqwbfdsqip] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nova-conversa-pessoa-texto small[b-dqwbfdsqip] {
    color: var(--tk-cinza-500);
}

/* A "caixinha" de marcado, à direita. */
.nova-conversa-marca[b-dqwbfdsqip] {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    border: 2px solid var(--tk-cinza-300, #B9C1CC);
    border-radius: 6px;
}

.nova-conversa-pessoa-marcada .nova-conversa-marca[b-dqwbfdsqip] {
    background: var(--tk-azul-600);
    border-color: var(--tk-azul-600);
}

.nova-conversa-marca[b-dqwbfdsqip]  .tk-icone {
    width: 14px;
    height: 14px;
}
/* /Components/Pages/JanelaNovoChamado.razor.rz.scp.css */
/* Os botões ficam no rodapé da janela (sempre visíveis, mesmo com o formulário rolando): alinhados à direita. */
.novo-chamado-acoes[b-jxg2vj4n46] {
    justify-content: flex-end;
    width: 100%;
}

.novo-chamado[b-jxg2vj4n46] {
    max-height: calc(92vh - 150px);
    overflow-y: auto;
    padding-right: 4px;
}
/* /Components/Pages/MeuDia.razor.rz.scp.css */
/* Meu dia: campo rápido, resumo do dia e os grupos de tarefas (atrasadas, em andamento, a fazer, feitas). */

.dia-topo-acoes[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dia-navegacao[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dia-botao[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: color-mix(in srgb, var(--tk-branco) 75%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.dia-botao:hover:not(:disabled)[b-f3wkwtxgzy] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

.dia-botao:disabled[b-f3wkwtxgzy] {
    cursor: default;
    opacity: .6;
}

.dia-botao[b-f3wkwtxgzy]  .tk-icone {
    width: 16px;
    height: 16px;
}

/* Campo rápido: uma linha só, no topo. */
.dia-rapido[b-f3wkwtxgzy] {
    /* O cartão corta o que passa da borda; aqui a lista de chamados do "#" precisa aparecer por cima dos cartões de baixo. */
    overflow: visible;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin-bottom: 12px;
}

.dia-rapido[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.dia-rapido:focus-within[b-f3wkwtxgzy] {
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 1px;
}

/* Resumo e barra de progresso. */
.dia-resumo[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 2px 12px;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-barra[b-f3wkwtxgzy] {
    flex: 0 1 220px;
    height: 8px;
    overflow: hidden;
    background: var(--tk-cinza-200);
    border-radius: 999px;
}

.dia-barra-cheia[b-f3wkwtxgzy] {
    display: block;
    height: 100%;
    background: #13804F;
    border-radius: 999px;
    transition: width .35s ease;
}

.dia-percentual[b-f3wkwtxgzy] {
    font-weight: 600;
}

/* Grupos. */
.dia-grupo[b-f3wkwtxgzy] {
    padding: 12px 16px 6px;
    margin-bottom: 12px;
}

.dia-grupo h2[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
}

.dia-grupo h2[b-f3wkwtxgzy]  .tk-icone {
    width: 16px;
    height: 16px;
}

.dia-grupo-atrasadas[b-f3wkwtxgzy] {
    border-left: 4px solid #B42318;
}

.dia-grupo-atrasadas h2[b-f3wkwtxgzy] {
    color: var(--tk-vermelho-texto);
}

.dia-contagem[b-f3wkwtxgzy] {
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: var(--tk-azul-100, var(--tk-azul-100));
    border-radius: 999px;
}

.dia-recolher[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.dia-seta[b-f3wkwtxgzy] {
    display: inline-flex;
    transition: transform .2s ease;
}

.dia-seta-aberta[b-f3wkwtxgzy] {
    transform: rotate(90deg);
}

.dia-seta[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

/* As tarefas são cartões separados: borda, fundo e espaço entre um e outro (antes eram só linhas coladas). */
.dia-lista[b-f3wkwtxgzy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Uma tarefa. */
.dia-tarefa[b-f3wkwtxgzy] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-300);
    border-left: 4px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    box-shadow: 0 1px 2px rgba(15, 35, 70, .06);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.dia-tarefa:hover[b-f3wkwtxgzy] {
    border-color: var(--tk-cinza-300);
    border-left-color: var(--tk-azul-600);
    box-shadow: 0 3px 10px rgba(15, 35, 70, .10);
}

.dia-check[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    padding: 0;
    color: transparent;
    background: var(--tk-branco);
    border: 2px solid var(--tk-azul-200);
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.dia-check:hover[b-f3wkwtxgzy] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
    border-color: var(--tk-azul-600);
}

.dia-check-feito[b-f3wkwtxgzy] {
    color: #fff;
    background: #13804F;
    border-color: #13804F;
}

.dia-check-feito:hover[b-f3wkwtxgzy] {
    color: #fff;
}

.dia-check[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

/* Tarefa cancelada (o chamado foi para outra pessoa): marcador cinza com "x", título riscado e o motivo escrito logo abaixo. */
.dia-check-cancelado[b-f3wkwtxgzy] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    background: var(--tk-cinza-100);
    border-color: var(--tk-cinza-300);
    cursor: default;
}

.dia-check-cancelado:hover[b-f3wkwtxgzy] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    border-color: var(--tk-cinza-300);
}

.dia-tarefa-cancelada .dia-tarefa-titulo[b-f3wkwtxgzy] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    text-decoration: line-through;
}

.dia-cancelada-motivo[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--tk-ambar-texto);
}

.dia-cancelada-motivo[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* O corpo da tarefa: título e detalhes, observação e chamado, cada um num bloco com espaço entre eles. */
.dia-tarefa-corpo[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dia-tarefa-linha[b-f3wkwtxgzy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.dia-tarefa-titulo[b-f3wkwtxgzy] {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.dia-tarefa-feita .dia-tarefa-titulo[b-f3wkwtxgzy] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    text-decoration: line-through;
}

.dia-prioridade[b-f3wkwtxgzy] {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
}

.dia-prioridade-alta[b-f3wkwtxgzy] { color: var(--tk-vermelho-texto); background: var(--tk-erro-fundo); }
.dia-prioridade-media[b-f3wkwtxgzy] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.dia-prioridade-baixa[b-f3wkwtxgzy] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.dia-horario[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-horario[b-f3wkwtxgzy]  .tk-icone {
    width: 13px;
    height: 13px;
}

.dia-atraso[b-f3wkwtxgzy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-vermelho-texto);
}

/* Observação: bloco com o rótulo "Observação" e uma barra cinza ao lado, para não se confundir com o título nem com o chamado. */
.dia-observacao[b-f3wkwtxgzy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--tk-cinza-50);
    border-left: 3px solid var(--tk-cinza-300);
    border-radius: 0 var(--tk-raio-p) var(--tk-raio-p) 0;
}

.dia-rotulo[b-f3wkwtxgzy] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-tarefa-anotacao[b-f3wkwtxgzy] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-texto);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* O chamado ligado à tarefa. */
/* Chamado ligado: faixa azul bem visível, com o rótulo "Chamado ligado", o número em destaque e a situação. */
.dia-chamado[b-f3wkwtxgzy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 12px;
    font-size: 13px;
    background: var(--tk-azul-100);
    border: 1px solid var(--tk-azul-200);
    border-left: 4px solid var(--tk-azul-600);
    border-radius: var(--tk-raio-p);
}

.dia-chamado .dia-rotulo[b-f3wkwtxgzy] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.dia-chamado a[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
}

.dia-chamado a:hover[b-f3wkwtxgzy] {
    text-decoration: underline;
}

.dia-chamado a[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

.dia-chamado-status[b-f3wkwtxgzy] {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
}

.dia-chamado-status-1[b-f3wkwtxgzy] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.dia-chamado-status-2[b-f3wkwtxgzy] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.dia-chamado-status-3[b-f3wkwtxgzy] { color: var(--tk-verde-texto); background: var(--tk-verde-suave); }
.dia-chamado-status-4[b-f3wkwtxgzy] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.dia-sugestao[b-f3wkwtxgzy] {
    padding: 2px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
    border: 1px solid #13804F;
    border-radius: 999px;
    cursor: pointer;
}

.dia-sugestao:hover[b-f3wkwtxgzy] {
    background: var(--tk-verde-suave);
}

/* Ações de cada tarefa: aparecem sempre em telas de toque e, no computador, quando o mouse ou o foco está na linha. */
.dia-acoes[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    opacity: .55;
    transition: opacity .15s ease;
}

.dia-tarefa:hover .dia-acoes[b-f3wkwtxgzy],
.dia-tarefa:focus-within .dia-acoes[b-f3wkwtxgzy] {
    opacity: 1;
}

.dia-acao[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.dia-acao:hover[b-f3wkwtxgzy] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-200);
}

.dia-acao-icone[b-f3wkwtxgzy] {
    width: 28px;
    padding: 0;
}

.dia-acao-icone[b-f3wkwtxgzy]  .tk-icone {
    width: 15px;
    height: 15px;
}

.dia-acao-baixo[b-f3wkwtxgzy]  .tk-icone {
    transform: rotate(180deg);
}

.dia-acao-destaque[b-f3wkwtxgzy] {
    color: #fff;
    background: var(--tk-azul-600);
}

.dia-acao-destaque:hover[b-f3wkwtxgzy] {
    color: var(--tk-azul-800);
}

.dia-acao-perigo[b-f3wkwtxgzy] {
    color: var(--tk-vermelho-texto);
}

.dia-confirma[b-f3wkwtxgzy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-vermelho-texto);
}

@media (max-width: 720px) {
    .dia-tarefa[b-f3wkwtxgzy] {
        flex-wrap: wrap;
    }

    .dia-acoes[b-f3wkwtxgzy] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-left: 36px;
        opacity: 1;
    }

    .dia-topo-acoes[b-f3wkwtxgzy] {
        flex-wrap: wrap;
    }
}

/* Cronômetro: o tempo da tarefa e o tempo registrado no dia. */
.dia-tempo[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: var(--tk-cinza-100);
    border-radius: 999px;
}

.dia-tempo[b-f3wkwtxgzy]  .tk-icone {
    width: 13px;
    height: 13px;
}

.dia-tempo-rodando[b-f3wkwtxgzy] {
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
}

.dia-tempo-ponto[b-f3wkwtxgzy] {
    width: 8px;
    height: 8px;
    background: #13804F;
    border-radius: 50%;
    animation: dia-pulsar-b-f3wkwtxgzy 1.4s ease-in-out infinite;
}

@keyframes dia-pulsar-b-f3wkwtxgzy {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}

/* A pessoa que pediu menos movimento no sistema não vê o pontinho pulsar (ele continua verde, e o texto diz "ligado"). */
@media (prefers-reduced-motion: reduce) {
    .dia-tempo-ponto[b-f3wkwtxgzy] {
        animation: none !important;
    }
}

.dia-visualmente-oculto[b-f3wkwtxgzy] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dia-tempo-dia[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-weight: 600;
    color: var(--tk-azul-800);
}

.dia-tempo-dia[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

.dia-acao-iniciar[b-f3wkwtxgzy] {
    color: var(--tk-verde-texto);
}

/* Faixa "Dia fechado". */
.dia-fechado[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
    border: 1px solid var(--tk-verde-borda);
    border-radius: var(--tk-raio-p);
}

.dia-fechado[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Janela "Fechar o dia". */
.dia-fechar-aviso[b-f3wkwtxgzy] {
    margin: 0 0 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
    border-radius: var(--tk-raio-p);
}

.dia-fechar-numeros[b-f3wkwtxgzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-bottom: 8px;
    font-size: 14px;
}

.dia-fechar-titulo[b-f3wkwtxgzy] {
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 700;
}

.dia-fechar-lista[b-f3wkwtxgzy] {
    max-height: 220px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.dia-fechar-lista li[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--tk-cinza-100);
    font-size: 13px;
}

.dia-fechar-lista li:first-child[b-f3wkwtxgzy] {
    border-top: 0;
}

.dia-fechar-lista li[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--tk-verde-texto);
}

.dia-fechar-marca[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.dia-fechar-texto[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dia-fechar-tempo[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
}

/* Sugestões para hoje. */
.dia-sugestoes[b-f3wkwtxgzy] {
    border-left: 4px solid var(--tk-azul-600);
}

.dia-sugestoes-topo[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dia-sugestoes-ajuda[b-f3wkwtxgzy] {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-sugestao-item[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--tk-cinza-100);
}

.dia-sugestao-item:first-child[b-f3wkwtxgzy] {
    border-top: 0;
}

.dia-motivo[b-f3wkwtxgzy] {
    flex: 0 0 148px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
}

.dia-motivo[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.dia-motivo-1[b-f3wkwtxgzy] { color: var(--tk-vermelho-texto); background: var(--tk-erro-fundo); }
.dia-motivo-2[b-f3wkwtxgzy] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); }
.dia-motivo-3[b-f3wkwtxgzy] { color: var(--tk-azul-texto, var(--tk-azul-600)); background: var(--tk-azul-100); }
.dia-motivo-4[b-f3wkwtxgzy] { color: var(--tk-cinza-600); background: var(--tk-cinza-100); }

.dia-sugestao-corpo[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dia-sugestao-corpo a[b-f3wkwtxgzy] {
    font-size: 14px;
    color: var(--tk-azul-800);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dia-sugestao-corpo a:hover[b-f3wkwtxgzy] {
    text-decoration: underline;
}

.dia-sugestao-detalhe[b-f3wkwtxgzy] {
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

@media (max-width: 720px) {
    .dia-sugestao-item[b-f3wkwtxgzy] {
        flex-wrap: wrap;
    }

    .dia-motivo[b-f3wkwtxgzy] {
        flex-basis: auto;
    }
}

/* Escolha entre Lista e Agenda. */
.dia-visao[b-f3wkwtxgzy] {
    display: inline-flex;
    padding: 3px;
    background: color-mix(in srgb, var(--tk-branco) 60%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.dia-visao-botao[b-f3wkwtxgzy] {
    height: 28px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.dia-visao-ativa[b-f3wkwtxgzy] {
    color: #fff;
    background: var(--tk-azul-600);
}

/* Agenda: uma faixa por hora que tem tarefa; cada tarefa é um retângulo arredondado na cor da prioridade. */
.dia-agenda[b-f3wkwtxgzy] {
    padding: 14px 18px;
}

.agenda-legenda[b-f3wkwtxgzy] {
    display: flex;
    gap: 16px;
    margin: 0 0 10px;
    padding: 0;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    list-style: none;
}

.agenda-legenda li[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.agenda-amostra[b-f3wkwtxgzy] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.agenda-faixa[b-f3wkwtxgzy] {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--tk-cinza-100);
}

.agenda-faixa:first-of-type[b-f3wkwtxgzy] {
    border-top: 0;
}

.agenda-hora[b-f3wkwtxgzy] {
    flex: 0 0 64px;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-azul-800);
}

.agenda-hora-livre[b-f3wkwtxgzy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.agenda-itens[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.agenda-bloco[b-f3wkwtxgzy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: min(320px, 100%);
    padding: 8px 12px;
    font: inherit;
    text-align: left;
    color: inherit;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.agenda-bloco:hover[b-f3wkwtxgzy] {
    box-shadow: 0 3px 10px rgba(16, 24, 40, .14);
    transform: translateY(-1px);
}

/* Cor da prioridade: vermelho = alta, laranja = média, cinza = baixa (o texto da prioridade também aparece em cada bloco). */
.agenda-bloco-alta[b-f3wkwtxgzy], .agenda-amostra.agenda-bloco-alta[b-f3wkwtxgzy] { color: var(--tk-vermelho-texto); background: var(--tk-erro-fundo); border-color: #B42318; }
.agenda-bloco-media[b-f3wkwtxgzy], .agenda-amostra.agenda-bloco-media[b-f3wkwtxgzy] { color: var(--tk-ambar-texto); background: var(--tk-ambar-suave); border-color: #B25E00; }
.agenda-bloco-baixa[b-f3wkwtxgzy], .agenda-amostra.agenda-bloco-baixa[b-f3wkwtxgzy] { color: var(--tk-cinza-700); background: var(--tk-cinza-100); border-color: var(--tk-cinza-600); }

.agenda-amostra[b-f3wkwtxgzy] {
    border-width: 0 0 0 4px;
    border-style: solid;
}

.agenda-bloco-topo[b-f3wkwtxgzy] {
    display: flex;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .85;
}

.agenda-bloco-titulo[b-f3wkwtxgzy] {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.agenda-bloco-chamado[b-f3wkwtxgzy] {
    font-size: 12px;
    opacity: .85;
}

.agenda-bloco-feito[b-f3wkwtxgzy] {
    opacity: .55;
}

.agenda-bloco-feito .agenda-bloco-titulo[b-f3wkwtxgzy] {
    text-decoration: line-through;
}

@media (max-width: 560px) {
    .agenda-faixa[b-f3wkwtxgzy] {
        flex-direction: column;
        gap: 4px;
    }

    .agenda-hora[b-f3wkwtxgzy] {
        flex-basis: auto;
        padding-top: 0;
    }
}

/* Janela de nova tarefa. */
.dia-form-linha[b-f3wkwtxgzy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dia-input[b-f3wkwtxgzy] {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

@media (max-width: 560px) {
    .dia-form-linha[b-f3wkwtxgzy] {
        grid-template-columns: 1fr;
    }
}

/* ---- Lembrete, repetição, histórico, chamado reaberto e arrastar e soltar ---- */
.dia-link-historico[b-f3wkwtxgzy] {
    align-self: center;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

.dia-link-historico:hover[b-f3wkwtxgzy] {
    text-decoration: underline;
}

.dia-lembrete[b-f3wkwtxgzy],
.dia-repete[b-f3wkwtxgzy] {
    color: var(--tk-azul-800);
}

/* Selo "Google Tarefas" / "Microsoft To Do" na tarefa importada (o mesmo verde-água dos compromissos importados da Agenda). */
.dia-externa[b-f3wkwtxgzy] {
    padding: 1px 8px;
    font-weight: 600;
    color: var(--tk-ciano-texto);
    background: var(--tk-ciano-suave);
    border-radius: 999px;
}

.dia-aviso-externo[b-f3wkwtxgzy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-ciano-texto);
    background: var(--tk-ciano-suave);
    border: 1px solid var(--tk-ciano-borda);
    border-radius: var(--tk-raio-p);
}

.dia-aviso-externo[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.dia-form-linha-dupla[b-f3wkwtxgzy] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.dia-repete-aviso[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-repete-aviso[b-f3wkwtxgzy]  .tk-icone {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.dia-grupo-reabertas h2[b-f3wkwtxgzy] {
    color: var(--tk-ambar-texto);
}

.dia-grupo-reabertas h2[b-f3wkwtxgzy]  .tk-icone {
    width: 18px;
    height: 18px;
}

.dia-reaberta-texto[b-f3wkwtxgzy] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--tk-ambar-texto);
}

/* Arrastar: a tarefa arrastada fica esmaecida e a que vai tomar o lugar mostra uma linha azul em cima. */
.dia-tarefa[draggable="true"][b-f3wkwtxgzy] {
    cursor: grab;
}

.dia-tarefa-arrastando[b-f3wkwtxgzy] {
    opacity: .45;
}

.dia-tarefa-alvo[b-f3wkwtxgzy] {
    box-shadow: 0 -3px 0 0 var(--tk-azul-600);
}

/* Janela "Tarefas repetidas". */
.dia-repetidas[b-f3wkwtxgzy] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dia-repetida[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.dia-repetida-parada[b-f3wkwtxgzy] {
    background: var(--tk-cinza-50);
}

.dia-repetida-corpo[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dia-repetida-detalhe[b-f3wkwtxgzy] {
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

/* ---- Buscar e filtrar tarefas ---- */
.dia-busca[b-f3wkwtxgzy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    overflow: visible;
}

.dia-busca-campo[b-f3wkwtxgzy] {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 10px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.dia-busca-campo:focus-within[b-f3wkwtxgzy] {
    border-color: var(--tk-azul-600);
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 0;
}

.dia-busca-campo[b-f3wkwtxgzy]  .tk-icone {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-busca-texto[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
}

.dia-busca-filtro[b-f3wkwtxgzy] {
    width: auto;
    min-width: 150px;
}

.dia-busca-marca[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--tk-azul-800);
    cursor: pointer;
}

.dia-resultados[b-f3wkwtxgzy] {
    padding: 0 0 8px;
}

.dia-busca-aviso[b-f3wkwtxgzy] {
    margin: 0;
    padding: 10px 18px;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.dia-busca-dia[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 8px;
    padding: 0 4px;
    font-size: 14px;
    color: var(--tk-azul-800);
}

/* ---- Desfazer ao excluir ---- */
.dia-desfazer[b-f3wkwtxgzy] {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 48px));
}

.dia-desfazer-item[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: #fff;
    background: var(--tk-texto);
    border-radius: var(--tk-raio-p);
    box-shadow: 0 8px 24px rgba(15, 35, 70, .30);
}

.dia-desfazer-item span[b-f3wkwtxgzy] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dia-desfazer-botao[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.dia-desfazer-botao:hover[b-f3wkwtxgzy] {
    background: var(--tk-azul-100);
}

/* ---- Passos (checklist) da tarefa ---- */
.dia-passos[b-f3wkwtxgzy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tk-verde-suave);
    border: 1px solid var(--tk-verde-borda);
    border-left: 4px solid #5E9E3A;
    border-radius: var(--tk-raio-p);
}

.dia-passos[b-f3wkwtxgzy] {
    position: relative;
}

.dia-passos-topo[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* X no canto superior direito: só existe quando a tarefa ainda não tem passos (desfaz o "Adicionar passos"). */
.dia-passos-fechar[b-f3wkwtxgzy] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--tk-verde-texto);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.dia-passos-fechar:hover[b-f3wkwtxgzy] {
    background: color-mix(in srgb, var(--tk-verde-texto) 14%, transparent);
}

.dia-passos-fechar[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

.dia-passos-topo .dia-rotulo[b-f3wkwtxgzy] {
    color: var(--tk-verde-texto);
}

.dia-passos-progresso[b-f3wkwtxgzy] {
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-verde-texto);
}

.dia-passos-barra[b-f3wkwtxgzy] {
    flex: 0 1 120px;
    height: 6px;
    background: var(--tk-verde-suave);
    border-radius: 999px;
    overflow: hidden;
}

.dia-passos-barra-cheia[b-f3wkwtxgzy] {
    display: block;
    height: 100%;
    background: #5E9E3A;
    border-radius: 999px;
}

.dia-passos-lista[b-f3wkwtxgzy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dia-passo[b-f3wkwtxgzy] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dia-passo-check[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: transparent;
    background: var(--tk-branco);
    border: 2px solid var(--tk-verde-borda);
    border-radius: 5px;
    cursor: pointer;
}

.dia-passo-check:hover[b-f3wkwtxgzy] {
    color: #5E9E3A;
}

.dia-passo-check-feito[b-f3wkwtxgzy] {
    color: #fff;
    background: #5E9E3A;
    border-color: #5E9E3A;
}

.dia-passo-check-feito:hover[b-f3wkwtxgzy] {
    color: #fff;
}

.dia-passo-check[b-f3wkwtxgzy]  .tk-icone {
    width: 12px;
    height: 12px;
}

.dia-passo-texto[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Numeração do passo a passo: 1., 2., 3. antes do texto (some e reordena sozinha quando um passo é excluído). */
.dia-passos-lista[b-f3wkwtxgzy] {
    counter-reset: passo;
}

.dia-passo-texto[b-f3wkwtxgzy]::before {
    counter-increment: passo;
    content: counter(passo) ".";
    display: inline-block;
    min-width: 1.6em;
    margin-right: 2px;
    font-weight: 700;
    color: var(--tk-azul-800);
    text-decoration: none;
}

.dia-passo-feito .dia-passo-texto[b-f3wkwtxgzy] {
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    text-decoration: line-through;
}

.dia-passo-excluir[b-f3wkwtxgzy] {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 2px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
}

.dia-passo:hover .dia-passo-excluir[b-f3wkwtxgzy],
.dia-passo:focus-within .dia-passo-excluir[b-f3wkwtxgzy] {
    opacity: 1;
}

.dia-passo-excluir:hover[b-f3wkwtxgzy] {
    color: var(--tk-vermelho-texto);
}

.dia-passo-excluir[b-f3wkwtxgzy]  .tk-icone {
    width: 14px;
    height: 14px;
}

.dia-passo-novo[b-f3wkwtxgzy] {
    height: 30px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    background: var(--tk-branco);
    border: 1px dashed var(--tk-verde-borda);
    border-radius: var(--tk-raio-p);
}

.dia-passo-novo:focus[b-f3wkwtxgzy] {
    border-style: solid;
    outline: 2px solid #5E9E3A;
    outline-offset: 0;
}

.dia-passo-abrir[b-f3wkwtxgzy] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: transparent;
    border: 0;
    cursor: pointer;
}

.dia-passo-abrir:hover[b-f3wkwtxgzy] {
    text-decoration: underline;
}

.dia-passo-abrir[b-f3wkwtxgzy]  .tk-icone {
    width: 13px;
    height: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .dia-passo-excluir[b-f3wkwtxgzy] {
        transition: none;
    }
}

/* Agenda do dia: a bolinha de concluir fica ao lado do retângulo da tarefa. */
.agenda-item[b-f3wkwtxgzy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: min(360px, 100%);
}

.agenda-item .dia-check[b-f3wkwtxgzy] {
    margin-top: 8px;
}

.agenda-item .agenda-bloco[b-f3wkwtxgzy] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Passos na visão Agenda: um botão pequeno abaixo do retângulo (com o andamento, ex.: "Passos 1/3") que abre a lista de passos. */
.agenda-item-corpo[b-f3wkwtxgzy] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.agenda-item-corpo .agenda-bloco[b-f3wkwtxgzy] {
    width: 100%;
}

.agenda-passos-botao[b-f3wkwtxgzy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-verde-texto);
    background: var(--tk-sucesso-fundo);
    border: 1px dashed var(--tk-verde-borda);
    border-radius: 10px;
    cursor: pointer;
}

.agenda-passos-botao:hover[b-f3wkwtxgzy],
.agenda-passos-botao-aberto[b-f3wkwtxgzy] {
    background: var(--tk-verde-suave);
    border-style: solid;
}

.agenda-passos-botao[b-f3wkwtxgzy]  .tk-icone {
    width: 12px;
    height: 12px;
}

.agenda-passos-painel[b-f3wkwtxgzy] {
    width: 100%;
}

.agenda-passos-painel .dia-passos[b-f3wkwtxgzy] {
    margin-top: 0;
}
/* /Components/Pages/MinhaConta.razor.rz.scp.css */
/* Minha conta: seções na lateral (esquerda) e o conteúdo da seção escolhida (direita). Só variáveis --tk-* (os temas as trocam). */

.mc-layout[b-e1skv3oate] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ------------------------------ Lateral ------------------------------ */

.mc-lateral[b-e1skv3oate] {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-100);
    border-radius: var(--tk-raio);
    box-shadow: var(--tk-sombra-suave);
}

.mc-item[b-e1skv3oate] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font: inherit;
    color: var(--tk-texto);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tk-transicao), border-color var(--tk-transicao);
}

.mc-item:hover[b-e1skv3oate] {
    background: var(--tk-azul-50);
}

.mc-item[b-e1skv3oate]  .tk-icone {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--tk-cinza-500);
    transition: color var(--tk-transicao);
}

.mc-item-texto[b-e1skv3oate] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mc-item-texto strong[b-e1skv3oate] {
    font-size: 14px;
}

.mc-item-texto small[b-e1skv3oate] {
    font-size: 12px;
    color: var(--tk-cinza-500);
}

/* Seção aberta: fundo azul claro, barra azul à esquerda e o ícone na cor principal. */
.mc-item-ativo[b-e1skv3oate],
.mc-item-ativo:hover[b-e1skv3oate] {
    background: var(--tk-azul-100);
    border-color: var(--tk-azul-200);
    box-shadow: inset 4px 0 0 var(--tk-azul-600);
}

.mc-item-ativo[b-e1skv3oate]  .tk-icone {
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* ------------------------------ Conteúdo ------------------------------ */

.mc-conteudo[b-e1skv3oate] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.mc-corpo[b-e1skv3oate] {
    padding: 20px;
}

.mc-linha[b-e1skv3oate] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mc-texto[b-e1skv3oate] {
    margin: 4px 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tk-cinza-600);
}

.mc-linha .mc-texto[b-e1skv3oate] {
    margin-bottom: 0;
    max-width: 560px;
}

/* Perfil: a foto grande (clicável) e o nome ao lado. */
.mc-perfil-topo[b-e1skv3oate] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tk-azul-100);
}

.mc-foto[b-e1skv3oate] {
    position: relative;
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 50%;
}

.mc-foto-camera[b-e1skv3oate] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(7, 31, 77, .55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--tk-transicao);
}

.mc-foto:hover .mc-foto-camera[b-e1skv3oate],
.mc-foto:focus-visible .mc-foto-camera[b-e1skv3oate] {
    opacity: 1;
}

.mc-foto-camera[b-e1skv3oate]  .tk-icone {
    width: 26px;
    height: 26px;
}

.mc-perfil-nome[b-e1skv3oate] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mc-perfil-nome strong[b-e1skv3oate] {
    font-size: 20px;
    color: var(--tk-azul-900);
}

/* Dados em grade (rótulo pequeno em cima, valor embaixo). */
.mc-dados[b-e1skv3oate] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px 24px;
    margin: 0;
}

.mc-dados dt[b-e1skv3oate] {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-500);
}

.mc-dados dd[b-e1skv3oate] {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--tk-texto);
}

.mc-nota[b-e1skv3oate] {
    margin: 20px 0 0;
}

/* Botões da tela (o DxButton é para janelas e grades; aqui um botão simples, no padrão das telas de cadastro). */
.mc-botao[b-e1skv3oate] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tk-transicao), border-color var(--tk-transicao), color var(--tk-transicao);
}

.mc-botao:hover:not(:disabled)[b-e1skv3oate] {
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-500);
}

.mc-botao:disabled[b-e1skv3oate] {
    opacity: .55;
    cursor: not-allowed;
}

.mc-botao[b-e1skv3oate]  .tk-icone {
    width: 18px;
    height: 18px;
}

.mc-botao-pequeno[b-e1skv3oate] {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.mc-botao-perigo[b-e1skv3oate] {
    color: var(--tk-vermelho-texto);
    border-color: var(--tk-vermelho-borda);
}

.mc-botao-perigo:hover:not(:disabled)[b-e1skv3oate] {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
    border-color: var(--tk-erro);
}

/* Notificações: cada opção é um título com explicação e a caixa de marcar à direita. */
.mc-opcoes[b-e1skv3oate] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mc-opcao[b-e1skv3oate] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tk-azul-100);
}

.mc-opcao:first-child[b-e1skv3oate] {
    padding-top: 0;
}

.mc-opcao:last-child[b-e1skv3oate] {
    padding-bottom: 0;
    border-bottom: none;
}

.mc-opcao .mc-texto[b-e1skv3oate] {
    margin: 2px 0 0;
    max-width: 560px;
}

.mc-rodape[b-e1skv3oate] {
    display: flex;
    justify-content: flex-end;
}

.mc-botao-principal[b-e1skv3oate] {
    color: #fff;
    background: var(--tk-azul-600);
    border-color: var(--tk-azul-600);
}

.mc-botao-principal:hover:not(:disabled)[b-e1skv3oate] {
    color: #fff;
    background: var(--tk-azul-700);
    border-color: var(--tk-azul-700);
}

/* Acessos abertos. */
.mc-acessos[b-e1skv3oate] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mc-acesso[b-e1skv3oate] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-100);
    border-radius: 12px;
}

.mc-acesso-atual[b-e1skv3oate] {
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-200);
}

.mc-acesso-icone[b-e1skv3oate] {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-100);
    border-radius: 12px;
}

.mc-acesso-icone[b-e1skv3oate]  .tk-icone {
    width: 22px;
    height: 22px;
}

.mc-acesso-texto[b-e1skv3oate] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-acesso-texto strong[b-e1skv3oate] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mc-acesso-texto small[b-e1skv3oate] {
    color: var(--tk-cinza-500);
}

/* ------------------------------ Telas menores ------------------------------ */

/* Celular e tablet em pé: a lateral vira uma fila de seções no topo, que rola para o lado se não couber. */
@media (max-width: 900px) {
    .mc-layout[b-e1skv3oate] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mc-lateral[b-e1skv3oate] {
        position: static;
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .mc-item[b-e1skv3oate] {
        flex: none;
        padding: 8px 14px;
    }

    .mc-item-texto small[b-e1skv3oate] {
        display: none;
    }

    .mc-item-ativo[b-e1skv3oate],
    .mc-item-ativo:hover[b-e1skv3oate] {
        box-shadow: inset 0 -3px 0 var(--tk-azul-600);
    }

    .mc-acesso[b-e1skv3oate] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/MinhaEmpresa.razor.rz.scp.css */
/* Estilos da tela "Minha empresa" (CSS isolado: vale só para esta página). */

/* Logotipo à esquerda (mais estreito) e dados cadastrais à direita. */
.emp-grade[b-wuz9ehpfdx] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 20px;
    align-items: start;
}

.emp-corpo[b-wuz9ehpfdx] {
    padding: 20px;
}

.emp-logo[b-wuz9ehpfdx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Moldura tracejada onde o logotipo aparece (proporção próxima da recomendada, 250x70). */
.emp-logo-caixa[b-wuz9ehpfdx] {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 300px;
    min-height: 110px;
    padding: 12px;
    background: var(--tk-azul-50);
    border: 2px dashed var(--tk-azul-100);
    border-radius: var(--tk-raio);
}

.emp-logo-caixa img[b-wuz9ehpfdx] {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.emp-logo-vazio[b-wuz9ehpfdx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tk-cinza-500);
    font-weight: 600;
}

.emp-logo-acoes[b-wuz9ehpfdx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.emp-botao-arquivo[b-wuz9ehpfdx] {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 8px 16px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-align: center;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-600);
    border-radius: var(--tk-raio-p);
    cursor: pointer;
    transition: background var(--tk-transicao);
}

.emp-botao-arquivo:hover[b-wuz9ehpfdx] {
    background: var(--tk-azul-50);
}

.emp-botao-desabilitado[b-wuz9ehpfdx] {
    opacity: .6;
    pointer-events: none;
}

.emp-logo-dica[b-wuz9ehpfdx] {
    margin: 0;
    font-size: 12px;
    color: var(--tk-cinza-500);
    text-align: center;
}

@media (max-width: 900px) {
    .emp-grade[b-wuz9ehpfdx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Painel.razor.rz.scp.css */
/* Painel de métricas: filtro em cima, depois seções (Agora, No período, Volume, De onde vêm, Equipe, Satisfação). */

.painel-topo-acoes[b-4jdyqwpzvk] {
    display: flex;
    gap: 8px;
}

.painel-atualizar[b-4jdyqwpzvk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: color-mix(in srgb, var(--tk-branco) 75%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    text-decoration: none;
    cursor: pointer;
}

.painel-atualizar:hover:not(:disabled)[b-4jdyqwpzvk] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

.painel-atualizar:disabled[b-4jdyqwpzvk] {
    cursor: default;
    opacity: .7;
}

.painel-atualizar[b-4jdyqwpzvk]  .tk-icone {
    width: 16px;
    height: 16px;
}

.painel-girando[b-4jdyqwpzvk] {
    display: inline-flex;
    animation: painel-girar-b-4jdyqwpzvk 0.9s linear infinite;
}

@keyframes painel-girar-b-4jdyqwpzvk {
    to { transform: rotate(360deg); }
}

/* Filtro único (período e fila), numa linha só acima de tudo. */
.painel-filtros[b-4jdyqwpzvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 4px;
    padding: 12px 16px;
}

.painel-periodos[b-4jdyqwpzvk] {
    display: inline-flex;
    padding: 3px;
    background: var(--tk-cinza-100);
    border-radius: 10px;
}

.painel-periodo[b-4jdyqwpzvk] {
    height: 30px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tk-cinza-600);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.painel-periodo:hover[b-4jdyqwpzvk] {
    color: var(--tk-azul-800);
}

.painel-periodo-ativo[b-4jdyqwpzvk],
.painel-periodo-ativo:hover[b-4jdyqwpzvk] {
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    box-shadow: 0 1px 3px rgba(11, 36, 71, .15);
}

.painel-fila[b-4jdyqwpzvk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.painel-fila select[b-4jdyqwpzvk] {
    height: 34px;
    max-width: 260px;
    padding: 0 10px;
    font: inherit;
    font-weight: 400;
    color: var(--tk-azul-900);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.painel-fila select:focus-visible[b-4jdyqwpzvk] {
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 1px;
}

.painel-intervalo[b-4jdyqwpzvk] {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

/* Ao recarregar, o que já está na tela fica mais claro (sem sumir): nada pisca nem muda de lugar. */
.painel[b-4jdyqwpzvk] {
    transition: opacity .2s ease;
}

.painel-atualizando[b-4jdyqwpzvk] {
    opacity: .55;
    pointer-events: none;
}

.painel-secao[b-4jdyqwpzvk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 22px 0 10px;
    font-size: 15px;
    color: var(--tk-azul-900);
}

.painel-secao small[b-4jdyqwpzvk] {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tk-cinza-500);
}

/* Cartões de indicador: o número de colunas (--colunas) vem do js/grade-equilibrada.js, que deixa as linhas com a mesma
   quantidade de cartões (5 cartões que não cabem numa linha viram 3 + 2, e não 4 + 1). Sem o script, cai no "auto-fill". */
.painel-indicadores[b-4jdyqwpzvk] {
    display: grid;
    grid-template-columns: repeat(var(--colunas, auto-fill), minmax(190px, 1fr));
    gap: 12px;
}

/* Cartões de gráfico em colunas que se ajustam à largura (1, 2 ou 3), cada um inteiro numa coluna: as alturas diferentes não
   deixam buraco nem um cartão sozinho numa linha. */
.painel-grade[b-4jdyqwpzvk] {
    columns: 3 330px;
    column-gap: 14px;
    margin-top: 14px;
}

.painel-grade > .painel-cartao[b-4jdyqwpzvk] {
    display: inline-block;
    width: 100%;
    margin: 0 0 14px;
    break-inside: avoid;
}

/* Dois cartões só (Volume): lado a lado, cada um com metade da linha. Nas colunas acima, dois cartões ficavam um embaixo do outro
   na primeira coluna e sobrava a linha vazia ao lado. Em tela estreita, caem um embaixo do outro. */
.painel-grade-dupla[b-4jdyqwpzvk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
    align-items: start;
    columns: auto;
}

.painel-grade-dupla > .painel-cartao[b-4jdyqwpzvk] {
    margin: 0;
}

.painel-cartao[b-4jdyqwpzvk] {
    min-width: 0;
}

.painel-corpo[b-4jdyqwpzvk] {
    padding: 14px 18px 18px;
}

.painel-nota-topo[b-4jdyqwpzvk] {
    font-size: 12.5px;
    color: var(--tk-cinza-500);
}

.painel-vazio[b-4jdyqwpzvk] {
    padding: 18px 0;
    font-size: 13px;
    text-align: center;
    color: var(--tk-cinza-500);
}

/* Tabela de atendentes (os números alinhados à direita). */
.painel-tabela-rolagem[b-4jdyqwpzvk] {
    overflow-x: auto;
}

.painel-tabela[b-4jdyqwpzvk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.painel-tabela th[b-4jdyqwpzvk] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    color: var(--tk-cinza-600);
    white-space: nowrap;
    border-bottom: 1px solid var(--tk-azul-200);
}

.painel-tabela th:first-child[b-4jdyqwpzvk] {
    text-align: left;
}

.painel-tabela td[b-4jdyqwpzvk] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tk-cinza-100);
}

.painel-tabela tbody tr:hover[b-4jdyqwpzvk] {
    background: var(--tk-azul-50);
}

.painel-num[b-4jdyqwpzvk] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.painel-atendente[b-4jdyqwpzvk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--tk-azul-900);
}

.painel-sat[b-4jdyqwpzvk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Satisfação: resumo (nota média), distribuição das notas e comentários recentes. */
.painel-sat-grade[b-4jdyqwpzvk] {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(220px, 1fr) minmax(260px, 1.4fr);
    gap: 24px;
    align-items: start;
}

.painel-sat-media[b-4jdyqwpzvk] {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--tk-azul-900);
}

.painel-sat-media small[b-4jdyqwpzvk] {
    margin-left: 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.painel-sat-resumo p[b-4jdyqwpzvk] {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.painel-sat-comentarios h3[b-4jdyqwpzvk] {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.painel-sat-comentarios ul[b-4jdyqwpzvk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.painel-sat-comentarios li[b-4jdyqwpzvk] {
    padding: 8px 12px;
    background: var(--tk-azul-50);
    border-left: 4px solid var(--tk-azul-200);
    border-radius: 8px;
}

.painel-comentario-topo[b-4jdyqwpzvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--tk-cinza-500);
}

.painel-comentario-topo a[b-4jdyqwpzvk] {
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

.painel-sat-comentarios p[b-4jdyqwpzvk] {
    margin: 4px 0 0;
    font-size: 13px;
    white-space: pre-line;
    color: var(--tk-cinza-700, #3F4A5A);
}

@media (max-width: 900px) {
    .painel-sat-grade[b-4jdyqwpzvk] {
        grid-template-columns: 1fr;
    }

    .painel-intervalo[b-4jdyqwpzvk] {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .painel-indicadores[b-4jdyqwpzvk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .painel-corpo[b-4jdyqwpzvk] {
        padding: 12px 12px 14px;
    }
}
/* /Components/Pages/QuadroChamados.razor.rz.scp.css */
/* O quadro ocupa a largura toda: 4 colunas iguais; em tela estreita rola para o lado. */
.quadro[b-sgw60x0ru3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 8px;
}

/* Cada coluna tem uma cor (a do status). */
.quadro-coluna-1[b-sgw60x0ru3] { --quadro-cor: #0B5ED7; --quadro-suave: #E7F0FD; }
.quadro-coluna-2[b-sgw60x0ru3] { --quadro-cor: #C77700; --quadro-suave: #FFF1DC; }
.quadro-coluna-3[b-sgw60x0ru3] { --quadro-cor: #13804F; --quadro-suave: #E3F5EC; }
.quadro-coluna-4[b-sgw60x0ru3] { --quadro-cor: #5B6573; --quadro-suave: #ECEFF3; }

/* Com um tema escolhido no menu do perfil, o tom suave sai da cor da coluna diluída no fundo do tema (veja CartaoKpi.razor.css). */
html[data-tema-familia] [class*="quadro-coluna-"][b-sgw60x0ru3] {
    --quadro-suave: color-mix(in srgb, var(--quadro-cor) 16%, var(--tk-branco));
}

html[data-tema-familia] .quadro-coluna-4[b-sgw60x0ru3] {
    --quadro-cor: var(--tk-cinza-500);
}

.quadro-coluna[b-sgw60x0ru3] {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    background: var(--tk-branco);
    border: 2px solid color-mix(in srgb, var(--quadro-cor) 45%, var(--tk-branco));
    border-top: 6px solid var(--quadro-cor);
    border-radius: var(--tk-raio);
    box-shadow: 0 2px 6px rgba(11, 36, 71, .10);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.quadro-coluna-topo[b-sgw60x0ru3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 700;
    color: var(--tk-azul-800);
}

.quadro-coluna-total[b-sgw60x0ru3] {
    min-width: 28px;
    padding: 2px 9px;
    font-size: 13px;
    text-align: center;
    color: var(--quadro-cor);
    background: var(--quadro-suave);
    border-radius: 999px;
}

.quadro-coluna-corpo[b-sgw60x0ru3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 0 10px 12px;
    max-height: 68vh;
    overflow-y: auto;
}

/* Coluna de destino enquanto se arrasta um cartão por cima dela (classe colocada pelo js/quadro-chamados.js). */
.quadro-coluna.quadro-alvo[b-sgw60x0ru3] {
    background: var(--quadro-suave);
    border-color: var(--quadro-cor);
    box-shadow: 0 0 0 3px var(--quadro-suave), 0 8px 20px rgba(11, 36, 71, .14);
}

.quadro-card[b-sgw60x0ru3] {
    padding: 12px;
    background: var(--tk-branco);
    border: 2px solid color-mix(in srgb, var(--quadro-cor) 35%, var(--tk-branco));
    border-left: 6px solid var(--quadro-cor);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(11, 36, 71, .08);
    cursor: grab;
    user-select: none;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.quadro-card:hover[b-sgw60x0ru3] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 36, 71, .16);
}

.quadro-card:active[b-sgw60x0ru3] {
    cursor: grabbing;
}

/* Cartão que não pode ser arrastado (outro responsável ou encerrado). */
.quadro-card[data-bloqueado][b-sgw60x0ru3] {
    cursor: not-allowed;
}

.quadro-card-selecionado[b-sgw60x0ru3] {
    border-color: var(--quadro-cor);
    box-shadow: 0 0 0 2px var(--quadro-suave), 0 6px 16px rgba(11, 36, 71, .14);
}

/* O cartão que está sendo arrastado fica translúcido (classe colocada pelo js/quadro-chamados.js). */
.quadro-card.quadro-card-arrastando[b-sgw60x0ru3] {
    opacity: .4;
}

.quadro-card-topo[b-sgw60x0ru3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.quadro-numero[b-sgw60x0ru3] {
    font-weight: 700;
    color: var(--tk-azul-800);
}

.quadro-topo-direita[b-sgw60x0ru3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Botão (olho) que abre os detalhes do chamado. */
.quadro-detalhes[b-sgw60x0ru3] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.quadro-detalhes:hover[b-sgw60x0ru3] {
    color: var(--tk-azul-800);
    background: var(--tk-azul-50);
}

.quadro-detalhes[b-sgw60x0ru3]  .tk-icone {
    width: 20px;
    height: 20px;
}

/* Botão "Mover" (menu de status): só em telas de toque, onde arrastar com o dedo não funciona bem. */
.quadro-mover[b-sgw60x0ru3] {
    display: none;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tk-azul-texto, var(--tk-azul-700));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100, #D6E6FB);
    border-radius: 999px;
    cursor: pointer;
}

.quadro-mover[b-sgw60x0ru3]  .tk-icone {
    width: 16px;
    height: 16px;
}

@media (pointer: coarse), (max-width: 700px) {
    .quadro-mover[b-sgw60x0ru3] {
        display: inline-flex;
    }

    /* No toque o cartão não é arrastável: o dedo rola a coluna em vez de iniciar um arraste fantasma. */
    .quadro-card[b-sgw60x0ru3] {
        cursor: default;
    }
}

/* Lista do menu "Mover para...". */
.quadro-mover-lista[b-sgw60x0ru3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
}

.quadro-mover-opcao[b-sgw60x0ru3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--quadro-cor);
    background: var(--quadro-suave);
    border: 2px solid var(--quadro-cor);
    border-radius: 10px;
    cursor: pointer;
}

.quadro-mover-opcao small[b-sgw60x0ru3] {
    font-weight: 400;
    color: var(--tk-cinza-600);
}

.quadro-mover-bloqueada[b-sgw60x0ru3] {
    color: var(--tk-cinza-500);
    background: var(--tk-cinza-100);
    border-color: var(--tk-cinza-200, #D9DEE5);
    cursor: not-allowed;
}

/* Prioridade: selo na cor dela (fundo suave, borda e texto mais escuros), para se destacar no cartão. */
.quadro-prioridade[b-sgw60x0ru3] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px 2px 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: color-mix(in srgb, var(--prioridade) 70%, #000);
    background: color-mix(in srgb, var(--prioridade) 14%, var(--tk-branco));
    border: 1px solid color-mix(in srgb, var(--prioridade) 45%, var(--tk-branco));
    border-radius: 999px;
}

.quadro-cor[b-sgw60x0ru3] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    background: var(--prioridade);
    border-radius: 50%;
}

.quadro-titulo[b-sgw60x0ru3] {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tk-texto);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quadro-meta[b-sgw60x0ru3] {
    margin-top: 4px;
    overflow: hidden;
    font-size: 12px;
    color: var(--tk-cinza-500);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.quadro-card-rodape[b-sgw60x0ru3] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

/* Datas do cartão: abertura, prazo de resolução e (se já resolvido) quando foi resolvido. */
.quadro-datas[b-sgw60x0ru3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-cinza-500);
}

/* Cada data tem um ícone antes (calendário, check...), na mesma cor do texto. */
.quadro-datas > span[b-sgw60x0ru3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quadro-datas[b-sgw60x0ru3]  .tk-icone {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Prazo: verde = resolvido dentro do prazo; vermelho = vencido ou resolvido depois do prazo. */
.quadro-limite-ok[b-sgw60x0ru3] {
    color: var(--tk-verde-texto);
}

.quadro-limite-atraso[b-sgw60x0ru3] {
    color: var(--tk-erro);
}

/* Responsável: a foto, ou um círculo tracejado com "+" quando ninguém assumiu. */
.quadro-resp[b-sgw60x0ru3] {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--tk-cinza-500);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: default;
}

.quadro-resp-vazio[b-sgw60x0ru3] {
    border: 2px dashed var(--tk-cinza-300, #B9C1CC);
}

.quadro-resp-mais[b-sgw60x0ru3] {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

/* Quem pode transferir: o círculo reage ao passar o mouse (cresce, ganha um anel azul; o "+" gira) e vira botão. */
.quadro-resp-ativo[b-sgw60x0ru3] {
    cursor: pointer;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s ease, color .2s ease !important;
}

.quadro-resp-ativo:hover[b-sgw60x0ru3] {
    transform: scale(1.18);
    color: var(--tk-azul-texto, var(--tk-azul-600));
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 4px var(--tk-azul-100, #D6E6FB);
}

.quadro-resp-ativo:hover .quadro-resp-mais[b-sgw60x0ru3] {
    animation: quadro-girar-b-sgw60x0ru3 .5s ease;
}

.quadro-resp-ativo:active[b-sgw60x0ru3] {
    transform: scale(.95);
}

@keyframes quadro-girar-b-sgw60x0ru3 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(180deg); }
}

.quadro-vazio[b-sgw60x0ru3],
.quadro-mais[b-sgw60x0ru3] {
    margin: 8px 0;
    font-size: 13px;
    text-align: center;
    color: var(--tk-cinza-500);
}

/* Celular: cada coluna ocupa quase a tela toda e a rolagem para o lado "encaixa" coluna por coluna. */
@media (max-width: 700px) {
    .quadro[b-sgw60x0ru3] {
        grid-template-columns: repeat(4, 86%);
        gap: 10px;
        scroll-snap-type: x mandatory;
    }

    .quadro-coluna[b-sgw60x0ru3] {
        scroll-snap-align: start;
    }

    .quadro-coluna-corpo[b-sgw60x0ru3] {
        max-height: 62vh;
    }
}
/* /Components/Pages/RelatorioMensal.razor.rz.scp.css */
/* Relatório mensal: filtros em cima e, abaixo, o documento (que também é o que vai para o PDF). Só variáveis --tk-*. */

.rel-topo-acoes[b-45i18b8te8] {
    display: flex;
    gap: 8px;
}

.rel-botao[b-45i18b8te8] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-800);
    text-decoration: none;
    background: color-mix(in srgb, var(--tk-branco) 75%, transparent);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

.rel-botao:hover[b-45i18b8te8] {
    background: var(--tk-branco);
    border-color: var(--tk-azul-600);
}

/* ------------------------------ Filtros ------------------------------ */

.rel-filtros[b-45i18b8te8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px;
    margin-bottom: 16px;
}

.rel-campo[b-45i18b8te8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.rel-campo select[b-45i18b8te8] {
    height: 38px;
    padding: 0 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tk-texto);
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

/* ------------------------------ Documento ------------------------------ */

.rel-documento[b-45i18b8te8] {
    max-width: 1100px;
    padding: 32px 36px;
    margin: 0 auto;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-100);
    border-radius: var(--tk-raio);
    box-shadow: var(--tk-sombra-suave);
    transition: opacity .2s ease;
}

.rel-carregando[b-45i18b8te8] {
    opacity: .6;
}

.rel-cabecalho[b-45i18b8te8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 3px solid var(--tk-azul-600);
}

.rel-empresa[b-45i18b8te8] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-cinza-500);
}

.rel-cabecalho h2[b-45i18b8te8] {
    margin: 2px 0 0;
    font-size: 24px;
    color: var(--tk-azul-900);
}

.rel-cliente[b-45i18b8te8] {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--tk-azul-700);
}

.rel-periodo[b-45i18b8te8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.rel-periodo strong[b-45i18b8te8] {
    font-size: 18px;
    color: var(--tk-azul-900);
}

.rel-aviso[b-45i18b8te8] {
    padding: 10px 14px;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--tk-azul-800);
    background: var(--tk-azul-50);
    border-left: 4px solid var(--tk-azul-600);
    border-radius: 6px;
}

.rel-secao[b-45i18b8te8] {
    margin: 30px 0 12px;
    font-size: 16px;
    color: var(--tk-azul-900);
    break-after: avoid;
}

.rel-secao small[b-45i18b8te8] {
    font-size: 12px;
    font-weight: 500;
    color: var(--tk-cinza-500);
}

.rel-indicadores[b-45i18b8te8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.rel-grade[b-45i18b8te8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.rel-bloco[b-45i18b8te8] {
    padding: 14px 16px;
    border: 1px solid var(--tk-azul-100);
    border-radius: var(--tk-raio-p);
    break-inside: avoid;
}

.rel-bloco h4[b-45i18b8te8] {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--tk-azul-800);
}

.rel-vazio[b-45i18b8te8] {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--tk-cinza-500);
}

/* ------------------------------ Satisfação ------------------------------ */

.rel-satisfacao[b-45i18b8te8] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px 28px;
    align-items: start;
}

.rel-sat-resumo[b-45i18b8te8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.rel-sat-resumo p[b-45i18b8te8] {
    margin: 0;
}

.rel-sat-media[b-45i18b8te8] {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--tk-azul-900);
}

.rel-sat-media small[b-45i18b8te8] {
    font-size: 16px;
    font-weight: 500;
    color: var(--tk-cinza-500);
}

.rel-comentarios[b-45i18b8te8] {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.rel-comentarios li[b-45i18b8te8] {
    padding: 10px 14px;
    background: var(--tk-azul-50);
    border-radius: var(--tk-raio-p);
    break-inside: avoid;
}

.rel-comentarios li div[b-45i18b8te8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tk-cinza-600);
}

.rel-comentarios p[b-45i18b8te8] {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--tk-texto);
}

/* ------------------------------ Lista de chamados ------------------------------ */

.rel-tabela-rolagem[b-45i18b8te8] {
    overflow-x: auto;
}

.rel-tabela[b-45i18b8te8] {
    width: 100%;
    font-size: 12.5px;
    border-collapse: collapse;
}

.rel-tabela thead[b-45i18b8te8] {
    display: table-header-group;   /* repete o cabeçalho em cada página impressa */
}

.rel-tabela th[b-45i18b8te8] {
    padding: 8px 10px;
    font-weight: 600;
    text-align: left;
    color: var(--tk-azul-900);
    background: var(--tk-azul-50);
    border-bottom: 2px solid var(--tk-azul-200);
    white-space: nowrap;
}

.rel-tabela td[b-45i18b8te8] {
    padding: 7px 10px;
    vertical-align: top;
    border-bottom: 1px solid var(--tk-azul-100);
}

.rel-tabela tr[b-45i18b8te8] {
    break-inside: avoid;
}

.rel-num[b-45i18b8te8] {
    font-weight: 700;
    white-space: nowrap;
    color: var(--tk-azul-800);
}

.rel-titulo[b-45i18b8te8] {
    min-width: 200px;
}

.rel-rodape[b-45i18b8te8] {
    padding-top: 14px;
    margin-top: 28px;
    font-size: 11.5px;
    color: var(--tk-cinza-500);
    border-top: 1px solid var(--tk-azul-100);
}

/* ------------------------------ Celular ------------------------------ */

@media (max-width: 700px) {
    .rel-documento[b-45i18b8te8] {
        padding: 20px 16px;
    }

    .rel-periodo[b-45i18b8te8] {
        align-items: flex-start;
    }

    .rel-satisfacao[b-45i18b8te8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------ Impressão ------------------------------ */

@media print {
    .rel-documento[b-45i18b8te8] {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .rel-tabela-rolagem[b-45i18b8te8] {
        overflow: visible;
    }
}
/* /Components/Shared/AvatarUsuario.razor.rz.scp.css */
.avatar-usuario[b-vw6gx59pcx] {
    display: grid;
    flex: none;
    place-items: center;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    background: var(--tk-azul-600);
    border-radius: 50%;
}

.avatar-usuario img[b-vw6gx59pcx] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Components/Shared/BarrasPainel.razor.rz.scp.css */
.barras[b-loc25bwbcp] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nome (largura fixa, corta com ...), barra (ocupa o resto) e quantidade (alinhada à direita). */
.barras-linha[b-loc25bwbcp] {
    display: grid;
    grid-template-columns: minmax(90px, 34%) 1fr 44px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.barras-nome[b-loc25bwbcp] {
    overflow: hidden;
    color: var(--tk-cinza-700, #3F4A5A);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marca fina (10px) com o fim arredondado; o trilho quase some (só uma linha de apoio). */
.barras-trilho[b-loc25bwbcp] {
    display: block;
    height: 10px;
    background: var(--tk-cinza-100);
    border-radius: 0 5px 5px 0;
}

.barras-barra[b-loc25bwbcp] {
    display: block;
    height: 100%;
    min-width: 3px;
    background: var(--barra);
    border-radius: 0 5px 5px 0;
    transition: width .4s ease;
}

.barras-valor[b-loc25bwbcp] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    color: var(--tk-azul-900);
}

.barras-linha:hover .barras-barra[b-loc25bwbcp] {
    filter: brightness(.92);
}

.barras-vazio[b-loc25bwbcp] {
    padding: 18px 0;
    font-size: 13px;
    text-align: center;
    color: var(--tk-cinza-500);
}
/* /Components/Shared/BotaoExportar.razor.rz.scp.css */
/* Botão Exportar: o menu abre logo abaixo do botão, alinhado à esquerda dele (à direita ficam os outros botões, então há espaço). */
.exp-raiz[b-m7of80pro8] {
    position: relative;
}

.exp-fundo[b-m7of80pro8] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.exp-menu[b-m7of80pro8] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    min-width: 170px;
    padding: 4px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    box-shadow: 0 6px 18px rgba(15, 60, 120, .15);
}

.exp-menu button[b-m7of80pro8] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--tk-azul-800);
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.exp-menu button:hover[b-m7of80pro8] {
    background: var(--tk-azul-50);
}

.exp-aviso[b-m7of80pro8] {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--tk-azul-800);
    opacity: .7;
}
/* /Components/Shared/BotaoExportarRelatorio.razor.rz.scp.css */
/* Botão Exportar do Painel e do Relatório mensal: ele fica no canto direito da tela, então o menu abre alinhado à direita dele. */
.exp-raiz[b-ihhcgzwxnh] {
    position: relative;
}

.exp-fundo[b-ihhcgzwxnh] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.exp-menu[b-ihhcgzwxnh] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 41;
    min-width: 170px;
    padding: 4px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    box-shadow: 0 6px 18px rgba(15, 60, 120, .15);
}

.exp-menu button[b-ihhcgzwxnh] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--tk-azul-800);
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.exp-menu button:hover[b-ihhcgzwxnh] {
    background: var(--tk-azul-50);
}
/* /Components/Shared/CartaoKpi.razor.rz.scp.css */
/* Cada cor define duas variáveis: a cor forte (ícone, borda ativa) e a cor suave (fundo do ícone e do cartão ativo). */
.kpi-azul[b-ga49zo649k]     { --kpi-forte: #0B5ED7; --kpi-suave: #E7F0FD; }
.kpi-verde[b-ga49zo649k]    { --kpi-forte: #13804F; --kpi-suave: #E3F5EC; }
.kpi-laranja[b-ga49zo649k]  { --kpi-forte: #C77700; --kpi-suave: #FFF1DC; }
.kpi-vermelho[b-ga49zo649k] { --kpi-forte: #C4262E; --kpi-suave: #FDE8E9; }
.kpi-roxo[b-ga49zo649k]     { --kpi-forte: #6B46C1; --kpi-suave: #EFE9FB; }
.kpi-cinza[b-ga49zo649k]    { --kpi-forte: #5B6573; --kpi-suave: #ECEFF3; }

/* Com um tema escolhido no menu do perfil, o tom suave sai da cor forte diluída no fundo do cartão do tema (num tema escuro, fica
   um fundo escuro levemente colorido, e não o pastel claro de cima). O cinza vira o cinza do tema. */
html[data-tema-familia] .kpi[b-ga49zo649k] {
    --kpi-suave: color-mix(in srgb, var(--kpi-forte) 18%, var(--tk-branco));
}

html[data-tema-familia] .kpi-cinza[b-ga49zo649k] {
    --kpi-forte: var(--tk-cinza-500);
}

.kpi[b-ga49zo649k] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    font: inherit;
    text-align: left;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    border-radius: var(--tk-raio);
    box-shadow: 0 1px 2px rgba(11, 36, 71, .06);
    cursor: pointer;
    overflow: hidden;
    /* O "!important" é de propósito: o site.css zera as animações de quem ligou "reduzir movimento" no Windows, e aqui a
       animação foi pedida de forma explícita. */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

/* Faixa colorida na esquerda: aparece crescendo ao passar o mouse ou quando o cartão está escolhido. */
.kpi[b-ga49zo649k]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--kpi-forte);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .18s ease !important;
}

.kpi:hover[b-ga49zo649k] {
    transform: translateY(-4px);
    border-color: var(--kpi-forte);
    box-shadow: 0 10px 22px rgba(11, 36, 71, .16);
}

.kpi:hover[b-ga49zo649k]::before,
.kpi-ativo[b-ga49zo649k]::before {
    transform: scaleY(1);
}

.kpi:active[b-ga49zo649k] {
    transform: translateY(-1px) scale(.98);
}

.kpi:focus-visible[b-ga49zo649k] {
    outline: 3px solid var(--kpi-suave);
    outline-offset: 2px;
    border-color: var(--kpi-forte);
}

.kpi-ativo[b-ga49zo649k] {
    background: var(--kpi-suave);
    border-color: var(--kpi-forte);
    box-shadow: 0 4px 14px rgba(11, 36, 71, .14);
}

.kpi-icone[b-ga49zo649k] {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--kpi-forte);
    background: var(--kpi-suave);
    border-radius: 12px;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .18s ease, color .18s ease !important;
}

.kpi-ativo .kpi-icone[b-ga49zo649k] {
    background: var(--tk-branco);
}

/* Pulinho do ícone ao passar o mouse. */
.kpi:hover .kpi-icone[b-ga49zo649k] {
    transform: scale(1.18) rotate(-8deg);
    color: #fff;
    background: var(--kpi-forte);
}

.kpi-icone[b-ga49zo649k]  .tk-icone {
    width: 24px;
    height: 24px;
}

.kpi-texto[b-ga49zo649k] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-valor[b-ga49zo649k] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--tk-azul-800);
}

.kpi-titulo[b-ga49zo649k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-cinza-500);
}

/* Celular: cartões menores, para caberem dois por linha. */
@media (max-width: 700px) {
    .kpi[b-ga49zo649k] {
        gap: 10px;
        padding: 10px 12px;
    }

    .kpi-icone[b-ga49zo649k] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .kpi-icone[b-ga49zo649k]  .tk-icone {
        width: 20px;
        height: 20px;
    }

    .kpi-valor[b-ga49zo649k] {
        font-size: 22px;
    }

    .kpi-titulo[b-ga49zo649k] {
        font-size: 12px;
        line-height: 1.2;
    }
}
/* /Components/Shared/CompromissosDoDia.razor.rz.scp.css */
.cdd[b-3quxmrjdya] {
    margin-bottom: 12px;
    padding: 10px 14px 8px;
}

.cdd-topo[b-3quxmrjdya] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.cdd-topo h2[b-3quxmrjdya] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-azul-800);
}

.cdd-topo h2[b-3quxmrjdya]  .tk-icone {
    width: 16px;
    height: 16px;
}

.cdd-contagem[b-3quxmrjdya] {
    min-width: 20px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: var(--tk-azul-800);
    background: var(--tk-azul-200);
    border-radius: 10px;
}

.cdd-link[b-3quxmrjdya] {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    text-decoration: none;
}

.cdd-link:hover[b-3quxmrjdya] {
    text-decoration: underline;
}

/* Dia inteiro: etiquetas numa linha só (quebra para a de baixo se forem muitas). */
.cdd-dia-inteiro[b-3quxmrjdya] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.cdd-etiqueta[b-3quxmrjdya] {
    max-width: 100%;
    padding: 2px 10px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--tk-azul-600);
    border-radius: 12px;
}

.cdd-etiqueta:hover[b-3quxmrjdya] {
    filter: brightness(1.1);
}

/* Cor por tipo (a mesma da Agenda): azul = meu, roxo = reunião, verde-água = Outlook/Google, âmbar claro = feriado. */
.cdd-etiqueta.cdd-reuniao[b-3quxmrjdya] {
    background: #6D3FC4;
}

.cdd-etiqueta.cdd-externo[b-3quxmrjdya] {
    background: #0E7C86;
}

.cdd-etiqueta.cdd-feriado[b-3quxmrjdya] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
    box-shadow: inset 0 0 0 1px var(--tk-ambar-borda);
}

/* As colunas (horário, título, local, selo) são da LISTA e cada linha usa as mesmas (subgrid): os títulos ficam alinhados entre os compromissos,
   e a coluna do horário tem a largura do maior horário, sem quebrar de linha. */
.cdd-lista[b-3quxmrjdya] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto auto;
    column-gap: 0;
    row-gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdd-lista > li[b-3quxmrjdya] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

/* Uma linha por compromisso: horário fixo à esquerda, título que ocupa o espaço e local mais discreto. */
.cdd-linha[b-3quxmrjdya] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    column-gap: 14px;
    padding: 5px 8px;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid var(--tk-azul-600);
    border-radius: 4px;
    transition: background-color .15s ease;
}

.cdd-linha:hover[b-3quxmrjdya] {
    background: rgba(37, 99, 235, .07);
}

.cdd-linha.cdd-reuniao[b-3quxmrjdya] {
    border-left-color: #6D3FC4;
}

.cdd-linha.cdd-externo[b-3quxmrjdya] {
    border-left-color: #0E7C86;
}

.cdd-linha.cdd-feriado[b-3quxmrjdya] {
    border-left-color: #D99A00;
}

.cdd-quando[b-3quxmrjdya] {
    grid-column: 1;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tk-azul-800);
}

.cdd-titulo[b-3quxmrjdya] {
    grid-column: 2;
}

.cdd-local[b-3quxmrjdya] {
    grid-column: 3;
}

.cdd-selo[b-3quxmrjdya] {
    grid-column: 4;
}

.cdd-titulo[b-3quxmrjdya],
.cdd-local[b-3quxmrjdya] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cdd-local[b-3quxmrjdya] {
    max-width: 220px;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

.cdd-selo[b-3quxmrjdya] {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: #fff;
    background: #13804F;
    border-radius: 9px;
}

.cdd-agora[b-3quxmrjdya] {
    background: rgba(19, 128, 79, .1);
    border-left-color: #13804F;
}

.cdd-encerrado[b-3quxmrjdya] {
    opacity: .55;
}

.cdd-encerrado .cdd-titulo[b-3quxmrjdya] {
    text-decoration: line-through;
}

.cdd-mais[b-3quxmrjdya] {
    margin-top: 4px;
    padding: 2px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: transparent;
    border: 0;
    cursor: pointer;
}

.cdd-mais:hover[b-3quxmrjdya] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .cdd-local[b-3quxmrjdya] {
        display: none;
    }
}
/* /Components/Shared/EntradaComChamado.razor.rz.scp.css */
.entrada-chamado[b-uadty70xss] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Campo comum de formulário (a janela de tarefa). */
.entrada-chamado-campo[b-uadty70xss] {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
}

/* Campo rápido do topo: uma linha só, sem borda (quem desenha a borda é o cartão em volta). */
.entrada-chamado-compacto .entrada-chamado-campo[b-uadty70xss] {
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
}

.entrada-chamado-lista[b-uadty70xss] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 360px;
    overflow-y: auto;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio-p);
    box-shadow: 0 8px 24px rgba(15, 35, 70, .16);
}

/* No campo rápido a lista abre alinhada ao cartão, não ao texto. */
.entrada-chamado-compacto .entrada-chamado-lista[b-uadty70xss] {
    top: calc(100% + 8px);
    left: -38px;
    right: -14px;
}

.entrada-chamado-opcao[b-uadty70xss] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--tk-raio-p);
    cursor: pointer;
}

.entrada-chamado-opcao-ativa[b-uadty70xss],
.entrada-chamado-opcao:hover[b-uadty70xss] {
    background: var(--tk-azul-100, var(--tk-azul-100));
}

.entrada-chamado-numero[b-uadty70xss] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--tk-azul-800);
}

.entrada-chamado-texto[b-uadty70xss] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.entrada-chamado-titulo[b-uadty70xss] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.entrada-chamado-cliente[b-uadty70xss] {
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}

/* A situação aparece sempre escrita (nunca só pela cor). */
.entrada-chamado-marca[b-uadty70xss] {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-azul-800);
    background: var(--tk-azul-100, var(--tk-azul-100));
    border-radius: 999px;
}

.entrada-chamado-marca-assumir[b-uadty70xss] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
}

.entrada-chamado-aviso[b-uadty70xss] {
    padding: 10px;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}
/* /Components/Shared/EstadoVazio.razor.rz.scp.css */
/* Estilos do componente EstadoVazio (CSS isolado: vale apenas para este componente). */

.tk-estado-vazio[b-vzrrvms27k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
}

.tk-estado-vazio-icone[b-vzrrvms27k] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-50);
    border: 1px solid var(--tk-azul-100);
    border-radius: 20px;
}

.tk-estado-vazio-icone[b-vzrrvms27k]  .tk-icone {
    width: 30px;
    height: 30px;
}

h2[b-vzrrvms27k] {
    font-size: 18px;
}

p[b-vzrrvms27k] {
    max-width: 440px;
    margin: 0;
    color: var(--tk-cinza-600);
}
/* /Components/Shared/EstrelasNota.razor.rz.scp.css */
.estrelas[b-zamqh4kj41] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.estrela[b-zamqh4kj41] {
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--tk-cinza-400);
    background: none;
    border: 0;
    border-radius: 6px;
    transition: color var(--tk-transicao), transform var(--tk-transicao);
}

.estrela[b-zamqh4kj41]  .tk-icone {
    width: var(--lado);
    height: var(--lado);
    stroke-width: 1.5;
}

/* Estrela cheia: amarela e preenchida. */
.estrela-cheia[b-zamqh4kj41] {
    color: #F5A524;
}

.estrela-cheia[b-zamqh4kj41]  .tk-icone {
    fill: currentColor;
}

/* Escolha: o mouse acende da primeira até a estrela sob ele (as seguintes ficam apagadas). */
.estrelas-editavel .estrela[b-zamqh4kj41] {
    cursor: pointer;
}

.estrelas-editavel:hover .estrela[b-zamqh4kj41] {
    color: #F5A524;
}

.estrelas-editavel:hover .estrela[b-zamqh4kj41]  .tk-icone {
    fill: currentColor;
}

.estrelas-editavel .estrela:hover ~ .estrela[b-zamqh4kj41] {
    color: var(--tk-cinza-400);
}

.estrelas-editavel .estrela:hover ~ .estrela[b-zamqh4kj41]  .tk-icone {
    fill: none;
}

.estrelas-editavel .estrela:hover[b-zamqh4kj41] {
    transform: scale(1.12);
}

.estrelas-editavel .estrela:focus-visible[b-zamqh4kj41] {
    outline: 2px solid var(--tk-azul-600);
    outline-offset: 2px;
}
/* /Components/Shared/FiltroSituacao.razor.rz.scp.css */
/* Botões lado a lado (estilo "segmentado") do filtro de situação. */
.filtro-situacao[b-uvemynwux7] {
    display: inline-flex;
    padding: 3px;
    background: var(--tk-cinza-100);
    border-radius: var(--tk-raio-p);
}

.filtro-situacao button[b-uvemynwux7] {
    padding: 4px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-cinza-600);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--tk-transicao), color var(--tk-transicao);
}

.filtro-situacao button:hover[b-uvemynwux7] {
    color: var(--tk-azul-800);
}

.filtro-situacao button.ativo[b-uvemynwux7] {
    color: var(--tk-azul-800);
    background: var(--tk-branco);
    box-shadow: var(--tk-sombra-suave);
}
/* /Components/Shared/IndicadorPainel.razor.rz.scp.css */
/* Cartão de indicador do painel: número grande, nome, detalhe e variação. */
.ind[b-4nl2b98cm9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: var(--tk-raio);
}

.ind-topo[b-4nl2b98cm9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ind-titulo[b-4nl2b98cm9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.ind-icone[b-4nl2b98cm9]  .tk-icone {
    width: 18px;
    height: 18px;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

/* O número é o destaque: sem negrito pesado nem números de largura fixa (ficam soltos em tamanho grande). */
.ind-valor[b-4nl2b98cm9] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tk-azul-900);
}

.ind-valor small[b-4nl2b98cm9] {
    margin-left: 3px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-cinza-600);
}

.ind-detalhe[b-4nl2b98cm9] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--tk-cinza-600);
}

.ind-estado-icone[b-4nl2b98cm9]  .tk-icone {
    width: 15px;
    height: 15px;
}

/* Estado: a cor acompanha um ícone e um texto, nunca vai sozinha. */
.ind-critico[b-4nl2b98cm9] {
    border-color: var(--tk-vermelho-borda);
    background: linear-gradient(180deg, var(--tk-erro-fundo) 0%, var(--tk-branco) 60%);
}

.ind-critico .ind-estado-icone[b-4nl2b98cm9] { color: #D03B3B; }
.ind-critico .ind-valor[b-4nl2b98cm9] { color: var(--tk-vermelho-texto); }

.ind-atencao[b-4nl2b98cm9] {
    border-color: var(--tk-ambar-borda);
    background: linear-gradient(180deg, var(--tk-ambar-suave) 0%, var(--tk-branco) 60%);
}

.ind-atencao .ind-estado-icone[b-4nl2b98cm9] { color: var(--tk-ambar-texto); }

.ind-bom .ind-valor[b-4nl2b98cm9] { color: var(--tk-verde-texto); }

/* Medidor de percentual: trilho e preenchimento do mesmo tom de azul. */
.ind-medidor[b-4nl2b98cm9] {
    height: 6px;
    overflow: hidden;
    background: var(--tk-azul-100, var(--tk-ciano-suave));
    border-radius: 3px;
}

.ind-medidor span[b-4nl2b98cm9] {
    display: block;
    height: 100%;
    background: #2A78D6;
    border-radius: 3px;
}

.ind-variacao[b-4nl2b98cm9] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--tk-cinza-600);
}

.ind-seta[b-4nl2b98cm9]  .tk-icone {
    width: 14px;
    height: 14px;
}

.ind-seta-baixo[b-4nl2b98cm9] {
    display: inline-flex;
    transform: rotate(180deg);
}

.ind-variacao-boa[b-4nl2b98cm9] { color: var(--tk-verde-texto); }
.ind-variacao-ruim[b-4nl2b98cm9] { color: var(--tk-vermelho-texto); }
/* /Components/Shared/LinhaDiariaPainel.razor.rz.scp.css */
/* Cores das duas séries: azul (abertos) e laranja (resolvidos), da paleta categórica na ordem fixa (1 e 2). */
.linha-legenda[b-70021oeybe] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--tk-cinza-600);
}

.linha-legenda-item[b-70021oeybe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.linha-legenda-item strong[b-70021oeybe] {
    color: var(--tk-azul-900);
}

.linha-chave[b-70021oeybe] {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.linha-chave-1[b-70021oeybe] { background: #2A78D6; }
.linha-chave-2[b-70021oeybe] { background: #EB6834; }

/* Área do gráfico: eixo Y à esquerda, plot à direita, eixo X embaixo (a altura já conta as datas). */
.linha[b-70021oeybe] {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0 6px;
    padding-bottom: 26px;
}

.linha-eixo-y[b-70021oeybe] {
    position: relative;
    height: 210px;
    font-size: 11px;
    color: var(--tk-cinza-500);
}

.linha-eixo-y span[b-70021oeybe] {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-variant-numeric: tabular-nums;
}

.linha-plot[b-70021oeybe] {
    position: relative;
    height: 210px;
}

/* Linhas de grade: traço contínuo fino, bem fraco. */
.linha-grade i[b-70021oeybe] {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--tk-cinza-100);
}

.linha-grade i:nth-child(1)[b-70021oeybe] { top: 0; }
.linha-grade i:nth-child(2)[b-70021oeybe] { top: 50%; }
.linha-grade i:nth-child(3)[b-70021oeybe] { top: 100%; background: #C3C2B7; }

.linha-svg[b-70021oeybe] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.linha-traco[b-70021oeybe] {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.linha-traco-1[b-70021oeybe] { stroke: #2A78D6; }
.linha-traco-2[b-70021oeybe] { stroke: #EB6834; }

.linha-colunas[b-70021oeybe] {
    position: absolute;
    inset: 0;
    display: flex;
}

.linha-coluna[b-70021oeybe] {
    position: relative;
    flex: 1;
    min-width: 0;
    outline: none;
}

.linha-regua[b-70021oeybe] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #C3C2B7;
    opacity: 0;
}

.linha-ponto[b-70021oeybe] {
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: 0 0 -4.5px -4.5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--tk-branco);
    opacity: 0;
}

.linha-ponto-1[b-70021oeybe] { background: #2A78D6; }
.linha-ponto-2[b-70021oeybe] { background: #EB6834; }

.linha-dica[b-70021oeybe] {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 3px;
    min-width: 138px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--tk-cinza-700, #3F4A5A);
    white-space: nowrap;
    background: var(--tk-branco);
    border: 1px solid var(--tk-azul-200);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(11, 36, 71, .14);
    transform: translateX(-50%);
    pointer-events: none;
}

.linha-dica-esq[b-70021oeybe] { left: 0; transform: none; }
.linha-dica-dir[b-70021oeybe] { right: 0; left: auto; transform: none; }

.linha-dica strong[b-70021oeybe] {
    color: var(--tk-azul-900);
}

.linha-dica span[b-70021oeybe] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.linha-dica b[b-70021oeybe] {
    margin-left: auto;
    padding-left: 12px;
}

.linha-coluna:hover .linha-regua[b-70021oeybe],
.linha-coluna:focus-visible .linha-regua[b-70021oeybe],
.linha-coluna:hover .linha-ponto[b-70021oeybe],
.linha-coluna:focus-visible .linha-ponto[b-70021oeybe] {
    opacity: 1;
}

.linha-coluna:hover .linha-dica[b-70021oeybe],
.linha-coluna:focus-visible .linha-dica[b-70021oeybe] {
    display: flex;
}

.linha-eixo-x[b-70021oeybe] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    height: 14px;
    font-size: 11px;
    color: var(--tk-cinza-500);
}

.linha-eixo-x span[b-70021oeybe] {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.linha-vazio[b-70021oeybe] {
    padding: 36px 0;
    font-size: 13px;
    text-align: center;
    color: var(--tk-cinza-500);
}

/* A tabela com os mesmos números (para ler sem o gráfico). */
.linha-tabela[b-70021oeybe] {
    margin-top: 4px;
    font-size: 13px;
}

.linha-tabela summary[b-70021oeybe] {
    width: max-content;
    cursor: pointer;
    color: var(--tk-azul-texto, var(--tk-azul-600));
}

.linha-tabela-rolagem[b-70021oeybe] {
    max-height: 240px;
    margin-top: 8px;
    overflow: auto;
}

.linha-tabela table[b-70021oeybe] {
    border-collapse: collapse;
    width: 100%;
}

.linha-tabela th[b-70021oeybe],
.linha-tabela td[b-70021oeybe] {
    padding: 5px 10px;
    text-align: right;
    border-bottom: 1px solid var(--tk-cinza-100);
}

.linha-tabela th:first-child[b-70021oeybe],
.linha-tabela td:first-child[b-70021oeybe] {
    text-align: left;
}
/* /Components/Shared/PilhaStatusPainel.razor.rz.scp.css */
.pilha[b-9vhfl0raq5] {
    display: flex;
    gap: 2px;
    height: 16px;
}

.pilha-segmento[b-9vhfl0raq5] {
    min-width: 4px;
}

.pilha-segmento:first-child[b-9vhfl0raq5] { border-radius: 8px 0 0 8px; }
.pilha-segmento:last-child[b-9vhfl0raq5] { border-radius: 0 8px 8px 0; }
.pilha-segmento:only-child[b-9vhfl0raq5] { border-radius: 8px; }

.pilha-legenda[b-9vhfl0raq5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.pilha-legenda li[b-9vhfl0raq5] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pilha-chave[b-9vhfl0raq5] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.pilha-nome[b-9vhfl0raq5] {
    overflow: hidden;
    color: var(--tk-cinza-700, #3F4A5A);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pilha-legenda strong[b-9vhfl0raq5] {
    margin-left: auto;
    color: var(--tk-azul-900);
}

.pilha-pct[b-9vhfl0raq5] {
    width: 38px;
    text-align: right;
    color: var(--tk-cinza-500);
}

.pilha-vazio[b-9vhfl0raq5] {
    padding: 18px 0;
    font-size: 13px;
    text-align: center;
    color: var(--tk-cinza-500);
}
/* /Components/Shared/SeletorConvidados.razor.rz.scp.css */
.sc[b-lj53pxx678] {
    width: 100%;
}

/* A "caixa" do campo: as etiquetas e o campo de digitar lado a lado, quebrando de linha quando enche. */
.sc-campo[b-lj53pxx678] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 5px 8px;
    background: var(--tk-branco);
    border: 1px solid var(--tk-borda, var(--tk-cinza-300));
    border-radius: var(--tk-raio-p, 8px);
}

.sc-campo:not(.sc-campo-leitura):focus-within[b-lj53pxx678] {
    border-color: var(--tk-azul-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.sc-campo-leitura[b-lj53pxx678] {
    background: transparent;
    border-style: dashed;
}

/* A etiqueta da pessoa: retângulo de cantos arredondados, o nome e o X para tirar. */
.sc-chip[b-lj53pxx678] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 4px 3px 4px;
    font-size: 13px;
    line-height: 20px;
    color: var(--tk-azul-800);
    background: var(--tk-azul-100, var(--tk-azul-100));
    border: 1px solid var(--tk-azul-200, #BFD3F8);
    border-radius: 8px;
}

.sc-campo-leitura .sc-chip[b-lj53pxx678] {
    padding-right: 10px;
}

.sc-chip-nome[b-lj53pxx678] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-chip-estado[b-lj53pxx678] {
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
}

.sc-estado-vai[b-lj53pxx678] {
    color: var(--tk-verde-texto);
    background: var(--tk-verde-suave);
}

.sc-estado-nao[b-lj53pxx678] {
    color: var(--tk-vermelho-texto);
    background: var(--tk-erro-fundo);
}

.sc-estado-pendente[b-lj53pxx678] {
    color: var(--tk-ambar-texto);
    background: var(--tk-ambar-suave);
}

.sc-chip-x[b-lj53pxx678] {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.sc-chip-x:hover[b-lj53pxx678] {
    background: rgba(15, 23, 42, .12);
}

.sc-chip-x[b-lj53pxx678]  .tk-icone {
    width: 12px;
    height: 12px;
}

.sc-entrada[b-lj53pxx678] {
    flex: 1 1 160px;
    min-width: 160px;
    padding: 4px 2px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: transparent;
    border: 0;
    outline: none;
}

/* A lista de quem combina com o que foi digitado: fica no fluxo da página, logo abaixo do campo. */
.sc-lista[b-lj53pxx678] {
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--tk-branco);
    border: 1px solid var(--tk-borda, var(--tk-cinza-300));
    border-radius: var(--tk-raio-p, 8px);
}

.sc-opcao[b-lj53pxx678] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 8px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Nome em cima e e-mail (mais discreto) embaixo. */
.sc-opcao-texto[b-lj53pxx678] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sc-opcao-texto small[b-lj53pxx678] {
    overflow: hidden;
    font-size: 12px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-opcao:hover[b-lj53pxx678],
.sc-opcao:focus-visible[b-lj53pxx678] {
    background: var(--tk-azul-100, var(--tk-azul-100));
}

.sc-vazio[b-lj53pxx678] {
    margin: 6px 2px 0;
    font-size: 13px;
    color: var(--tk-texto-suave, var(--tk-cinza-600));
}
/* /Components/Shared/SeletorReacao.razor.rz.scp.css */
/* Seletor de reação das Conversas (barra rápida + seletor completo). Veja SeletorReacao.razor. */

.sr-fundo[b-ybred7nlxf] {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

/* No celular o fundo escurece, como o do menu de ações da mensagem. */
.sr-fundo-folha[b-ybred7nlxf] {
    background: rgba(8, 18, 33, .45);
}

.sr[b-ybred7nlxf] {
    position: fixed;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    background: var(--tk-branco);
    border: 1px solid var(--tk-cinza-200, #D9DEE5);
    box-shadow: 0 8px 28px rgba(11, 36, 71, .25);
    animation: sr-surge-b-ybred7nlxf .12s ease-out;
}

@keyframes sr-surge-b-ybred7nlxf {
    from { transform: translateY(6px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);     opacity: 1; }
}

.sr-rapido[b-ybred7nlxf] {
    width: 322px;
    height: 54px;
    border-radius: 999px;
}

.sr-completo[b-ybred7nlxf] {
    width: 348px;
    height: 372px;
    border-radius: 16px;
    overflow: hidden;
}

/* Folha (celular): sobe de baixo da tela, no mesmo estilo do menu de ações. */
.sr-folha[b-ybred7nlxf] {
    inset: auto 0 0 0;
    width: auto;
    max-width: 520px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: none;
    border-radius: 18px 18px 0 0;
    animation: sr-sobe-b-ybred7nlxf .18s ease-out;
}

.sr-folha.sr-rapido[b-ybred7nlxf] {
    height: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
}

.sr-folha.sr-completo[b-ybred7nlxf] {
    height: min(420px, 70vh);
}

@keyframes sr-sobe-b-ybred7nlxf {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---------------------------------------------------------------- Barra rápida */

.sr-rapidas[b-ybred7nlxf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 100%;
    padding: 0 8px;
}

.sr-emoji[b-ybred7nlxf] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
}

.sr-emoji:hover[b-ybred7nlxf],
.sr-emoji:focus-visible[b-ybred7nlxf] {
    background: var(--tk-azul-50);
    transform: scale(1.12);
}

.sr-emoji-grande[b-ybred7nlxf] {
    width: 40px;
    height: 40px;
    font-size: 26px;
    border-radius: 50%;
}

/* O emoji com que a pessoa já reagiu: fundo azul claro (clicar nele tira a reação). */
.sr-atual[b-ybred7nlxf] {
    background: var(--tk-azul-100);
    box-shadow: inset 0 0 0 1.5px var(--tk-azul-600);
}

.sr-mais[b-ybred7nlxf] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--tk-cinza-600);
    background: var(--tk-cinza-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.sr-mais:hover[b-ybred7nlxf],
.sr-mais:focus-visible[b-ybred7nlxf] {
    color: var(--tk-azul-texto, var(--tk-azul-600));
    background: var(--tk-azul-100);
}

.sr-mais[b-ybred7nlxf]  .tk-icone {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- Seletor completo */

.sr-abas[b-ybred7nlxf] {
    display: flex;
    flex: none;
    gap: 2px;
    padding: 6px 6px 0;
    border-bottom: 1px solid var(--tk-cinza-100);
    overflow-x: auto;
    scrollbar-width: none;
}

.sr-aba[b-ybred7nlxf] {
    flex: none;
    width: 36px;
    height: 34px;
    padding: 0;
    font-size: 19px;
    line-height: 1;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    opacity: .6;
}

.sr-aba:hover[b-ybred7nlxf] {
    opacity: 1;
    background: var(--tk-azul-50);
}

.sr-aba-ativa[b-ybred7nlxf] {
    opacity: 1;
    border-bottom-color: var(--tk-azul-600);
}

.sr-titulo[b-ybred7nlxf] {
    flex: none;
    padding: 8px 12px 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-cinza-500);
}

.sr-grade[b-ybred7nlxf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 8px 10px;
    overflow-y: auto;
    align-content: start;
}

.sr-grade .sr-emoji[b-ybred7nlxf] {
    width: 100%;
    height: 38px;
}
/* /Components/Shared/SeletorTema.razor.rz.scp.css */
/* Seletor de tema: miniaturas dos temas em grade, com o nome embaixo. */
.tema-opcoes[b-o6g3mckh9r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
}

.tema-opcao[b-o6g3mckh9r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 6px 8px;
    font: inherit;
    color: var(--tk-texto);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.tema-opcao:hover[b-o6g3mckh9r] {
    background: var(--tk-cinza-100);
    border-color: var(--tk-cinza-200);
}

.tema-opcao-ativa[b-o6g3mckh9r],
.tema-opcao-ativa:hover[b-o6g3mckh9r] {
    background: var(--tk-azul-50);
    border-color: var(--tk-azul-500);
}

/* Miniatura de uma tela: as cores são as do tema (--fundo, --destaque), não as do tema em uso. */
.tema-miniatura[b-o6g3mckh9r] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 72px;
    padding: 0 8px 8px;
    overflow: hidden;
    background: var(--fundo);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35);
    transition: transform .2s ease;
}

.tema-opcao:hover .tema-miniatura[b-o6g3mckh9r] {
    transform: translateY(-2px);
}

.tema-mini-barra[b-o6g3mckh9r] {
    height: 12px;
    margin: 0 -8px 2px;
    background: var(--destaque);
}

.tema-mini-linha[b-o6g3mckh9r] {
    width: 80%;
    height: 5px;
    background: color-mix(in srgb, var(--fundo) 55%, #808080);
    border-radius: 3px;
}

.tema-mini-linha-curta[b-o6g3mckh9r] {
    width: 50%;
}

.tema-mini-botao[b-o6g3mckh9r] {
    width: 34px;
    height: 10px;
    margin-top: auto;
    background: var(--destaque);
    border-radius: 3px;
}

.tema-mini-check[b-o6g3mckh9r] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #fff;
    background: var(--destaque);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--fundo);
}

.tema-mini-check[b-o6g3mckh9r]  .tk-icone {
    width: 13px;
    height: 13px;
    stroke-width: 3;
}

.tema-nome[b-o6g3mckh9r] {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}