/* ProdutoAI Searcher — folha de estilo única, sem dependências externas. */

:root {
    color-scheme: light dark;

    --bg: #f6f5f2;
    --surface: #ffffff;
    --surface-alt: #faf9f7;
    /* Segunda camada neutra: a lateral fica um tom abaixo do conteúdo, sem precisar de borda grossa. */
    --sidebar: #efede8;
    --border: #e2ded6;
    /* Borda de controle: campo e botão precisam de 3:1 contra o fundo para serem vistos como campo. */
    --border-strong: #958d80;
    --text: #1d1b18;
    --text-muted: #6b6459;
    --accent: #b4532a;
    --accent-soft: #f4e5dd;
    --on-accent: #ffffff;
    --success: #2f6b3a;
    --success-soft: #e3f0e4;
    --danger: #a32020;
    --danger-soft: #fbe9e9;
    --warn: #8a6100;
    --warn-soft: #fdf3dd;
    --radius: 14px;
    --radius-control: 8px;
    --shadow: 0 1px 2px rgb(29 27 24 / 6%), 0 8px 24px -12px rgb(29 27 24 / 18%);
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161513;
        --surface: #1f1e1b;
        --surface-alt: #262420;
        --sidebar: #1b1a17;
        --border: #35322c;
        --border-strong: #7a7266;
        --text: #f0ede7;
        --text-muted: #a29a8d;
        --accent: #e8825a;
        --accent-soft: #3a2419;
        /* Texto branco sobre o laranja claro do tema escuro não passa de 2,6:1. */
        --on-accent: #1d1208;
        --success: #8fd19b;
        --success-soft: #1b2e1f;
        --danger: #f08a8a;
        --danger-soft: #3a1e1e;
        --warn: #e6bd63;
        --warn-soft: #362b12;
        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 60%);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    accent-color: var(--accent);
    scrollbar-color: var(--border-strong) transparent;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    caret-color: var(--accent);
}

::selection {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
}

a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}

/* Um só anel de foco para tudo o que se alcança pelo teclado: antes, botões, links do menu e
   campos dos filtros não mostravam onde o foco estava. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Escala fixa e curta: num painel, título grande demais empurra a tabela para baixo da dobra. */
h1, h2, h3, h4 {
    line-height: 1.25;
    text-wrap: balance;
}

h1 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: -0.02em;
}

h2 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1rem;
}

code {
    font-family: var(--mono);
    font-size: 0.88em;
}

/* --- shell ---------------------------------------------------------------- */

.app-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.4rem 0.9rem 1rem;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.6rem;
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--accent), #e0a878);
}

.brand-text {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.brand-text strong {
    font-weight: 700;
}

.brand-text span {
    font-weight: 400;
    color: var(--text-muted);
}

.brand-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-group-label {
    padding: 0 0.6rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.nav-item {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-control);
    color: var(--text);
    text-decoration: none;
    font-size: 0.93rem;
    transition: background-color 150ms ease-out;
}

.nav-item:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.app-signout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.75rem 0.6rem 0;
    border-top: 1px solid var(--border);
}

.app-user {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.app-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 78rem;
    min-width: 0;
    padding: 2rem 2.5rem 4rem;
}

/* A lista de produtos tem 15 colunas: ela usa toda a largura da tela. Os parágrafos soltos
   continuam presos à largura de leitura pela regra de 72ch abaixo. */
.app-main:has(.lista-produtos) {
    max-width: none;
}

/* Parágrafos explicativos soltos na página: largura de leitura, não a da tabela. */
.app-main > p:not(.alert),
.app-main > .lede {
    max-width: 72ch;
}

.app-main > h1 + p,
.page-head + p {
    margin-top: -0.6rem;
}

.app-main > p,
.app-main > h2 {
    margin-block: 0;
}

.app-main > h2 {
    margin-top: 0.75rem;
}

/* Tela pública (entrar): sem lateral, conteúdo centralizado. */
.app-shell-publica {
    display: block;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.app-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 1.75rem 0 1.25rem;
    border-bottom: 1px solid var(--border);
}

.app-topo .brand {
    padding: 0;
}

.app-shell-publica .app-main {
    padding: 2rem 0 4rem;
}

/* Tela estreita: a lateral vira cabeçalho fixo, com o menu numa faixa que rola de lado. */
@media (max-width: 52rem) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        z-index: 10;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
        padding: 0.7rem 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        overflow: visible;
    }

    .app-signout {
        margin: 0 0 0 auto;
        padding: 0;
        border: 0;
    }

    .app-user {
        max-width: 11rem;
    }

    .app-nav {
        order: 3;
        flex-direction: row;
        gap: 0.25rem;
        width: calc(100% + 2rem);
        margin: 0 -1rem;
        padding: 0 1rem 0.6rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-group {
        flex-direction: row;
        gap: 0.25rem;
    }

    .nav-group + .nav-group {
        padding-left: 0.35rem;
        border-left: 1px solid var(--border);
    }

    .nav-group-label {
        display: none;
    }

    .nav-item {
        white-space: nowrap;
        padding: 0.4rem 0.7rem;
    }

    .app-main {
        padding: 1.5rem 1rem 3rem;
    }
}

/* Cabeçalho de página: título à esquerda, ação principal à direita, sempre no mesmo lugar. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.voltar {
    align-self: flex-start;
    margin-bottom: -0.75rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    text-decoration: none;
}

.voltar:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- controles ------------------------------------------------------------ */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.field-wide {
    grid-column: 1 / -1;
}

.field-hint {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea,
.filtros input:not([type="checkbox"]):not([type="file"]),
.filtros select,
.repeater-linha input,
.upload-url input,
.thumb-caption-input,
.faq-linha input,
.faq-linha textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    transition: border-color 150ms ease-out;
}

.field input[type="checkbox"],
.field input[type="file"] {
    width: auto;
    min-height: 0;
    border: 0;
    padding: 0;
    background: none;
}

.field textarea,
.faq-linha textarea {
    resize: vertical;
}

.field input:hover:not(:disabled),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled),
.filtros input:hover:not(:disabled),
.filtros select:hover:not(:disabled),
.repeater-linha input:hover,
.upload-url input:hover,
.faq-linha input:hover,
.faq-linha textarea:hover {
    border-color: var(--text-muted);
}

/* O foco do campo é a própria borda, mais o anel: fica claro onde se está digitando. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.filtros input:focus-visible,
.filtros select:focus-visible,
.repeater-linha input:focus-visible,
.upload-url input:focus-visible,
.thumb-caption-input:focus-visible,
.faq-linha input:focus-visible,
.faq-linha textarea:focus-visible {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 0;
}

::placeholder {
    color: color-mix(in srgb, var(--text-muted) 85%, transparent);
    opacity: 1;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.field input[aria-invalid="true"],
.field input.invalid {
    border-color: var(--danger);
}

.btn,
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.93rem;
    line-height: 1.2;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, filter 150ms ease-out;
}

.btn:hover:not(:disabled) {
    background: var(--surface-alt);
    border-color: var(--text-muted);
}

.btn:active:not(:disabled),
.btn-search:active:not(:disabled) {
    filter: brightness(0.94);
}

.btn:disabled,
.btn-search:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary,
.btn-search {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover:not(:disabled),
.btn-search:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    filter: brightness(1.08);
}

.btn-search {
    padding-inline: 1.6rem;
}

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

.btn-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    border-color: var(--danger);
    filter: brightness(0.97);
}

.btn-small {
    min-height: 2rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

/* Ação de texto dentro de tabela e lista: parece link, mas tem área de toque de botão. */
.linklike {
    display: inline-block;
    margin: -0.15rem 0;
    padding: 0.15rem 0.35rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    white-space: nowrap;
}

.linklike:hover:not(:disabled) {
    background: var(--accent-soft);
}

.linklike:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.validation-message,
.validation-errors {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
    font-size: 0.88rem;
}

/* --- busca ---------------------------------------------------------------- */

.search-panel h1 {
    margin: 0 0 0.5rem;
    font-size: 1.95rem;
    line-height: 1.15;
}

.lede {
    margin: 0 0 1.5rem;
    max-width: 44rem;
    color: var(--text-muted);
}

.search-fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.7fr auto;
    gap: 0.75rem;
    align-items: end;
}

/* Passo intermediário: os campos dois a dois, botão ocupando a última linha. */
@media (max-width: 72rem) {
    .search-fields {
        grid-template-columns: 1fr 1fr;
    }

    .search-fields .btn-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 40rem) {
    .search-fields {
        grid-template-columns: 1fr;
    }
}

.search-fields .btn-search {
    min-height: 2.75rem;
}

.search-fields .field input {
    min-height: 2.75rem;
}

.examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.chip {
    padding: 0.3rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 150ms ease-out, color 150ms ease-out;
}

.chip:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- status e alertas ----------------------------------------------------- */

.status-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.status-card p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.spinner {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.35rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

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

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

.alert {
    margin: 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid;
    border-radius: var(--radius-control);
}

.alert p {
    margin: 0.3rem 0 0;
}

.alert-error,
.alert-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.alert-warning {
    color: var(--warn);
    background: var(--warn-soft);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.alert-ok {
    color: var(--success);
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.alert a {
    color: inherit;
    font-weight: 600;
}

.suggestions {
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.suggestions h2 {
    margin: 0;
    font-size: 1.15rem;
}

.suggestions > div:first-child > p {
    margin: 0.2rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.suggestion-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 1rem;
    font: inherit;
    text-align: left;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 150ms ease-out;
}

.suggestion-card:hover:not(:disabled),
.suggestion-card:focus-visible {
    border-color: var(--accent);
}

.suggestion-card > span,
.suggestion-card > small {
    color: var(--text-muted);
}

.suggestion-brand {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.suggestion-action {
    margin-top: 0.55rem;
    color: var(--accent) !important;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Rodapé de diagnóstico da chamada: o que foi pesquisado e quanto demorou. */
.result-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.result-meta code {
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* --- ficha do produto ----------------------------------------------------- */

.product {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.product-hero {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.75rem;
    padding: 1.75rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

@media (max-width: 46rem) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.product-photo {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.product-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- galeria -------------------------------------------------------------- */

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Tira horizontal: com muitas imagens, rola dentro de si em vez de esticar a coluna. */
.thumbs {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.thumb {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    padding: 0.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 120ms ease, border-color 120ms ease;
}

.thumb:hover {
    opacity: 1;
}

.thumb.is-active {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.thumb-caption {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Imagens da ficha lado a lado, com a legenda e o tamanho real embaixo de cada uma. A foto
   fica num quadrado de fundo claro e "contain", como a principal: produto recortado em fundo
   branco não pode ser cortado nem esticado. */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
}

.image-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    min-width: 0;
}

.image-card-photo {
    aspect-ratio: 1;
    display: block;
    width: 100%;
    /* Sem isto a foto em retrato estica o quadro: o tamanho mínimo automático do conteúdo
       vence o aspect-ratio. */
    min-height: 0;
    overflow: hidden;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.image-card-photo:hover { border-color: var(--border-strong); }

.image-card-photo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.image-card.is-active .image-card-photo {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.image-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

.image-card-caption { color: var(--text); overflow-wrap: anywhere; }

.image-card-size {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.photo-fallback {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
}

.photo-fallback span {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.photo-fallback small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
}

.product-headline h2 {
    margin: 0.25rem 0 0.75rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.badge {
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
}

.badge-price {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-gtin {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.highlights {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
}

.highlights li {
    margin-bottom: 0.25rem;
}

.product-section {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border);
}

.product-section:last-child {
    border-bottom: 0;
}

.product-section > h3 {
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

.product-section p {
    margin: 0 0 0.85rem;
    max-width: 46rem;
}

.product-section p:last-child {
    margin-bottom: 0;
}

/* O alerta precisa ser lido antes da compra: destaca-se das seções neutras ao redor. */
.purchase-notice {
    background: var(--accent-soft);
}

.purchase-notice > h3 {
    color: var(--accent);
}

.faq-list details {
    padding: 0.6rem 0;
    border-top: 1px solid var(--border);
}

.faq-list details:first-child {
    border-top: 0;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 600;
}

.faq-list details > p {
    margin: 0.4rem 0 0;
}

.faq-editor { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.faq-linha {
    display: grid; gap: 0.4rem; padding: 0.75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.faq-linha > button { justify-self: start; }

.product-video {
    width: min(100%, 46rem);
    aspect-ratio: 16 / 9;
    margin-bottom: 0.75rem;
}

.product-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.5rem;
}

.spec-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
}

.section-intro {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.spec-group h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.spec-group dl {
    margin: 0;
}

.spec-row {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) 1fr;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

.spec-row dt {
    color: var(--text-muted);
}

.spec-row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.seo {
    margin: 0;
}

.seo-row {
    display: grid;
    grid-template-columns: minmax(6rem, 25%) 1fr;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}

.seo-row dt {
    color: var(--text-muted);
}

.seo-row dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* A contagem existe para ver de relance se o texto cabe no snippet do buscador. */
.seo-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    opacity: 0.7;
}

.sources {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.sources li {
    margin-bottom: 0.3rem;
    overflow-wrap: anywhere;
}

.notes p {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
}


/* --- erro do Blazor ------------------------------------------------------- */

/* Escondido por padrão: o Blazor só o mostra quando o circuito falha de verdade. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: var(--warn-soft);
    color: var(--warn);
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
}

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

/* --- painel de administração ---------------------------------------------- */
/*
   Reaproveita os tokens já definidos em :root, então tema claro e escuro seguem
   funcionando sem nada a mais. Nenhuma dependência nova: o Bootstrap em wwwroot/lib
   continua sem uso.
*/

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.card > h1, .card > h2 { margin: 0; }
.card-narrow { width: 100%; max-width: 26rem; margin: 3rem auto; box-shadow: var(--shadow); }

.form-stack { display: flex; flex-direction: column; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0.5rem 0; }

/* Barra de filtros: cada controle com a sua largura, a ação principal empurrada para a direita. */
.filtros { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0; }
.filtros input:not([type="checkbox"]):not([type="file"]),
.filtros select { width: auto; min-width: 12rem; }
.filtros input[type="search"] { flex: 1 1 18rem; max-width: 28rem; }

@media (max-width: 40rem) {
    .filtros input:not([type="checkbox"]):not([type="file"]),
    .filtros select { flex: 1 1 100%; min-width: 0; max-width: none; }
}

/* Toda tabela rola dentro de si: em tela estreita, a página não ganha barra lateral. */
.tabela-rolagem,
.brand-url-table,
.lote-tabela {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
}

/* Dentro da rolagem a tabela guarda uma largura mínima: em vez de esmagar o nome do produto
   em quatro linhas no celular, ela rola de lado. */
.tabela-rolagem .tabela,
.lote-tabela .tabela { min-width: 44rem; }

.tabela { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tabela th {
    text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-strong);
    background: var(--surface-alt);
    color: var(--text-muted); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.tabela td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--surface-alt); }
.tabela td a:not(.linklike) { font-weight: 600; text-decoration: none; }
.tabela td a:not(.linklike):hover { text-decoration: underline; }
.tabela .inativo td { color: var(--text-muted); }
.tabela .linha-invalida td { background: var(--danger-soft); }
.tabela .col-acoes,
.tabela .col-data,
.tabela td.mono { white-space: nowrap; }

/* Preenchimento da ficha: sete colunas estreitas sob um cabeçalho comum. O check verde é o
   que se lê de relance; o que falta fica num traço discreto, para a linha incompleta se
   destacar pela ausência de verde e não por um muro de alertas. */
.tabela-rolagem .tabela-produtos { min-width: 75rem; }
.tabela .col-preench-grupo {
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.tabela .col-preench {
    width: 4.75rem;
    padding-inline: 0.25rem;
    text-align: center;
    vertical-align: top;
    font-size: 0.75rem;
}
.tabela th.col-preench { white-space: nowrap; }
.tabela :not(.col-preench) + .col-preench,
.tabela thead tr:last-child > .col-preench:first-child { border-left: 1px solid var(--border); }
.tabela .col-preench:has(+ :not(.col-preench)),
.tabela thead tr:last-child > .col-preench:last-child { border-right: 1px solid var(--border); }

.preench {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.1rem;
    border-radius: 999px;
}
.preench-ok { color: var(--success); background: var(--success-soft); }
.preench-falta { color: var(--text-muted); }

/* Pesquisar campos: a escolha em grade, e a comparação atual × encontrado numa tabela que
   quebra o texto longo em vez de alargar a página. */
.campos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
}
.tabela-rolagem .tabela-campos { min-width: 40rem; }
.tabela-campos td { overflow-wrap: anywhere; }
.tabela-campos td:nth-child(2) { white-space: nowrap; }

/* Texto que só o leitor de tela lê. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.brand-url-filter { max-width: 24rem; }
.brand-url-address { overflow-wrap: anywhere; min-width: 12rem; }

.tag {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; margin-left: 0.35rem; white-space: nowrap;
    line-height: 1.5;
}
.tag-ok { background: var(--success-soft); color: var(--success); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-auto { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-muted); }
.tag-manual { background: var(--accent-soft); color: var(--accent); }
.tag-import { background: var(--warn-soft); color: var(--warn); }

.mono { font-family: var(--mono); font-size: 0.88em; }
.muted { color: var(--text-muted); }
.erro { color: var(--danger); }
.ok { color: var(--success); }
.app-main > .resumo { margin-top: -0.6rem; }

/* Barra da seleção: fica entre os filtros e a tabela, perto das caixas marcadas. */
.acoes-lista {
    display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: var(--radius-control);
}
.acoes-lista > .muted { flex: 1 1 18rem; font-size: 0.85rem; line-height: 1.4; }
.acoes-lista .contagem { font-weight: 600; }

/* Coluna das caixas de seleção da exportação em PDF: estreita, e a caixa alinhada com o
   nome do produto, que é a primeira linha da célula ao lado. */
.tabela .col-check { width: 2.5rem; padding-right: 0; }
.tabela .col-check input { width: 1rem; height: 1rem; margin: 0.3rem 0 0; cursor: pointer; }

.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 0.5rem 0 0; }

.chave-nova .chave {
    display: block; margin: 0.6rem 0; padding: 0.7rem;
    background: var(--surface); color: var(--text); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-control); word-break: break-all; user-select: all;
}

.detalhe-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.detalhe-topo h1 { flex: 1 1 22rem; }
.detalhe-topo .acoes { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Blocos que abrem e fecham (editar, novo cliente, excluir): o resumo é uma barra clicável
   inteira, com seta que gira — antes era só um texto em negrito, sem cara de botão. */
.editor, .perigo {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 1.25rem;
}
section.editor { padding: 1rem 1.25rem; }
section.editor > h2 { margin-top: 0; }
.editor[open], .perigo[open] { padding-bottom: 1.25rem; }

.editor > summary, .perigo > summary {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 -1.25rem; padding: 0.85rem 1.25rem;
    cursor: pointer; font-weight: 600; list-style: none;
    border-radius: var(--radius);
}
.editor > summary::-webkit-details-marker, .perigo > summary::-webkit-details-marker { display: none; }
.editor > summary::before, .perigo > summary::before {
    content: ""; flex: none; width: 0.5rem; height: 0.5rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform 150ms ease-out;
}
.editor[open] > summary::before, .perigo[open] > summary::before { transform: rotate(45deg); }
.editor > summary:hover, .perigo > summary:hover { background: var(--surface-alt); }
.editor[open] > summary, .perigo[open] > summary { margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }

.perigo { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.perigo > summary { color: var(--danger); }

/* --- Nota da ficha ----------------------------------------------------------
   O número é o que se lê de relance; os critérios ficam recolhidos, uma tabela por grupo. */
.nota-ficha > summary { flex-wrap: wrap; column-gap: 0.75rem; }
.nota-valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nota-valor small { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.nota-partes { font-weight: 400; font-size: 0.9rem; }
.nota-ok { color: var(--success); }
.nota-warn { color: var(--warn); }
.nota-danger { color: var(--danger); }
.nota-criterios { margin-top: 0.75rem; }
.nota-criterios caption {
    caption-side: top; text-align: left; font-weight: 600; padding: 0.25rem 0 0.4rem;
}
.nota-criterios caption .muted { font-weight: 400; margin-left: 0.4rem; }
.nota-criterios .nota-criterio { width: 30%; font-weight: 600; }
.nota-criterios .nota-pontos { width: 6rem; text-align: right; white-space: nowrap; font-weight: 700; }
.nota-rodape { margin: 0.75rem 0 0; font-size: 0.85rem; }
.tabela .col-nota { text-align: right; white-space: nowrap; }
.nota-lista { font-weight: 700; font-variant-numeric: tabular-nums; }

.acoes-rodape { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0 0; flex-wrap: wrap; }

/* --- Editor da ficha (cadastro e edição) ------------------------------------
   Listas que crescem: atributos, destaques, fontes, imagens e variações. O desenho é
   deliberadamente seco — são muitos campos na tela, e qualquer enfeite por linha vira
   ruído multiplicado por trinta. */

/* O <main> é um flex column: sem um invólucro, cada botão do editor viraria filho direto
   dele e esticaria de ponta a ponta. Aqui o editor tem o seu próprio fluxo, e só o que deve
   ocupar a linha inteira ocupa. */
.editor-form { display: flex; flex-direction: column; gap: 0.5rem; }
.editor-form > h2 { margin: 1.25rem 0 0; }
.editor-form > .section-intro { margin: 0; }
.editor-form > .btn { align-self: flex-start; }

.repeater { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }

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

.repeater-linha input { flex: 1 1 auto; min-width: 0; width: auto; }

/* Grupo estreito, nome médio, valor largo: é a proporção com que essas três coisas
   costumam ser escritas. */
.repeater-atributo input:nth-child(1) { flex: 0 1 9rem; }
.repeater-atributo input:nth-child(2) { flex: 1 1 12rem; }
.repeater-atributo input:nth-child(3) { flex: 2 1 16rem; }

/* Termo largo, marca estreita. Os termos já gravados são texto, com a mesma proporção,
   para as colunas alinharem com as linhas em edição logo abaixo. */
.repeater-termo > :nth-child(1) { flex: 2 1 16rem; }
.repeater-termo > :nth-child(2) { flex: 1 1 9rem; }
.termo-texto { padding: 0.55rem 0; min-width: 0; overflow-wrap: anywhere; }

.upload-area {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    margin: 0.75rem 0; padding: 0.85rem;
    background: var(--surface-alt);
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
}

.upload-url { display: flex; gap: 0.5rem; flex: 1 1 22rem; }

.upload-url input { flex: 1 1 auto; min-width: 0; width: auto; }

/* Fotos de detalhe: convite quando a ficha tem uma foto só, depois a prévia dos recortes. Cada
   prévia é a própria foto ampliada e deslocada dentro de uma janela — nenhum arquivo é gerado
   até o usuário confirmar. */
.detalhes {
    display: grid; gap: 0.75rem;
    margin: 0.75rem 0; padding: 0.85rem;
    background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.detalhes .section-intro { margin: 0; }
.detalhes .alert { margin: 0; }

.detalhes-convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.detalhes-convite p { margin: 0; max-width: 62ch; }

.detalhes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; }

.detalhe {
    display: grid; gap: 0.45rem; align-content: start; min-width: 0;
    margin: 0; padding: 0.45rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px;
    transition: border-color 120ms ease;
}
.detalhe.is-on { border-color: var(--accent); }
.detalhe figcaption { display: grid; gap: 0.4rem; min-width: 0; }

/* Branco de propósito, nos dois temas: é o fundo da foto de produto, não da interface. */
.detalhe-janela { position: relative; overflow: hidden; max-width: 100%; border-radius: 6px; background: #fff; }
.detalhe-janela img { position: absolute; display: block; max-width: none; height: auto; }

.detalhe-linha { display: flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.85rem; cursor: pointer; }
.detalhe-linha strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalhe-linha .mono { flex: none; font-size: 0.75rem; white-space: nowrap; }
.detalhe .thumb-caption-input { min-height: 2rem; padding: 0.3rem 0.45rem; font-size: 0.8rem; border-radius: 6px; }

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

/* A galeria em edição não é a mesma coisa que a de exibição: aqui cada item tem legenda
   para digitar e botões, então a miniatura precisa de largura de verdade. */
.thumbs-editor { flex-wrap: wrap; overflow: visible; gap: 0.75rem; }

.thumbs-editor .thumb {
    width: 9rem; height: auto; opacity: 1; cursor: default;
    display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem;
}

.thumbs-editor .thumb img { height: 6rem; width: 100%; }

.thumbs-editor .thumb-caption-input { min-height: 2rem; padding: 0.3rem 0.45rem; font-size: 0.8rem; border-radius: 6px; }

.thumbs-editor figcaption {
    display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
    font-size: 0.75rem;
}

@media (max-width: 46rem) {
    .tabela { font-size: 0.85rem; }
    .tabela td, .tabela th { padding: 0.5rem 0.5rem; }
    .repeater-linha, .repeater-atributo { flex-wrap: wrap; }
    .repeater-atributo input, .repeater-termo input { flex: 1 1 100%; }
    .thumbs-editor .thumb { width: 7rem; }
}

/* --- busca em lote -------------------------------------------------------- */

.lote-abas { display: flex; gap: 0.25rem; margin: 0.25rem 0 0; border-bottom: 1px solid var(--border); }
.lote-aba {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 0.6rem 0.9rem; font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer;
    transition: color 150ms ease-out;
}
.lote-aba:hover:not(:disabled) { color: var(--text); }
.lote-aba.ativa { color: var(--accent); border-bottom-color: var(--accent); }
.lote-aba:disabled { cursor: not-allowed; opacity: 0.6; }

.lote-entrada { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.25rem 0 0; }
.lote-entrada > .field { align-self: stretch; }
.lote-entrada .field-hint { margin: 0; }
.lote-texto { font-family: var(--mono); font-size: 0.88rem; tab-size: 24; }

.lote-controle {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between;
    padding: 1rem 1.15rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.lote-resumo { flex: 1 1 18rem; }
.lote-resumo p { margin: 0 0 0.35rem; }
.lote-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.lote-acoes .spinner { margin: 0 0 0.7rem; }
.lote-paralelo select { width: auto; }

.lote-progresso { height: 0.45rem; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin-top: 0.4rem; }
.lote-progresso > div { height: 100%; background: var(--accent); transition: width 300ms ease-out; }

.lote-tabela .tag { margin-left: 0; }
.tabela .lote-clicavel { cursor: pointer; }
.tabela .lote-selecionada td { background: var(--accent-soft); }

.lote-detalhe { display: flex; flex-direction: column; gap: 1rem; }
.lote-detalhe-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lote-detalhe-topo h2 { margin: 0; }

/* --- Área do cliente ------------------------------------------------------
   Reaproveita a casca do painel. O que é só dela: o bloco do cliente e do saldo no topo da
   lateral, o quadro de aquisição sobre a ficha e a árvore de categorias recuada por nível. */

.portal-cliente {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.portal-cliente strong { overflow-wrap: anywhere; }
.portal-saldo { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.portal-saldo.erro { color: var(--danger); font-weight: 600; }

.portal-acoes { margin: 0.75rem 0; }

.aquisicao { margin: 1.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.aquisicao h2 { margin: 0; font-size: 1.1rem; }
.aquisicao p { margin: 0; }
.aquisicao-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin: 0; }
.aquisicao-dados dt { color: var(--text-muted); font-size: 0.8rem; }
.aquisicao-dados dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }

.card-senha { max-width: 40rem; }

.arvore {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
}
.arvore li { display: flex; gap: 0.75rem; justify-content: space-between; padding: 0.3rem 0.75rem; }
.arvore li:hover { background: var(--surface-alt); }
.arvore-nivel-1 { font-weight: 600; }
.arvore-nivel-2 { padding-left: 2rem !important; }
.arvore-nivel-3 { padding-left: 3.5rem !important; }
.arvore-nivel-4 { padding-left: 5rem !important; color: var(--text-muted); }

/* Aquisição em massa: filtros por situação, andamento na lista de lotes e os candidatos de uma
   linha com mais de um produto possível, cada um com o botão de escolha. */
.lote-filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0.75rem; }
.chip.ativo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip .muted { margin-left: 0.25rem; font-variant-numeric: tabular-nums; }

.lote-andamento { min-width: 9rem; }
.lote-andamento span { font-size: 0.85rem; white-space: nowrap; }
.lote-identificacao { font-size: 0.82rem; }

.lote-candidatos { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.lote-candidatos li {
    display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between;
    padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-control);
    font-size: 0.85rem;
}
.lote-candidatos li .btn { flex: none; }