/* O cadastro de demonstração (demonstracao.js): o interruptor, o segmentado do perfil, a caixa da
   autorização e, no painel, a etiqueta da origem e a seção do contato. Carregado no produto e no
   admin, que dividem estilo.css (tokens --r-*, --alvo, --t-*). */

/* o modal com a demonstração ligada cresce: largura de formulário e rolagem DENTRO dele, senão no
   celular o botão "Criar propriedade" ficava abaixo da tela */
.modal.modal-demo { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.modal.modal-demo .modal-corpo { overflow-y: auto; overscroll-behavior: contain; }
.modal.modal-demo .modal-cab, .modal.modal-demo .modal-pe { flex: 0 0 auto; }

/* interruptor do Material 3: trilho 52 × 32, botão 16 → 24 ligado; o alvo é a linha inteira */
.demo-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 48px; margin-top: 16px; padding: 8px 0; border: 0; border-top: 1px solid var(--linha);
  background: none; color: var(--tinta); text-align: left; cursor: pointer; font: inherit; }
.demo-interruptor-txt b { display: block; font: 500 var(--t-body-m)/20px var(--ui); }
.demo-interruptor-txt small { display: block; font: 400 var(--t-body-s)/16px var(--ui); color: var(--tinta-2); }
.demo-trilho { position: relative; flex: 0 0 auto; width: 52px; height: 32px; border-radius: var(--r-full);
  border: 2px solid var(--tinta-3); background: var(--superficie-2); transition: background .15s, border-color .15s; }
.demo-botao-trilho { position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinta-3); transform: translateY(-50%); transition: left .15s, width .15s, height .15s, background .15s; }
.demo-interruptor[aria-checked="true"] .demo-trilho { background: var(--verde); border-color: var(--verde); }
.demo-interruptor[aria-checked="true"] .demo-botao-trilho { left: 22px; width: 24px; height: 24px; background: var(--superficie); }
.demo-interruptor:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r-s); }

.demo-secao { margin-top: 4px; padding: 4px 16px 16px; border: 1px solid var(--linha); border-radius: var(--r-s); background: var(--superficie-2); }
.demo-secao[hidden] { display: none; }
.demo-secao-titulo { margin: 12px 0 0; font: 600 var(--t-title-s)/20px var(--ui); color: var(--tinta); }
.demo-campos .campo textarea, .demo-whats textarea { width: 100%; box-sizing: border-box; min-height: 80px; resize: vertical;
  border: 1px solid var(--linha-forte); border-radius: var(--r-s); padding: 9px 12px; font: var(--t-body-m)/20px var(--ui);
  background: var(--superficie); color: var(--tinta); }
.demo-campos .campo input[type="text"], .demo-campos .campo input[type="tel"] { background: var(--superficie); }
.demo-campos [aria-invalid="true"] { border-color: var(--fogo); box-shadow: inset 0 0 0 1px var(--fogo); }
.demo-rotulo { font: 600 12px var(--ui); color: var(--tinta-2); }
.demo-erro { margin: 0; font: 500 var(--t-body-s)/16px var(--ui); color: var(--fogo); }
.demo-contador { align-self: flex-end; font: 400 var(--t-label-s) var(--mono); color: var(--tinta-2); }

/* segmentado do Material 3: quatro lados; abaixo de 480 px vira 2 × 2 para "Agrônomo" caber */
.demo-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linha-forte); border-radius: var(--r-s); overflow: hidden; background: var(--superficie); }
.demo-seg[aria-invalid="true"] { border-color: var(--fogo); }
.demo-seg-item { position: relative; display: flex; min-width: 0; }
.demo-seg-item + .demo-seg-item { border-left: 1px solid var(--linha-forte); }
.demo-seg-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.demo-seg-rotulo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; padding: 0 8px;
  font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); text-align: center; }
.demo-seg-marca { display: none; }
.demo-seg-radio:checked + .demo-seg-rotulo { background: var(--verde-claro); color: var(--verde); font-weight: 600; }
.demo-seg-radio:checked + .demo-seg-rotulo .demo-seg-marca { display: inline; }
.demo-seg-item:hover .demo-seg-rotulo { background: var(--cinza-claro); }
.demo-seg-item:hover .demo-seg-radio:checked + .demo-seg-rotulo { background: var(--verde-claro); }
.demo-seg-radio:focus-visible + .demo-seg-rotulo { outline: 3px solid var(--verde); outline-offset: -3px; }
@media (max-width: 480px) {
  .demo-seg { grid-template-columns: repeat(2, 1fr); border-radius: var(--r-s); }
  .demo-seg-item:nth-child(3) { border-left: 0; }
  .demo-seg-item:nth-child(n+3) { border-top: 1px solid var(--linha-forte); }
}

/* a frase da autorização no cadastro (sem caixa) */
.demo-aviso-autorizacao { margin: 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }

/* a caixa da autorização (painel): alvo de 48 px na linha inteira */
.campo label.demo-caixa-linha { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer;
  font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.demo-caixa-linha input.demo-caixa { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--verde); cursor: pointer; }
.demo-caixa-linha input[aria-invalid="true"] { outline: 2px solid var(--fogo); outline-offset: 2px; }

/* ---------------------------------------------------------- painel: origem e contato */
.chip-origem { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-xs);
  font: 600 var(--t-label-s)/16px var(--ui); white-space: nowrap; border: 1px solid transparent; }
.chip-origem.interno { background: var(--azul-claro); color: var(--azul); border-color: rgba(30,94,158,0.25); }
.chip-origem.externo { background: var(--verde-claro); color: var(--verde); border-color: rgba(30,107,69,0.25); }

.demo-painel { margin-top: 16px; border: 1px solid var(--linha); border-radius: var(--r-s); background: var(--superficie-2); }
.demo-painel > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px;
  font: 600 var(--t-title-s)/20px var(--ui); cursor: pointer; list-style: none; }
.demo-painel > summary::-webkit-details-marker { display: none; }
.demo-painel > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); transform: rotate(45deg); margin-right: 4px; transition: transform .15s; }
.demo-painel[open] > summary::after { transform: rotate(-135deg); }
.demo-painel > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; border-radius: var(--r-s); }
.demo-painel-corpo { padding: 0 16px 16px; }
.demo-meta { margin: 0; font: 400 var(--t-body-s)/16px var(--ui); color: var(--tinta-2); }
.demo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.demo-acoes .btn, .demo-acoes .btn-sec { min-height: var(--alvo); }
.demo-ok { margin: 0; font: 500 var(--t-body-s)/16px var(--ui); color: var(--verde); }
.demo-whats { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha); }
.demo-whats a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.demo-whats .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }