/*
 * Visual do Painel: o mesmo design system dos outros sistemas TSMIT (tsmit-doc e TSMIT-OS, Next.js + Tailwind +
 * shadcn/ui). Os tokens abaixo são os do globals.css do tsmit-doc, em triplas HSL; as classes reproduzem as do
 * Tailwind/shadcn usadas lá (os valores de cada utilitário estão nos comentários). O MudBlazor recebe as mesmas cores
 * pelo TemaPainel.cs e é ajustado no fim deste arquivo.
 */

/* ---------- Fonte Inter (auto-hospedada, OFL em fonts/OFL.txt), como o next/font do tsmit-doc ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Métricas do Arial ajustadas às da Inter (as mesmas do next/font): sem salto de layout enquanto a fonte carrega. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
    size-adjust: 107.12%;
}

/* ---------- Tokens (globals.css do tsmit-doc; --success do TSMIT-OS) ---------- */
:root {
    --background: 0 0% 94%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 203 62% 34%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 0 0% 94%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 25% 78%;
    --ring: 203 62% 34%;
    --radius: 0.5rem;
    --success: 142 72% 29%;
    --success-foreground: 210 40% 98%;

    /* Desvio da referência (acessibilidade): o --muted-foreground (#64748B) sobre o fundo #F0F0F0 dá 4,18:1, abaixo
       do AA para texto de 14 px. Só o texto suave que fica direto no fundo da página (descrição do cabeçalho etc.)
       usa este tom um pouco mais escuro (#5C6A80, 4,81:1); nos cartões brancos o token da referência passa (4,76:1) e fica. */
    --texto-suave-sobre-fundo: 215.4 16.3% 43%;

    /* Cores do Tailwind usadas direto pela referência (sem token). */
    --gray-50: #f9fafb;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --red-600: #dc2626;
    --red-400: #f87171;

    /* Sombras do Tailwind. */
    --sombra-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Vidro fosco da barra lateral e do cabeçalho móvel. */
    --vidro: rgb(255 255 255 / 0.8);
    --vidro-gaveta: rgb(255 255 255 / 0.95);
    --vidro-borda: rgb(229 231 235 / 0.5);

    --fonte: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --transicao: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 203 62% 44%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 24% 32%;
    --ring: 203 62% 44%;
    --success: 142 61% 52%;
    --success-foreground: 222.2 84% 4.9%;
    --texto-suave-sobre-fundo: 215 20.2% 65.1%; /* no escuro o --muted-foreground já passa (7,8:1) */

    --vidro: rgb(17 24 39 / 0.8);
    --vidro-gaveta: rgb(17 24 39 / 0.95);
    --vidro-borda: rgb(55 65 81 / 0.5);
}

/* ---------- Base ---------- */
*, ::before, ::after {
    border-color: hsl(var(--border));
}

html, body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

body {
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--fonte);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

h1:focus {
    outline: none;
}

code, kbd {
    font-family: var(--fonte-mono);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Tamanhos dos ícones Lucide (h-N w-N do Tailwind). */
.lucide { width: 1em; height: 1em; flex-shrink: 0; }
.tamanho-3-5 { width: 0.875rem; height: 0.875rem; }
.tamanho-4 { width: 1rem; height: 1rem; }
.tamanho-5 { width: 1.25rem; height: 1.25rem; }
.tamanho-6 { width: 1.5rem; height: 1.5rem; }

/* ---------- Casca: barra lateral + conteúdo com rolagem própria ---------- */
.casca {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.casca-corpo {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#main-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    background-color: hsl(var(--background));
    -webkit-overflow-scrolling: touch;
}

/* PageLayout: flex min-h-full w-full flex-col gap-4 px-4 sm:px-6 lg:px-8 py-6, sem largura máxima. */
.conteudo-pagina {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-height: 100%;
    padding: 1.5rem 1rem;
}

@media (min-width: 640px) {
    .conteudo-pagina { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
    .casca-corpo { flex-direction: row; }
    .conteudo-pagina { padding-left: 2rem; padding-right: 2rem; }
}

/* Cabeçalho móvel: h-14 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b px-4 lg:hidden */
.cabecalho-movel {
    position: relative;
    z-index: 20;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--vidro-borda);
    background-color: var(--vidro);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
    .cabecalho-movel { display: none; }
}

.link-logo {
    display: flex;
    align-items: center;
    height: 2.5rem;
}

.logo-tsmit {
    display: block;
    width: 112px;
    height: auto;
}

.logo-simbolo {
    display: none;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

/* O logo é azul sobre transparência; no escuro, a mesma forma em branco (dark:brightness-0 dark:invert). */
html.dark .logo-tsmit,
html.dark .logo-simbolo,
html.dark .logo-conta {
    filter: brightness(0) invert(1);
}

/* Barra lateral (desktop): 220 px, ou 60 px recolhida; vidro fosco e borda direita translúcida. O vidro fica num
   pseudo-elemento para a barra não virar bloco de contenção dos elementos fixos (o fundo do menu do operador). */
.barra-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 280px;
    border-right: 1px solid var(--vidro-borda);
    box-shadow: var(--sombra-lg);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 300ms ease-in-out, visibility 300ms;
}

.barra-lateral::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--vidro-gaveta);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

/* Ao abrir, a visibilidade muda na hora (uma transição de visibility começaria em "hidden" e o foco no X seria
   ignorado); ao fechar, a regra base a segura até o fim do deslize. */
.barra-lateral.gaveta-aberta {
    visibility: visible;
    transform: none;
    transition: transform 500ms ease-in-out, visibility 0s;
}

@media (min-width: 640px) {
    .barra-lateral { width: 300px; }
}

/* Gaveta aberta (abaixo de 1024 px): fundo escuro como o do Sheet (bg-black/80). */
.gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 45;
    background-color: rgb(0 0 0 / 0.8);
    animation: entrar-esmaecendo 150ms ease-out;
}

@media (min-width: 1024px) {
    .barra-lateral {
        position: relative;
        z-index: 30;
        flex-shrink: 0;
        width: 220px;
        height: 100%;
        box-shadow: none;
        visibility: visible;
        transform: none;
        transition: all 200ms ease-in-out;
    }

    .barra-lateral::before {
        background-color: var(--vidro);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    html[data-barra-recolhida] .barra-lateral { width: 60px; }

    .gaveta-fundo { display: none; }
}

/* Cabeçalho da barra: h-14 border-b, logo + chevron (ou o símbolo quando recolhida). */
.barra-cabecalho {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    padding: 0 1rem;
}

.barra-recolher,
.barra-expandir,
.barra-fechar {
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: color var(--transicao), background-color var(--transicao);
}

/* Gaveta: o X do Sheet (h-10 w-10, canto superior direito). */
.barra-fechar {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: -0.5rem;
    border-radius: 0.25rem;
    opacity: 0.7;
}

.barra-fechar:hover { opacity: 1; }

.barra-recolher {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gray-500);
}

.barra-recolher:hover {
    color: var(--gray-700);
    background-color: rgb(0 0 0 / 0.05);
}

html.dark .barra-recolher { color: var(--gray-400); }
html.dark .barra-recolher:hover { color: #e5e7eb; background-color: rgb(255 255 255 / 0.05); }

.barra-expandir {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem auto 0;
    color: var(--gray-400);
}

.barra-expandir:hover {
    color: var(--gray-600);
    background-color: rgb(0 0 0 / 0.05);
}

html.dark .barra-expandir:hover { color: #d1d5db; background-color: rgb(255 255 255 / 0.05); }

.barra-navegacao {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 0.5rem;
}

.barra-rodape {
    margin-top: auto;
    padding: 0.75rem;
    border-top: 1px solid var(--vidro-borda);
}

@media (min-width: 1024px) {
    .barra-cabecalho { border-bottom: 1px solid var(--vidro-borda); }
    .barra-fechar { display: none; }
    .barra-recolher { display: flex; }
    .barra-navegacao { padding: 1rem 0.75rem; }
    .barra-rodape { margin-top: 0; }

    html[data-barra-recolhida] .barra-cabecalho { justify-content: center; padding: 0 0.5rem; }
    html[data-barra-recolhida] .logo-completo { display: none; }
    html[data-barra-recolhida] .logo-simbolo { display: block; }
    html[data-barra-recolhida] .barra-recolher { display: none; }
    html[data-barra-recolhida] .barra-expandir { display: flex; }
    html[data-barra-recolhida] .barra-navegacao { padding: 1rem 0.5rem; }
    html[data-barra-recolhida] .barra-rodape { padding: 0.75rem 0.5rem; }
}

/* Navegação: flex flex-col gap-0.5; itens text-[13px], ícone de 18 px, rounded-lg px-3 py-1.5. */
.navegacao {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.rotulo-secao {
    padding: 0.375rem 0.75rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
}

html.dark .rotulo-secao { color: var(--gray-500); }

.divisor-secao {
    margin: 0.5rem 0.75rem;
    border-top: 1px solid var(--gray-200);
}

html.dark .divisor-secao { border-color: rgb(55 65 81 / 0.5); }

.item-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--gray-600);
    transition: all 150ms ease-in-out;
}

.item-nav:hover { background-color: rgb(0 0 0 / 0.05); }

/* Item ativo: bg-black/5, texto mais escuro e font-medium. Não é azul. */
.item-nav.ativo {
    background-color: rgb(0 0 0 / 0.05);
    color: var(--gray-900);
    font-weight: 500;
}

html.dark .item-nav { color: var(--gray-400); }
html.dark .item-nav:hover { background-color: rgb(255 255 255 / 0.05); }
html.dark .item-nav.ativo { background-color: rgb(255 255 255 / 0.1); color: #fff; }

.item-nav:focus-visible,
.menu-operador .mud-menu-activator:focus-visible,
.barra-recolher:focus-visible,
.barra-expandir:focus-visible,
.barra-fechar:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.icone-nav {
    width: 18px;
    height: 18px;
}

.texto-nav { font-size: 13px; }

@media (min-width: 1024px) {
    html[data-barra-recolhida] .rotulo-secao { display: none; }

    /* Recolhida: o nome sai da tela, mas continua sendo o nome acessível do link (e vai no title). */
    html[data-barra-recolhida] .texto-nav,
    html[data-barra-recolhida] .menu-operador-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    html[data-barra-recolhida] .item-nav { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
    html[data-barra-recolhida] .divisor-secao { margin-left: 0.5rem; margin-right: 0.5rem; }
}

/* Rodapé: avatar h-8 com degradê from-blue-500 to-blue-600, nome e papel. */
.menu-operador,
.menu-operador .mud-menu-activator {
    display: flex;
    width: 100%;
}

.menu-operador .mud-menu-activator { border-radius: 0.5rem; }

.menu-operador-gatilho {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.375rem;
    border-radius: 0.5rem;
    text-align: left;
    transition: color var(--transicao), background-color var(--transicao);
}

.menu-operador-gatilho:hover { background-color: rgb(0 0 0 / 0.05); }
html.dark .menu-operador-gatilho:hover { background-color: rgb(255 255 255 / 0.05); }

.avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-image: linear-gradient(to bottom right, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.menu-operador-texto {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
}

.menu-operador-nome,
.menu-operador-papel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-operador-nome {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
}

.menu-operador-papel {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-500);
}

html.dark .menu-operador-nome { color: #fff; }
html.dark .menu-operador-papel { color: var(--gray-400); }

@media (min-width: 1024px) {
    html[data-barra-recolhida] .menu-operador-gatilho { justify-content: center; }
}

/* ---------- Cabeçalho de página ---------- */
.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cabecalho-pagina-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* h1: text-2xl font-semibold tracking-tight, ícone h-6 w-6 text-primary. */
.titulo-pagina {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.icone-titulo {
    width: 1.5rem;
    height: 1.5rem;
    color: hsl(var(--primary));
}

.descricao-pagina {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--texto-suave-sobre-fundo));
}

.cabecalho-pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.botao-voltar {
    margin-left: -0.25rem;
    border-radius: 9999px;
}

/* ---------- Botões (Button do shadcn/ui) ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transicao), background-color var(--transicao), border-color var(--transicao);
}

.botao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.botao:disabled,
.botao[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
}

.botao svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
}

.botao-primario { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.botao-primario:hover { background-color: hsl(var(--primary) / 0.9); }

.botao-destrutivo { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.botao-destrutivo:hover { background-color: hsl(var(--destructive) / 0.9); }

.botao-contorno { border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)); }
.botao-contorno:hover,
.botao-fantasma:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.botao-secundario { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.botao-secundario:hover { background-color: hsl(var(--secondary) / 0.8); }

.botao-link { color: hsl(var(--primary)); text-underline-offset: 4px; }
.botao-link:hover { text-decoration: underline; }

.cabecalho-movel .botao-fantasma:hover { background-color: rgb(0 0 0 / 0.05); }
html.dark .cabecalho-movel .botao-fantasma:hover { background-color: rgb(255 255 255 / 0.05); }

.botao-pequeno { height: 2.25rem; padding: 0 0.75rem; }
.botao-grande { height: 2.75rem; padding: 0 2rem; }
.botao-icone { width: 2.5rem; height: 2.5rem; padding: 0; }
.botao-largo { width: 100%; }

/* ---------- Cartões (Card do shadcn/ui) ---------- */
.cartao {
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: var(--sombra-sm);
}

.cartao-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.5rem;
}

.cartao-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.cartao-titulo .lucide {
    width: 1rem;
    height: 1rem;
    color: hsl(var(--primary));
}

.cartao-descricao {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

.cartao-conteudo { padding: 0 1.5rem 1.5rem; }

.cartao-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem 1.5rem;
}

/* Faixa de resumo do Início: grid gap-4 sm:grid-cols-2 lg:grid-cols-4. */
.grade-resumo {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .grade-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grade-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tile: CardContent p-4; rótulo text-xs font-medium muted; valor mt-1 text-3xl font-semibold tabular-nums. */
.cartao-resumo {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.resumo-rotulo {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.resumo-valor {
    margin-top: 0.25rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.resumo-unidade {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.resumo-detalhe {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: hsl(var(--muted-foreground));
}

.resumo-rodape {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Estados: text-red-600 dark:text-red-400 para alerta; amber-700/400 para aviso; o verde do --success. */
.texto-alerta { color: var(--red-600); }
html.dark .texto-alerta { color: var(--red-400); }
.texto-aviso { color: #b45309; }
html.dark .texto-aviso { color: #fbbf24; }
.texto-sucesso { color: hsl(var(--success)); }
.texto-suave { color: hsl(var(--muted-foreground)); }
.conteudo-pagina > .texto-suave { color: hsl(var(--texto-suave-sobre-fundo)); }
.texto-pequeno { font-size: 0.875rem; line-height: 1.25rem; }
.texto-mini { font-size: 0.75rem; line-height: 1rem; }
.texto-mono { font-family: var(--fonte-mono); }

/* Estado vazio: só texto muted, sem ilustração. */
.estado-vazio {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

/* Carregando: skeleton animate-pulse bg-muted ou o texto "Carregando...". */
.esqueleto {
    border-radius: 0.375rem;
    background-color: hsl(var(--muted));
    animation: pulsar 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

.carregando .lucide {
    width: 1rem;
    height: 1rem;
    animation: girar 1s linear infinite;
}

@keyframes pulsar {
    50% { opacity: 0.5; }
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

@keyframes entrar-esmaecendo {
    from { opacity: 0; }
}

@keyframes entrar-ampliando {
    from { opacity: 0; transform: scale(0.95); }
}

/* ---------- Selos (Badge): rounded-full border px-2.5 py-0.5 text-xs font-semibold ---------- */
.selo {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transicao), background-color var(--transicao);
}

.selo-padrao { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.selo-secundario { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.selo-contorno { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.selo-destrutivo { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.selo-sucesso { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.selo-aviso { background-color: #f59e0b; color: #451a03; }
.selo-info { border-color: rgb(59 130 246 / 0.4); background-color: rgb(239 246 255 / 0.5); color: #1d4ed8; }
html.dark .selo-info { background-color: rgb(23 37 84 / 0.2); color: #93c5fd; }

.grupo-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

/* ---------- Alertas ---------- */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.alerta .lucide {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

.alerta-erro { border-color: hsl(0 84.2% 60.2% / 0.5); color: var(--red-600); }
html.dark .alerta-erro { border-color: hsl(var(--destructive)); color: var(--red-400); }
.alerta-sucesso { border-color: hsl(var(--success) / 0.4); background-color: hsl(var(--success) / 0.08); color: hsl(var(--success)); }
.alerta-aviso { border-color: rgb(245 158 11 / 0.4); background-color: rgb(245 158 11 / 0.1); color: hsl(var(--foreground)); }
.alerta-aviso .lucide { color: #d97706; }
.alerta-info { border-color: rgb(59 130 246 / 0.3); background-color: rgb(239 246 255 / 0.5); color: hsl(var(--foreground)); }
html.dark .alerta-info { background-color: rgb(23 37 84 / 0.2); }
.alerta-info .lucide { color: #2563eb; }

.alerta p + p { margin-top: 0.5rem; }

/* ---------- Formulários das páginas de conta (Input/Label/FormMessage do shadcn/ui) ---------- */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rotulo {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
}

.entrada {
    display: flex;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--input));
    border-radius: 0.5rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    transition: box-shadow 150ms ease-in-out;
}

@media (min-width: 768px) {
    .entrada { font-size: 0.875rem; line-height: 1.25rem; }
}

.entrada::placeholder { color: hsl(var(--muted-foreground)); }

.entrada:focus-visible {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

.entrada:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.mensagem-validacao,
.validation-message {
    font-size: 0.8rem;
    font-weight: 500;
    color: hsl(var(--destructive));
}

html.dark .mensagem-validacao,
html.dark .validation-message { color: var(--red-400); }

.campo:has(.mensagem-validacao) .rotulo { color: hsl(var(--destructive)); }
html.dark .campo:has(.mensagem-validacao) .rotulo { color: var(--red-400); }

/* ---------- Páginas de conta (login, 2FA, bloqueio, minha conta) ---------- */
.conta-rolagem {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

/* main flex items-center justify-center min-h-screen bg-gray-50 dark:bg-black (com uma margem para os cartões
   mais altos, como a configuração do autenticador, não encostarem na borda). */
.pagina-conta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1.5rem 1rem;
    background-color: var(--gray-50);
}

html.dark .pagina-conta { background-color: #000; }

/* Card w-full max-w-sm shadow-lg */
.cartao-conta {
    width: 100%;
    max-width: 24rem;
    box-shadow: var(--sombra-lg);
}

.cartao-conta-largo { max-width: 32rem; }

.cartao-conta > .cartao-cabecalho {
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* TsmitLogo w-48 mx-auto */
.logo-conta {
    display: block;
    width: 12rem;
    height: auto;
    margin: 0 auto;
}

.descricao-cartao {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.conteudo-conta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Ícone no topo do conteúdo (KeyRound h-10 w-10 text-muted-foreground do "esqueci a senha"). */
.icone-conta {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    color: hsl(var(--muted-foreground));
}

.titulo-secao-conta {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.texto-conta {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

.texto-conta a,
.link-conta {
    color: hsl(var(--primary));
    text-underline-offset: 4px;
}

.texto-conta a:hover,
.link-conta:hover { text-decoration: underline; }

.centro { text-align: center; }

/* "Sair" das páginas de conta: o item vermelho do menu da referência (text-red-600 dark:text-red-400). */
.botao-sair,
.botao-sair:hover { color: var(--red-600); }
.botao-sair:hover { background-color: hsl(0 84.2% 60.2% / 0.1); }
html.dark .botao-sair,
html.dark .botao-sair:hover { color: var(--red-400); }
html.dark .botao-sair:hover { background-color: hsl(var(--destructive) / 0.35); }

.formulario-sair-conta { margin-top: -0.5rem; }

/* Abas do "Minha conta" (Tabs do tsmit-doc): sublinhado em vez de pílula, traço primário na aba ativa. */
.abas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.aba {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transicao);
}

.aba::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background-color: hsl(var(--primary));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms ease-out;
}

.aba:hover,
.aba.active { color: hsl(var(--foreground)); }

.aba.active::after { transform: scaleX(1); }

.aba:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

@media (prefers-reduced-motion: reduce) {
    .aba::after { transition: none; }
}

/* QR code em fundo branco: mx-auto w-fit rounded-lg bg-white p-3. */
.qr-code {
    width: fit-content;
    margin: 0 auto;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #fff;
}

.qr-code img { display: block; }

.lista-passos kbd,
.codigo-recuperacao {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 0.75rem;
    word-break: break-all;
}

.lista-passos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.lista-passos > li { padding-left: 0.25rem; }
.lista-passos > li > * + * { margin-top: 0.75rem; }

.lista-codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.lista-codigos .codigo-recuperacao {
    display: block;
    padding: 0.375rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ---------- Seções das páginas (formulários de cadastro) ---------- */
.grade-formulario {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.linha-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rotulo-grupo {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
}

/* Cartão sem cabeçalho (só filtros): CardContent com o p-6 de cima. */
.cartao-conteudo-sem-titulo { padding-top: 1.5rem; }

/* Botão na mesma linha dos campos: alinhado com a caixa (abaixo do rótulo). */
@media (min-width: 960px) {
    .celula-botao > .mud-button-root { margin-top: 1.375rem; }
}

/* Campo e botões lado a lado (edição de cota, de endereço). */
.linha-formulario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.linha-formulario > .mud-input-control {
    flex: 1 1 16rem;
    max-width: 28rem;
}

.texto-dialogo {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground));
}

.mud-dialog .texto-dialogo + .mud-input-control { margin-top: 1rem !important; }

.lista-aplicativos {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: -0.375rem;
}

.pilha-estado {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.lista-problemas {
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
    font-size: 0.75rem;
    line-height: 1rem;
    color: hsl(var(--muted-foreground));
}

.tabela .celula-nowrap { white-space: nowrap; }
.texto-quebra { word-break: break-all; }
.tabela .celula-icone { width: 3.5rem; padding-right: 0 !important; }
.tabela .celula-icone img,
.tabela .celula-icone .lucide { display: block; }

/* Caixa de um segredo nas janelas (código de registro, login e senha). */
.caixa-segredo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--muted) / 0.5);
}

.caixa-segredo-rotulo {
    font-size: 0.75rem;
    line-height: 1rem;
    color: hsl(var(--muted-foreground));
}

.caixa-segredo-valor {
    font-family: var(--fonte-mono);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    word-break: break-all;
}

.caixa-segredo-valor-grande {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.08em;
}

.pilha {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------- MudBlazor com o visual shadcn/ui ---------- */

/* Sem o efeito ripple do Material. */
.mud-ripple::after { display: none !important; }

/* Botões: rounded-md text-sm font-medium, sem caixa alta e sem sombra; h-10 / h-9 (sm) / h-11 (lg). */
.mud-button-root.mud-button {
    min-width: 0;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    transition: color var(--transicao), background-color var(--transicao), border-color var(--transicao);
}

.mud-button-root.mud-button:active { box-shadow: none; }

.mud-button-root.mud-button.mud-button-size-small { height: 2.25rem; padding: 0 0.75rem; }
.mud-button-root.mud-button.mud-button-size-large { height: 2.75rem; padding: 0 2rem; }

.mud-button-root.mud-button .mud-button-icon-start { margin-left: 0; margin-right: 0.5rem; }
.mud-button-root.mud-button .mud-button-icon-end { margin-left: 0.5rem; margin-right: 0; }
.mud-button-root.mud-button .mud-button-icon-start > .mud-icon-root,
.mud-button-root.mud-button .mud-button-icon-end > .mud-icon-root,
.mud-button-root.mud-button .mud-icon-size-small,
.mud-button-root.mud-button .mud-icon-size-medium { font-size: 1rem; }

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

.mud-button-root.mud-disabled,
.mud-button-root:disabled {
    opacity: 0.5;
}

/* default: bg-primary hover:bg-primary/90. */
.mud-button-filled.mud-button-filled-primary:hover { background-color: hsl(var(--primary) / 0.9); }
.mud-button-filled.mud-button-filled-primary.mud-disabled,
.mud-button-filled.mud-button-filled-error.mud-disabled {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.mud-button-filled.mud-button-filled-error.mud-disabled { background-color: hsl(var(--destructive)); }
.mud-button-filled.mud-button-filled-error:hover { background-color: hsl(var(--destructive) / 0.9); }

/* outline: border border-input bg-background hover:bg-accent. */
.mud-button-outlined {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.mud-button-outlined:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.mud-button-outlined.mud-button-outlined-primary { color: hsl(var(--foreground)); border-color: hsl(var(--input)); }
.mud-button-outlined.mud-button-outlined-primary:hover { background-color: hsl(var(--accent)); }

/* ghost (texto): hover:bg-accent; o vermelho só nas ações destrutivas. */
.mud-button-text { color: hsl(var(--foreground)); }
.mud-button-text:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.mud-button-text.mud-button-text-primary { color: hsl(var(--primary)); }
.mud-button-text.mud-button-text-error { color: var(--red-600); }
.mud-button-text.mud-button-text-error:hover { background-color: hsl(0 84.2% 60.2% / 0.1); color: var(--red-600); }
html.dark .mud-button-text.mud-button-text-error,
html.dark .mud-button-text.mud-button-text-error:hover { color: var(--red-400); }
html.dark .mud-button-text.mud-button-text-error:hover { background-color: hsl(var(--destructive) / 0.35); }

/* Botões-ícone: h-10 w-10 rounded-md, hover:bg-accent. */
.mud-icon-button {
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.mud-icon-button:hover { background-color: hsl(var(--accent)); }

/* Campos: label acima (text-sm font-medium), caixa h-10 rounded-lg com a borda --input; foco border-ring ring-1. */
.mud-input-control {
    margin-top: 0 !important;
}

.mud-input-control > .mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    position: static;
    order: -1;
    max-width: 100%;
    padding: 0 !important;
    transform: none !important;
    color: hsl(var(--foreground));
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: normal;
    pointer-events: auto;
}

.mud-input-control.mud-input-error > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: hsl(var(--destructive));
}

.mud-input.mud-input-outlined {
    min-height: 2.5rem;
    font-weight: 400;
    border-radius: 0.5rem;
    background-color: hsl(var(--background));
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: box-shadow 150ms ease-in-out;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: hsl(var(--input));
    border-width: 1px !important;
    border-radius: 0.5rem;
    transition: border-color 150ms ease-in-out;
}

.mud-input.mud-input-outlined .mud-input-outlined-border legend {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-color: hsl(var(--input));
    }
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border {
    border-color: hsl(var(--ring)) !important;
}

.mud-input.mud-input-outlined:focus-within {
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: hsl(var(--destructive));
}

.mud-input > input.mud-input-root-outlined,
.mud-input > div.mud-input-slot.mud-input-root-outlined,
.mud-input > textarea.mud-input-root-outlined {
    height: 2.5rem;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-sizing: border-box;
}

/* O select mostra o valor num div: line-height da altura útil para centralizar o texto como no input. */
.mud-input > div.mud-input-slot.mud-input-root-outlined { line-height: 1.5rem; }

.mud-input > input.mud-input-root-outlined::placeholder {
    color: hsl(var(--muted-foreground));
    opacity: 1;
}

.mud-input-adornment-end { margin-right: 0.5rem; }
.mud-input-adornment .mud-icon-root { color: hsl(var(--muted-foreground)); font-size: 1rem; }

.mud-input-helper-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: normal;
    color: hsl(var(--muted-foreground));
}

.mud-input-control.mud-input-error .mud-input-helper-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: hsl(var(--destructive));
}

.mud-input-control-helper-container { padding: 0 !important; }

/* Select: o gatilho igual ao campo; a lista em popover rounded-md border shadow-md p-1. */
.mud-select .mud-select-input { cursor: pointer; }

/* Popovers do MudBlazor (lista do select, menus, autocompletar). */
.mud-popover.mud-paper {
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: var(--sombra-md);
}

.mud-popover .mud-list {
    padding: 0.25rem;
}

.mud-popover .mud-list-item,
.mud-popover .mud-menu-item {
    min-height: 0;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-menu-item:hover,
.mud-popover .mud-list-item:focus-visible,
.mud-popover .mud-menu-item:focus-visible {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.mud-popover .mud-selected-item {
    background-color: hsl(var(--accent)) !important;
    color: hsl(var(--accent-foreground)) !important;
    font-weight: 500;
}

.mud-popover .mud-list-item .mud-typography,
.mud-popover .mud-menu-item .mud-typography,
.mud-popover .mud-menu-item-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Menu do operador (DropdownMenu w-56). */
.mud-popover.menu-suspenso-operador {
    width: 14rem;
    margin-bottom: 0.25rem;
}

.mud-popover .item-menu,
.menu-suspenso .item-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: left;
    cursor: default;
    transition: background-color var(--transicao), color var(--transicao);
}

.menu-suspenso .item-menu:hover,
.menu-suspenso .item-menu:focus-visible {
    outline: none;
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.menu-suspenso .item-menu .mud-menu-item-icon,
.menu-suspenso .item-menu > .mud-icon-root {
    margin: 0;
    font-size: 1rem;
    color: inherit;
}

.menu-suspenso .item-menu .mud-icon-root,
.menu-suspenso .item-menu .lucide {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: inherit;
}

.menu-suspenso .item-menu-sair,
.menu-suspenso .item-menu-sair:hover { color: var(--red-600); }
html.dark .menu-suspenso .item-menu-sair,
html.dark .menu-suspenso .item-menu-sair:hover { color: var(--red-400); }

.separador-menu {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: hsl(var(--muted));
}

/* Tabelas: dentro de um cartão; cabeçalho h-12 font-medium muted; linhas hover bg-muted/50; células p-4. */
.mud-table.tabela {
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--card));
    box-shadow: var(--sombra-sm);
}

.tabela .mud-table-container { overflow-x: auto; }

.tabela .mud-table-root {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.tabela .mud-table-head .mud-table-cell {
    height: 3rem;
    padding: 0 1rem;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
}

.tabela .mud-table-body .mud-table-row {
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color var(--transicao);
}

/* overflow-wrap: anywhere deixa endereços, nomes e datas longos quebrarem antes de a tabela precisar rolar de lado
   (Servidores a 1440 px); as ações e os selos continuam numa linha só (white-space: nowrap). */
.tabela .mud-table-body .mud-table-cell {
    overflow-wrap: anywhere;
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.875rem;
    line-height: 1.25rem;
    vertical-align: middle;
}

.tabela .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
    .tabela.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
        background-color: hsl(var(--muted) / 0.5);
    }
}

.tabela .mud-table-cell .mud-button-root.mud-button {
    height: 2.25rem;
    padding: 0 0.75rem;
}

.tabela .celula-acoes {
    text-align: right;
    white-space: nowrap;
}

.tabela .celula-acoes > * { vertical-align: middle; }

/* Carregando: só o texto "Carregando..." no corpo vazio, sem a barra de progresso do Material. */
.tabela .mud-table-loading-row { display: none; }

.tabela .mud-table-body .mud-table-cell.celula-destaque { font-weight: 500; }
.tabela .mud-table-body .mud-table-cell.texto-suave { color: hsl(var(--muted-foreground)); }

/* Abaixo de 768 px a tabela vira lista de cartões: rótulo à esquerda, valor à direita (responsive-table.module.css). */
@media (max-width: 767px) {
    .tabela .mud-table-head { display: none; }

    .tabela .mud-table-body .mud-table-row {
        display: block;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid hsl(var(--border));
    }

    .tabela .mud-table-body .mud-table-row:last-child { border-bottom: 0; }

    .tabela .mud-table-body .mud-table-cell {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0;
        border-bottom: 0;
        text-align: right;
    }

    .tabela .mud-table-body .mud-table-cell[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.75rem;
        line-height: 1rem;
        color: hsl(var(--muted-foreground));
    }

    .tabela .mud-table-body .mud-table-cell.celula-acoes {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem;
        padding-top: 0.5rem;
        white-space: normal;
    }

    .tabela .mud-table-body .mud-table-cell.celula-icone { display: none; }

    .tabela .mud-table-body .mud-table-cell:not([data-label]):not(.celula-acoes) {
        display: block;
        text-align: center;
    }
}

/* Diálogos: max-w-lg p-6 border bg-background shadow-lg rounded-lg; fundo bg-black/80. */
.mud-overlay-dialog .mud-overlay-scrim,
.mud-overlay .mud-overlay-scrim.mud-overlay-dark { background-color: rgb(0 0 0 / 0.8); }

.mud-dialog {
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: var(--sombra-lg);
    animation: entrar-ampliando 200ms ease-out;
}

.mud-dialog.mud-dialog-width-sm,
.mud-dialog.mud-dialog-width-xs { max-width: 32rem; }

.mud-dialog .mud-dialog-title {
    padding: 1.5rem 1.5rem 0;
}

.mud-dialog .mud-dialog-title .mud-typography,
.mud-dialog .mud-dialog-title h6 {
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.mud-dialog .mud-dialog-content {
    padding: 1rem 1.5rem 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: hsl(var(--foreground));
}

.mud-dialog .mud-dialog-content > .mud-typography-body1,
.mud-dialog .mud-message-box-content {
    color: hsl(var(--muted-foreground));
}

.mud-dialog .mud-dialog-actions {
    gap: 0.5rem;
    padding: 1.5rem;
}

.mud-dialog .mud-button-close {
    top: 1rem;
    right: 1rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    opacity: 0.7;
}

.mud-dialog .mud-button-close:hover { opacity: 1; background-color: transparent; }

/* Avisos (Toast): rounded-md border p-6 pr-8 shadow-lg, 5000 ms, no canto inferior direito. */
.mud-snackbar {
    min-width: 0;
    width: 100%;
    max-width: 420px;
    padding: 1rem 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    box-shadow: var(--sombra-lg);
}

.mud-snackbar .mud-snackbar-icon { margin-right: 0.75rem; }
.mud-snackbar .mud-snackbar-icon .mud-icon-root { font-size: 1.125rem; }
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { color: hsl(var(--success)); }
.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon { color: hsl(var(--primary)); }
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { color: #d97706; }

/* destructive: border-destructive bg-destructive text-destructive-foreground. */
.mud-snackbar.mud-alert-filled-error {
    border-color: hsl(var(--destructive));
    background-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
}

.mud-snackbar .mud-snackbar-close-button,
.mud-snackbar .mud-icon-button { color: inherit; opacity: 0.5; }
.mud-snackbar .mud-icon-button:hover { opacity: 1; background-color: transparent; }

/* Alertas do MudBlazor como os da referência (borda, fundo suave, sem preenchimento forte). */
.mud-alert {
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.mud-alert.mud-dense { padding: 0.5rem 0.75rem; }
.mud-alert .mud-alert-message { padding: 0; }
.mud-alert .mud-alert-icon { margin-right: 0.5rem; padding: 0.125rem 0 0; }
.mud-alert .mud-alert-icon .mud-icon-root { font-size: 1rem; }

.mud-alert.mud-alert-text-info {
    border-color: rgb(59 130 246 / 0.3);
    background-color: rgb(239 246 255 / 0.5);
    color: hsl(var(--foreground));
}

html.dark .mud-alert.mud-alert-text-info { background-color: rgb(23 37 84 / 0.2); }
.mud-alert.mud-alert-text-info .mud-alert-icon { color: #2563eb; }

.mud-alert.mud-alert-text-warning {
    border-color: rgb(245 158 11 / 0.4);
    background-color: rgb(245 158 11 / 0.1);
    color: hsl(var(--foreground));
}

.mud-alert.mud-alert-text-warning .mud-alert-icon { color: #d97706; }

.mud-alert.mud-alert-text-error {
    border-color: hsl(0 84.2% 60.2% / 0.5);
    background-color: transparent;
    color: var(--red-600);
}

html.dark .mud-alert.mud-alert-text-error { color: var(--red-400); border-color: hsl(var(--destructive)); }
.mud-alert.mud-alert-text-error .mud-alert-icon { color: inherit; }

/* Dicas (Tooltip): rounded-md bg-popover border shadow-md text-sm. */
.mud-tooltip.mud-tooltip-default {
    padding: 0.375rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    box-shadow: var(--sombra-md);
}

.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after { display: none; }

/* Checkbox (h-4 w-4 rounded-sm border-primary) e switch (h-5 w-9) em azul da marca. */
.mud-checkbox .mud-checkbox-label,
.mud-switch .mud-switch-label { font-size: 0.875rem; line-height: 1.25rem; }

.mud-checkbox .mud-button-root.mud-icon-button { padding: 0.375rem; }
.mud-checkbox .mud-button-root.mud-icon-button:hover { background-color: transparent; }

/* Switch do shadcn/ui: trilho h-5 w-9 (bg-input desligado, bg-primary ligado) e botão h-4 w-4 bg-background. */
.mud-switch .mud-switch-span-medium.mud-switch-span {
    width: 2.25rem;
    height: 1.25rem;
    padding: 0;
    margin-right: 0.5rem;
    overflow: visible;
}

.mud-switch .mud-switch-span .mud-switch-track {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 9999px;
    background-color: hsl(var(--input));
    opacity: 1;
    box-shadow: var(--sombra-sm);
}

.mud-switch .mud-switch-base-medium.mud-switch-base {
    top: 2px;
    left: 2px;
    padding: 0;
    color: hsl(var(--background));
}

.mud-switch .mud-switch-base.mud-checked { transform: translateX(1rem); }
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track { background-color: hsl(var(--primary)); opacity: 1; }
.mud-switch .mud-switch-base:hover { background-color: transparent; }

.mud-switch .mud-switch-button .mud-switch-thumb-medium {
    width: 1rem;
    height: 1rem;
    background-color: hsl(var(--background));
    box-shadow: var(--sombra-lg);
}

.mud-switch:has(.mud-switch-input:focus-visible) .mud-switch-track {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.mud-switch > .mud-typography { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }

/* Select: o chevron do shadcn/ui (h-4 w-4 opacity-50). */
.mud-select .mud-input-adornment-end .mud-icon-root { width: 1rem; height: 1rem; opacity: 0.5; color: hsl(var(--foreground)); }

/* Barra de progresso fina (carregando). */
.mud-progress-linear.mud-progress-linear-color-primary { background-color: transparent; }

/* ---------- Erro do Blazor ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro.";
}