:root {
  color-scheme: light dark;
  --fundo: #f5f4f0; --superficie: #fff; --superficie-2: #efede7; --texto: #1b1a17; --suave: #5f5b53; --linha: #e3dfd6;
  --marca: #17654f; --marca-forte: #10503e; --marca-suave: #e2f0ea; --marca-texto: #fff;
  --perigo: #b42318; --perigo-suave: #fdecea; --aviso: #8a5300; --aviso-suave: #fff3dc; --info: #24456b;
  --sombra: 0 1px 2px rgb(30 25 10 / .05), 0 6px 20px rgb(30 25 10 / .06);
  --r-sm: 10px; --r: 16px; --r-lg: 24px;
  --rapido: 150ms; --medio: 240ms; --curva: cubic-bezier(.2, .8, .2, 1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111312; --superficie: #1a1d1b; --superficie-2: #232724; --texto: #ecebe6; --suave: #a7a59d; --linha: #2e3330;
    --marca: #46b98f; --marca-forte: #5fcca2; --marca-suave: #17302a; --marca-texto: #06140e;
    --perigo: #f47c70; --perigo-suave: #3a1c1a; --aviso: #f2b44c; --aviso-suave: #3a2b10; --info: #2c5282;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
  }
}

* { box-sizing: border-box }
html, body { background: var(--fundo) }
body { margin: 0; min-height: 100dvh; -webkit-tap-highlight-color: transparent }
[hidden] { display: none !important }
h1, h2, h3, p { margin: 0 }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer; touch-action: manipulation }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.ic.pequeno { width: 1em; height: 1em }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--superficie); font-size: 15px; font-weight: 600;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido) var(--curva), opacity var(--rapido);
}
.btn:hover { border-color: color-mix(in srgb, var(--texto) 30%, var(--linha)) }
.btn:active { transform: scale(.97) }
.btn.primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto) }
.btn.primario:hover { background: var(--marca-forte); border-color: var(--marca-forte) }
.btn.perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, var(--linha)) }
.btn.perigo:hover { background: var(--perigo-suave) }
.btn.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--suave) }
.btn.fantasma:hover { background: var(--superficie-2); color: var(--texto) }
.btn.pequeno { min-height: 40px; padding: 0 12px; font-size: 14px }
.btn:disabled, .btn[aria-busy=true] { opacity: .6; cursor: progress }
.btn[aria-busy=true]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite }
@keyframes gira { to { transform: rotate(360deg) } }

/* campos */
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--suave) }
.campo input, .campo select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto); font-size: 16px; font-weight: 400;
}
.campo input:focus-visible, .campo select:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 28%, transparent) }
.erro-campo { min-height: 1.4em; color: var(--perigo); font-size: 14px; font-weight: 500 }

.avatar {
  --h: 160; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: hsl(var(--h) 45% 88%); color: hsl(var(--h) 50% 26%); font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
@media (prefers-color-scheme: dark) { .avatar { background: hsl(var(--h) 28% 24%); color: hsl(var(--h) 60% 84%) } }

.selo { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--superficie-2); color: var(--suave) }
.selo .ic { width: 44px; height: 44px }
.selo-txt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap }
.selo-txt.ok { background: var(--marca-suave); color: var(--marca) }
.selo-txt.aviso { background: var(--aviso-suave); color: var(--aviso) }
.selo-txt.perigo { background: var(--perigo-suave); color: var(--perigo) }
.selo-txt.neutro { background: var(--superficie-2); color: var(--suave) }
.spinner { width: 36px; height: 36px; border: 4px solid var(--linha); border-top-color: var(--marca); border-radius: 50%; animation: gira .8s linear infinite }
.vazio { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; border: 2px dashed var(--linha); border-radius: var(--r-lg); color: var(--suave); text-align: center }
.vazio .ic { width: 40px; height: 40px; color: var(--marca) }
.vazio h2 { color: var(--texto); font-size: 20px }
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.98) } }
@keyframes aparece { from { opacity: 0 } }

dialog { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--superficie); color: var(--texto); box-shadow: 0 24px 64px rgb(0 0 0 / .3) }
dialog[open] { animation: entra var(--medio) var(--curva) }
dialog::backdrop { background: rgb(10 12 10 / .55) }

/* ---------- totem ---------- */
/* no celular o painel "se desfaz" para os nomes virem antes do QR */
.totem { display: flex; flex-direction: column; gap: 24px; min-height: 100dvh; padding: 24px 20px 32px }
.painel { display: contents }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.loja { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700 }
.loja .ic { width: 28px; height: 28px; color: var(--marca) }
.conexao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--aviso-suave); color: var(--aviso); font-size: 14px; font-weight: 600 }
.relogio { font-size: clamp(64px, 14vw, 112px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1 }
.relogio small { margin-left: 6px; color: var(--suave); font-size: .3em; font-weight: 600; letter-spacing: 0 }
.data { margin-top: 10px; color: var(--suave); font-size: 18px }
.data::first-letter { text-transform: uppercase }
.lista { display: flex; flex-direction: column; gap: 16px }
.instrucao { font-size: 22px }
.nomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px }
.nome {
  display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 18px; text-align: left;
  border: 1px solid var(--linha); border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra);
  transition: transform var(--rapido) var(--curva), border-color var(--rapido), background var(--rapido);
  animation: entra var(--medio) var(--curva) backwards;
}
.nome:nth-child(2) { animation-delay: 40ms } .nome:nth-child(3) { animation-delay: 80ms } .nome:nth-child(n+4) { animation-delay: 120ms }
.nome:hover { border-color: var(--marca) }
.nome:active { transform: scale(.97); background: var(--marca-suave) }
.nome .avatar { width: 60px; height: 60px; font-size: 22px }
.nome-texto { display: grid; gap: 2px; min-width: 0 }
.nome-texto b { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere }
.proximo { color: var(--marca); font-size: 15px; font-weight: 600 }
.proximo .ic { margin-right: 4px; vertical-align: -.12em }
.ultima { color: var(--suave); font-size: 14px }

.pin { display: grid; gap: 16px; padding: 24px; text-align: center }
.pin:focus { outline: none }
.pin-cab { display: grid; justify-items: center; gap: 6px }
.pin-cab .avatar { width: 64px; height: 64px; font-size: 24px }
.pin-cab h2 { font-size: 24px; line-height: 1.2 }
.pin-cab p { color: var(--suave) }
.pin-cab p b { color: var(--marca) }
.pontos { display: flex; justify-content: center; gap: 18px; padding: 4px 0 }
.pontos span { width: 18px; height: 18px; border: 2px solid var(--suave); border-radius: 50%; transition: background var(--rapido), border-color var(--rapido), transform var(--rapido) var(--curva) }
.pontos span.cheio { background: var(--marca); border-color: var(--marca); transform: scale(1.12) }
.pontos.treme { animation: treme 320ms }
@keyframes treme { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.tecla {
  display: grid; place-items: center; min-height: 68px; border: 1px solid var(--linha); border-radius: var(--r);
  background: var(--superficie-2); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: transform var(--rapido) var(--curva), background var(--rapido);
}
.tecla:active { transform: scale(.94); background: var(--marca-suave) }
.tecla.acao { background: transparent; color: var(--suave) }
.tecla .ic { width: 28px; height: 28px }

.sucesso {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; background: var(--marca); color: var(--marca-texto); text-align: center; cursor: pointer;
  animation: aparece var(--medio) var(--curva);
}
.sucesso.repetida { background: var(--info); color: #fff }
.selo-grande { display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: rgb(255 255 255 / .16); animation: entra 320ms var(--curva) }
.selo-grande .ic { width: 68px; height: 68px; stroke-width: 2.5 }
.selo-grande .ic.tracar { stroke-dasharray: 24; stroke-dashoffset: 24; animation: traca 420ms 140ms var(--curva) forwards }
@keyframes traca { to { stroke-dashoffset: 0 } }
.sucesso h2 { font-size: clamp(32px, 6vw, 52px); line-height: 1.15 }
.sucesso p { font-size: 24px; opacity: .92 }
.sucesso small { margin-top: 16px; font-size: 15px; opacity: .8 }
.sucesso .tempo { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: rgb(255 255 255 / .4); transform-origin: left; animation: encolhe 3s linear forwards }
@keyframes encolhe { to { transform: scaleX(0) } }

@media (min-width: 900px) {
  .totem { display: grid; grid-template-columns: minmax(340px, 400px) 1fr; gap: 0; padding: 0 }
  .painel { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100dvh; padding: 32px; border-right: 1px solid var(--linha); background: var(--superficie-2) }
  .lista { justify-content: center; min-height: 100dvh; padding: 40px }
  .lista > * { width: 100%; max-width: 860px; margin: 0 auto }
}

/* ---------- celular e pareamento ---------- */
.resultado { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px }
.cartao-resultado { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); padding: 40px 24px; border-radius: var(--r-lg); background: var(--superficie); box-shadow: var(--sombra); text-align: center; animation: entra var(--medio) var(--curva) }
.cartao-resultado.ok .selo { background: var(--marca-suave); color: var(--marca) }
.cartao-resultado.erro .selo { background: var(--perigo-suave); color: var(--perigo) }
.cartao-resultado.info .selo { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info) }
.cartao-resultado.ok .selo .ic { stroke-dasharray: 24; stroke-dashoffset: 24; animation: traca 420ms 140ms var(--curva) forwards }
.cartao-resultado h1 { font-size: 26px; line-height: 1.2 }
.cartao-resultado p { color: var(--suave); font-size: 17px }
.cartao-resultado .btn { min-width: 180px; min-height: 52px; margin-top: 12px; font-size: 18px }
@media (prefers-color-scheme: dark) { .cartao-resultado.info .selo { color: #9cc3ef } }

/* ---------- admin ---------- */
.login { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px }
.login form { display: grid; gap: 16px; width: min(380px, 100%); padding: 32px 28px; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--superficie); box-shadow: var(--sombra) }
.login-marca { display: grid; justify-items: center; gap: 6px; margin-bottom: 4px; text-align: center }
.login-marca .selo { width: 64px; height: 64px; background: var(--marca-suave); color: var(--marca) }
.login-marca .selo .ic { width: 32px; height: 32px }
.login-marca h1 { font-size: 24px }
.login-marca p { color: var(--suave) }
.senha { position: relative }
.senha input { padding-right: 52px }
.senha button { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--suave); transform: translateY(-50%) }

.admin-topo { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--linha); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(8px) }
.admin-topo-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 1040px; margin: 0 auto; padding: 12px 16px }
.marca-admin { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 18px; font-weight: 700 }
.marca-admin .ic { width: 26px; height: 26px; color: var(--marca) }
.marca-admin span { color: var(--suave); font-weight: 500 }
.abas { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie-2); overflow-x: auto }
.aba-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background var(--rapido), color var(--rapido) }
.aba-btn:hover { color: var(--texto) }
.aba-btn[aria-selected=true] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgb(0 0 0 / .12) }
.admin-corpo { max-width: 1040px; margin: 0 auto; padding: 24px 16px 96px }
.aba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px }
.cartao { padding: 20px; border: 1px solid var(--linha); border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra) }
.cartao-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.cartao-cab h2 { font-size: 18px }
.cartao-cab p { color: var(--suave); font-size: 14px }
.barra { display: flex; flex-wrap: wrap; align-items: end; gap: 12px }
.barra .campo { flex: 1; min-width: 180px }
.barra .campo.largo { flex: 3; min-width: 220px }
.barra + .tabela { margin-top: 16px }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.numero { padding: 16px 18px; border: 1px solid var(--linha); border-radius: var(--r); background: var(--superficie) }
.numero span { color: var(--suave); font-size: 14px; font-weight: 600 }
.numero b { display: block; margin-top: 2px; font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.2 }
.numero.aviso b { color: var(--aviso) }

.tabela { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-size: 15px }
th { padding: 10px 12px; border-bottom: 1px solid var(--linha); color: var(--suave); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase }
td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle }
tbody tr:last-child td { border-bottom: 0 }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
.num .selo-txt { margin-right: 8px }
.fds td { background: color-mix(in srgb, var(--superficie-2) 70%, transparent) }
.hoje td { background: var(--marca-suave) }
.hoje td:first-child { box-shadow: inset 3px 0 var(--marca) }
.dia-semana { margin-left: 8px; color: var(--suave); font-size: 13px }
.marcas { display: flex; flex-wrap: wrap; gap: 6px }
.marca-hora { padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--superficie-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums }
.marca-hora.ajuste { border-style: dashed; border-color: var(--suave); background: transparent }
.total td { border-top: 2px solid var(--linha); font-weight: 700 }
.legenda { margin-top: 12px; color: var(--suave); font-size: 13px }
.anulada td:not(.acoes) { color: var(--suave); text-decoration: line-through }
.acoes { text-align: right; white-space: nowrap }
.vazio-pequeno { padding: 24px; color: var(--suave); text-align: center }
.so-print { display: none }
.assinaturas { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px }
.assinaturas div { padding-top: 6px; border-top: 1px solid #000; font-size: 13px; text-align: center }

.lista-itens { display: grid; gap: 10px }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-sm) }
.item.inativo { opacity: .72 }
.item-texto { display: grid; flex: 1; min-width: 160px }
.item-texto b { overflow-wrap: anywhere }
.item-texto span { color: var(--suave); font-size: 14px }
.item-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px }
.ic-caixa { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--superficie-2); color: var(--suave) }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px }
.duas .cartao { display: flex; flex-direction: column; justify-content: space-between; gap: 4px }
.pareamento { display: flex; flex-wrap: wrap; align-items: center; gap: 24px }
.pareamento img { width: 184px; height: 184px; padding: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; image-rendering: pixelated }
.pareamento-info { display: grid; flex: 1; gap: 10px; min-width: 240px; justify-items: start }
.pareamento-info p { color: var(--suave) }
.link-copia { display: flex; gap: 8px; width: 100% }
.link-copia input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--superficie-2); color: var(--suave); font-size: 14px }

.modal { display: grid; gap: 16px; padding: 24px }
.modal h2 { font-size: 20px; line-height: 1.3 }
.modal p { color: var(--suave) }
.modal-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px }
.toasts { position: fixed; bottom: 24px; left: 50%; z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%) }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--texto); color: var(--fundo); box-shadow: var(--sombra); font-weight: 500; animation: entra var(--medio) var(--curva) }
.toast.ok .ic { color: #5fcca2 }
.toast.erro .ic { color: #f47c70 }

@media (max-width: 640px) {
  .marca-admin { font-size: 16px }
  .abas { order: 3; width: 100% }
  .aba-btn { flex: 1; justify-content: center; padding: 0 10px }
  .cartao { padding: 16px }
  td, th { padding: 8px }
}
@media (max-width: 420px) {
  .aba-btn .ic { display: none }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important }
  .selo-grande .ic.tracar, .cartao-resultado.ok .selo .ic { stroke-dashoffset: 0 }
  .sucesso .tempo { display: none }
}

@media print {
  :root { color-scheme: light; --fundo: #fff; --superficie: #fff; --superficie-2: #f3f3f3; --texto: #000; --suave: #444; --linha: #bbb; --marca-suave: #fff }
  .admin-topo, .nao-print, .toasts { display: none !important }
  .so-print { display: block }
  .assinaturas.so-print { display: grid }
  .admin-corpo { max-width: none; padding: 0 }
  .cartao { padding: 0; border: 0; box-shadow: none }
  table { font-size: 11px }
  td, th { padding: 4px 6px }
  .marca-hora { padding: 0 4px; font-size: 11px }
  .fds td { background: #f3f3f3 }
  .hoje td:first-child { box-shadow: none }
}

/* espelho: uma coluna por batida */
.espelho .col-dia { width: 84px; white-space: nowrap }
.espelho .col-hora { text-align: center }
.espelho td.col-hora .marca-hora + .marca-hora { margin-left: 4px }
.espelho .falta { color: var(--suave) }
.espelho .curto { display: none }
@media (max-width: 640px) {
  .espelho .longo { display: none }
  .espelho .curto { display: inline }
  .espelho th, .espelho td { padding: 7px 4px }
  .espelho .col-dia { width: auto }
  .espelho .dia-semana { display: block; margin: 0; font-size: 11px; line-height: 1.1 }
  .espelho .marca-hora { padding: 0; border: 0; background: none; font-size: 13px }
  .espelho .num { width: auto; font-size: 13px }
  .espelho .num .selo-txt { margin: 0; padding: 1px 6px; font-size: 10px }
}
.espelho tr.sem td { padding-top: 6px; padding-bottom: 6px }
.espelho tr.sem:not(.hoje) td { color: var(--suave) }
.espelho .num { width: 110px }
@media print {
  .espelho tr.sem td { padding-top: 2px; padding-bottom: 2px }
}

/* select com seta própria */
.campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  transition: border-color var(--rapido), box-shadow var(--rapido) }
.campo select:hover, .campo input:hover { border-color: color-mix(in srgb, var(--texto) 30%, var(--linha)) }
.campo select option { background: var(--superficie); color: var(--texto) }
@media (prefers-color-scheme: dark) {
  .campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a59d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") }
}

/* resumo de todos */
.avatar.pequeno { width: 32px; height: 32px; font-size: 13px }
.pessoa { display: flex; align-items: center; gap: 10px; font-weight: 600 }
.resumo-tabela tbody tr.clicavel { cursor: pointer; transition: background var(--rapido) }
.resumo-tabela tbody tr.clicavel:hover td { background: var(--superficie-2) }
.resumo-tabela .acoes .btn .ic { margin-left: 2px }
@media (max-width: 640px) { .resumo-tabela .acoes { display: none } }

/* seletor de mês e campos curtos */
#mes-rotulo { display: block }
.mes-nav { display: flex; align-items: center; gap: 6px; min-height: 44px }
.mes-nav output { flex: 1; min-width: 140px; text-align: center; color: var(--texto); font-size: 16px; font-weight: 600 }
.btn.icone-btn { width: 44px; padding: 0 }
.btn.icone-btn:disabled { opacity: .35; cursor: not-allowed }
.barra .campo.medio { flex: 0 1 160px; min-width: 140px }
.barra .campo.curto { flex: 0 1 110px; min-width: 96px }
a.btn { color: var(--texto); text-decoration: none }

/* celular: confirmação antes de bater */
.avatar.grande { width: 72px; height: 72px; font-size: 26px }
.confirmar .ola { color: var(--suave); font-size: 17px }
.confirmar h1 b { color: var(--marca) }
.confirmar .selo-txt { padding: 4px 12px; font-size: 14px }
.aviso-txt { color: var(--aviso) !important; font-size: 15px !important }
.cartao-resultado .btn.grande { min-width: 240px; min-height: 60px; font-size: 20px }
.cartao-resultado .btn.fantasma { min-height: 44px; margin-top: 0; font-size: 15px }

.legenda a { color: var(--marca); font-weight: 600 }
.dica { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--superficie); color: var(--suave); font-size: 15px; order: 3 }
.dica .ic { width: 28px; height: 28px; color: var(--marca) }
.dica strong { display: block; color: var(--texto); font-size: 16px }
.dica b { color: var(--texto); overflow-wrap: anywhere }
@media (min-width: 900px) { .dica { margin-top: auto } }