/* ==========================================================================
   Design system, etapa 2: .btn, .chip e .callout (2026-10-05)
   Componentes únicos sobre os tokens de :root. Os nomes antigos (.btn-primary,
   .btn-secondary, .oc-chip*, .email-block…) continuam valendo como alias por um
   ciclo; telas novas usam só os nomes daqui.
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.btn--primary { background: var(--red); color: #fff; border-color: transparent; }
.btn--secondary { background: var(--paper); color: var(--navy); border-color: var(--border); }
.btn--secondary:hover { background: var(--cream); }
.btn--danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn--small { padding: 0.3rem 0.7rem; font-size: var(--fs-sm); }
.btn--block { display: block; width: 100%; }
.btn:hover { opacity: 0.9; }
.btn--secondary:hover { opacity: 1; }
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
    background: #C9C5B8;
    color: #5c5a52;
    border-color: transparent;
    cursor: not-allowed;
    opacity: 1;
}
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background: var(--cream);
    color: var(--ink);
    font-size: var(--fs-sm);
}
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--danger { background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.chip--info { background: var(--info-bg); color: var(--info); }
/* alias dos chips antigos */
.oc-chip--returning, .oc-chip--info { background: var(--info-bg); color: var(--info); }
.oc-chip--new, .oc-chip--ok { background: var(--ok-bg); color: var(--ok); }
.oc-chip--wait { background: var(--warn-bg); color: var(--warn); }
.oc-chip--late { background: var(--danger-bg); color: var(--danger); }

.callout {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--cream);
    color: var(--ink);
    font-size: var(--fs-md);
}
.callout--ok, .messages .success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.callout--warn, .messages .warning { background: var(--warn-bg); border-color: var(--gold-dark); color: var(--warn); }
.callout--info, .messages .info, .messages .debug { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.callout--danger, .messages .error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
/* alias dos avisos antigos (só a cor; o layout de cada um não muda) */
.rental-pickup-notice { background: var(--info-bg); color: var(--ink); border-left-color: var(--info); }
.rental-attention { background: var(--warn-bg); }
.rental-blocked-warning, .rental-late-box { background: var(--danger-bg); }

/* Design system, etapa 3: .choice (opção selecionável) e .data-table (tabela de dados).
   Os nomes antigos (.payment-option, .expansion-option, <table> sem classe) seguem como alias. */
.choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
    cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--navy); background: var(--cream); }
.choice:has(input:disabled) { opacity: 0.65; cursor: not-allowed; }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice input { flex-shrink: 0; margin: 0; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.data-table th,
.data-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    text-align: left;
}
.data-table th { background: var(--navy); color: white; font-size: var(--fs-sm); }

/* Preço Pix x cartão (templates/_price_pair.html): o Pix é o principal; o cartão
   à vista é uma linha secundária menor, sem riscado e sem "% OFF". A economia do
   Pix aparece uma só vez, no resumo do pedido (.summary-saving). */
.price-pair { text-align: right; }
.price-pair-main {
    color: var(--navy-dark);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.15;
}
.price-pair-method { color: var(--text-muted); font-size: var(--fs-md); }
.price-pair-alt,
.price-pair-each { color: var(--text-muted); font-size: var(--fs-sm); }
.price-pair-each { display: block; }
.summary-grand-values .price-pair-alt { font-size: var(--fs-sm); }

/* Contagem parcial somada na conferência de componentes (quantidade grande): tudo numa linha, ao lado do esperado. */
.count-adder { display: inline-flex; align-items: center; gap: var(--space-1); }
.count-adder input { width: 6rem; }
.count-adder .btn { min-width: 2.25rem; padding-left: var(--space-1); padding-right: var(--space-1); }
.count-adder .count-running:empty { display: none; }
.count-adder .count-running { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.components-count-table .count-field input[name^="ret_"],
.components-count-table input[name^="retdmg_"] { width: 6.5rem; }

/* Fileiras de destaque com "Ver mais" (sem rolagem lateral): do 5º cartão em diante só aparece depois do clique. */
[data-collapsed] > .product-card:nth-child(n+5):not(.is-shown) { display: none; }
.is-single [data-showcase-grid] { grid-template-columns: minmax(0, 28rem); }
.is-single [data-showcase-grid] > .product-card:not(.is-current) { display: none; }
.showcase-row.is-limited [data-showcase-grid] > .product-card:nth-child(n+5) { display: none; }
.showcase-pager [hidden] { display: none; }
.showcase-pager { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.showcase-pager-count { font-size: var(--fs-sm); color: var(--text-muted); min-width: 4.5rem; text-align: center; }
.showcase-more-wrap { text-align: center; margin: var(--space-3) 0 0; }

/* Esqueleto de carregamento da rolagem infinita: cartão cinza do tamanho do cartão real, no lugar do que ainda chega. */
.skeleton-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 18rem; }
.skeleton-card .sk-photo, .skeleton-card .sk-line { background: var(--border); border-radius: var(--radius-sm); }
.skeleton-card .sk-photo { aspect-ratio: 1 / 1; width: 70%; margin: 0 auto; }
.skeleton-card .sk-line { height: 0.9rem; width: 80%; }
.skeleton-card .sk-line--short { width: 45%; }
@media (prefers-reduced-motion: no-preference) {
    .skeleton-card .sk-photo, .skeleton-card .sk-line { animation: sk-pulse 1.2s ease-in-out infinite; }
}
@keyframes sk-pulse { 50% { opacity: 0.45; } }
@media (max-width: 720px) {
    .skeleton-card { flex-direction: row; align-items: center; min-height: 0; }
    .skeleton-card .sk-photo { width: 6.5rem; margin: 0; flex-shrink: 0; }
    .skeleton-card .sk-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
}

/* Vistos recentemente: faixa compacta (miniatura + nome + preço), sem rolagem lateral. */
.recent-views { margin: var(--space-4) 0; }
.recent-views h2 { font-size: var(--fs-md); color: var(--text-muted); font-weight: 600; margin: 0 0 var(--space-2); }
.recent-views ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-2); }
.recent-views a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); text-decoration: none; color: inherit; min-height: 3.25rem; }
.recent-views img, .recent-views .recent-noimg { width: 2.75rem; height: 2.75rem; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-xs); background: #F5F2E9; }
.recent-views .recent-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); line-height: 1.25; }
.recent-views .recent-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.recent-views .recent-price { color: var(--text-muted); font-size: var(--fs-xs); }

/* Expansões na página do jogo: miniatura, e o quadro "Acompanha" da venda. */
.expansion-option-photo { width: 3.25rem; height: 3.25rem; object-fit: contain; flex-shrink: 0; border-radius: var(--radius-xs); background: #F5F2E9; }
.included-box { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); }
.included-box h3 { font-size: var(--fs-base); margin: 0 0 var(--space-2); }
.included-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.included-box li { display: flex; align-items: center; gap: var(--space-2); }
.included-box img { width: 3rem; height: 3rem; object-fit: contain; border-radius: var(--radius-xs); background: #F5F2E9; }

/* Banner de cookies (fixo no rodapé até o clique em "Sim, aceito"). */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); padding-right: 5.5rem;
    background: var(--navy); color: #fff; font-size: var(--fs-md);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
.cookie-banner p { margin: 0; flex: 1 1 18rem; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner form { margin: 0; }
body.has-cookie-banner { padding-bottom: 7rem; }
body.has-cookie-banner .whatsapp-float { z-index: 950; }

/* Tela de visitas (equipe) */
.visits-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.visits-tabs .chip { text-decoration: none; }
.visits-period { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.visits-chart { max-width: 100%; min-width: 0; }
.visits-chart-body { display: flex; gap: var(--space-2); height: 11rem; }
.visits-chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); text-align: right; min-width: 1.75rem; }
.visits-chart-cols { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--border); }
.visits-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: flex-end; }
.visits-bar { display: block; width: 100%; min-height: 2px; background: var(--navy); opacity: .75; border-radius: 2px 2px 0 0; }
.visits-dot { position: absolute; left: 50%; width: .7rem; height: .7rem; margin: 0 0 -.35rem -.35rem; border-radius: 50%; background: var(--ok); border: 2px solid #fff; }
.visits-chart-dates { display: flex; justify-content: space-between; margin-left: 2.25rem; font-size: var(--fs-xs); color: var(--text-muted); }
.dashboard-card details summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); }
.funnel-worst td { background: var(--warn-bg); }

/* Clientes parados (equipe): linha com borda vermelha, além da etiqueta de texto. */
.lapsed-stale td:first-child { border-left: 4px solid var(--danger); }

/* Calendário de entregas (Aluguel → Calendário de entregas) */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.delivery-calendar td { vertical-align: top; min-width: 5.5rem; }
.delivery-calendar td label { display: block; font-size: var(--fs-sm); white-space: nowrap; }
.delivery-calendar td.is-locked { background: var(--info-bg); color: var(--text-muted); }
@media (max-width: 720px) {
    /* Celular: cada dia vira uma linha (sem 7 colunas, sem rolagem lateral). */
    .delivery-calendar, .delivery-calendar tbody, .delivery-calendar tr, .delivery-calendar td { display: block; width: 100%; }
    .delivery-calendar thead, .delivery-calendar td.is-empty { display: none; }
    .delivery-calendar tr { display: flex; flex-direction: column; }
    .delivery-calendar td { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); }
    .delivery-calendar td strong { min-width: 5.5rem; }
    .delivery-calendar td strong .cal-wd { font-weight: 400; color: var(--text-muted); text-transform: capitalize; }
    .delivery-calendar td small { flex: 1 1 100%; }
}
@media (min-width: 721px) { .delivery-calendar td strong .cal-wd { display: none; } }

/* Entrega e coleta em casa nos cartões de Hoje */
.order-card-address { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); background: var(--info-bg); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.order-card--collect { border-width: 2px; border-color: var(--danger); background: var(--danger-bg); }
.order-card--collect .order-card-address { background: var(--surface, #fff); font-size: var(--fs-md); }