/* Litoral Pedidos: "comanda à beira-mar".
   Papel de comanda sobre areia, azul do mar da marca, sol para o que está em andamento
   e coral para o que precisa de alguém agora. */

:root {
  color-scheme: light;

  --mar-900: #053f66;
  --mar-800: #064f80;
  --mar-700: #07619d;
  --mar-500: #2385c8;
  --mar-200: #bfe0f3;
  --mar-100: #e6f3fb;
  --onda: #00bcc9;
  --onda-700: #00747d;
  --onda-100: #dcf6f8;
  --sol: #ffb703;
  --sol-700: #8a5d00;
  --sol-100: #fff1c7;
  --coral: #d12c2c;
  --coral-700: #a11f1f;
  --coral-100: #fde5e2;
  --verde: #187a52;
  --verde-100: #ddf2e8;
  --areia: #f3eee3;
  --areia-2: #e9e1cf;
  --papel: #fffcf5;
  --tinta: #13283b;
  --tinta-2: #4a5e71;
  --tinta-3: #7b8b9a;
  --linha: #e4dbc8;
  --linha-forte: #cbbfa6;

  --sombra-1: 0 1px 0 rgb(19 40 59 / 5%), 0 2px 8px -2px rgb(19 40 59 / 10%);
  --sombra-2: 0 2px 0 rgb(19 40 59 / 4%), 0 14px 30px -12px rgb(19 40 59 / 28%);
  --sombra-3: 0 24px 60px -18px rgb(5 63 102 / 45%);
  --raio: 14px;
  --raio-p: 10px;
  --topo-h: 68px;
  --lateral: 24px;

  --f-titulo: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-texto: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* borda picotada da comanda: furos da cor do fundo */
  --picote: radial-gradient(circle at 8px 0, var(--areia) 4.5px, transparent 5px) 0 0 / 16px 6px repeat-x;
  --onda-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q12 0 24 5 T48 5 V10 H0z' fill='%2307619d'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  :root { --topo-h: 60px; --lateral: 16px; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 64px); }

body {
  margin: 0;
  min-height: 100dvh;
  font: 400 1rem/1.5 var(--f-texto);
  color: var(--tinta);
  background-color: var(--areia);
  background-image: radial-gradient(rgb(19 40 59 / 4%) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--mar-700); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--onda); outline-offset: 2px; border-radius: 6px; }

.icone { display: inline-flex; width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }
.icone svg { width: 100%; height: 100%; }

::selection { background: var(--sol-100); }

/* ---------------------------------------------------------------- carregando (index.html) */

.app-carregando { min-height: 100dvh; display: grid; place-items: center; }
.carregando-app { display: grid; justify-items: center; gap: 18px; }
.carregando-app img { width: 168px; }
.carregando-onda {
  width: 120px; height: 10px;
  background: var(--onda-svg) 0 0 / 24px 10px repeat-x;
  opacity: 0.8;
  animation: mare 1.2s linear infinite;
}
@keyframes mare { to { background-position: 24px 0; } }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 650 0.97rem/1 var(--f-titulo); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.botao:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao-primario { background: var(--mar-700); color: #fff; box-shadow: 0 2px 0 var(--mar-900); }
.botao-primario:hover:not(:disabled) { background: var(--mar-800); }
.botao-secundario { background: var(--papel); color: var(--mar-800); border-color: var(--mar-200); }
.botao-secundario:hover:not(:disabled) { border-color: var(--mar-500); background: #fff; }
.botao-texto { background: none; color: var(--mar-700); padding: 0 10px; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.botao-texto:hover { color: var(--mar-900); }
.botao-texto.perigo { color: var(--coral-700); }
.botao-grande { min-height: 52px; font-size: 1.05rem; width: 100%; }
.botao.carregando { cursor: progress; }
.botao.carregando .icone { animation: girar 0.9s linear infinite; }
.botao .icone { width: 1.15em; height: 1.15em; }

.botao-icone {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1.5px solid var(--linha); border-radius: 50%;
  background: var(--papel); color: var(--mar-700);
}
.botao-icone:hover { border-color: var(--mar-200); background: #fff; }
.botao-icone .icone { width: 20px; height: 20px; }

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- formulários */

.campo { display: grid; gap: 6px; }
.campo > span { font: 650 0.9rem/1.2 var(--f-titulo); color: var(--tinta); }
.campo small, .caixa-marcar small { display: block; color: var(--tinta-2); font-size: 0.85rem; line-height: 1.4; }

input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='time'], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid var(--linha-forte); border-radius: var(--raio-p);
  background: #fff; color: var(--tinta);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { resize: vertical; line-height: 1.45; }
select { appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2307619d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mar-500); box-shadow: 0 0 0 4px rgb(35 133 200 / 18%); }
input[type='color'] { width: 64px; height: 42px; padding: 3px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-p); background: #fff; }

.caixa-marcar { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; line-height: 1.35; }
.caixa-marcar input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mar-700); flex: none; }

.campo-com-sufixo { display: flex; align-items: center; gap: 10px; }
.campo-com-sufixo input { max-width: 120px; font-family: var(--f-mono); }
.campo-com-sufixo em { font-style: normal; color: var(--tinta-2); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 52px; }
.campo-senha .olho { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; background: none; }

.erro-form {
  display: flex; gap: 8px; padding: 10px 14px;
  border-radius: var(--raio-p); background: var(--coral-100); color: var(--coral-700);
  font-weight: 700; font-size: 0.95rem;
}
.campo-erro { color: var(--coral-700) !important; font-weight: 700; }

/* ---------------------------------------------------------------- entrar */

.app-entrar { min-height: 100dvh; }
.entrar { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); }

.entrar-mar {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 56px 56px 168px;
  color: #fff;
  background:
    radial-gradient(120% 70% at 85% 8%, rgb(255 183 3 / 28%), transparent 55%),
    linear-gradient(180deg, #0b79c0 0%, var(--mar-700) 46%, var(--mar-900) 100%);
}
.entrar-sol {
  position: absolute; top: 12%; right: 13%; z-index: -1;
  width: clamp(120px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ffd76a, var(--sol) 62%, #f29a00);
  box-shadow: 0 0 0 18px rgb(255 183 3 / 12%), 0 0 0 44px rgb(255 183 3 / 7%), 0 0 90px 30px rgb(255 183 3 / 30%);
  animation: sol-nasce 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sol-nasce { from { translate: 0 60px; opacity: 0; } }

.entrar-ondas { position: absolute; inset: auto 0 0; height: 150px; z-index: -1; }
.entrar-ondas i {
  position: absolute; left: -96px; right: 0; bottom: 0; height: 100%;
  background:
    var(--onda-svg) 0 0 / 96px 20px repeat-x,
    linear-gradient(var(--mar-700), var(--mar-700)) 0 19px / 100% 100% no-repeat;
  animation: mare-larga 9s linear infinite;
}
.entrar-ondas i:nth-child(1) { bottom: 0; height: 110px; filter: hue-rotate(-12deg) brightness(1.25); opacity: 0.55; animation-duration: 13s; }
.entrar-ondas i:nth-child(2) { bottom: -30px; height: 100px; filter: brightness(0.82); opacity: 0.9; animation-duration: 9s; animation-direction: reverse; }
.entrar-ondas i:nth-child(3) { bottom: -64px; height: 96px; filter: brightness(0.6); animation-duration: 7s; }
@keyframes mare-larga { to { transform: translateX(96px); } }

.entrar-comandas { position: absolute; top: 18%; left: 9%; display: grid; gap: 14px; }
.mini-comanda {
  position: relative; display: grid; gap: 2px; width: 220px;
  padding: 14px 16px 12px; border-radius: 4px 4px 10px 10px;
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 18px 30px -14px rgb(0 0 0 / 45%);
  animation: boia 6s ease-in-out infinite;
}
.mini-comanda::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: radial-gradient(circle at 8px 0, #0a6fae 4.5px, transparent 5px) 0 0 / 16px 6px repeat-x; }
.mini-comanda b { font: 600 1.05rem var(--f-mono); color: var(--mar-700); }
.mini-comanda span { font-size: 0.85rem; color: var(--tinta-2); }
.mini-comanda:nth-child(1) { rotate: -4deg; border-left: 5px solid var(--coral); }
.mini-comanda:nth-child(2) { rotate: 2.5deg; margin-left: 46px; border-left: 5px solid var(--sol); animation-delay: -2s; }
.mini-comanda:nth-child(3) { rotate: -1.5deg; margin-left: 14px; border-left: 5px solid var(--onda); animation-delay: -4s; }
@keyframes boia { 50% { translate: 0 -8px; } }

.entrar-frase { font: 800 clamp(2.4rem, 4.6vw, 4.2rem)/0.98 var(--f-titulo); letter-spacing: -0.035em; max-width: 9.5em; text-wrap: balance; text-shadow: 0 2px 30px rgb(5 63 102 / 50%); }

.entrar-caixa {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 460px; margin: 0 auto; padding: 48px 32px;
}
.entrar-logo { width: 176px; margin-bottom: 26px; }
.entrar-caixa h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; }
.entrar-sub { color: var(--tinta-2); margin: 6px 0 26px; }
.entrar-form { display: grid; gap: 18px; }
.entrar-ajuda { margin-top: 22px; color: var(--tinta-2); font-size: 0.92rem; }

@media (max-width: 860px) {
  .entrar { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrar-mar { min-height: 210px; padding: 28px 24px 74px; }
  .entrar-comandas { display: none; }
  .entrar-sol { top: 22px; right: 22px; width: 84px; }
  .entrar-ondas { height: 72px; }
  .entrar-ondas i:nth-child(2) { bottom: -46px; }
  .entrar-ondas i:nth-child(3) { bottom: -74px; }
  .entrar-frase { font-size: 2.1rem; }
  .entrar-caixa {
    position: relative; margin-top: -26px; max-width: none; padding: 30px var(--lateral) 40px;
    border-radius: 24px 24px 0 0; background: var(--areia);
  }
  .entrar-caixa > * { width: 100%; max-width: 440px; margin-inline: auto; }
  .entrar-logo { width: 148px; margin-bottom: 18px; }
  .entrar-caixa h1 { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------- casca: topo */

.app { min-height: 100dvh; }

.topo {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  height: var(--topo-h); padding: 0 var(--lateral);
  background: var(--papel);
  box-shadow: 0 1px 0 var(--linha);
}
.topo::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 7px;
  background: var(--onda-svg) 0 0 / 48px 7px repeat-x;
  opacity: 0.9; pointer-events: none;
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 92px; }
.marca-nome {
  padding: 4px 10px 5px; border-radius: 999px;
  background: var(--mar-700); color: #fff;
  font: 750 0.82rem/1 var(--f-titulo); letter-spacing: 0.08em; text-transform: uppercase;
}

.topo-quem { min-width: 0; }
.quem {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--cor, var(--mar-700)) 11%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--cor, var(--mar-700)) 35%, #fff);
  font: 700 0.95rem/1 var(--f-titulo); color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quem i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 22%, transparent); }
.quem.matriz { --cor: var(--mar-700); }
.quem .icone { color: var(--mar-700); }

.topo-acoes { display: flex; align-items: center; gap: 10px; }

.contador {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px 0 6px; border-radius: 999px;
  background: var(--areia); color: var(--tinta-2); text-decoration: none;
  border: 1.5px solid var(--linha);
  font: 650 0.9rem/1 var(--f-titulo);
}
.contador-numero {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 999px; background: #fff; color: var(--tinta-2);
  font: 600 1rem/1 var(--f-mono);
}
.contador.tem { background: var(--coral); border-color: var(--coral); color: #fff; animation: pulsa-coral 2s ease-out infinite; }
.contador.tem .contador-numero { color: var(--coral-700); }
@keyframes pulsa-coral { 0% { box-shadow: 0 0 0 0 rgb(209 44 44 / 45%); } 70%, 100% { box-shadow: 0 0 0 12px rgb(209 44 44 / 0%); } }

.botao-balcao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px solid var(--mar-200); background: var(--papel); color: var(--mar-800);
  font: 650 0.92rem/1 var(--f-titulo);
}
.botao-balcao:hover { border-color: var(--mar-500); }
.botao-balcao.ligado { background: var(--sol); border-color: #e5a400; color: var(--tinta); box-shadow: 0 2px 0 #d29600; }
.botao-balcao.ligado .icone { animation: balanca 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes balanca { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: 14deg; } 74% { rotate: -12deg; } 82% { rotate: 8deg; } 90% { rotate: -4deg; } }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; border-radius: 50%; }
.menu summary::-webkit-details-marker { display: none; }
.avatar {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--onda-100); color: var(--onda-700); border: 1.5px solid #9fe3e8;
  font: 750 0.92rem/1 var(--f-titulo); letter-spacing: 0.02em;
}
.avatar.pequeno { width: 36px; height: 36px; font-size: 0.8rem; flex: none; }
.avatar.pequeno .icone { width: 18px; height: 18px; }
.menu[open] .avatar { background: var(--onda); color: #fff; border-color: var(--onda); }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 40;
  display: grid; min-width: 270px; padding: 8px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  animation: desce 0.16s ease-out;
}
@keyframes desce { from { opacity: 0; translate: 0 -6px; } }
.menu-quem { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1.5px dashed var(--linha); }
.menu-quem strong { font-family: var(--f-titulo); }
.menu-quem span { color: var(--tinta-2); font-size: 0.88rem; overflow-wrap: anywhere; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--raio-p);
  background: none; color: var(--tinta); text-align: left; text-decoration: none;
}
.menu-item:hover { background: var(--mar-100); }
.menu-item .icone { color: var(--mar-700); }
.menu-item[data-situacao='ativo'] .icone { color: var(--verde); }
.menu-item[data-situacao='bloqueado'] .icone, .menu-item[data-situacao='indisponivel'] .icone { color: var(--tinta-3); }

.conteudo { padding: 26px var(--lateral) 48px; outline: none; }

@media (max-width: 720px) {
  .topo { gap: 10px; }
  .marca img { width: 74px; }
  .marca-nome, .contador-texto, .botao-balcao-texto { display: none; }
  .quem { padding: 6px 11px; font-size: 0.85rem; }
  .contador { padding: 0 6px; }
  .botao-balcao { width: 42px; padding: 0; justify-content: center; }
  .topo-acoes { gap: 8px; }
  .conteudo { padding-top: 18px; }
  .lista-topo { align-items: flex-start; }
  .abas { display: grid; grid-template-columns: 1fr 1fr; }
  .aba { justify-content: center; padding: 0 10px; background: var(--areia-2); }
  .aba.ativa { background: var(--mar-700); }
}
@media (max-width: 380px) {
  .marca img { width: 62px; }
  .quem { font-size: 0.8rem; padding: 6px 9px; }
}

/* ---------------------------------------------------------------- pedidos: colunas */

.pedidos { display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1440px; margin: 0 auto; }

.coluna-lista { min-width: 0; }
.lista-topo {
  position: sticky; top: calc(var(--topo-h) + 6px); z-index: 10;
  display: flex; align-items: center; gap: 10px;
  margin: -6px -6px 12px; padding: 8px 6px;
  background: color-mix(in srgb, var(--areia) 92%, transparent);
  backdrop-filter: blur(6px);
}
.lista-topo .abas { flex: 1; min-width: 0; }
.atualizar { flex: none; }

.coluna-detalhe {
  position: sticky; top: calc(var(--topo-h) + 22px);
  max-height: calc(100dvh - var(--topo-h) - 44px);
  overflow: auto; overscroll-behavior: contain;
  border-radius: var(--raio);
  scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent;
}

@media (max-width: 979px) {
  .pedidos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pedidos[data-detalhe='sim'] .coluna-lista { display: none; }
  .pedidos[data-detalhe='nao'] .coluna-detalhe { display: none; }
  .coluna-detalhe { position: static; max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------------- abas */

.abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; }
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  color: var(--tinta-2); text-decoration: none;
  font: 650 0.9rem/1 var(--f-titulo);
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aba:hover { background: var(--areia-2); color: var(--tinta); }
.aba.ativa { background: var(--mar-700); color: #fff; box-shadow: 0 2px 0 var(--mar-900); }
.aba-contador {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--coral); color: #fff;
  font: 600 0.78rem/1 var(--f-mono);
}

/* ---------------------------------------------------------------- comandas */

.lista { display: grid; gap: 14px; }

.comanda {
  --faixa: var(--tinta-3);
  position: relative;
  display: grid; gap: 8px;
  padding: 18px 18px 14px 20px;
  background: var(--papel);
  border-radius: 3px 3px var(--raio) var(--raio);
  border-left: 6px solid var(--faixa);
  box-shadow: var(--sombra-1);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.comanda::before { content: ''; position: absolute; inset: 0 0 auto -6px; height: 6px; background: var(--picote); pointer-events: none; }
.comanda:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.comanda.selecionada { box-shadow: 0 0 0 2.5px var(--mar-500), var(--sombra-2); }

.comanda[data-status='processing'] { --faixa: var(--coral); }
.comanda[data-status='em-separacao'] { --faixa: var(--sol); }
.comanda[data-status='enviado'] { --faixa: var(--mar-500); }
.comanda[data-status='retirada-liberada'] { --faixa: var(--onda); }
.comanda[data-status='completed'] { --faixa: var(--verde); }
.comanda[data-status='cancelled'] { --faixa: var(--tinta-3); }
.comanda[data-status='processing']:has(.sem-loja) {
  background:
    repeating-linear-gradient(-45deg, rgb(209 44 44 / 4.5%) 0 10px, transparent 10px 20px),
    var(--papel);
}

.comanda-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.comanda-link:focus-visible { outline-offset: -3px; }
.comanda-acoes, .comanda .contatos { position: relative; z-index: 2; }

.comanda-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.numero { font: 600 1.12rem/1 var(--f-mono); color: var(--mar-800); letter-spacing: -0.01em; }
.numero.grande { font-size: 2rem; letter-spacing: -0.03em; }

.relogio {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  font: 600 0.82rem/1 var(--f-mono);
  background: var(--areia); color: var(--tinta-2);
}
.relogio .icone { width: 15px; height: 15px; }
.relogio.nivel-calmo { background: var(--onda-100); color: var(--onda-700); }
.relogio.nivel-atencao { background: var(--sol-100); color: var(--sol-700); }
.relogio.nivel-atrasado { background: var(--coral); color: #fff; animation: pulsa-coral 1.8s ease-out infinite; }

.comanda-cliente { font: 700 1.08rem/1.25 var(--f-texto); }
.bairro { font-weight: 400; color: var(--tinta-2); }
.comanda-entrega { display: flex; align-items: center; gap: 7px; color: var(--tinta-2); font-size: 0.93rem; }
.comanda-entrega .icone { color: var(--mar-700); }

.selos { display: flex; flex-wrap: wrap; gap: 6px; }
.selo {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px;
  font: 700 0.78rem/1 var(--f-titulo); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--areia-2); color: var(--tinta-2);
}
.selo[data-status='processing'] { background: var(--coral-100); color: var(--coral-700); }
.selo[data-status='em-separacao'] { background: var(--sol-100); color: var(--sol-700); }
.selo[data-status='enviado'] { background: var(--mar-100); color: var(--mar-800); }
.selo[data-status='retirada-liberada'] { background: var(--onda-100); color: var(--onda-700); }
.selo[data-status='completed'] { background: var(--verde-100); color: var(--verde); }

.chip-loja {
  display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px;
  border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--cor) 40%, #fff);
  background: color-mix(in srgb, var(--cor) 9%, #fff);
  font: 650 0.84rem/1 var(--f-titulo); color: var(--tinta);
}
.chip-loja i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.chip-loja.sem-loja { --cor: var(--coral); border-style: dashed; color: var(--coral-700); background: #fff; }

.comanda-rodape {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 10px; border-top: 1.5px dashed var(--linha);
}
.total { font: 600 1rem/1 var(--f-mono); }
.qtd { color: var(--tinta-3); font-size: 0.88rem; }

.comanda-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.comanda-acoes.compacto { margin-top: 4px; }
.comanda-acoes.compacto .botao { min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
.comanda-acoes.compacto .botao-primario { flex: 1 1 auto; }

/* chegada e entrada */
.comanda.entrada { animation: sobe 0.42s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--atraso, 0ms); }
@keyframes sobe { from { opacity: 0; translate: 0 10px; } }
.comanda.chegou { animation: chega 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chega {
  0% { opacity: 0; translate: 0 -14px; box-shadow: 0 0 0 0 rgb(255 183 3 / 0%); }
  20% { opacity: 1; translate: 0 0; box-shadow: 0 0 0 6px rgb(255 183 3 / 70%); }
  100% { box-shadow: var(--sombra-1); }
}

/* vazio e falhas */
.vazio { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; text-align: center; }
.vazio-sol {
  position: relative; display: grid; place-items: center;
  width: 92px; height: 92px; margin-bottom: 10px; border-radius: 50%;
  background: var(--sol-100); color: #e09a00;
}
.vazio-sol .icone { width: 44px; height: 44px; }
.vazio-sol::after { content: ''; position: absolute; left: -24px; right: -24px; bottom: -10px; height: 10px; background: var(--onda-svg) 0 0 / 24px 10px repeat-x; opacity: 0.45; }
.vazio h2 { font-size: 1.35rem; }
.vazio p { color: var(--tinta-2); max-width: 32ch; }

.falha { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--tinta-2); }
.falha > .icone { width: 34px; height: 34px; color: var(--coral); }

.app-falha { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.falha-geral { display: grid; justify-items: center; gap: 14px; max-width: 420px; text-align: center; }
.falha-geral img { width: 160px; margin-bottom: 12px; }
.falha-geral > .icone { width: 36px; height: 36px; color: var(--coral); }
.falha-geral p { color: var(--tinta-2); }

/* esqueletos */
.esqueletos { display: grid; gap: 14px; }
.esqueleto-comanda { gap: 12px; border-left-color: var(--areia-2); }
.esqueleto {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--areia-2) 0%, #f6f1e6 40%, var(--areia-2) 80%) 0 0 / 300% 100%;
  animation: brilho 1.3s ease-in-out infinite;
}
.esqueleto.alto { height: 26px; width: 55%; }
.esqueleto.curto { width: 35%; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------------------------------------------------------------- detalhe (ficha) */

.detalhe-vazio {
  display: grid; justify-items: center; align-content: center; gap: 14px;
  min-height: 360px; padding: 32px; text-align: center; color: var(--tinta-2);
  border: 2px dashed var(--linha-forte); border-radius: var(--raio);
}
.detalhe-vazio-comanda { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--papel); color: var(--mar-500); box-shadow: var(--sombra-1); rotate: -6deg; }
.detalhe-vazio-comanda .icone { width: 36px; height: 36px; }
.detalhe-vazio p { max-width: 30ch; }

.ficha {
  --faixa: var(--tinta-3);
  position: relative;
  display: grid; gap: 4px;
  padding: 26px 28px 22px;
  background: var(--papel);
  border-radius: 3px 3px var(--raio) var(--raio);
  border-top: 6px solid var(--faixa);
  box-shadow: var(--sombra-1);
}
.ficha[data-status='processing'] { --faixa: var(--coral); }
.ficha[data-status='em-separacao'] { --faixa: var(--sol); }
.ficha[data-status='enviado'] { --faixa: var(--mar-500); }
.ficha[data-status='retirada-liberada'] { --faixa: var(--onda); }
.ficha[data-status='completed'] { --faixa: var(--verde); }
.carregando-ficha { gap: 16px; min-height: 280px; align-content: start; }

.ficha .voltar, .config .voltar {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start;
  margin: -6px 0 10px -6px; padding: 6px 8px; border-radius: 8px;
  font: 650 0.92rem/1 var(--f-titulo); text-decoration: none; color: var(--mar-700);
}
.ficha .voltar:hover, .config .voltar:hover { background: var(--mar-100); }
@media (min-width: 980px) { .ficha .voltar { display: none; } }

.ficha-topo { display: grid; gap: 12px; padding-bottom: 18px; }
.ficha-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ficha-titulo .relogio { margin-left: auto; font-size: 0.92rem; padding: 6px 12px 6px 9px; }
.ficha-quando { color: var(--tinta-2); font-size: 0.92rem; }
.ficha-assumido { color: var(--tinta-2); font-size: 0.9rem; }
.ficha > .comanda-acoes { padding: 4px 0 20px; }
.ficha > .comanda-acoes .botao { min-height: 48px; }
.ficha > .comanda-acoes .botao-primario { min-width: 200px; }
.sem-acoes { padding: 12px 14px; margin-bottom: 18px; border-radius: var(--raio-p); background: var(--areia); color: var(--tinta-2); font-size: 0.95rem; }

.bloco { display: grid; gap: 10px; padding: 18px 0; border-top: 1.5px dashed var(--linha); }
.bloco h3 { font: 750 0.75rem/1 var(--f-titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); }
.bloco-principal { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.08rem; }
.bloco-principal .icone { color: var(--mar-700); }
.bloco .botao { justify-self: start; }
.contatos { display: flex; flex-wrap: wrap; gap: 8px; }
.endereco { color: var(--tinta); line-height: 1.45; }

.bloco.observacao {
  position: relative; margin: 0 0 18px; padding: 14px 16px 14px 18px; border: 0;
  background: var(--sol-100); border-radius: 4px var(--raio-p) var(--raio-p) 4px;
  border-left: 5px solid var(--sol);
  rotate: -0.4deg;
}
.bloco.observacao h3 { color: var(--sol-700); }
.bloco.observacao p { font-size: 1.05rem; white-space: pre-line; }

.itens { list-style: none; margin: 0; padding: 0; }
.itens li {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dotted var(--linha-forte);
}
.itens li:last-child { border-bottom: 0; }
.item-qtd { font: 600 1rem/1 var(--f-mono); color: var(--mar-700); }
.item-nome { font-weight: 700; }
.item-nome small { display: block; font-weight: 400; color: var(--tinta-2); font-size: 0.86rem; margin-top: 2px; }
.item-total { font: 500 0.95rem/1 var(--f-mono); color: var(--tinta-2); }

.valores dl { display: grid; gap: 6px; margin: 0; }
.valor { display: flex; justify-content: space-between; gap: 12px; }
.valor dt { color: var(--tinta-2); }
.valor dd { margin: 0; font-family: var(--f-mono); font-weight: 500; }
.valor.total { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--tinta); }
.valor.total dt { color: var(--tinta); font: 750 1.05rem/1.2 var(--f-titulo); }
.valor.total dd { font-size: 1.15rem; font-weight: 600; }

.historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.historico li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0 7px 18px; font-size: 0.93rem; }
.historico li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--linha-forte); }
.historico li::after { content: ''; position: absolute; left: 7px; top: 24px; bottom: -8px; width: 1px; background: var(--linha); }
.historico li:last-child::after { display: none; }
.historico time { font: 500 0.82rem/1.6 var(--f-mono); color: var(--tinta-3); }
.historico li.do-painel::before { background: var(--mar-500); box-shadow: 0 0 0 3px var(--mar-100); }
.historico li.do-painel span { color: var(--mar-900); }

@media (max-width: 720px) {
  .ficha { padding: 20px 18px 16px; }
  .ficha > .comanda-acoes .botao { flex: 1 1 100%; }
  .numero.grande { font-size: 1.7rem; }
  .historico li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------- diálogos */

.dialogo {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 18px;
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-3);
}
.dialogo[open] { display: flex; flex-direction: column; animation: abre 0.2s cubic-bezier(.2,.8,.2,1); }
.dialogo::backdrop { background: rgb(5 40 66 / 55%); backdrop-filter: blur(3px); }
@keyframes abre { from { opacity: 0; translate: 0 12px; scale: 0.98; } }
.dialogo-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 24px; }
.dialogo-topo h2 { font-size: 1.25rem; font-weight: 750; }
.dialogo-topo .botao-icone { width: 38px; height: 38px; border-color: transparent; background: transparent; }
.dialogo-corpo { display: grid; gap: 16px; padding: 8px 24px 20px; overflow: auto; }
.dialogo-texto { color: var(--tinta-2); }
.dialogo-rodape {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
  padding: 14px 24px 18px; border-top: 1.5px dashed var(--linha);
}

@media (max-width: 600px) {
  .dialogo { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; }
  .dialogo[open] { animation: sobe-folha 0.24s cubic-bezier(.2,.8,.2,1); }
  .dialogo-rodape { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .dialogo-rodape .botao { flex: 1; }
}
@keyframes sobe-folha { from { translate: 0 40%; } }

.escolha-lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.escolha-loja {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 16px; border-radius: 12px;
  border: 2px solid var(--linha); background: #fff; cursor: pointer;
  font: 700 1rem/1.1 var(--f-titulo);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.escolha-loja input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-loja i { width: 14px; height: 14px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 20%, transparent); flex: none; }
.escolha-loja:hover { border-color: color-mix(in srgb, var(--cor) 45%, #fff); }
.escolha-loja:has(input:checked) { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 9%, #fff); }
.escolha-loja:has(input:focus-visible) { outline: 3px solid var(--onda); outline-offset: 2px; }

.form-dialogo { display: grid; gap: 16px; }
.campo-cor { grid-template-columns: 1fr auto; align-items: center; }

.senha-gerada { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--mar-100); }
.senha-gerada code { flex: 1; font: 600 1.25rem/1.2 var(--f-mono); letter-spacing: 0.04em; color: var(--mar-900); user-select: all; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- avisos rápidos */

.avisos {
  position: fixed; z-index: 90; top: calc(var(--topo-h) + 16px); right: 20px;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 12px;
  background: var(--tinta); color: #fff; box-shadow: var(--sombra-3);
  font-weight: 700; font-size: 0.95rem; line-height: 1.35;
  animation: aviso-entra 0.3s cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
}
.aviso .icone { margin-top: 1px; }
.aviso-sucesso { background: var(--verde); }
.aviso-atencao { background: var(--sol); color: var(--tinta); }
.aviso-erro { background: var(--coral); }
.aviso-info { background: var(--mar-800); }
.aviso.saindo { animation: aviso-sai 0.32s ease-in forwards; }
@keyframes aviso-entra { from { opacity: 0; translate: 24px 0; } }
@keyframes aviso-sai { to { opacity: 0; translate: 24px 0; } }
@media (max-width: 720px) {
  .avisos { left: 16px; right: 16px; width: auto; top: calc(var(--topo-h) + 12px); }
  @keyframes aviso-entra { from { opacity: 0; translate: 0 -12px; } }
  @keyframes aviso-sai { to { opacity: 0; translate: 0 -12px; } }
}

/* ---------------------------------------------------------------- modo balcão: faixa do alarme */

.faixa-alarme {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px var(--lateral) max(16px, env(safe-area-inset-bottom));
  color: #fff;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 7%) 0 18px, transparent 18px 36px) 0 0 / 51px 51px,
    var(--coral);
  box-shadow: 0 -12px 40px -10px rgb(161 31 31 / 55%);
  animation: faixa-sobe 0.35s cubic-bezier(.2,.8,.2,1), listras 1.2s linear infinite;
}
@keyframes faixa-sobe { from { translate: 0 100%; } }
@keyframes listras { to { background-position: 51px 0, 0 0; } }
.faixa-onda {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q12 0 24 5 T48 5 V10 H0z' fill='%23d12c2c'/%3E%3C/svg%3E") 0 0 / 36px 9px repeat-x;
  animation: mare 1.6s linear infinite;
}
.faixa-cabeca { display: flex; align-items: center; gap: 12px; }
.faixa-cabeca strong { font: 800 1.35rem/1 var(--f-titulo); letter-spacing: -0.01em; white-space: nowrap; }
.faixa-sino { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--coral); }
.faixa-sino .icone { width: 26px; height: 26px; animation: balanca 1.4s ease-in-out infinite; transform-origin: 50% 10%; }
.faixa-pedidos { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.faixa-pedido {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 55%); background: rgb(255 255 255 / 12%); color: #fff;
  font-weight: 700; font-size: 0.92rem;
}
.faixa-pedido:hover { background: rgb(255 255 255 / 22%); }
.faixa-pedido b { font-family: var(--f-mono); }
.faixa-pedido em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgb(0 0 0 / 18%); font-size: 0.8rem; }
.faixa-silenciar {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #fff; color: var(--coral-700); font: 750 0.95rem/1 var(--f-titulo);
}
.faixa-silencio { font: 650 0.9rem/1 var(--f-titulo); padding: 10px 14px; border-radius: 999px; background: rgb(0 0 0 / 18%); }
.faixa-alarme.silenciada { background: var(--tinta); animation: none; box-shadow: 0 -8px 30px -12px rgb(0 0 0 / 40%); }
.faixa-alarme.silenciada .faixa-onda { filter: grayscale(1) brightness(0.35); animation: none; }
.faixa-alarme.silenciada .faixa-sino { color: var(--tinta); }
.faixa-alarme.silenciada .faixa-sino .icone { animation: none; }

body:has(.faixa-alarme) .conteudo { padding-bottom: 150px; }
body:has(.faixa-alarme:not(.silenciada))::after {
  content: ''; position: fixed; inset: 0; z-index: 55; pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--coral);
  animation: borda-alarme 1.2s ease-in-out infinite;
}
@keyframes borda-alarme { 50% { box-shadow: inset 0 0 0 5px rgb(209 44 44 / 15%); } }

@media (max-width: 720px) {
  .faixa-alarme { gap: 10px; padding-top: 12px; }
  .faixa-cabeca strong { font-size: 1.1rem; }
  .faixa-sino { width: 38px; height: 38px; }
  .faixa-pedidos { order: 3; flex-basis: 100%; }
  .faixa-silenciar { margin-left: auto; min-height: 40px; padding: 0 14px; }
}

/* som ainda bloqueado pelo navegador (depois de recarregar): o primeiro clique libera */
.aviso-som {
  position: fixed; z-index: 70; top: calc(var(--topo-h) + 16px); left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; border-radius: 999px;
  border: 2px solid #e5a400; background: var(--sol); color: var(--tinta);
  box-shadow: 0 10px 28px -10px rgb(138 93 0 / 55%);
  font: 600 0.92rem/1.3 var(--f-texto); text-align: left;
  animation: aparece 0.3s ease-out, cutuca 3s ease-in-out 1s infinite;
}
.aviso-som strong { font-family: var(--f-titulo); }
.aviso-som .icone { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; color: var(--sol-700); }
@keyframes aparece { from { opacity: 0; translate: -50% -8px; } }
@keyframes cutuca { 0%, 86%, 100% { scale: 1; } 92% { scale: 1.04; } }

/* ---------------------------------------------------------------- configurações */

.config { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.config .voltar { margin-bottom: 0; }
.config-titulo { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.config-abas { margin-bottom: 6px; }
.config-corpo { display: grid; gap: 16px; }

.cartao-config {
  position: relative; display: grid; gap: 18px;
  padding: 26px 28px; background: var(--papel);
  border-radius: 3px 3px var(--raio) var(--raio);
  box-shadow: var(--sombra-1);
}
.cartao-config::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--picote); }
.cartao-config h2 { font-size: 1.3rem; font-weight: 750; }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cartao-descricao { color: var(--tinta-2); margin-top: -8px; max-width: 62ch; }
.cartao-rodape { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1.5px dashed var(--linha); }
.cartao-rodape .botao { min-width: 140px; }

.tabela-rolagem { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.tabela-horarios { width: 100%; border-collapse: collapse; min-width: 520px; }
.tabela-horarios th, .tabela-horarios td { padding: 6px 8px; text-align: left; }
.tabela-horarios thead th { font: 750 0.75rem/1 var(--f-titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); padding-bottom: 10px; }
.tabela-horarios tbody tr { border-top: 1px dotted var(--linha-forte); }
.tabela-horarios tbody th { font-weight: 700; width: 34%; }
.tabela-horarios input[type='time'] { min-height: 42px; padding: 6px 10px; font-family: var(--f-mono); }
.tabela-horarios tr.fechado td { opacity: 0.3; pointer-events: none; }

.previa-caixa { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--raio-p); background: var(--mar-100); border-left: 4px solid var(--mar-500); }
.previa-caixa small { color: var(--mar-800); font-weight: 700; }
.previa { color: var(--tinta); }

.lista-config { list-style: none; margin: 0; padding: 0; display: grid; }
.item-config { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px dotted var(--linha-forte); }
.item-config:first-child { border-top: 0; }
.item-config.inativo { opacity: 0.6; }
.item-config-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.item-config-texto strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--f-titulo); font-size: 1.02rem; }
.item-config-texto > span { color: var(--tinta-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.item-config-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.bolinha { width: 16px; height: 16px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 18%, transparent); flex: none; margin: 0 6px; }
.etiqueta {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--mar-100); color: var(--mar-800);
  font: 700 0.72rem/1 var(--f-titulo); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal;
}
.etiqueta.inativa { background: var(--coral-100); color: var(--coral-700); }

@media (max-width: 720px) {
  .cartao-config { padding: 22px 18px; }
  .config-titulo { font-size: 1.6rem; }
  .item-config { flex-wrap: wrap; }
  .item-config-acoes { width: 100%; justify-content: flex-start; padding-left: 46px; }
}

/* ---------------------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  body:has(.faixa-alarme:not(.silenciada))::after { box-shadow: inset 0 0 0 5px var(--coral); }
}