/* ADAPTE Board: fundamentos e componentes compartilhados pelo produto e pelo Storybook. */
:root {
  --sb-color-navy:#041534;
  --sb-color-ink:#14243d;
  --sb-color-muted:#566472;
  --sb-color-primary:#1250e0;
  --sb-color-primary-hover:#0b328e;
  --sb-color-primary-soft:#eef4ff;
  --sb-color-danger:#a32319;
  --sb-color-danger-soft:#fff2f1;
  /* V1-39: vermelho de gravação e de urgência. Branco sobre ele 5,74:1 (o #e2231a dava 4,68:1).
     O modo escuro não cria outro vermelho: redefine só o contorno (--sb-color-alert-edge, #ff8a80 lá). */
  --sb-color-alert:#c81e1e;
  --sb-color-alert-ring:rgba(200,30,30,.45);
  --sb-color-alert-edge:var(--sb-color-danger);
  --sb-color-success:#287c32;
  --sb-color-success-soft:#eef8ed;
  --sb-color-warning:#8b5100;
  --sb-color-warning-soft:#fff7df;
  --sb-surface:#fff;
  --sb-canvas:#f4f6f9;
  --sb-control:#e9eef6;
  --sb-border:#d8e0ea;
  --sb-border-strong:#8495aa;
  --sb-surface-glass:rgba(255,255,255,.92);
  --sb-blur:blur(16px) saturate(115%);
  --sb-font:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;
  --sb-text-small:13px;
  --sb-text-control:14px;
  --sb-text-body:16px;
  --sb-text-title:24px;
  --sb-space-1:4px; --sb-space-2:8px; --sb-space-3:12px;
  --sb-space-4:16px; --sb-space-6:24px; --sb-space-8:32px;
  --sb-radius-control:10px; --sb-radius-card:16px; --sb-radius-vocab:14px; --sb-radius-float:22px;
  --sb-grid-cell-min:64px;
  --sb-target:44px; --sb-target-comfort:48px; --sb-target-variants:24px;
  --sb-shadow:0 2px 10px #04153410;
  --sb-shadow-float:0 4px 18px #04153412;
  --sb-shadow-dialog:0 20px 80px #04153440;
  --sb-focus:3px solid var(--sb-color-primary);
  --sb-motion:120ms;
  --sb-fz-yellow:#ffe27a; --sb-fz-yellow-border:#e0a800;
  --sb-fz-green:#b7e2a0; --sb-fz-green-border:#4a9e35;
  --sb-fz-blue:#a9d4f0; --sb-fz-blue-border:#2a7ec0;
  --sb-fz-purple:#d9c2f0; --sb-fz-purple-border:#7b52c4;
  --sb-fz-teal:#b3e6d8; --sb-fz-teal-border:#1d9e75;
  --sb-fz-orange:#ffcf99; --sb-fz-orange-border:#e67e22;
  --sb-fz-pink:#f7c8dd; --sb-fz-pink-border:#e84c8a;
  --sb-fz-red:#ff4f50; --sb-fz-red-border:#d63a3b;
  --sb-fz-gray:#fff; --sb-fz-gray-border:#9aa6b2;
  --sb-yes:#287c32; --sb-no:#c92325; --sb-urgent:#951313; --sb-phrases:#7b52c4;
  --navy:var(--sb-color-navy); --blue:var(--sb-color-primary); --ink:var(--sb-color-ink);
  --blue-deep:var(--sb-color-primary-hover);
}
.sb-ui[data-sb-ui] {font-family:var(--sb-font);color:var(--sb-color-ink);}
body.sb-ui[data-sb-ui] {background:var(--sb-canvas);}
/* Os nomes existentes são consumidores do mesmo componente. Cartões e teclas não entram aqui. */
html .sb-ui[data-sb-ui] :where(.sb-button,.btn,.gate-btn,.mini,.sair:not(.mi),.linkbtn,.icon-button:not(.sb-loginm),
 .ctrl,.sb-modebar button,.cfg-quick button,.tp-scope button,.sb-varall,.mt-acoes button,.mt-textos button,
 .sr-create button,.sr-model-note button,.sr-model-list button,.sb-resource-dialog button:not(.sr-visual),
 .pin-ok,.pin-cancel,.pwabtn,.cfgadv-btn) {
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--sb-space-2);
  min-width:var(--sb-target);min-height:var(--sb-target);padding:10px 14px;
  border:1px solid var(--sb-border);border-radius:var(--sb-radius-control);
  background:var(--sb-surface);color:var(--sb-color-ink);font:700 var(--sb-text-control)/1.3 var(--sb-font);
  text-decoration:none;cursor:pointer;vertical-align:middle;
  transition:background-color var(--sb-motion),border-color var(--sb-motion);
}
html .sb-ui[data-sb-ui] :is(.sb-button--primary,.btn,.gate-btn,.pin-ok,.ctrl:not(.alt),.sr-primary) {
  background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:#fff;
}
html .sb-ui[data-sb-ui] :is(.sb-button--secondary,.btn.alt,.btn.neutro,.btn.btn-sec,.btn.btn-ghost,.gate-btn.ghost) {
  background:var(--sb-surface);border-color:var(--sb-border);color:var(--sb-color-ink);
}
html .sb-ui[data-sb-ui] :is(.sb-button--soft,.ctrl.alt,.sair:not(.mi)) {
  background:var(--sb-control);border-color:transparent;color:var(--sb-color-ink);
}
html .sb-ui[data-sb-ui] :is(.sb-button--danger,.btn.danger,.btn.btn-danger,.icon-button--danger) {
  background:var(--sb-color-danger-soft);border-color:#e5b8b3;color:var(--sb-color-danger);
}
html .sb-ui[data-sb-ui] :is(.sb-button--success,.mini.ok) {
  background:var(--sb-color-success-soft);border-color:#badabb;color:var(--sb-color-success);
}
html .sb-ui[data-sb-ui] :is(.sb-button--ghost,.btn.btn-ghost,.linkbtn) {background:transparent;border-color:transparent;color:var(--sb-color-primary);}
html .sb-ui[data-sb-ui] :is(.sb-button--primary,.btn:not(.alt):not(.neutro):not(.danger):not(.btn-sec):not(.btn-ghost):not(.btn-danger),.gate-btn:not(.ghost),.pin-ok,.ctrl:not(.alt),.sr-primary):hover:not(:disabled) {
  background:var(--sb-color-primary-hover);border-color:var(--sb-color-primary-hover);color:#fff;
}
html .sb-ui[data-sb-ui] :where(.sb-button,.btn,.mini,.gate-btn,.ctrl,.icon-button,.sb-resource-dialog button:not(.sr-visual),.mt-acoes button,.sb-modebar button,.pin-ok,.pin-cancel):focus-visible {
  outline:var(--sb-focus);outline-offset:3px;box-shadow:none;
}
html .sb-ui[data-sb-ui] :where(.sb-button,.btn,.mini,.gate-btn,.ctrl,.icon-button,.sb-resource-dialog button,.mt-acoes button):disabled {
  opacity:.5;cursor:default;transform:none;
}
html .sb-ui[data-sb-ui] :where(.sb-button,.btn,.mini,.gate-btn,.ctrl,.icon-button,.sb-resource-dialog button,.mt-acoes button)[hidden] {display:none;}
html .sb-ui[data-sb-ui] .sb-button--icon {width:var(--sb-target);padding:8px;flex:none;}
html .sb-ui[data-sb-ui] .sb-button--comfortable {min-height:var(--sb-target-comfort);font-size:16px;}
html .sb-ui[data-sb-ui] .sb-button--wide {width:100%;}
.sb-button svg {width:20px;height:20px;flex:none;}
/* O cabeçalho pode abreviar o título, mas não comprimir a borda sobre o conteúdo dos controles. */
.sb-ui[data-sb-ui] :where(.lgbtn,header .sb-save-m) {flex-shrink:0;white-space:nowrap;}
@media(max-width:360px){
  .sb-ui.sbm-build[data-sb-ui] header .hin{flex-wrap:wrap;}
  .sb-ui.sbm-build[data-sb-ui] header .hin>h1{flex:1;}
  .sb-ui.sbm-build[data-sb-ui] header .hin-sp{flex:0 0 100%;height:0;}
}
@media(max-width:430px){
  .sb-ui.sbm-build[data-sb-ui]:has(.sb-acctlogin) header .hin{flex-wrap:wrap;}
  .sb-ui.sbm-build[data-sb-ui]:has(.sb-acctlogin) header .hin>h1{flex:1;}
  .sb-ui.sbm-build[data-sb-ui]:has(.sb-acctlogin) header .hin-sp{flex:0 0 100%;height:0;}
}
.sb-button[aria-busy="true"]::before {content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sb-ui-busy 1s linear infinite;}
@keyframes sb-ui-busy {to{transform:rotate(360deg);}}
/* Campos nativos mantêm teclado, validação e associação com o rótulo. */
html .sb-ui[data-sb-ui] :where(.sb-input,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),select,textarea:not(#mtBuffer)) {
  box-sizing:border-box;min-width:0;min-height:var(--sb-target);max-width:100%;
  padding:10px 12px;border:1px solid var(--sb-border-strong);border-radius:var(--sb-radius-control);
  background:var(--sb-surface);color:var(--sb-color-ink);font:400 16px/1.4 var(--sb-font);
}
html .sb-ui[data-sb-ui] :where(.sb-input,input,select,textarea):focus-visible {outline:var(--sb-focus);outline-offset:2px;}
html .sb-ui[data-sb-ui] :where(input[type="checkbox"],input[type="radio"],input[type="range"]) {accent-color:var(--sb-color-primary);}
html .sb-ui[data-sb-ui] :where(input,select,textarea)[aria-invalid="true"] {border-color:var(--sb-color-danger);}
.sb-field {display:grid;gap:6px;min-width:0;}
.sb-field label {font-weight:600;}
.sb-field small {font-size:var(--sb-text-small);color:var(--sb-color-muted);}
.sb-field .sb-field-error {color:var(--sb-color-danger);}
.sb-choice {display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;}
.sb-fixed-grid{display:grid;grid-template-rows:repeat(var(--sb-grid-rows),minmax(var(--sb-grid-cell-min),auto));gap:var(--sb-space-2);min-width:calc(var(--sb-grid-columns)*var(--sb-grid-cell-min));}
.sb-grid-row{display:grid;grid-template-columns:repeat(var(--sb-grid-columns),minmax(var(--sb-grid-cell-min),1fr));gap:var(--sb-space-2);}
.sb-grid-cell{min-width:0;min-height:var(--sb-grid-cell-min);}
.sb-fixed-card,.sb-grid-slot{width:100%;height:100%;min-height:var(--sb-grid-cell-min);border:1px solid var(--sb-border-strong);border-radius:var(--sb-radius-vocab);background:var(--sb-card-fill,var(--sb-surface));color:var(--sb-color-ink);}
.sb-fixed-card{display:grid;grid-template-rows:minmax(36px,1fr) auto;place-items:center;gap:4px;padding:6px;font:700 12px/1.2 var(--sb-font);overflow:hidden;}
.sb-fixed-card img{width:100%;height:48px;object-fit:contain;}
.sb-fixed-card:focus-visible,.sb-grid-slot:focus-visible{outline:var(--sb-focus);outline-offset:2px;}
.sb-fixed-card[aria-pressed="true"]{box-shadow:0 0 0 4px var(--sb-color-primary);}
.sb-grid-slot--empty{border-style:dashed;background:var(--sb-control);font:700 24px/1 var(--sb-font);cursor:pointer;}
.sb-grid-slot--silent{background:transparent;border-color:transparent;}
@media(prefers-reduced-motion:reduce){.sb-fixed-card,.sb-grid-slot{transition:none!important;}}
@media(forced-colors:active){.sb-grid-slot--empty{border-style:dashed}.sb-fixed-card[aria-pressed="true"]{outline:4px solid Highlight;}}
/* Superfícies, agrupamentos e retornos usados nas páginas e composições. */
html .sb-ui[data-sb-ui] :where(.sb-panel,.card,.sr-create,.sr-model-note) {background:var(--sb-surface);color:var(--sb-color-ink);border:1px solid var(--sb-border);border-radius:var(--sb-radius-card);box-shadow:var(--sb-shadow);}
.sb-panel {padding:var(--sb-space-4);}
.sb-panel h2,.sb-panel h3 {margin:0 0 12px;}
.sb-stack {display:flex;flex-direction:column;gap:var(--sb-space-4);min-width:0;}
.sb-actions {display:flex;align-items:center;flex-wrap:wrap;gap:var(--sb-space-2);}
.sb-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:var(--sb-space-3);}
.sb-toolbar-title {flex:1;min-width:0;margin:0;}
.sb-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sb-space-4);}
.sb-muted {color:var(--sb-color-muted);}
.sb-badge {display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;border:1px solid var(--sb-border);font:600 13px/1.4 var(--sb-font);background:var(--sb-control);color:var(--sb-color-ink);}
.sb-badge--success,.sb-notice--success {background:var(--sb-color-success-soft);color:var(--sb-color-success);}
.sb-badge--warning,.sb-notice--warning {background:var(--sb-color-warning-soft);color:var(--sb-color-warning);}
.sb-badge--danger,.sb-notice--danger {background:var(--sb-color-danger-soft);color:var(--sb-color-danger);}
.sb-notice {padding:12px 16px;border:1px solid currentColor;border-radius:12px;line-height:1.5;}
.sb-notice p {margin:0;}
.sb-tabs {display:flex;flex-wrap:wrap;gap:8px;}
html .sb-ui[data-sb-ui] :where(.sb-tab,.srcchip,.seg button) {min-height:44px;padding:10px 14px;border:1px solid var(--sb-border);border-radius:10px;background:#fff;color:var(--sb-color-ink);font:600 14px/1.3 var(--sb-font);cursor:pointer;}
html .sb-ui[data-sb-ui] :is(.sb-tab[aria-selected="true"],.srcchip[aria-selected="true"],.seg button.on) {background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:#fff;}
.sb-sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.sb-glass {background:var(--sb-surface);border:1px solid var(--sb-border);border-radius:var(--sb-radius-float);box-shadow:var(--sb-shadow-float);padding:12px;}
@supports(backdrop-filter:blur(1px)){.sb-glass{background:var(--sb-surface-glass);backdrop-filter:var(--sb-blur);}}
html .sb-ui[data-sb-ui] .sb-resource-dialog {background:var(--sb-surface);color:var(--sb-color-ink);border-radius:var(--sb-radius-float);box-shadow:var(--sb-shadow-dialog);font-family:var(--sb-font);}
html .sb-ui[data-sb-ui] .sb-resource-dialog :where(.sr-head,.sr-foot) {background:var(--sb-surface);color:var(--sb-color-ink);border-color:var(--sb-border);gap:12px;padding:16px;}
html .sb-ui[data-sb-ui] .sb-resource-dialog .sr-head {border-bottom:1px solid var(--sb-border);}
html .sb-ui[data-sb-ui] .sb-resource-dialog :where(.sr-item,.sr-path) {border-color:var(--sb-border-strong);border-radius:var(--sb-radius-card);}
html .sb-ui[data-sb-ui] .sb-resource-dialog .sr-item.sr-done {border-color:var(--sb-color-success);}
html .sb-ui[data-sb-ui] :where(.sr-create button,.sr-model-note button,.sr-model-list button,.sb-resource-dialog button:not(.sr-visual)) {min-height:var(--sb-target-comfort);font-size:var(--sb-text-body);}
html .sb-ui[data-sb-ui] .sb-resource-dialog button[aria-pressed="true"] {background:var(--sb-color-primary);border-color:var(--sb-color-primary);color:#fff;}
/* Comunicação tem dimensões próprias; o catálogo usa os mesmos tokens sem ampliar o menu de variantes. */
.sb-card{position:relative;min-width:0;}
.sb-communication-card {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:140px;width:100%;border:3px solid var(--sb-card-line,var(--sb-fz-yellow-border));border-radius:var(--sb-radius-vocab);background:var(--sb-card-fill,var(--sb-fz-yellow));color:var(--sb-color-navy);padding:10px;font:700 16px/1.3 var(--sb-font);cursor:pointer;}
html .sb-ui[data-sb-ui] .cell {border-radius:var(--sb-radius-vocab);}
.sb-communication-card img {width:88px;height:88px;object-fit:contain;background:#fff;border-radius:8px;}
.sb-card-variants {position:absolute;top:0;right:0;width:var(--sb-target-variants);height:var(--sb-target-variants);padding:0 2px 0 0;border:0;background:transparent;color:var(--sb-card-line);font:700 16px/1 var(--sb-font);cursor:pointer;}
.sb-message-panel {min-height:176px;padding:16px;display:flex;align-items:center;gap:16px;border:1px solid var(--sb-border);border-radius:16px;background:var(--sb-surface);}
.sb-message-items {display:flex;align-items:center;gap:16px;overflow:auto;min-width:0;flex:1;}
.sb-message-items figure {flex:none;margin:0;text-align:center;}
.sb-message-items img {width:104px;height:104px;object-fit:contain;}
.sb-suggestion-strip {display:flex;gap:8px;overflow-x:auto;padding:8px;scroll-snap-type:x proximity;}
.sb-suggestion-strip>.sb-card {flex:0 0 120px;scroll-snap-align:start;}
.sb-quick-action {min-height:48px;min-width:0;border:0;border-radius:14px;padding:12px 4px;color:#fff;font:700 14px/1.3 var(--sb-font);background:var(--sb-yes);cursor:pointer;}
.sb-dock-demo {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.sb-quick-action[data-kind="no"]{background:var(--sb-no);}.sb-quick-action[data-kind="urgent"]{background:var(--sb-urgent);}.sb-quick-action[data-kind="phrases"]{background:var(--sb-phrases);}
.sb-keyboard-demo {display:grid;gap:6px;padding:8px;background:var(--sb-control);border-radius:16px;}
.sb-keyboard-row {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;}
.sb-key {min-width:0;min-height:44px;border:1px solid var(--sb-border);border-radius:10px;background:#fff;color:var(--sb-color-ink);font:400 20px/1 var(--sb-font);cursor:pointer;}
.sb-ui[data-sb-ui] :where(.sb-tab,.sb-communication-card,.sb-card-variants,.sb-key,.sb-quick-action,.sb-message-items):focus-visible {outline:var(--sb-focus);outline-offset:3px;}
@media(max-width:359px){.sb-dock-demo{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:599px){html .sb-ui[data-sb-ui] .sb-resource-dialog{border-radius:0;}html .sb-ui[data-sb-ui] .sb-resource-dialog :where(.sr-head,.sr-foot){padding:12px;gap:8px;}.sb-message-panel{flex-wrap:wrap;}.sb-message-panel>.sb-actions{width:100%;}.sb-message-panel>.sb-actions .sb-button{flex:1;}}
@media(prefers-reduced-motion:reduce){.sb-ui[data-sb-ui]{--sb-motion:0s;}.sb-button[aria-busy="true"]::before{animation:none;border-style:dotted;}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.sb-ui[data-sb-ui]{--sb-surface-glass:#fff;--sb-blur:none;}.sb-glass{background:#fff;backdrop-filter:none;}}
@media(prefers-contrast:more){.sb-ui[data-sb-ui]{--sb-border:var(--sb-color-ink);--sb-border-strong:var(--sb-color-ink);}}
.sb-ui.sb-calm[data-sb-ui],.sb-ui.sb-hc[data-sb-ui]{--sb-surface-glass:#fff;--sb-blur:none;--sb-motion:0s;}
/* PO-44 (19/09): seletor de cinco tons de pele, nos Ajustes e no Estudio. Cinco amostras de 32 px com
   area de toque de 44 px, borda #8495aa (o tom 1 nao some no fundo claro nem no escuro), selecionada com
   anel afastado e check: duas pistas, nenhuma so' de cor. O numero de 1 a 5 fica embaixo (S3). */
.tons{display:flex;flex-wrap:wrap;gap:8px;}
.tom{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:inherit;font:inherit;}
.tom-dot{position:relative;display:block;width:32px;height:32px;border-radius:50%;border:1px solid #8495aa;margin-top:6px;box-sizing:border-box;}
.tom-white .tom-dot{background:#F5E5DF;}.tom-assian .tom-dot{background:#F5EDAD;}.tom-mulatto .tom-dot{background:#E3AB72;}.tom-aztec .tom-dot{background:#CF9D7C;}.tom-black .tom-dot{background:#A75C16;}
.tom[aria-checked="true"] .tom-dot{outline:3px solid #1250e0;outline-offset:2px;}
.tom-dot svg{position:absolute;left:5px;top:5px;width:20px;height:20px;display:none;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.tom[aria-checked="true"] .tom-dot svg{display:block;}
.tom-chk-o{stroke:#142c48;stroke-width:5;}.tom-chk-i{stroke:#fff;stroke-width:2.6;}
.tom-num{font-size:12px;font-weight:600;line-height:1.2;}
.tom:focus-visible{outline:3px solid #1250e0;outline-offset:3px;border-radius:10px;}
.tom-aviso{display:block;font-size:12px;color:#5a4a1a;background:#fff4d6;border-radius:8px;padding:6px 8px;margin-top:6px;max-width:260px;}
.tom-aviso[hidden]{display:none;}
html[data-tema="escuro"] .tom[aria-checked="true"] .tom-dot{outline-color:#7aa2ff;}
html[data-tema="escuro"] .tom-aviso{color:#f3dca0;background:#3a311a;}