/* Revisão final: legibilidade e controles no celular, com os tokens da marca. */
:root {
  --review-text: var(--bone);
  --review-surface: var(--noite-2);
  --review-focus: var(--blue-claro);
  --dg-fraco: var(--bone);
  --dg-mudo: var(--bone);
}
html[data-tema="claro"] {
  --review-text: var(--ink);
  --review-surface: var(--paper);
  --review-focus: var(--blue);
  --dg-fraco: var(--ink);
  --dg-mudo: var(--ink);
}

/* Texto branco no azul principal: 8,13:1. O brilho fica fora do texto. */
.btn:not(.btn--fantasma):not(.btn--ghost), .button:not(.button-quiet) {
  color: var(--paper);
  background: var(--blue);
}
.btn--fantasma, .btn--ghost, .button-quiet {
  color: var(--review-text);
  background: var(--review-surface);
}
.btn--fantasma:hover, .btn--ghost:hover, .button-quiet:hover {
  color: var(--review-text);
  background: var(--review-surface);
}
:is(button, .btn, .button, summary, .nav a, .barra a, .view-nav a, a.chip) {
  min-block-size: 44px;
  min-inline-size: 44px;
}
:is(.text-link, .back-link, .kpi-link, .task-title-link, .board-stage-nav a,
    .ops-filter-actions > a, .attachment-list a, .record-links > a, .programming-links > a) {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
button, .btn, .button, summary { overflow-wrap: anywhere; }
:is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  min-block-size: 44px;
  min-inline-size: 0;
  max-inline-size: 100%;
}
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  min-block-size: 44px;
  padding-block: 8px;
  cursor: pointer;
}
:focus-visible, .btn:focus-visible, .button:focus-visible {
  outline: 3px solid var(--review-focus);
  outline-offset: 3px;
}
.painel-content :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--review-focus);
}
html[data-tema="claro"] :is(.etapa .tag, .nav .n, .tag-st) {
  color: var(--ink);
  background: var(--bone);
}
input::placeholder, textarea::placeholder { color: var(--dg-fraco); opacity: 1; }
.btn:disabled { cursor: not-allowed; }

/* Conter a largura no componente, sem esconder o excesso da página inteira. */
.app, .guest-app, .main, .painel-content, .entrada-card {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.painel-content > *, .painel-content :where(section, article, form, fieldset, nav, header, footer) {
  min-inline-size: 0;
}
.painel-content :where(p, h1, h2, h3, h4, li, dd, label, code) { overflow-wrap: anywhere; }
:is(img, video, iframe, canvas) { max-inline-size: 100%; }
:is(.table-wrap, .fin-scroll, .board-scroll, .ops-kanban-scroll, .kb-tdah, .pub-kanban, .tira-dias) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--blue-lift) var(--review-surface);
}
pre {
  max-inline-size: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.painel-content table:not(.fin-table) { max-inline-size: 100%; }
.painel-content form :is(input[type="file"], textarea) { inline-size: 100%; }
.painel-content :is(.view-nav, .filter-actions, .record-links, .wizard-controls, .owner-week-nav) {
  flex-wrap: wrap;
}
.more-panel { overscroll-behavior: contain; }
.more-panel a { overflow-wrap: anywhere; }
.painel-lat { max-inline-size: 100vw; }

@media (max-width: 480px) {
  .main { padding-inline: 12px; }
  .entrar { padding-inline: 12px; }
  .entrar main { padding-inline: 20px; }
  .btn, .button { padding-inline: 16px; white-space: normal; }
  .painel-content :is(.panel, .vidro, .cartao) { min-inline-size: 0; }
  .painel-content :is(.metrics, .owner-grid, .owner-form, .owner-week, .clients-grid, .equipe-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .painel-content .field { max-inline-size: 100%; }
  :is(.painel-content, .entrada-card) :is(input, select, textarea) { font-size: 16px; }
  .barra { gap: 0; }
  .barra > a, .more-menu, .more-menu > summary { min-inline-size: 44px; }
  .more-panel { left: 12px; right: 12px; }
  .painel-lat .corpo { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .surge > * { opacity: 1; transform: none; }
}
.reduz *, .reduz *::before, .reduz *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.reduz .surge > * { opacity: 1; transform: none; }