/* Core CSS - Design System do app de entrega (compartilhado via pacote Combox.App.Entrega.Core) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   PALETA HERDADA DO COLETOR (Combox.App.Core/wwwroot/css/app-theme.css).
   Os hex abaixo são os DELE, não uma aproximação: o app de entrega e o
   coletor rodam no mesmo aparelho, na mesma operação, e dois azuis quase
   iguais lado a lado leem como defeito, não como duas marcas.

   O papel de cada token continua o mesmo — só o valor mudou —, então as
   telas herdam a paleta sem regra nova.
   ===================================================================== */
:root {
    --bg-main: #f4f6f9;
    --bg-surface: #ffffff;
    --border-color: #e2e6ec;

    /* AZUL é a cor de ação, como no coletor. O laranja continua existindo,
       mas volta ao papel de ACENTO — no coletor ele marca o ambiente, não
       o botão principal. */
    --brand-primary: #0d47a1;
    --brand-primary-hover: #09367a;

    --accent-orange: #ff8f00;
    --accent-orange-hover: #e07f00;
    --accent-blue: #0d47a1;
    --accent-green: #2e7d32;

    --text-primary: #1a2027;
    --text-secondary: #5b6770;
    --text-muted: #8a949e;

    --shadow-premium: 0 4px 12px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .08);

    /* Header e componentes específicos (Light) */
    --header-bg: #ffffff;
    --header-title-color: #0d47a1;
    --header-user-color: #5b6770;
    --footer-bg: #ffffff;
    --footer-text-color: #0d47a1;
    --divider-color: #e2e6ec;
    --input-bg: #ffffff;
    --input-focus-bg: #ffffff;
    --input-border: #e2e6ec;
    --select-bg: #ffffff;
    --login-box-bg: #ffffff;
    --login-label-color: #1a2027;

    /* Rótulo do ambiente. Escurecido em relação ao #b8860b do coletor porque
       aqui ele fica sobre card branco em texto de 12px — o tom original não
       alcança 4.5:1, e é justamente a linha que avisa "isto é produção". */
    --env-color: #8a6100;

    /* Tema toggle button */
    --theme-btn-bg: rgba(13, 71, 161, 0.07);
    --theme-btn-color: #0d47a1;

    /* FONTE DO COLETOR (o --font-base do app-theme.css dele). No Android as duas pilhas caem
       na Roboto; é no navegador do Windows que a Inter destoava. Por ora só o login usa —
       as telas passam para ela quando forem revisadas, uma a uma. */
    --font-base: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* Menu lateral e Configurações (valores do coletor). */
    --surface-hover: #eef2f7;
    --danger: #c62828;

    /* Estados das telas (selos, avisos, faixas) — os do coletor. O âmbar do texto é mais
       escuro que o --brand-warning dele (#ed6c02): aquele, sobre o fundo creme, não passa de
       3:1, e é justamente o texto que avisa de uma trava. */
    --ok: #2e7d32;
    --ok-bg: #e6f4ea;
    --warn: #a54a00;
    --warn-bg: #fdf0e3;
    --info: #0277bd;
    --info-bg: #e4f1f8;
    --info-borda: #bfe0f2;
    --danger-tx: #c62828;
    --danger-bg: #fdecec;
    --danger-borda: #f5c6c6;
}

/* ===== DARK THEME =====
   O segundo seletor é a TELA DE CARREGAMENTO: ela aparece antes do Blazor existir, então
   não há componente para pôr a classe .dark-theme. O script do index.html marca o <html>
   com o tema salvo e este bloco pinta só o carregador — depois que o app sobe, o carregador
   some e o atributo não casa com mais nada. */
.dark-theme,
:root[data-entrega-tema="dark"] .carregando-app {
    --bg-main: #0f1216;
    --bg-surface: #1a1f26;
    --border-color: #2c333d;

    --brand-primary: #1f6fd6;
    --brand-primary-hover: #1559aa;

    --accent-orange: #ffa726;
    --accent-orange-hover: #ff9800;
    --accent-blue: #6ea8ec;
    --accent-green: #66bb6a;

    --text-primary: #e6e9ed;
    --text-secondary: #a7b0ba;
    --text-muted: #97a1ad;

    --shadow-premium: 0 4px 12px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25);

    --header-bg: #1a1f26;
    --header-title-color: #6ea8ec;
    --header-user-color: #a7b0ba;
    --footer-bg: #1a1f26;
    --footer-text-color: #6ea8ec;
    --divider-color: #2c333d;
    --input-bg: #11151b;
    --input-focus-bg: #151b23;
    --input-border: #2c333d;
    --select-bg: #11151b;
    --login-box-bg: #1a1f26;
    --login-label-color: #e6e9ed;

    /* No escuro dá para usar o âmbar cheio do coletor: sobre #1a1f26 ele passa
       folgado no contraste, ao contrário do mesmo tom sobre branco. */
    --env-color: #ffa726;

    --theme-btn-bg: rgba(110, 168, 236, 0.12);
    --theme-btn-color: #6ea8ec;

    --surface-hover: #232b34;
    /* --danger (fundo de botão) fica o MESMO do claro: o #ef5350 que o coletor usa no escuro,
       com texto branco por cima, não passa de 3.5:1. Já como TEXTO sobre o fundo escuro vale
       o do coletor — daí o --danger-tx separado. */
    --danger-tx: #ef5350;
    --danger-bg: #3a2222;
    --danger-borda: #5c2f2f;

    --ok: #66bb6a;
    --ok-bg: #1e3a26;
    --warn: #ffb74d;
    --warn-bg: #3a2f1a;
    --info: #4fc3f7;
    --info-bg: #16303d;
    --info-borda: #244e60;
}

html, body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    /* Escala base do app: 16px, a MESMA do coletor no celular e na web — é o que faz 1rem aqui
       ser 1rem lá e as medidas copiadas do app-theme.css dele darem o mesmo tamanho. (Era 14px
       no celular e 19px na web; o Entrega saía menor ou maior que o coletor conforme o lugar.)
       O host ainda pode ajustar sem forkar este arquivo: :root { --app-base-font-size: ...; } */
    font-size: var(--app-base-font-size, 16px);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    margin: 0;
    font-weight: 600;
}

/* App Container Layout - Mobile Centered Simulating Native App */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

/* Sem Scroll View no Container de Login */
.login-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-main);
    overflow: hidden; /* Remove scroll */
    padding: 16px;
    box-sizing: border-box;
}

.app-content {
    flex: 1;
    padding: 20px;
    padding-bottom: 95px; /* Espaço para a barra de navegação no rodapé */
}

/* Header Limpo e Fiel */
.app-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-title {
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: 700;
}

.header-status {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    font-weight: 600;
}

/* Card Fiel (Branco Puro com Sombras Suaves) */
.premium-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-premium);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Form Groups & Inputs Fiéis */
.form-group {
    margin-bottom: 16px;
    text-align: left;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Campo com BORDA, como no coletor. Era fundo azulado sem borda; a borda é o
   que separa o campo do card branco agora que o fundo dele também é branco. */
.form-control {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 11px 13px;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    outline: none;
    background: var(--input-focus-bg);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.12);
}

/* Botão de ação — AZUL, como no coletor. Era laranja; o laranja passou a ser
   acento (rótulo do ambiente), que é o papel dele no WMS. */
.btn-primary {
    background: var(--brand-primary);
    border: none;
    border-radius: 12px;
    color: white;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
}

.btn-primary:hover {
    background: var(--brand-primary-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.btn-secondary:hover {
    background: var(--bg-main);
}

/* Link de Redefinição de Senha */
.link-redefinir {
    color: var(--accent-blue);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin-top: 14px;
    transition: color 0.2s ease;
}

.link-redefinir:hover {
    color: #004499;
    text-decoration: underline;
}

/* Rodapé TabBar Fiel */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

/* Utilities */
.text-orange { color: var(--accent-orange); }
.text-blue { color: var(--accent-blue); }
.text-green { color: var(--accent-green); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-pending { background: #FEF3C7; color: #D97706; }
.badge-success { background: #D1FAE5; color: #059669; }
.badge-error { background: #FEE2E2; color: #DC2626; }

/* Custom Dropdown Select */
select.form-control {
    background-color: var(--select-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* =====================================================================
   TELA DE CARREGAMENTO — o mesmo anel com porcentagem do coletor
   (Combox.App.Web/wwwroot/css/app.css). Fica no PACOTE, e não no css do
   host, para que toda casca que publique a versão web só precise da
   marcação no index.html.

   Medidas em px, e não em rem: o anel tem de sair do mesmo tamanho que
   o do coletor mesmo que um host ajuste a letra base.

   A porcentagem vem das variáveis --blazor-load-percentage[-text], que só
   o blazor.webassembly.js publica. No host MAUI não há download, e o
   carregador lá continua sendo o texto simples.
   ===================================================================== */
.carregando-app {
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-base);
}

.loading-progress {
    position: absolute;
    display: block;
    width: 128px;
    height: 128px;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    /* Trilho claro nos DOIS temas, como no coletor: no escuro é ele que desenha o anel. */
    stroke: #e0e0e0;
    stroke-width: 9.6px;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 52px) 0 auto 3px;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carregando");
}

/* =====================================================================
   COMPONENTES DAS TELAS — os blocos do coletor (app-theme.css: .card,
   .kv, .badge, .btn, .field, .input, .banner, .menu-btn, ConfirmDialog),
   com prefixo ui- porque os <style> das páginas são globais e várias
   ainda usam nomes genéricos (.card, .active, .disabled...).

   Medidas = as do app-theme.css do coletor, em rem sobre a MESMA base de
   16px que ele usa (celular e web): 1rem aqui é 1rem lá. Onde o coletor
   escreve peso 600, aqui vai 700 — ele usa Arial, em que o 600 sai em
   negrito cheio; na fonte daqui o 600 é seminegrito e o texto ficava fino.
   Tudo por token: as telas funcionam nos dois temas sem regra .dark-theme
   própria, exceto o color-scheme dos controles nativos.
   ===================================================================== */

/* Coluna da tela: a mesma de 640px do título que o MainLayout desenha. O espaço entre os
   blocos é o margin-bottom de 8px dos cartões do coletor. */
.ui-pagina {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: var(--font-base);
    color: var(--text-primary);
}

.ui-pagina button,
.ui-pagina input,
.ui-pagina select,
.ui-pagina textarea,
.ui-dialogo button {
    font-family: inherit;
}

/* Linha logo abaixo do título da tela: complemento neutro (subtitulo, o Subtitle do PageHeader
   do coletor) ou o registro em trabalho, na cor da marca (contexto — "Nº Carga: X" dele). */
.ui-subtitulo {
    margin: -0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ui-contexto {
    margin: -0.25rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.ui-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-primary);
}

/* Registro que não pode ser aberto agora (entrega travada): apagado, mas ainda legível. */
.ui-card--apagado {
    opacity: .62;
}

.ui-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.ui-linha > strong {
    font-size: 1rem;
    min-width: 0;
}

.ui-kv {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.625rem;
    font-size: 0.82rem;
}

.ui-kv dt {
    color: var(--text-secondary);
}

.ui-kv dd {
    margin: 0;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Selo de status. Verde = concluído, âmbar = pendente, azul = em andamento, vermelho = desfeito. */
.ui-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--surface-hover);
    color: var(--text-secondary);
}

.ui-badge--ok { background: var(--ok-bg); color: var(--ok); }
.ui-badge--warn { background: var(--warn-bg); color: var(--warn); }
.ui-badge--info { background: var(--info-bg); color: var(--info); }
.ui-badge--danger { background: var(--danger-bg); color: var(--danger-tx); }

/* ---------- botões (.btn do coletor: 30px, 3px 14px, 1rem) ---------- */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 1.875rem;
    padding: 0.1875rem 0.875rem;
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ui-btn:hover:not(:disabled) {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.ui-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ui-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.ui-btn--bloco { width: 100%; }

/* Compacto, como os botões da barra de ação da Separação do coletor. */
.ui-btn--pq {
    min-height: 1.75rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.94rem;
}

.ui-btn--ghost {
    background: transparent;
    color: var(--accent-blue);
}

.ui-btn--ghost:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--brand-primary);
}

/* O que desfaz ou devolve: contorno vermelho, como o "Não"/"Limpar" do coletor. */
.ui-btn--ghost-danger {
    background: transparent;
    color: var(--danger-tx);
    border-color: var(--danger-tx);
}

.ui-btn--ghost-danger:hover:not(:disabled) {
    background: var(--danger-bg);
    border-color: var(--danger-tx);
}

.ui-btn--danger {
    background: var(--danger);
    border-color: var(--danger);
}

.ui-btn--danger:hover:not(:disabled) {
    background: #a51f1f;
    border-color: #a51f1f;
}

/* Confirmar do diálogo, como no ConfirmDialog do coletor (laranja). */
.ui-btn--accent {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #1a1a1a;
}

.ui-btn--accent:hover:not(:disabled) {
    background: var(--accent-orange-hover);
    border-color: var(--accent-orange-hover);
}

/* Linha de botões lado a lado (8px, como no coletor); .ui-dobro dá o peso 2 da ação
   principal (flex:2 do coletor). */
.ui-dupla {
    display: flex;
    gap: 0.5rem;
}

.ui-dupla > * {
    flex: 1;
    min-width: 0;
}

.ui-dupla > .ui-dobro {
    flex: 2;
}

/* Botão que ocupa a largura do conteúdo e fica à direita de um texto (ex.: "Abrir ➡"). */
.ui-linha > .ui-btn {
    flex: 0 0 auto;
}

/* ---------- campos (.field / .input do coletor) ---------- */

.ui-campo {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ui-rotulo,
.ui-campo > label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Altura da linha "campo + botão" do coletor (a searchbar estica o input até os 30px do
   botão ao lado): campo e botão ficam alinhados em qualquer linha da tela. */
.ui-input {
    width: 100%;
    box-sizing: border-box;
    height: 1.875rem;
    padding: 0 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ui-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, .15);
}

.ui-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.ui-input:disabled {
    opacity: .7;
}

.ui-input--erro {
    border-color: var(--danger-tx);
}

select.ui-input {
    cursor: pointer;
}

.dark-theme .ui-input {
    color-scheme: dark;
}

/* ---------- avisos (.banner do coletor: 12px 14px, .9rem) ---------- */

.ui-banner {
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.ui-banner--info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-borda);
}

.ui-banner--erro {
    background: var(--danger-bg);
    color: var(--danger-tx);
    border: 1px solid var(--danger-borda);
}

/* Aviso âmbar DENTRO de um cartão (trava, pendência). */
.ui-aviso {
    margin: 0;
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--warn-bg);
    color: var(--warn);
}

.ui-nota {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Carregando / vazio (.center-state do coletor: 40px 16px). */
.ui-estado {
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--text-secondary);
}

.ui-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ui-giro 0.8s linear infinite;
}

/* Dentro de botão cheio (fundo azul/vermelho). */
.ui-spinner--pq {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
}

@keyframes ui-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-spinner { animation-duration: 2.4s; }
}

/* ---------- botão grande de menu (.menu-btn do coletor) ----------
   padding 22px 24px, altura mínima 64px, texto 1.05rem, ícone 1.5rem e 16px entre os botões. */

.ui-menu-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ui-menu-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 4rem;
    padding: 1.375rem 1.5rem;
    background: var(--bg-surface);
    color: var(--accent-blue);
    border: 2px solid var(--brand-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

.ui-menu-btn:hover:not(:disabled) {
    background: var(--surface-hover);
}

.ui-menu-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.ui-menu-btn:disabled {
    background: var(--bg-main);
    color: var(--text-muted);
    border-color: var(--border-color);
    box-shadow: none;
    cursor: not-allowed;
}

.ui-menu-btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.ui-menu-btn__ico {
    width: 2rem;
    font-size: 1.5rem;
    text-align: center;
}

.ui-menu-btn:disabled .ui-menu-btn__ico {
    opacity: .55;
}

.ui-menu-btn__rotulo {
    flex: 1;
    text-align: center;
}

/* Escolha de uma entre poucas opções (Não | Sim, Parcial | Total): a ativa cheia, as outras
   em contorno — o par .btn / .btn--ghost do coletor. */
.ui-seg {
    display: flex;
    gap: 0.5rem;
}

.ui-seg > * {
    flex: 1;
    min-width: 0;
}

/* ---------- fotos ---------- */

.ui-grade-fotos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

/* ---------- diálogo (ConfirmDialog do coletor: caixa de 380px, 16px de respiro) ----------
   position: fixed — o diálogo tem de ficar FORA de qualquer elemento com transform (a classe
   .animate-fade-in deixa um transform no fim da animação), senão fica preso dentro dele. */

.ui-dialogo-fundo {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ui-dialogo {
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .2);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-family: var(--font-base);
}

.ui-dialogo__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.ui-dialogo__texto {
    margin: 0;
    line-height: 1.35;
}

/* Blazor Error UI */
#blazor-error-ui {
    background: #FFFBEB;
    border-top: 2px solid #F59E0B;
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    display: none;
    left: 0;
    padding: 0.8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    color: #B45309;
    font-size: 0.9rem;
    font-weight: 600;
    box-sizing: border-box;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1.25rem;
    top: 0.75rem;
    color: #78350F;
    font-size: 1.1rem;
}