/*==============================================================================
  PAINEL DE ASSINATURAS (Super Admin)

  Telas de diagnostico: o que importa e ler rapido o estado atual, o que a
  Stripe respondeu e em que ordem as coisas aconteceram. Por isso a linha do
  tempo domina a pagina, e os identificadores tecnicos ficam recolhidos em
  "detalhes" — presentes para quem precisa, fora do caminho de quem nao precisa.
==============================================================================*/

.as-cartao {
    background: var(--w-surface);
    border-radius: var(--w-radius-lg, 14px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.as-titulo {
    margin: 0 0 1rem;
    font-size: var(--w-text-md, 1rem);
    font-weight: 700;
    color: var(--w-text-primary);
}

.as-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
}

.as-grade dt {
    font-size: var(--w-text-2xs, .75rem);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--w-text-tertiary);
}

.as-grade dd {
    margin: .2rem 0 0;
    font-size: var(--w-text-sm, .875rem);
    font-weight: 600;
    color: var(--w-text-primary);
}

/*------------------------------------------------------------------------------
  Avisos
------------------------------------------------------------------------------*/

.as-aviso {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 1.15rem 0 0;
    padding: .85rem 1rem;
    border-radius: var(--w-radius-md, 12px);
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
}

.as-aviso--info {
    background: var(--w-info-bg, #e8f1fe);
    color: var(--w-info-fg, #1d4ed8);
}

.as-aviso--erro {
    background: var(--w-danger-bg, #fdeaea);
    color: var(--w-danger-fg, #a12626);
}

/*------------------------------------------------------------------------------
  Acoes administrativas

  Ficam juntas e com rotulo escrito por extenso: sao operacoes que cobram, ou
  deixam de cobrar, dinheiro de alguem — nao e lugar para icone sozinho.
------------------------------------------------------------------------------*/

.as-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--w-border-subtle, var(--w-border));
}

/*------------------------------------------------------------------------------
  Linha do tempo
------------------------------------------------------------------------------*/

.as-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.as-timeline__item {
    position: relative;
    padding: 0 0 1.25rem 2.4rem;
}

.as-timeline__item::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--w-border);
}

.as-timeline__item:last-child::before {
    display: none;
}

.as-timeline__ponto {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    background: var(--w-surface-sunken);
    color: var(--w-text-tertiary);
}

.as-timeline__item--success .as-timeline__ponto { background: var(--w-success-bg, #e7f7ee); color: var(--w-success-fg, #14724a); }
.as-timeline__item--danger  .as-timeline__ponto { background: var(--w-danger-bg, #fdeaea); color: var(--w-danger-fg, #a12626); }
.as-timeline__item--warning .as-timeline__ponto { background: var(--w-warning-bg, #fff8e6); color: var(--w-warning-fg, #7a5b12); }
.as-timeline__item--info    .as-timeline__ponto { background: var(--w-info-bg, #e8f1fe); color: var(--w-info-fg, #1d4ed8); }

.as-timeline__topo {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
}

.as-timeline__topo strong {
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
}

.as-timeline__topo time {
    font-size: var(--w-text-2xs, .75rem);
    color: var(--w-text-tertiary);
    white-space: nowrap;
}

.as-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin: .3rem 0 0;
    font-size: var(--w-text-xs, .8125rem);
    color: var(--w-text-secondary);
}

.as-timeline__texto {
    margin: .4rem 0 0;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
    color: var(--w-text-secondary);
}

/*------------------------------------------------------------------------------
  Bloco de erro e detalhes tecnicos
------------------------------------------------------------------------------*/

.as-erro {
    margin-top: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--w-radius-md, 12px);
    background: var(--w-danger-bg, #fdeaea);
    display: grid;
    gap: .3rem;
}

.as-erro__linha {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    font-size: var(--w-text-xs, .8125rem);
}

.as-erro__linha span {
    color: var(--w-text-tertiary);
    flex: 0 0 auto;
}

.as-erro__linha strong {
    text-align: right;
    word-break: break-word;
    color: var(--w-text-primary);
}

.as-detalhes {
    margin-top: .6rem;
    font-size: var(--w-text-xs, .8125rem);
}

.as-detalhes summary {
    cursor: pointer;
    color: var(--w-text-link, var(--w-accent));
    font-weight: 600;
    padding: .3rem 0;
}

.as-detalhes > .as-erro__linha {
    padding: .15rem 0;
}

.as-json {
    margin: .5rem 0 0;
    padding: .75rem;
    border-radius: var(--w-radius-md, 12px);
    background: var(--w-surface-sunken);
    color: var(--w-text-secondary);
    font-size: var(--w-text-2xs, .75rem);
    overflow-x: auto;
    max-height: 320px;
}

.as-vazio {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm, .875rem);
}

@media (max-width: 40rem) {
    .as-acoes {
        flex-direction: column;
    }

    .as-acoes form,
    .as-acoes .lz-btn {
        width: 100%;
    }

    .as-acoes .lz-btn {
        min-height: 44px;
    }
}

/*==============================================================================
  Página de escolha do plano

  A tela onde a conta vira assinatura. Precisa ser rápida de ler e óbvia de
  usar: um seletor de período que diz o que está escolhido, cartões com peso
  visual proporcional à recomendação e um preço que muda na hora.
==============================================================================*/
.pl-topo {
    max-width: 46rem;
    margin: 0 auto var(--w-space-8, 32px);
    text-align: center;
}

.pl-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: var(--w-space-4, 16px);
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-warning, #d97706) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--w-warning, #d97706) 34%, transparent);
    color: var(--w-warning, #d97706);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
}

/* No último dia o aviso muda de cor: é a diferença entre lembrete e prazo. */
.pl-selo--urgente {
    background: color-mix(in srgb, var(--w-danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--w-danger) 36%, transparent);
    color: var(--w-danger);
}

.pl-titulo {
    margin: 0 0 var(--w-space-3, 12px);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: var(--w-weight-bold, 700);
    letter-spacing: -.03em;
    color: var(--w-text-primary);
}

.pl-sub {
    margin: 0 auto var(--w-space-6, 24px);
    max-width: 40rem;
    color: var(--w-text-secondary);
    line-height: 1.6;
}

/* ── Seletor de período ─────────────────────────────────────────────────── */
.pl-periodo {
    display: inline-flex;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid var(--w-border);
    background: var(--w-surface-sunken);
}

/* O campo continua no HTML porque o script existente lê o estado dele; some
   da tela porque quem indica a escolha são as duas metades. */
.pl-periodo__campo { position: absolute; opacity: 0; width: 0; height: 0; }

.pl-periodo__opcao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    cursor: pointer;
    transition: background var(--w-duration-fast, .12s) var(--w-ease-out, ease),
                color var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

.pl-periodo__opcao.is-ativa {
    background: var(--w-surface);
    color: var(--w-text-primary);
    box-shadow: var(--w-shadow-sm, 0 1px 3px rgb(0 0 0 / .12));
}

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

.pl-periodo__desconto {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-success, #059669) 18%, transparent);
    color: var(--w-success, #059669);
    font-size: var(--w-text-2xs, .6875rem);
    font-weight: var(--w-weight-bold, 700);
}

.pl-economia {
    margin: var(--w-space-3, 12px) 0 0;
    color: var(--w-success, #059669);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-medium, 500);
}

.pl-economia[hidden] { display: none; }

@media (max-width: 30rem) {
    .pl-periodo { width: 100%; }
    .pl-periodo__opcao { flex: 1; justify-content: center; padding: 11px 12px; }
}

/*==============================================================================
  Cartões de plano

  Três colunas iguais transferem ao cliente o trabalho de comparar. O plano
  recomendado ganha altura, borda na cor da marca e uma faixa — e os outros dois
  ficam legíveis o bastante para a escolha continuar sendo dele.
==============================================================================*/
.pl-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: var(--w-space-5, 20px);
    /* `stretch` (padrão) e não `start`: os cartões precisam ter a mesma altura
       mesmo quando um plano lista o dobro de itens do outro. */
    align-items: stretch;
    max-width: 68rem;
    margin: 0 auto;
}

.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--w-space-6, 24px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl, 18px);
    background: var(--w-surface);
    transition: transform var(--w-duration-normal, .2s) var(--w-ease-out, ease),
                box-shadow var(--w-duration-normal, .2s) var(--w-ease-out, ease),
                border-color var(--w-duration-normal, .2s) var(--w-ease-out, ease);
}

.pl-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--w-accent) 40%, transparent);
    box-shadow: 0 22px 45px -26px rgb(0 0 0 / .3);
}

/* O recomendado sobe um degrau e não se mexe no hover: ele já está destacado,
   e mais movimento só tiraria a atenção do preço. */
.pl-card--destaque {
    border-color: var(--w-accent);
    border-width: 2px;
    box-shadow: 0 26px 55px -28px color-mix(in srgb, var(--w-accent) 65%, transparent);
}

.pl-card__faixa {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--w-accent);
    color: var(--w-accent-contrast, #fff);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-bold, 700);
    letter-spacing: .04em;
    white-space: nowrap;
}

.pl-card__topo {
    margin-bottom: var(--w-space-4, 16px);
    min-height: 4.25rem;
}

.pl-card__nome {
    margin: 0 0 6px;
    font-size: var(--w-text-lg, 1.125rem);
    font-weight: var(--w-weight-bold, 700);
    letter-spacing: -.01em;
    color: var(--w-text-primary);
}

.pl-card__desc {
    margin: 0;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-secondary);
    line-height: 1.5;
    /* Duas linhas no máximo: descrição longa demais desalinharia a régua de
       preços que todo o resto do cartão segue. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Preço ──────────────────────────────────────────────────────────────── */
.pl-card__preco {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-bottom: var(--w-space-3, 12px);
}

.pl-card__moeda {
    font-size: var(--w-text-md, .9375rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-secondary);
}

/* Euro e franco se escrevem depois do número. Trocar a ordem no flex evita
   duplicar a marcação só para mudar de lado o símbolo. */
.pl-card__preco--depois .pl-card__moeda { order: 2; }
.pl-card__preco--depois .pl-card__periodo { order: 3; }

.pl-card__valor {
    font-size: clamp(2.1rem, 5vw, 2.9rem);
    font-weight: var(--w-weight-bold, 700);
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--w-text-primary);
    /* O número troca ao mudar o período: sem largura tabular, o cartão inteiro
       pula de largura a cada troca. */
    font-variant-numeric: tabular-nums;
}

.pl-card--destaque .pl-card__valor { color: var(--w-accent); }

.pl-card__periodo { font-size: var(--w-text-sm, .875rem); color: var(--w-text-secondary); }

/* Selo de desconto e total do ano na modal de troca de plano. Mesmo desenho
   dos cartoes da tela de planos, para o plano ser reconhecido de um lugar para
   o outro. */
.w-plans__off {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-success) 16%, transparent);
    color: var(--w-success);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-bold, 700);
    letter-spacing: .03em;
    white-space: nowrap;
}

.w-plans__off[hidden] { display: none; }

.w-plans__total {
    margin: -6px 0 var(--w-space-3, 12px);
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-tertiary);
}

.w-plans__total[hidden] { display: none; }
.w-plans__total s { margin-left: 4px; opacity: .8; }

/* Total do ano, abaixo do valor mensal em destaque. Quem escolhe compara o
   mensal; o total pesa na hora de pagar. */
.pl-card__total {
    margin: -6px 0 var(--w-space-3, 12px);
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-tertiary);
}

/* Desconto do plano: o preco cheio riscado e a porcentagem. Sem o numero de
   antes, "20% OFF" e so uma promessa. */
.pl-card__desconto {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 var(--w-space-4, 16px);
    font-size: var(--w-text-sm, .875rem);
}

.pl-card__desconto s { color: var(--w-text-tertiary); }

.pl-card__desconto b {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-success) 16%, transparent);
    color: var(--w-success);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-bold, 700);
    letter-spacing: .03em;
    white-space: nowrap;
}

.pl-card__nota {
    margin: 0 0 var(--w-space-5, 20px);
    padding-bottom: var(--w-space-5, 20px);
    border-bottom: 1px solid var(--w-border);
    font-size: var(--w-text-xs, .75rem);
    color: var(--w-text-tertiary);
}

/* ── O que o plano inclui ───────────────────────────────────────────────── */
.pl-card__lista {
    list-style: none;
    margin: 0 0 var(--w-space-6, 24px);
    padding: 0;
    display: grid;
    gap: var(--w-space-3, 12px);
    flex: 1;
}

.pl-card__lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.45;
    color: var(--w-text-primary);
}

.pl-card__check {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-success, #059669) 16%, transparent);
    color: var(--w-success, #059669);
}

.pl-card__check svg { width: 11px; height: 11px; }

/* ── Ação ───────────────────────────────────────────────────────────────── */
.pl-card__acao {
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 12px 18px;
    border: 1px solid color-mix(in srgb, var(--w-accent) 32%, transparent);
    border-radius: var(--w-radius-md, 10px);
    background: color-mix(in srgb, var(--w-accent) 10%, transparent);
    color: var(--w-accent);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-bold, 700);
    cursor: pointer;
    transition: background var(--w-duration-fast, .12s) var(--w-ease-out, ease),
                color var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

/* Preenche no hover: texto claro sobre fundo claro é o que fazia o botão
   sumir justamente na hora do clique. */
.pl-card__acao:hover,
.pl-card__acao:focus-visible {
    background: var(--w-accent);
    border-color: transparent;
    color: var(--w-accent-contrast, #fff);
}

.pl-card--destaque .pl-card__acao {
    background: var(--w-accent);
    border-color: transparent;
    color: var(--w-accent-contrast, #fff);
}

.pl-card--destaque .pl-card__acao:hover { filter: brightness(1.08); }

.pl-vazio {
    grid-column: 1 / -1;
    padding: var(--w-space-8, 32px);
    border: 1px dashed var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    text-align: center;
    color: var(--w-text-secondary);
}

/* Numa coluna só não há vizinho com quem alinhar: a altura fixa do cabeçalho
   vira espaço vazio, então volta a acompanhar o conteúdo. */
@media (max-width: 48rem) {
    .pl-card__topo { min-height: 0; }
}

@media (max-width: 30rem) {
    .pl-card { padding: var(--w-space-5, 20px); }
    .pl-card__valor { font-size: 2rem; }
}

/*==============================================================================
  Limitações do plano

  Quinze campos numa grade única viram uma parede de rótulos parecidos, e quem
  edita um plano erra de linha. Cada módulo vira um bloco com cabeçalho próprio,
  e a tela passa a responder "o que este plano libera de cada parte do produto".

  O agrupamento é só de apresentação: os campos continuam com os mesmos nomes,
  e o que chega ao servidor não muda.
==============================================================================*/

.pl-limites {
    display: grid;
    gap: var(--w-space-5, 20px);
    margin-top: var(--w-space-5, 20px);
}

.pl-limites__topo h3 {
    margin: 0 0 4px;
    font-size: var(--w-text-lg, 1.125rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.pl-limites__topo p {
    margin: 0;
    max-width: 70ch;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
    color: var(--w-text-secondary);
}

/* ── Bloco de um módulo ─────────────────────────────────────────────────── */

.pl-grupo {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    overflow: hidden;
}

.pl-grupo__topo {
    display: flex;
    align-items: center;
    gap: var(--w-space-3, 12px);
    padding: var(--w-space-4, 16px);
    border-bottom: 1px solid var(--w-border);
    background: var(--w-surface-sunken);
}

.pl-grupo__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--w-radius-md, 10px);
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
}

.pl-grupo__icone svg { width: 20px; height: 20px; }

/* Cada módulo com a sua cor: o olho encontra o bloco do CRM sem ler o título. */
.pl-grupo[data-grupo='crm'] .pl-grupo__icone {
    background: color-mix(in srgb, var(--w-info, #2563eb) 14%, transparent);
    color: var(--w-info, #2563eb);
}

.pl-grupo[data-grupo='whatsapp'] .pl-grupo__icone {
    background: color-mix(in srgb, var(--w-success, #059669) 16%, transparent);
    color: var(--w-success, #059669);
}

.pl-grupo[data-grupo='financeiro'] .pl-grupo__icone {
    background: color-mix(in srgb, var(--w-warning, #b45309) 16%, transparent);
    color: var(--w-warning, #b45309);
}

.pl-grupo__texto { min-width: 0; flex: 1 1 auto; }

.pl-grupo__texto h4 {
    margin: 0;
    font-size: var(--w-text-md, .9375rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.pl-grupo__texto p {
    margin: 2px 0 0;
    font-size: var(--w-text-xs, .75rem);
    color: var(--w-text-tertiary);
}

.pl-grupo__contagem {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--w-surface-hover, rgb(0 0 0 / .05));
    font-size: var(--w-text-xs, .75rem);
    color: var(--w-text-secondary);
    white-space: nowrap;
}

/* ── Os campos ──────────────────────────────────────────────────────────── */

.pl-limites__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--w-space-4, 16px);
    padding: var(--w-space-4, 16px);
}

.pl-limite { min-width: 0; }

/* O liga/desliga do módulo governa os campos abaixo dele: ocupa a linha toda
   para não ser confundido com mais uma cota entre as outras. */
.pl-limite--chave {
    grid-column: 1 / -1;
    padding: var(--w-space-3, 12px);
    border: 1px solid color-mix(in srgb, var(--w-accent) 30%, transparent);
    border-radius: var(--w-radius-md, 10px);
    background: color-mix(in srgb, var(--w-accent) 6%, transparent);
}

.pl-limite__rotulo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.pl-limite__periodo {
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-normal);
    color: var(--w-text-tertiary);
}

.pl-limite__linha {
    display: flex;
    align-items: center;
    gap: var(--w-space-3, 12px);
    flex-wrap: wrap;
}

.pl-limite__campo {
    display: flex;
    align-items: center;
    flex: 1 1 120px;
    min-width: 0;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
    transition: border-color var(--w-duration-fast, .12s) var(--w-ease-out, ease),
                box-shadow var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

.pl-limite__campo:focus-within {
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 22%, transparent);
}

/* "Ilimitado" marcado desabilita o campo — o cinza avisa antes do clique. */
.pl-limite__campo.is-desligado {
    background: var(--w-surface-hover, rgb(0 0 0 / .04));
    border-style: dashed;
}

.pl-limite__prefixo {
    padding-inline: 10px 0;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-tertiary);
}

.pl-limite__campo input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--w-text-primary);
    font-size: var(--w-text-sm, .875rem);
    font-variant-numeric: tabular-nums;
}

.pl-limite__campo input:focus { outline: none; }

.pl-limite__campo input:disabled {
    color: var(--w-text-tertiary);
    cursor: not-allowed;
}

.pl-limite__ilimitado,
.pl-limite__modulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-secondary);
    cursor: pointer;
    user-select: none;
}

.pl-limite__ilimitado input,
.pl-limite__modulo input {
    width: 18px;
    height: 18px;
    accent-color: var(--w-accent);
    cursor: pointer;
}

.pl-limite__modulo {
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.pl-limite__trilho { display: none; }

.pl-limite__ajuda {
    display: block;
    margin-top: 6px;
    font-size: var(--w-text-xs, .75rem);
    line-height: 1.45;
    color: var(--w-text-tertiary);
}

/* ── Telas estreitas ────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .pl-limites__grade {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--w-space-3, 12px);
    }

    .pl-grupo__topo {
        padding: var(--w-space-3, 12px);
    }

    /* A contagem é enfeite: no celular ela roubaria a largura do título. */
    .pl-grupo__contagem { display: none; }

    .pl-limite__linha { gap: 8px; }

    /* Alvos de toque confortáveis. */
    .pl-limite__campo input { min-height: 44px; }

    .pl-limite__ilimitado,
    .pl-limite__modulo { min-height: 44px; }
}


/*==============================================================================
  PRECOS EM OUTRAS MOEDAS

  Uma linha por moeda, como uma tabela — e nao cartoes: sao quatro campos curtos
  por moeda, e alinhar as colunas e o que deixa comparar valores de relance.
==============================================================================*/

.pl-precos {
    display: grid;
    gap: var(--w-space-4, 16px);
    margin-top: var(--w-space-5, 20px);
    padding-top: var(--w-space-5, 20px);
    border-top: 1px solid var(--w-border-subtle, var(--w-border));
}

.pl-precos__titulo {
    margin: 0 0 4px;
    font-size: var(--w-text-lg, 1.125rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.pl-precos__texto {
    margin: 0;
    max-width: 70ch;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
    color: var(--w-text-secondary);
}

/* Rola dentro de si em tela estreita: a pagina inteira nunca rola de lado. */
.pl-precos__tabela {
    overflow-x: auto;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 12px);
    background: var(--w-surface);
}

.pl-precos__linha {
    display: grid;
    grid-template-columns: 92px 1fr 1fr 1.4fr 1.4fr;
    gap: var(--w-space-3, 12px);
    align-items: center;
    min-width: 780px;
    padding: var(--w-space-3, 12px) var(--w-space-4, 16px);
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
}

.pl-precos__linha:last-child { border-bottom: 0; }

.pl-precos__linha--cab {
    background: var(--w-surface-sunken);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-semibold, 600);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--w-text-secondary);
}

.pl-precos__moeda {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pl-precos__moeda strong {
    font-size: var(--w-text-md, .9375rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.pl-precos__moeda small { color: var(--w-text-secondary); }

@media (max-width: 767.98px) {
    .pl-precos__linha input { min-height: 44px; }
}