/*
    CONTROLE DE CONTEÚDO V3
    Tudo escopado em .cc3 — a tela V2 (/root/controlev2) continua com o CSS dela.

    Regra que segui: layout, espaçamento, cor, texto e chip saem das classes
    utilitárias (spacing.css / flex.css / chips.css / style.css) direto no HTML.
    Só desceu para cá o que NENHUMA utilitária cobre — cada bloco abaixo diz qual é
    o motivo. Cor nunca é hex solto: vem de var.css ou de uma custom property local
    declarada aqui com justificativa.
*/

.cc3,
.cc3-dialog {
    /* ---- tokens locais ---- */
    --cc3-borda: var(--grey-3);
    --cc3-fundo: var(--background-droper);
    --cc3-accent: var(--secondary-color);
    --cc3-accent-soft: var(--secondary-color-transparent);

    /* Os três tons abaixo não existem em var.css: são as versões ESCURAS de
       --warning / --success / --pagando. Nos tamanhos de 10-12px desta tela o
       amarelo e o verde claros de var.css não passam no contraste. */
    --cc3-aguardando-texto: #92400E;
    --cc3-aprovado-texto: #15803D;
    --cc3-alerta-texto: #C2410C;

    /* faixa de fundo das barras/áreas neutras — mais clara que --grey-2 e mais
       escura que --white, não há token equivalente */
    --cc3-faixa: #FAFAF9;

    --cc3-thumb: 54px;
}

/* Só a PÁGINA recebe fundo/altura/respiro. O md-dialog usa os mesmos tokens mas
   não pode herdar `min-height: 100vh` — vira um retângulo vazio gigante. */
.cc3 {
    display: block;
    background: var(--cc3-fundo);
    min-height: 100vh;
    padding: 16px 12px 64px;
}

/* O painel não tem box-sizing global: largura/altura fixa soma o padding e
   estoura o grid do card. Reset escopado só nesta tela. */
.cc3,
.cc3 *,
.cc3 *::before,
.cc3 *::after,
.cc3-dialog,
.cc3-dialog *,
.cc3-dialog *::before,
.cc3-dialog *::after {
    box-sizing: border-box;
}

/* O painel não tem utilitário de cursor (o `cursor-pointer` usado na V2 nunca
   existiu no CSS). Escopado aqui em vez de crescer o spacing.css por uma linha. */
.cc3 .cc3-clicavel,
.cc3-dialog .cc3-clicavel {
    cursor: pointer;
}

/* Números que se comparam entre linhas/colunas (contadores, %, totais, preço).
   Não existe utilitário de font-variant-numeric no painel. */
.cc3-num {
    font-variant-numeric: tabular-nums;
}

/* O Material define `md-icon { margin: auto }`. Dentro de um container flex isso
   vira espaçador elástico e joga o rótulo do botão para a borda oposta do ícone. */
.cc3 md-button md-icon,
.cc3-dialog md-button md-icon,
.cc3 button md-icon {
    margin: 0;
}

/* Cartão-base da tela: hairline em vez de md-whiteframe (o design é flat). */
.cc3-card {
    background: var(--white);
    border: 1px solid var(--cc3-borda);
    border-radius: 12px;
}

/* =========================================================
   HEADER
   ========================================================= */

.cc3-header h1,
.cc3-header p {
    margin: 0;
}

.cc3-header h1 {
    letter-spacing: -0.02em;
}

/* Botão circular de voltar — o md-icon-button é quadrado e sem borda. */
.cc3-voltar.md-button.md-icon-button {
    border: 1px solid var(--cc3-borda);
    border-radius: 50%;
    background: var(--white);
    margin: 0;
}

/* Segmentado Fila/Lista: não existe componente de toggle no painel e o
   md-button-toggle não vem no Material 1.1.0. */
.cc3-seg {
    background: var(--grey-2);
    border-radius: 10px;
    padding: 3px;
}

.cc3-seg .md-button {
    margin: 0;
    text-transform: none;
    min-width: 74px;
    height: 34px;
    line-height: 34px;
    border-radius: 8px;
    color: var(--black-4);
}

.cc3-seg .md-button.cc3-seg--ativo {
    background: var(--white);
    color: var(--black-1);
    box-shadow: var(--box-shadow);
}

/* Botões de contorno do header (Legit check / Atalhos) — o md-button padrão é
   flat e sem borda. */
.cc3-btn-linha.md-button {
    margin: 0;
    height: 40px;
    border: 1px solid var(--cc3-borda);
    border-radius: 10px;
    background: var(--white);
    text-transform: none;
}

/* caixa compacta: cabeçalho do resumo de legit check */
.cc3-btn-linha.md-button.cc3-btn-linha--sm {
    height: 30px;
    min-height: 30px;
    line-height: 28px;
    padding: 0 8px;
    border-radius: 8px;
}

.cc3-btn-linha.md-button.cc3-btn-linha--sm.md-icon-button {
    width: 30px;
    min-width: 30px;
    padding: 0;
}

.cc3-btn-linha.md-button.cc3-btn-linha--ativo {
    border-color: var(--cc3-accent);
    background: var(--cc3-accent-soft);
    color: var(--cc3-accent);
}

/* =========================================================
   BARRA DE FILTROS
   ========================================================= */

/* Campo de busca com ícone dentro: o md-input-container do Material desenha
   underline e reserva altura de floating label, que não cabe na barra. */
/* A busca é o campo que mais importa da barra, e era o único elástico: com as
   pílulas grandes ela encolhia até sobrar só a lupa. Agora tem piso de 240px —
   o que não couber vai para a linha de baixo (a barra é layout_wrap). */
.cc3-busca {
    flex: 1 1 240px;
    min-width: 240px;
    height: 36px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--cc3-borda);
    border-radius: 8px;
    background: var(--white);
}

.cc3-busca md-icon {
    color: var(--black-5);
    min-width: 18px;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
}

/* input em flex tem min-width:auto e não encolhe abaixo do tamanho intrínseco —
   sem o min-width:0 a barra estoura no md. */
.cc3-busca input {
    flex: 1;
    min-width: 0;
    height: 34px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
}

.cc3-busca .md-button.md-icon-button {
    margin: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    line-height: 28px;
}

/* Pílulas de filtro (status e marcadores). O ck-chip é um rótulo, não um
   controle: não tem estado de foco/ativo nem altura de toque. */
.cc3-pill {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--cc3-borda);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    white-space: nowrap;
}

.cc3-pill--ativa {
    border-color: var(--cc3-accent);
    background: var(--cc3-accent-soft);
    color: var(--cc3-accent);
}

.cc3-pill md-checkbox {
    margin: 0;
}

.cc3-pill md-checkbox .md-label {
    margin-left: 24px;
    /* o Material gera o .md-label sozinho: não dá para pôr classe utilitária nele.
       Valores espelham .text-size-12px. */
    font-size: 12px;
    line-height: 20px;
}

/* o quadrado do Material é 20px e domina a altura da pílula compacta */
.cc3-pill md-checkbox .md-container {
    width: 16px;
    height: 16px;
}

.cc3-pill md-checkbox .md-icon {
    width: 16px;
    height: 16px;
}

.cc3-pill md-checkbox.md-checked .md-icon:after {
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
}

/* bolinha de cor do status — 8px é menor que qualquer ícone/chip disponível */
.cc3-bolinha {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.cc3-bolinha--a  { background: var(--success-color); }
.cc3-bolinha--aa { background: var(--warning-color); }
.cc3-bolinha--af { background: var(--danger-color); }
.cc3-bolinha--i  { background: var(--grey-4); }
.cc3-bolinha--e  { background: var(--black-3); }

/* md-select da ordenação dentro da barra: sem underline e com a mesma caixa
   das pílulas. */
.cc3-ordenar md-select {
    margin: 0;
}

.cc3-ordenar md-select .md-select-value {
    border-bottom: none;
    padding: 0;
    min-height: 34px;
    /* gerado pelo Material, não aceita classe utilitária — espelha .text-size-12px */
    font-size: 12px;
}

/* =========================================================
   LEGIT CHECK
   ========================================================= */

.cc3-legit__col {
    border-right: 1px solid var(--cc3-borda);
}

.cc3-legit__col:last-child {
    border-right: none;
}

.cc3-legit__data {
    border: 1px solid var(--cc3-borda);
    border-radius: 8px;
    padding: 2px 8px;
    cursor: pointer;
    background: var(--white);
}

.cc3-legit__data--ativa {
    border-color: var(--cc3-accent);
    background: var(--cc3-accent-soft);
    color: var(--cc3-accent);
}

/* tamanho e peso vêm das utilitárias (.text-size-22px .text-bold); aqui fica só
   o aperto ótico do número grande, que não tem utilitário */
.cc3-legit__pct {
    letter-spacing: -0.02em;
}

.cc3-legit__pct--alerta {
    color: var(--cc3-alerta-texto);
}

/* md-progress-linear pinta a barra pelo tema (indigo); aqui a cor é semântica */
.cc3-barra {
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
}

.cc3-barra .md-container,
.cc3-barra.md-progress-linear .md-container {
    height: 4px;
    border-radius: 999px;
}

.cc3-barra .md-bar1,
.cc3-barra .md-dashed:before {
    display: none;
}

.cc3-barra .md-container {
    background-color: var(--grey-3);
}

.cc3-barra--ok      .md-bar2 { background-color: var(--success-color); }
.cc3-barra--neutra  .md-bar2 { background-color: var(--cc3-accent); }
.cc3-barra--alerta  .md-bar2 { background-color: var(--cc3-alerta-texto); }

/* grade do mês no dialog: 7 colunas exatas — flex_* do painel não tem 1/7 */
.cc3-mes-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 959px) {
    .cc3-mes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   BARRA DE NAVEGAÇÃO DA FILA (única sticky da tela)
   ========================================================= */

.cc3-navbar {
    position: sticky;
    top: 10px;
    z-index: 20;
}

/* dica de tecla — sem componente equivalente no painel */
.cc3-tecla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--cc3-borda);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--cc3-faixa);
    font-size: 11px;
    font-weight: 700;
    color: var(--black-3);
}

/* =========================================================
   CARD DA FILA
   ========================================================= */

/* Card em foco: é ele que a barra de cima conta e que A/F/X e as setas obedecem.
   A moldura vai no box-shadow, não na borda, para não somar 1px no grid de altura
   fixa logo abaixo. */
.cc3-fila-card--foco {
    border-color: var(--cc3-accent);
    box-shadow: 0 0 0 2px var(--cc3-accent-soft);
}

.cc3-fila-card {
    /* altura fixa e NUNCA min-height: com min-height a ficha estica o card e a
       foto sai do esquadro */
    height: 85dvh;
    max-height: 85dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);   /* fotos em cima, ficha embaixo */
    overflow: hidden;
}

/* Duas colunas valem do tablet para cima — o empilhado é só o mobile. Não existe
   estado intermediário: ou é fotos | ficha, ou é fotos em cima da ficha. */
@media (min-width: 600px) {
    .cc3-fila-card {
        grid-template-columns: 1fr 1fr;                   /* fotos | ficha */
        grid-template-rows: minmax(0, 1fr);
    }
}

/* sem min-width/min-height 0 o item de grid se recusa a encolher */
.cc3-fila-card__media,
.cc3-fila-card__ficha {
    min-height: 0;
    min-width: 0;
}

.cc3-fila-card__media {
    overflow: hidden;
    border-right: 1px solid var(--cc3-borda);
    background: var(--cc3-faixa);
}

@media (max-width: 599px) {
    .cc3-fila-card__media {
        border-right: none;
        border-bottom: 1px solid var(--cc3-borda);
    }
}

.cc3-fila-card__ficha {
    overflow-y: auto;
}

/* cabeçalho e tira de miniaturas nunca encolhem; a foto absorve a sobra */
.cc3-fila-card__header,
.cc3-fila-card__thumbs {
    flex: 0 0 auto;
}

.cc3-fila-card__foto {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* A foto ocupa a caixa inteira com `contain`: é o que garante que retrato alto não
   estoure o card. O alvo do jquery.zoom é ESTE container (source === target, o
   caminho simples do plugin) — o preço é que a lupa também percorre a faixa vazia
   das laterais, exatamente como na V2. Encostar a caixa na imagem exigiria altura
   definida no pai, e aí a faixa vazia voltaria de qualquer jeito. */
.cc3-fila-card__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* a lupa é injetada como filha do container; fundo branco evita transparência */
.cc3-fila-card__foto .zoomImg {
    background-color: var(--white);
    cursor: crosshair;
}

/* etiquetas sobre a foto */
.cc3-foto-tag {
    position: absolute;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .62);   /* véu sobre foto: precisa de alpha, não há token */
    color: var(--white);
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}

.cc3-foto-tag--br { bottom: 10px; right: 10px; }

.cc3-thumb {
    position: relative;   /* ancora o gatilho de excluir da miniatura ativa */
    width: var(--cc3-thumb);
    height: var(--cc3-thumb);
    min-width: var(--cc3-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    background-color: var(--grey-2);
    cursor: pointer;
}

.cc3-thumb--ativa {
    border-color: var(--cc3-accent);
    z-index: 1;   /* mantem o gatilho acima das miniaturas vizinhas */
}

/* Excluir foto: so aparece na miniatura ativa (que ja tem o feedback da borda) e
   flutua sobre o canto dela, entao a acao nao ocupa linha nem largura na tira. */
.cc3-thumb__excluir {
    position: absolute;
    z-index: 3;   /* fica acima da miniatura vizinha, que o gatilho invade em 2px */
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--danger-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);   /* sombra sobre foto: precisa de alpha */
    cursor: pointer;
}

.cc3-thumb__excluir md-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    line-height: 14px;
    color: var(--danger-color);
}

.cc3-thumb__excluir--carregando {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 1279px) {
    .cc3,
    .cc3-dialog { --cc3-thumb: 42px; }
}

/* =========================================================
   FICHA
   ========================================================= */

.cc3-ficha h2 {
    margin: 0;
    letter-spacing: -0.02em;
}

/* rótulo de campo (PREÇO / CONDIÇÃO / DESCRIÇÃO): uppercase 10px com tracking —
   letter-spacing não tem utilitário */
.cc3-rotulo {
    letter-spacing: .08em;
}

.cc3-caixa {
    border: 1px solid var(--cc3-borda);
    border-radius: 10px;
    background: var(--cc3-faixa);
}

.cc3-descricao {
    white-space: pre-line;
    line-height: 12px !important;
    /* a caixa rola por dentro — descrição longa não empurra as ações para fora da tela */
    max-height: 120px;
    overflow-y: auto;
    font-size: 10px !important;
}

/* avatar de fallback quando a URL do vendedor vem inválida ("https://") */
.cc3-avatar-vazio {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--grey-2);
    color: var(--black-4);
    font-weight: 700;
    font-size: 13px;
}

.cc3-select-condicao md-select {
    margin: 0;
    width: 100%;
}

.cc3-select-condicao md-select .md-select-value {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--cc3-borda);
    border-radius: 8px;
}

/* md-autocomplete traz altura de floating label e underline próprios */
.cc3-drop md-autocomplete,
.cc3-drop md-autocomplete-wrap {
    height: 28px;
    min-height: 28px;
    box-shadow: none;
    background: transparent;
}

.cc3-drop md-autocomplete input {
    height: 28px;
    border: none;
    background: transparent;
    font-size: 12px;
}

/* botão de ícone enxuto: o md-icon-button do Material mede 40×40 e sozinho definia
   a altura da caixa do drop */
.cc3-icone-xs.md-button.md-icon-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 0;
}

/* Banner de status: o ck-chip é uma pílula inline; aqui é faixa de largura total. */
.cc3-banner {
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cc3-banner--a  { background: var(--success-color-transparent); color: var(--cc3-aprovado-texto); }
.cc3-banner--aa { background: var(--warning-color-transparent); color: var(--cc3-aguardando-texto); }
.cc3-banner--af { background: var(--danger-color-transparent);  color: var(--danger-color); }
.cc3-banner--i  { background: var(--grey-2);                    color: var(--black-3); }
.cc3-banner--e  { background: var(--black-2);                   color: var(--white); }

/* texto de status compacto (linha da tabela e header do card) */
.cc3-status {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cc3-status--a  { color: var(--cc3-aprovado-texto); }
.cc3-status--aa { color: var(--cc3-aguardando-texto); }
.cc3-status--af { color: var(--danger-color); }
.cc3-status--i  { color: var(--black-4); }
.cc3-status--e  { color: var(--black-3); }

/* Botões de ação principais */
.cc3-acao.md-button {
    margin: 0;
    height: 46px;
    border-radius: 10px;
    text-transform: none;
    font-size: 14px;
}

.cc3-acao--secundaria.md-button {
    border: 1px solid var(--cc3-borda);
    background: var(--white);
}

.cc3-acao--menor.md-button {
    height: 32px;
    line-height: 32px;
    min-width: 0;
    padding: 0 10px;
    font-size: 12px;
}

/* Ações destrutivas: o gatilho fica na MESMA linha das ações secundárias (é uma
   ação de anúncio como as outras), mas em vermelho para não se confundir com elas.
   O painel só existe quando aberto. */
.cc3-destrutivo__gatilho.md-button {
    border: 1px solid var(--danger-color-transparent);
    background: var(--danger-color-transparent);
    color: var(--danger-color);
}

.cc3-destrutivo__gatilho--aberto.md-button {
    border-color: var(--danger-color);
}

.cc3-destrutivo {
    border: 1px solid var(--danger-color-transparent);
    border-radius: 10px;
    background: var(--danger-color-transparent);
}

.cc3-destrutivo .md-button {
    margin: 0;
    text-transform: none;
    color: var(--danger-color);
}

/* Forçar COMPRA PRO: fica na linha das ações secundárias, no espaço de um botão.
   Sem estado = contorno neutro; ligado = preenchido para se ler de longe. */
.cc3-compra-pro.md-button {
    border: 1px solid var(--cc3-borda);
    background: var(--white);
}

.cc3-compra-pro.md-button md-icon {
    color: var(--black-4);
}

.cc3-compra-pro--ativo.md-button {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
}

.cc3-compra-pro--ativo.md-button md-icon {
    color: var(--white);
}

/* =========================================================
   MODO LISTA
   ========================================================= */

.cc3-tabela__linha {
    display: grid;
    /* Produto usa minmax(150px, 1fr): com minmax(0,1fr) a coluna some quando o
       nome é curto e as outras roubam o espaço. */
    grid-template-columns: 34px 104px minmax(150px, 1fr) 92px 124px minmax(110px, 160px) 172px 56px 40px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--cc3-borda);
    cursor: pointer;
}

.cc3-tabela__linha:first-child {
    border-top: none;
}

.cc3-tabela__linha--cabecalho {
    cursor: default;
    background: var(--cc3-faixa);
}

.cc3-tabela__linha--ativa {
    background: var(--cc3-accent-soft);
}

.cc3-tabela__linha:hover:not(.cc3-tabela__linha--cabecalho) {
    background: var(--cc3-faixa);
}

/* toda célula de texto que trunca precisa de min-width:0 dentro do grid */
.cc3-tabela__linha > * {
    min-width: 0;
}

.cc3-tabela__thumb {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--grey-2);
}

/* A linha tem 9 células fixas. Toda media query que estreita o grid PRECISA
   esconder exatamente as células que sobraram — grid-template-columns menor com
   9 filhos joga o resto para linhas implícitas (era o layout quebrado abaixo de
   1280). Índices: 1 check · 2 anúncio · 3 produto · 4 preço · 5 condição ·
   6 vendedor · 7 status · 8 fotos · 9 chevron. */
@media (max-width: 1279px) {
    .cc3-tabela__linha {
        grid-template-columns: 34px 96px minmax(150px, 1fr) 92px minmax(96px, 150px) 172px 40px;
    }

    /* condição e fotos saem primeiro: é o que o dialog mostra de imediato */
    .cc3-tabela__linha > *:nth-child(5),
    .cc3-tabela__linha > *:nth-child(8) {
        display: none;
    }
}

@media (max-width: 959px) {
    .cc3-tabela__linha {
        grid-template-columns: 34px 88px minmax(140px, 1fr) 172px 40px;
    }

    .cc3-tabela__linha > *:nth-child(4),
    .cc3-tabela__linha > *:nth-child(6) {
        display: none;
    }
}

@media (max-width: 599px) {
    .cc3-tabela__linha {
        grid-template-columns: 30px 76px minmax(0, 1fr) 16px 36px;
        gap: 8px;
        padding: 10px 8px;
    }

    /* status vira só a bolinha — o rótulo não cabe */
    .cc3-tabela__linha > *:nth-child(7) > *:not(.cc3-bolinha) {
        display: none;
    }

    /* no cabeçalho não há bolinha para sobrar: esconde o texto sem tirar a coluna */
    .cc3-tabela__linha--cabecalho > *:nth-child(7) {
        visibility: hidden;
    }
}

/* =========================================================
   BARRA DE LOTE
   ========================================================= */

.cc3-lote {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 60;
    width: min(720px, calc(100vw - 32px));
    background: var(--black-1);
    color: var(--white);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);   /* sombra flutuante: --box-shadow é rasa demais */
}

.cc3-lote .md-button {
    margin: 0;
    color: var(--white);
    text-transform: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    height: 36px;
}

.cc3-lote .cc3-lote__primaria.md-button {
    background: var(--cc3-accent);
    border-color: var(--cc3-accent);
}

.cc3-lote md-progress-linear {
    width: 100%;
}

/* =========================================================
   DIALOGS
   ========================================================= */

.cc3-dialog {
    border-radius: 14px;
    max-width: 96vw;
}

.cc3-dialog md-dialog-content {
    padding: 18px 22px;
}

/* O md-dialog é flex-column e o Material dá `order: 1` ao md-dialog-content e
   `order: 2` ao md-dialog-actions. Sem declarar a ordem, o header (order padrão 0)
   só fica no topo por acidente — aqui fica explícito. */
.cc3-dialog__header {
    order: 0;
    flex: none;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cc3-borda);
}

.cc3-dialog__footer {
    order: 2;
    flex: none;
    padding: 14px 22px;
    border-top: 1px solid var(--cc3-borda);
    background: var(--cc3-faixa);
}

.cc3-dialog__footer .md-button {
    margin: 0;
    text-transform: none;
    border-radius: 8px;
    height: 42px;
}

.cc3-dialog__footer .md-button.md-accent.md-raised {
    min-width: 168px;
}

/* Anúncio do modo lista: o dialog é só a moldura do cc-fila-card, então ele quem
   fixa a altura e o card passa a preencher 100% (na fila o card mede 90dvh
   sozinho). Sem overflow aqui: quem rola é a ficha, dentro do card. */
.cc3-dialog--anuncio {
    width: min(1360px, 96vw);
    height: min(92dvh, 960px);
    max-height: 92dvh;
}

.cc3-dialog--anuncio .cc3-dialog__anuncio {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
}

.cc3-dialog--anuncio .cc3-fila-card {
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
}

/* fullscreen (<= sm) — o md-dialog-fullscreen do Material zera o raio e ocupa tudo */
.cc3-dialog--anuncio.md-dialog-fullscreen {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

/* grade de 2 colunas das frases rápidas */
.cc3-frases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 599px) {
    .cc3-frases {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cc3-frases md-checkbox {
    margin: 0;
    width: 100%;
    border: 1px solid var(--cc3-borda);
    border-radius: 10px;
    padding: 12px 12px 12px 44px;
}

.cc3-frases md-checkbox .md-container {
    left: 14px;
}

.cc3-frases md-checkbox.md-checked {
    border-color: var(--cc3-accent);
    background: var(--cc3-accent-soft);
}

.cc3-textarea {
    width: 100%;
    min-height: 150px;
    border: 1px solid var(--cc3-borda);
    border-radius: 10px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

/* grade de tamanhos do dialog de troca */
.cc3-tamanhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.cc3-tamanho {
    border: 1px solid var(--cc3-borda);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* Dentro da grade o botão cresce com a legenda (idioma/graduadora de Trading Cards,
   condição que o tamanho impõe). Fora dela — o botão da ficha — a altura é do
   próprio chamador. */
.cc3-tamanhos .cc3-tamanho {
    min-height: 44px;
    padding: 6px 8px;
}

.cc3-tamanho--atual {
    border-color: var(--black-4);
    background: var(--grey-2);
}

.cc3-tamanho--escolhido {
    border-color: var(--cc3-accent);
    background: var(--cc3-accent-soft);
    color: var(--cc3-accent);
}

.cc3-tamanho--usado {
    opacity: .55;
    cursor: default;
}