/* Studio CT: visual comum. A cor da marca (--cor) vem das configurações do estúdio. */
:root {
  /* Identidade StudioCT 3D: dourado, bege e marrom (da logo) */
  --cor: #B8862B;          /* dourado escuro: destaques e barras */
  --ouro: #D9A93F;
  --ouro-claro: #F1D488;
  --fundo: #F6ECDC;        /* bege */
  --cartao: #FFFAF2;
  --texto: #3B1D0E;        /* marrom da logo */
  --suave: #86654F;
  --linha: #E9D8BC;
  --serifa: Georgia, "Times New Roman", serif;
  --ok: #2F6B3A; --ok-bg: #E2F1DF;
  --alerta: #8A5A00; --alerta-bg: #FBEBC4;
  --perigo: #A8321F; --perigo-bg: #F9E0D8;
  --raio: 18px;
  --sombra: 0 1px 2px rgb(59 29 14 / .06), 0 12px 30px -16px rgb(59 29 14 / .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 18px; height: 18px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao); font-weight: 650; text-decoration: none; color: inherit;
}
.btn:hover { border-color: var(--cor); }
.btn:focus-visible, .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.btn-cor, a.btn-cor {
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro) 55%, var(--cor)); border-color: #A97B22; color: var(--texto);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 16px -8px rgb(140 95 20 / .7);
}
.btn-cor:hover { filter: brightness(1.05); }
.btn-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }

.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.selo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-fila { background: #EFE6D8; color: #6E5644; }
.selo-producao { background: #FBEBC4; color: #7A5410; }
.selo-pausado, .selo-atraso { background: var(--alerta-bg); color: var(--alerta); }
.selo-acabamento { background: #E3F0FF; color: #1D5FBF; }
.selo-pronto, .selo-entregue { background: var(--ok-bg); color: var(--ok); }
.selo-cancelado { background: var(--perigo-bg); color: var(--perigo); }

.barra { height: 10px; border-radius: 999px; background: #EFE2CC; overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cor), var(--ouro), var(--ouro-claro)); transition: width .6s ease; }

.campo { display: grid; gap: 6px; }
.campo > label, .campo > .rotulo { font-size: 13px; font-weight: 700; color: var(--texto); }
.campo small { color: var(--suave); font-size: 12.5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; font-size: 16px;
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo .invalido { border-color: var(--perigo); background: var(--perigo-bg); }
.erro { color: var(--perigo); font-size: 13px; font-weight: 600; }
.erro:empty { display: none; }

dialog {
  width: min(560px, calc(100vw - 20px)); max-height: calc(100vh - 20px); padding: 0; border: 0; border-radius: 20px;
  background: var(--cartao); color: var(--texto); box-shadow: 0 30px 80px -20px rgb(59 29 14 / .5);
}
dialog::backdrop { background: rgb(59 29 14 / .45); }
.dlg-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.dlg-topo h2 { margin: 0; font-size: 19px; font-family: var(--serifa); }
.dlg-corpo { display: grid; gap: 14px; padding: 16px 18px; }
.dlg-pe { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: #FBF3E6; }
.icone-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }

.aviso { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100vw - 24px);
  padding: 10px 16px; border-radius: 12px; background: var(--texto); color: #fff; font-weight: 600;
  transform: translate(-50%, 160%); opacity: 0; transition: transform .25s, opacity .25s; }
.aviso.on { transform: translate(-50%, 0); opacity: 1; }
.aviso.ruim { background: var(--perigo); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }