/* ==========================================================================
   Hora do Jogo — o placar eletrônico do ginásio.
   O tempo é o dado principal: dígitos de sete segmentos em âmbar de LED,
   com os segmentos apagados visíveis. Âmbar = tempo (agora, próximo jogo).
   Verde, areia e azul = esporte. O resto é cimento (claro) ou carcaça (escuro).
   Família única: Barlow (texto de trabalho) e Barlow Condensed (rótulos).
   ========================================================================== */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  /* cimento claro — arena de dia */
  --fundo: oklch(0.955 0.005 250);
  --superficie: oklch(0.992 0.002 250);
  --superficie-2: oklch(0.94 0.006 250);
  --superficie-3: oklch(0.905 0.008 250);
  --lateral: oklch(0.93 0.008 250);
  --linha: oklch(0.875 0.008 250);
  --linha-forte: oklch(0.79 0.011 250);
  --tinta: oklch(0.24 0.016 250);
  --tinta-2: oklch(0.39 0.016 250);
  --apagado: oklch(0.5 0.014 250);

  /* placar: a carcaça e o LED são o objeto, iguais nos dois temas */
  --carcaca: oklch(0.215 0.012 250);
  --carcaca-2: oklch(0.27 0.013 250);
  --carcaca-linha: oklch(0.34 0.014 250);
  --carcaca-rotulo: oklch(0.74 0.012 250);
  --led: oklch(0.83 0.165 74);
  --led-apagado: oklch(0.33 0.035 74);
  --tempo: oklch(0.66 0.16 62);          /* âmbar legível sobre fundo claro */

  /* ação principal = tinta da carcaça */
  --acao: var(--carcaca);
  --acao-tinta: oklch(0.98 0.004 250);
  --acao-hover: oklch(0.3 0.014 250);

  /* esportes */
  --futebol: oklch(0.56 0.14 152);
  --beach: oklch(0.6 0.1 58);
  --volei: oklch(0.55 0.15 255);

  /* estados */
  --ok: oklch(0.54 0.13 152);
  --alerta: oklch(0.58 0.14 62);
  --perigo: oklch(0.55 0.19 27);
  --info: oklch(0.55 0.13 255);

  --foco: oklch(0.66 0.16 62);
  --sombra: 0 12px 32px -12px oklch(0.25 0.02 250 / 0.28), 0 2px 6px -2px oklch(0.25 0.02 250 / 0.12);
  --raio: 10px;
  --raio-p: 7px;

  --fonte: "Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --fonte-rotulo: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  --t-1: 0.75rem;   /* 12 */
  --t-2: 0.8125rem; /* 13 */
  --t-3: 0.9375rem; /* 15 base */
  --t-4: 1.125rem;  /* 18 */
  --t-5: 1.375rem;  /* 22 */
  --t-6: 1.625rem;  /* 26 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --fundo: oklch(0.185 0.012 250);
    --superficie: oklch(0.225 0.013 250);
    --superficie-2: oklch(0.26 0.014 250);
    --superficie-3: oklch(0.3 0.015 250);
    --lateral: oklch(0.165 0.012 250);
    --linha: oklch(0.31 0.015 250);
    --linha-forte: oklch(0.39 0.016 250);
    --tinta: oklch(0.95 0.005 250);
    --tinta-2: oklch(0.81 0.01 250);
    --apagado: oklch(0.67 0.012 250);
    --carcaca: oklch(0.14 0.01 250);
    --carcaca-2: oklch(0.2 0.012 250);
    --carcaca-linha: oklch(0.29 0.014 250);
    --tempo: oklch(0.83 0.165 74);
    --acao: oklch(0.95 0.005 250);
    --acao-tinta: oklch(0.2 0.012 250);
    --acao-hover: oklch(0.88 0.006 250);
    --futebol: oklch(0.72 0.15 152);
    --beach: oklch(0.78 0.1 70);
    --volei: oklch(0.72 0.13 255);
    --ok: oklch(0.74 0.14 152);
    --alerta: oklch(0.8 0.14 74);
    --perigo: oklch(0.7 0.17 27);
    --info: oklch(0.72 0.12 255);
    --foco: oklch(0.83 0.165 74);
    --sombra: 0 16px 40px -12px oklch(0 0 0 / 0.6), 0 2px 8px -2px oklch(0 0 0 / 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="escuro"] {
  --fundo: oklch(0.185 0.012 250);
  --superficie: oklch(0.225 0.013 250);
  --superficie-2: oklch(0.26 0.014 250);
  --superficie-3: oklch(0.3 0.015 250);
  --lateral: oklch(0.165 0.012 250);
  --linha: oklch(0.31 0.015 250);
  --linha-forte: oklch(0.39 0.016 250);
  --tinta: oklch(0.95 0.005 250);
  --tinta-2: oklch(0.81 0.01 250);
  --apagado: oklch(0.67 0.012 250);
  --carcaca: oklch(0.14 0.01 250);
  --carcaca-2: oklch(0.2 0.012 250);
  --carcaca-linha: oklch(0.29 0.014 250);
  --tempo: oklch(0.83 0.165 74);
  --acao: oklch(0.95 0.005 250);
  --acao-tinta: oklch(0.2 0.012 250);
  --acao-hover: oklch(0.88 0.006 250);
  --futebol: oklch(0.72 0.15 152);
  --beach: oklch(0.78 0.1 70);
  --volei: oklch(0.72 0.13 255);
  --ok: oklch(0.74 0.14 152);
  --alerta: oklch(0.8 0.14 74);
  --perigo: oklch(0.7 0.17 27);
  --info: oklch(0.72 0.12 255);
  --foco: oklch(0.83 0.165 74);
  --sombra: 0 16px 40px -12px oklch(0 0 0 / 0.6), 0 2px 8px -2px oklch(0 0 0 / 0.4);
  color-scheme: dark;
}

/* ---------- base e superfícies do navegador ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 400 var(--t-3)/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--tempo);
  accent-color: var(--tinta);
  scrollbar-color: var(--linha-forte) transparent;
}
::selection { background: oklch(0.83 0.165 74 / 0.35); color: var(--tinta); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--t-6); line-height: 1.15; }
h2 { font-size: var(--t-5); line-height: 1.2; }
h3 { font-size: var(--t-4); line-height: 1.3; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, td, .tabela { font-variant-numeric: tabular-nums; }
.apagado { color: var(--apagado); }
.oculto { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.rotulo-placar, .tabela th, .campo > span, .agenda-cab b, .metrica-rotulo {
  font-family: var(--fonte-rotulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- dígitos de placar (SVG desenhado em ui.js) ---------- */
.digitos { display: inline-block; vertical-align: middle; overflow: visible; }
.digitos .seg { fill: var(--led-apagado); }
.digitos .seg.on { fill: var(--led); }
.digitos .pontos { fill: var(--led); }
.digitos.piscar .pontos { animation: piscar 1s steps(1, end) infinite; }
@keyframes piscar { 50% { opacity: 0.18; } }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca-selo { width: 34px; height: 34px; flex: none; }
.marca-nome { font-family: var(--fonte-rotulo); font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.marca-nome small { font-size: 0.72em; font-weight: 600; margin: 0 0.12em; color: var(--apagado); }

/* ---------- botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta);
  font-weight: 600; font-size: var(--t-3); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.08s;
}
.btn:hover { background: var(--superficie-2); border-color: var(--apagado); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; }
.btn.primario { background: var(--acao); color: var(--acao-tinta); border-color: transparent; }
.btn.primario:hover { background: var(--acao-hover); }
.btn.perigo { color: var(--perigo); border-color: color-mix(in oklab, var(--perigo) 45%, transparent); background: transparent; }
.btn.perigo:hover { background: color-mix(in oklab, var(--perigo) 9%, transparent); }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover { background: var(--superficie-2); }
.btn.pequeno { height: 32px; padding: 0 11px; font-size: var(--t-2); }
.btn.icone { width: 38px; padding: 0; }
.btn.pequeno.icone { width: 32px; }
.btn svg { width: 17px; height: 17px; flex: none; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: var(--t-2); font-weight: 600; color: var(--tinta-2); }
.campo small { color: var(--apagado); font-size: var(--t-1); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.entrada::placeholder { color: var(--apagado); }
textarea.entrada { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.entrada:hover { border-color: var(--apagado); }
.entrada:focus { border-color: var(--tempo); box-shadow: 0 0 0 3px oklch(0.83 0.165 74 / 0.25); }
.entrada.erro { border-color: var(--perigo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--perigo) 18%, transparent); }
.entrada:disabled { background: var(--superficie-2); color: var(--apagado); }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.grade-form .inteiro { grid-column: 1 / -1; }
.alternar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.alternar:last-child { border-bottom: 0; }
.chave { position: relative; width: 42px; height: 24px; flex: none; }
.chave input { opacity: 0; width: 0; height: 0; position: absolute; }
.chave i { position: absolute; inset: 0; border-radius: 99px; background: var(--superficie-3); border: 1px solid var(--linha-forte); transition: background 0.18s var(--ease); cursor: pointer; }
.chave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--superficie); box-shadow: 0 1px 2px oklch(0 0 0 / 0.25); transition: transform 0.2s var(--ease); }
.chave input:checked + i { background: var(--tinta); border-color: transparent; }
.chave input:checked + i::after { transform: translateX(18px); }
.chave input:focus-visible + i { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- avisos ---------- */
.aviso { padding: 10px 14px; border-radius: var(--raio-p); font-size: var(--t-2); border: 1px solid; }
.aviso.erro { color: var(--perigo); background: color-mix(in oklab, var(--perigo) 8%, var(--superficie)); border-color: color-mix(in oklab, var(--perigo) 35%, transparent); }
.aviso.ok { color: var(--ok); background: color-mix(in oklab, var(--ok) 8%, var(--superficie)); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.aviso.alerta { color: color-mix(in oklab, var(--alerta) 70%, var(--tinta)); background: color-mix(in oklab, var(--alerta) 10%, var(--superficie)); border-color: color-mix(in oklab, var(--alerta) 40%, transparent); }

/* ---------- placar (objeto: carcaça + LED) ---------- */
.placar {
  background: var(--carcaca); color: oklch(0.95 0.005 250);
  border-radius: var(--raio); padding: 4px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px;
  box-shadow: inset 0 0 0 1px var(--carcaca-linha), var(--sombra);
}
.placar-casa { background: var(--carcaca-2); border-radius: 7px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.placar-casa .rotulo-placar { font-size: var(--t-1); font-weight: 600; color: var(--carcaca-rotulo); }
.placar-casa .valor { display: flex; align-items: baseline; gap: 6px; min-height: 34px; }
.placar-casa .valor .unidade { font-family: var(--fonte-rotulo); font-weight: 700; font-size: var(--t-4); color: var(--led); letter-spacing: 0.04em; }
.placar-casa .valor .texto-led { font-family: var(--fonte-rotulo); font-weight: 700; font-size: 1.6rem; line-height: 34px; color: var(--led); letter-spacing: 0.02em; }
.placar-casa small { font-size: var(--t-2); color: var(--carcaca-rotulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-casa small b { color: oklch(0.95 0.005 250); font-weight: 600; }
.lampadas { display: flex; gap: 3px; margin-top: 2px; }
.lampadas i { flex: 1; height: 6px; border-radius: 2px; background: var(--led-apagado); }
.lampadas i.on { background: var(--led); }

/* ---------- login ---------- */
.tela-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.login-arte { background: var(--carcaca); color: oklch(0.95 0.005 250); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.login-arte .marca { color: oklch(0.95 0.005 250); }
.login-arte .marca-nome small { color: var(--carcaca-rotulo); }
.relogio-grande { display: flex; flex-direction: column; gap: 14px; }
.relogio-grande .rotulo-placar { font-size: var(--t-2); color: var(--carcaca-rotulo); }
.relogio-grande .digitos { width: min(100%, 520px); height: auto; }
.login-arte h1 { font-size: 2.25rem; font-weight: 700; max-width: 18ch; }
.login-arte p { color: var(--carcaca-rotulo); max-width: 46ch; }
.chips-esporte { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-esporte span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 6px; background: var(--carcaca-2); border: 1px solid var(--carcaca-linha); font-size: var(--t-2); font-weight: 600; }
.chips-esporte svg { width: 16px; height: 16px; }
.chips-esporte .futebol { color: oklch(0.72 0.15 152); }
.chips-esporte .beach_tenis { color: oklch(0.78 0.1 70); }
.chips-esporte .volei { color: oklch(0.72 0.13 255); }
.login-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--fundo); }
.login-cartao { width: min(380px, 100%); display: flex; flex-direction: column; gap: 18px; }
.demo-acessos { display: grid; gap: 8px; padding: 14px; border-radius: var(--raio); background: var(--superficie); border: 1px dashed var(--linha-forte); font-size: var(--t-2); }
.demo-acessos .btn { justify-content: flex-start; }

/* ---------- casca do app ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--lateral); border-right: 1px solid var(--linha); }
.lateral .topo-marca { padding: 2px 8px 18px; display: flex; flex-direction: column; gap: 10px; }
.local-atual { font-size: var(--t-2); color: var(--apagado); padding-left: 44px; margin-top: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--raio-p); text-decoration: none; color: var(--tinta-2); font-weight: 500; border: 1px solid transparent; transition: background 0.15s var(--ease); }
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.nav a.ativo { background: var(--superficie); border-color: var(--linha); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px oklch(0.25 0.02 250 / 0.06); }
.nav .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--tinta); color: var(--fundo); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.lateral .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--linha); }
.usuario { display: flex; gap: 10px; align-items: center; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t-2); background: var(--superficie-3); color: var(--tinta-2); flex: none; }
.avatar svg { width: 18px; height: 18px; }
.usuario div { min-width: 0; }
.usuario b, .usuario small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario small { color: var(--apagado); font-size: var(--t-1); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: color-mix(in oklab, var(--fundo) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.barra .titulo { display: flex; flex-direction: column; min-width: 0; }
.barra .titulo small { color: var(--apagado); font-size: var(--t-2); }
.barra .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.relogio-barra { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: var(--raio-p); background: var(--carcaca); box-shadow: inset 0 0 0 1px var(--carcaca-linha); }
.relogio-barra .digitos { height: 20px; width: auto; }
.menu-movel { display: none; }
.conteudo { padding: 24px 28px 56px; display: flex; flex-direction: column; gap: 20px; }
.faixa-alerta { display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: color-mix(in oklab, var(--alerta) 12%, var(--fundo)); border-bottom: 1px solid color-mix(in oklab, var(--alerta) 35%, transparent); font-size: var(--t-2); }
.faixa-alerta svg { width: 18px; height: 18px; flex: none; color: var(--alerta); }
.faixa-alerta .btn { margin-left: auto; }

/* ---------- blocos de conteúdo ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.cartao-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cartao-cab .acoes { margin-left: auto; display: flex; gap: 8px; }
.secao-cab { display: flex; align-items: baseline; gap: 12px; }
.secao-cab .apagado { font-size: var(--t-2); }

/* ---------- filtros / etiquetas ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.segmentos { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 9px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 6px; border: 0; background: transparent; color: var(--tinta-2); font-weight: 600; font-size: var(--t-2); cursor: pointer; transition: background 0.15s var(--ease); }
.chip:hover { color: var(--tinta); }
.chip svg { width: 16px; height: 16px; }
.chip.ativo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px oklch(0.25 0.02 250 / 0.12), inset 0 0 0 1px var(--linha); }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 5px; font-size: var(--t-1); font-weight: 600; white-space: nowrap; color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--linha); }
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta.confirmado, .etiqueta.em_dia, .etiqueta.paga, .etiqueta.conectado, .etiqueta.ativo { color: var(--ok); background: color-mix(in oklab, var(--ok) 10%, var(--superficie)); border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.etiqueta.cancelado, .etiqueta.bloqueado, .etiqueta.falta, .etiqueta.desconectado { color: var(--perigo); background: color-mix(in oklab, var(--perigo) 9%, var(--superficie)); border-color: color-mix(in oklab, var(--perigo) 25%, transparent); }
.etiqueta.concluido, .etiqueta.cancelada { color: var(--apagado); }
.etiqueta.aberta, .etiqueta.atrasado, .etiqueta.conectando, .etiqueta.humano { color: color-mix(in oklab, var(--alerta) 80%, var(--tinta)); background: color-mix(in oklab, var(--alerta) 11%, var(--superficie)); border-color: color-mix(in oklab, var(--alerta) 30%, transparent); }
.etiqueta.ia { color: var(--info); background: color-mix(in oklab, var(--info) 9%, var(--superficie)); border-color: color-mix(in oklab, var(--info) 25%, transparent); }
.esporte { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.esporte svg { width: 16px; height: 16px; flex: none; }
.esporte.futebol { color: var(--futebol); }
.esporte.beach_tenis { color: var(--beach); }
.esporte.volei { color: var(--volei); }

/* ---------- agenda do dia ---------- */
.agenda-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.navegar-dia { display: inline-flex; align-items: center; gap: 2px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 2px; }
.navegar-dia input { border: 0; background: transparent; height: 32px; padding: 0 6px; outline: none; color: var(--tinta); font-weight: 600; }
.agenda-topo .segmentos { margin-left: auto; }
.agenda-quadro { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.agenda-rolagem { overflow: auto; max-height: calc(100vh - 300px); min-height: 440px; overscroll-behavior: contain; }
.agenda-grade { display: grid; position: relative; min-width: 100%; }
.agenda-cab { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda-cab b { font-size: var(--t-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-cab .esporte { font-size: var(--t-2); }
.agenda-cab small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-1); }
.agenda-cab.canto { left: 0; z-index: 6; border-left: 0; }
.agenda-horas { position: sticky; left: 0; z-index: 4; background: var(--superficie); }
.agenda-horas div { height: var(--h); font-size: var(--t-1); color: var(--apagado); text-align: right; padding: 0 10px; transform: translateY(-8px); font-variant-numeric: tabular-nums; }
.agenda-col { position: relative; border-left: 1px solid var(--linha); background-image: linear-gradient(to bottom, var(--linha) 0 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--linha) 50%, transparent) 0 1px, transparent 1px); background-size: 100% var(--h), 100% calc(var(--h) / 2); }
.agenda-col .fechado { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in oklab, var(--linha) 70%, transparent) 7px 8px); }
.agenda-col .vazio { position: absolute; left: 4px; right: 4px; height: calc(var(--h) - 4px); border-radius: 7px; display: grid; place-items: center; color: transparent; font-size: var(--t-2); font-weight: 600; cursor: pointer; border: 1px dashed transparent; background: none; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.agenda-col .vazio:hover, .agenda-col .vazio:focus-visible { border-color: var(--linha-forte); color: var(--tinta-2); background: var(--superficie-2); }
.bloco {
  --c: var(--futebol);
  position: absolute; left: 5px; right: 5px; border-radius: 7px; padding: 6px 10px 6px 9px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: color-mix(in oklab, var(--c) 13%, var(--superficie));
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
  color: var(--tinta);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.bloco:hover { box-shadow: var(--sombra); transform: translateY(-1px); z-index: 3; }
.bloco.beach_tenis { --c: var(--beach); }
.bloco.volei { --c: var(--volei); }
.bloco b { font-size: var(--t-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px; }
.bloco small { font-size: var(--t-1); color: var(--tinta-2); white-space: nowrap; }
.bloco .icones { position: absolute; right: 8px; top: 7px; display: flex; gap: 4px; color: color-mix(in oklab, var(--c) 70%, var(--tinta)); }
.bloco .icones svg { width: 13px; height: 13px; }
.bloco.concluido { opacity: 0.6; }
.bloco.falta { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--perigo) 10%, var(--superficie)) 0 6px, var(--superficie) 6px 12px); border-color: color-mix(in oklab, var(--perigo) 40%, transparent); opacity: 0.8; }
.agora-linha { position: absolute; left: 0; right: 0; height: 2px; background: var(--tempo); z-index: 4; pointer-events: none; }
.agora-etiqueta { position: absolute; left: 2px; z-index: 5; transform: translateY(-50%); background: var(--carcaca); border-radius: 4px; padding: 3px 4px; box-shadow: inset 0 0 0 1px var(--carcaca-linha); }
.agora-etiqueta .digitos { height: 12px; width: auto; display: block; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--t-1); color: var(--apagado); padding: 10px 14px; border-top: 1px solid var(--linha); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda svg { width: 13px; height: 13px; }
.agenda-layout { display: flex; flex-direction: column; gap: 20px; }
.agenda-lista { display: none; }
.lista-prox { display: flex; flex-direction: column; }
.lista-prox .item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); cursor: pointer; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; }
.lista-prox .item:last-child { border-bottom: 0; }
.lista-prox .hora { font-weight: 700; font-size: var(--t-4); font-variant-numeric: tabular-nums; }
.lista-prox small { color: var(--apagado); display: block; }

/* ---------- tabelas ---------- */
.tabela-envolve { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.tabela th { text-align: left; font-size: var(--t-1); font-weight: 600; color: var(--apagado); padding: 10px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: var(--superficie-2); }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background 0.12s; }
.tabela tbody tr:hover td { background: color-mix(in oklab, var(--superficie-2) 60%, transparent); }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.tabela .sub { display: block; color: var(--apagado); font-size: var(--t-1); }
.rodape-tabela { margin: 10px 2px 0; font-size: var(--t-2); color: var(--apagado); }
.vazio-estado { padding: 44px 20px; text-align: center; color: var(--tinta-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vazio-estado svg { width: 34px; height: 34px; color: var(--apagado); }
.vazio-estado b { color: var(--tinta); font-size: var(--t-4); }
.vazio-estado span { max-width: 44ch; color: var(--apagado); }
.vazio-estado .btn { margin-top: 8px; }

/* ---------- esqueleto (carregando) ---------- */
.esqueleto { display: flex; flex-direction: column; gap: 12px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-2), var(--superficie-3), var(--superficie-2)); background-size: 200% 100%; animation: brilho 1.3s linear infinite; }
.esqueleto i.alto { height: 92px; border-radius: var(--raio); }
.esqueleto i.grande { height: 360px; border-radius: var(--raio); }
.esqueleto i:nth-child(odd) { width: 92%; }
@keyframes brilho { to { background-position: -200% 0; } }

/* ---------- quadras ---------- */
.grade-quadras { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.quadra-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); display: flex; flex-direction: column; overflow: hidden; }
.quadra-cartao .faixa { --c: var(--futebol); height: 84px; position: relative; background: color-mix(in oklab, var(--c) 78%, oklch(0.2 0.02 250)); }
.quadra-cartao.beach_tenis .faixa { --c: var(--beach); }
.quadra-cartao.volei .faixa { --c: var(--volei); }
.quadra-cartao .faixa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.quadra-cartao .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.quadra-cartao .linha { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-2); color: var(--tinta-2); }
.quadra-cartao .linha b { color: var(--tinta); }
.quadra-cartao.inativa { opacity: 0.62; }

/* ---------- WhatsApp ---------- */
.zap-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zap-status .avatar { background: color-mix(in oklab, var(--futebol) 14%, var(--superficie)); color: var(--futebol); }
.zap { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 300px); min-height: 460px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.zap-lista { border-right: 1px solid var(--linha); overflow-y: auto; }
.zap-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linha); cursor: pointer; align-items: center; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.zap-item:hover, .zap-item.ativo { background: var(--superficie-2); }
.zap-item .txt { min-width: 0; }
.zap-item b, .zap-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-item small { color: var(--apagado); font-size: var(--t-2); display: flex; gap: 5px; align-items: center; }
.zap-item small svg { width: 13px; height: 13px; flex: none; }
.zap-item .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--t-1); color: var(--apagado); }
.nao-lidas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--tinta); color: var(--fundo); font-weight: 700; font-size: 11px; display: grid; place-items: center; }
.zap-conversa { display: flex; flex-direction: column; min-width: 0; }
.zap-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.zap-cab .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.zap-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--fundo); }
.balao { max-width: min(78%, 520px); padding: 8px 12px 6px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-2); line-height: 1.5; border: 1px solid var(--linha); }
.balao.in { align-self: flex-start; background: var(--superficie); border-top-left-radius: 3px; }
.balao.out { align-self: flex-end; background: color-mix(in oklab, var(--futebol) 11%, var(--superficie)); border-color: color-mix(in oklab, var(--futebol) 25%, transparent); border-top-right-radius: 3px; }
.balao.out.ia { background: color-mix(in oklab, var(--info) 9%, var(--superficie)); border-color: color-mix(in oklab, var(--info) 22%, transparent); }
.balao .rodape-msg { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; color: var(--apagado); margin-top: 3px; }
.balao .falhou { color: var(--perigo); }
.zap-envio { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--linha); }
.qr { width: 220px; height: 220px; border-radius: var(--raio); background: #fff; display: grid; place-items: center; padding: 10px; border: 1px solid var(--linha); }
.qr img { width: 100%; height: 100%; }

/* ---------- financeiro ---------- */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; }
.plano-valor { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.plano-valor small { font-size: var(--t-3); font-weight: 500; color: var(--apagado); letter-spacing: 0; }
.lista-simples { margin: 0; padding-left: 18px; color: var(--tinta-2); line-height: 1.9; font-size: var(--t-2); }
.linha-digitavel { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--t-2); background: var(--superficie-2); border: 1px dashed var(--linha-forte); border-radius: 6px; padding: 8px 10px; word-break: break-all; }
.detalhes { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px 14px; font-size: var(--t-2); margin: 0; }
.detalhes dt { color: var(--apagado); }
.detalhes dd { margin: 0; min-width: 0; }

/* ---------- bloqueio ---------- */
.bloqueio { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--fundo); }
.bloqueio-painel { width: min(560px, 100%); display: flex; flex-direction: column; gap: 4px; }
.bloqueio .cartao { padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); }

/* ---------- gaveta (formulários e detalhes) e diálogo (confirmações) ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 100; background: oklch(0.2 0.02 250 / 0.42); display: flex; justify-content: flex-end; animation: aparecer 0.18s var(--ease); }
.modal { width: min(540px, 100%); height: 100%; overflow: auto; background: var(--superficie); border-left: 1px solid var(--linha); box-shadow: var(--sombra); display: flex; flex-direction: column; animation: entrar-lado 0.24s var(--ease); }
.modal.largo { width: min(760px, 100%); }
.modal-cab { display: flex; align-items: center; gap: 10px; padding: 18px 22px 14px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.modal-cab .btn { margin-left: auto; }
.modal-corpo { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.modal-rodape { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; flex-wrap: wrap; border-top: 1px solid var(--linha); position: sticky; bottom: 0; background: var(--superficie); }
.modal-rodape .esq { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.modal-fundo.dialogo { align-items: center; justify-content: center; padding: 16px; }
.modal-fundo.dialogo .modal { height: auto; max-height: calc(100vh - 32px); width: min(440px, 100%); border: 1px solid var(--linha); border-radius: 12px; animation: entrar-centro 0.2s var(--ease); }
.modal-fundo.dialogo .modal-cab, .modal-fundo.dialogo .modal-rodape { position: static; }
.modal-fundo.dialogo .modal-cab { border-bottom: 0; padding-bottom: 0; }
.modal-fundo.dialogo .modal-rodape { border-top: 0; padding-top: 0; }
.horarios-livres { display: flex; flex-wrap: wrap; gap: 6px; }
.horarios-livres button { height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--linha-forte); background: var(--superficie); cursor: pointer; font-size: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; transition: background 0.12s; }
.horarios-livres button:hover { background: var(--superficie-2); }
.horarios-livres button.ativo, .horarios-livres button.ativo:hover { background: var(--carcaca); color: var(--led); border-color: var(--carcaca); }
.cliente-busca { position: relative; }
.cliente-resultados { position: absolute; left: 0; right: 0; top: 44px; z-index: 5; padding: 6px; max-height: 240px; overflow: auto; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); box-shadow: var(--sombra); }
.cliente-resultados button { width: 100%; text-align: left; display: block; padding: 8px 10px; border-radius: 6px; border: 0; background: none; cursor: pointer; }
.cliente-resultados button:hover { background: var(--superficie-2); }
.cliente-escolhido { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie-2); }
.toasts { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 16px; border-radius: 9px; background: var(--carcaca); color: oklch(0.95 0.005 250); font-weight: 600; font-size: var(--t-2); box-shadow: var(--sombra); animation: subir 0.22s var(--ease); max-width: 360px; }
.toast.erro { background: var(--perigo); color: #fff; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar-lado { from { transform: translateX(24px); opacity: 0.4; } }
@keyframes entrar-centro { from { transform: scale(0.97); opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .duas-colunas { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tela-login { grid-template-columns: 1fr; }
  .login-arte { padding: 24px 16px 28px; gap: 24px; }
  .login-arte h1 { font-size: 1.625rem; }
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: 264px; transform: translateX(-100%); transition: transform 0.24s var(--ease); box-shadow: var(--sombra); }
  .lateral.aberta { transform: none; }
  .menu-movel { display: inline-flex; }
  .barra { padding: 10px 16px; gap: 10px; }
  .barra h1 { font-size: var(--t-5); }
  .barra .titulo small { display: none; }
  .conteudo { padding: 16px 16px 48px; }
  .faixa-alerta { padding: 10px 16px; flex-wrap: wrap; }
  .agenda-topo .segmentos { margin-left: 0; }
  .agenda-lista { display: block; }
  .agenda-rolagem { max-height: 70vh; }
  .zap { grid-template-columns: 1fr; height: auto; }
  .zap-lista { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .zap-msgs { min-height: 360px; }
  .grade-form { grid-template-columns: 1fr; }
  .barra .acoes .rotulo { display: none; }
  .modal-fundo { align-items: flex-end; }
  .modal { width: 100%; height: auto; max-height: 92vh; border-left: 0; border-top: 1px solid var(--linha); border-radius: 14px 14px 0 0; animation: entrar-baixo 0.26s var(--ease); }
  .modal.largo { width: 100%; }
  .relogio-barra { display: none; }
}
@keyframes entrar-baixo { from { transform: translateY(24px); opacity: 0.4; } }
@media (max-width: 520px) {
  .placar { grid-template-columns: 1fr 1fr; }
  .placar-casa { padding: 9px 10px 10px; }
  .detalhes { grid-template-columns: 1fr; gap: 2px 0; }
  .detalhes dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .digitos.piscar .pontos { animation: none; }
}
.placar-casa .valor .digitos { height: 34px; width: auto; }
.relogio-barra .digitos .seg:not(.on), .agora-etiqueta .digitos .seg:not(.on) { opacity: 0.4; }
.relogio-grande .digitos { height: auto; }

/* ==========================================================================
   Casca: login no rodapé, menu recolhido, ajuda e tema no topo
   ========================================================================== */
.lateral .rodape { gap: 6px; }
.lateral .rodape .usuario { margin-bottom: 4px; }
.usuario .login-em { display: flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; }
.rodape-btn { justify-content: flex-start; width: 100%; color: var(--tinta-2); }
.app { transition: grid-template-columns 0.2s var(--ease); }
@media (min-width: 861px) {
  .app.recolhido { grid-template-columns: 72px minmax(0, 1fr); }
  .app.recolhido .lateral { padding-inline: 10px; }
  .app.recolhido .marca-nome, .app.recolhido .local-atual, .app.recolhido .nav a span:not(.contador),
  .app.recolhido .usuario > div, .app.recolhido .rodape-btn span { display: none; }
  .app.recolhido .topo-marca { padding-inline: 4px; align-items: center; }
  .app.recolhido .nav a, .app.recolhido .rodape-btn { justify-content: center; padding-inline: 0; position: relative; }
  .app.recolhido .nav .contador { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .app.recolhido .usuario { justify-content: center; }
  .app.recolhido [data-recolher] svg { transform: scaleX(-1); }
}
.tema-barra { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 9px; }
.tema-barra button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--apagado); cursor: pointer; }
.tema-barra button:hover { color: var(--tinta); }
.tema-barra button svg { width: 17px; height: 17px; }
.tema-barra button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px oklch(0.25 0.02 250 / 0.12), inset 0 0 0 1px var(--linha); }
.tema-barra .sep { width: 1px; align-self: stretch; margin: 5px 2px; background: var(--linha); }

/* ==========================================================================
   Alertas e Gestão de acessos
   ========================================================================== */
.regras-alerta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.regras-alerta h3 { display: flex; align-items: center; gap: 8px; font-size: var(--t-3); }
.regras-alerta h3 svg { width: 17px; height: 17px; color: var(--apagado); }
.regras-alerta p { margin: 6px 0 0; font-size: var(--t-2); line-height: 1.5; }
.lista-alertas { display: flex; flex-direction: column; }
.alerta-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.alerta-item:first-child { border-top: 0; padding-top: 0; }
.alerta-item small { display: block; color: var(--apagado); font-size: var(--t-2); margin-top: 2px; }
.resumo-acessos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
.resumo-acessos > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--linha); }
.resumo-acessos > div:first-child { border-left: 0; }
.resumo-acessos b { font-size: var(--t-5); font-weight: 600; line-height: 1.2; }
.resumo-acessos small { color: var(--apagado); font-size: var(--t-2); }

/* ==========================================================================
   Guia do sistema
   ========================================================================== */
.guia { display: flex; flex-direction: column; gap: 20px; }
.guia-busca { display: flex; align-items: center; gap: 10px; position: relative; }
.guia-busca svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--apagado); pointer-events: none; }
.guia-busca .entrada { padding-left: 38px; height: 44px; font-size: var(--t-3); }
.guia-progresso { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; margin-bottom: 4px; }
.guia-progresso i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.guia-check, .guia-rotina { list-style: none; margin: 0; padding: 0; }
.guia-check li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linha); }
.guia-check li:first-child { border-top: 0; }
.guia-check li b { display: block; font-size: var(--t-3); }
.guia-check li span { display: block; font-size: var(--t-2); color: var(--apagado); line-height: 1.45; }
.guia-check .ck { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; font: 600 var(--t-2) var(--fonte); font-variant-numeric: tabular-nums; border: 1.5px solid var(--linha-forte); background: var(--superficie); color: var(--apagado); }
.guia-check .ck:not([disabled]) { border-color: var(--tinta-2); color: var(--tinta); cursor: pointer; }
.guia-check .ck:not([disabled]):hover { background: var(--superficie-2); }
.guia-check .ck svg { width: 15px; height: 15px; }
.guia-check li.feito .ck { background: var(--ok); border-color: var(--ok); color: var(--superficie); }
.guia-check li.feito b { color: var(--apagado); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.guia-rotina { position: relative; }
.guia-rotina::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linha); }
.guia-rotina li { position: relative; padding: 0 0 16px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.guia-rotina li:last-child { padding-bottom: 0; }
.guia-rotina li::before { content: ""; position: absolute; left: 1px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--tinta-2); }
.guia-rotina li > span:not(.rotulo-placar) { font-size: var(--t-2); color: var(--apagado); line-height: 1.45; }
.guia-rotina .btn { margin-left: -10px; margin-top: 2px; }
.guia-abas { max-width: 100%; }
.guia-resumo { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--raio-p); background: var(--superficie-2); font-size: var(--t-2); line-height: 1.55; color: var(--tinta-2); }
.tarefa { border: 1px solid var(--linha); border-radius: var(--raio-p); margin-top: 8px; background: var(--superficie); }
.tarefa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-weight: 600; }
.tarefa summary::-webkit-details-marker { display: none; }
.tarefa summary .tt { flex: 1; min-width: 0; }
.tarefa summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--apagado); border-bottom: 2px solid var(--apagado); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.tarefa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tarefa[open] summary { border-bottom: 1px solid var(--linha); }
.tarefa summary:hover .tt { text-decoration: underline; text-underline-offset: 3px; }
.tarefa-c { padding: 12px 14px 14px; font-size: var(--t-2); line-height: 1.55; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tarefa-c p { margin: 0; }
.passos { margin: 0; padding: 0; list-style: none; counter-reset: p; align-self: stretch; }
.passos li { counter-increment: p; position: relative; padding: 0 0 8px 32px; }
.passos li:last-child { padding-bottom: 0; }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 5px; background: var(--superficie-2); color: var(--tinta); font: 600 var(--t-1) var(--fonte); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.guia-dica { align-self: stretch; padding: 10px 12px; border-radius: var(--raio-p); background: color-mix(in oklab, var(--info) 8%, var(--superficie)); border: 1px solid color-mix(in oklab, var(--info) 22%, transparent); color: var(--tinta-2); }
.guia-dica b { color: var(--info); margin-right: 4px; }
.guia-cores { display: flex; flex-direction: column; }
.guia-cores > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linha); font-size: var(--t-2); color: var(--apagado); }
.guia-cores > div:first-child { border-top: 0; }
.guia-cores .etiqueta { justify-self: start; }

/* tour pelo menu: realce em tinta (âmbar é só para tempo) */
.tour-bloq { position: fixed; inset: 0; z-index: 150; }
.tour-bloq.escuro { background: oklch(0.2 0.02 250 / 0.5); }
.tour-foco { position: fixed; z-index: 151; border-radius: 9px; box-shadow: 0 0 0 2px var(--tinta), 0 0 0 9999px oklch(0.2 0.02 250 / 0.5); pointer-events: none; transition: all 0.2s var(--ease); }
.tour-caixa { position: fixed; z-index: 152; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.tour-caixa h3 { font-size: var(--t-4); }
.tour-caixa p { margin: 0; font-size: var(--t-2); line-height: 1.55; color: var(--tinta-2); }
.tour-pontos { display: flex; gap: 4px; margin: 8px 0 6px; }
.tour-pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--linha-forte); transition: width 0.2s; }
.tour-pontos i.on { width: 16px; background: var(--tinta); }
.tour-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guia-oferta { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: min(380px, calc(100vw - 32px)); display: flex; gap: 12px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); animation: entrar-baixo 0.26s var(--ease); }
.guia-oferta p { margin: 3px 0 10px; font-size: var(--t-2); color: var(--apagado); line-height: 1.45; }

@media (max-width: 860px) {
  .regras-alerta, .resumo-acessos { grid-template-columns: 1fr; }
  .resumo-acessos > div { border-left: 0; border-top: 1px solid var(--linha); }
  .resumo-acessos > div:first-child { border-top: 0; }
  .alerta-item { grid-template-columns: 34px minmax(0, 1fr); }
  .alerta-item > .btn { grid-column: 2; justify-self: start; }
  .guia-check li { grid-template-columns: 30px minmax(0, 1fr); }
  .guia-check li > .btn { grid-column: 2; justify-self: start; }
  .guia-cores > div { grid-template-columns: 1fr; gap: 4px; }
  .guia-abas { flex-wrap: nowrap; overflow-x: auto; }
  .guia-abas .chip { flex: none; }
  .tema-barra button { width: 30px; height: 30px; }
}
.usuario small.login-em { white-space: normal; flex-wrap: wrap; row-gap: 2px; overflow: visible; }

/* Ajustes da plataforma */
.ajustes { display: flex; flex-direction: column; gap: 20px; max-width: 920px; }
.ajustes .cartao-cab h3 { display: flex; align-items: center; gap: 8px; }
.ajustes .cartao-cab h3 svg { width: 18px; height: 18px; color: var(--apagado); }
.ajustes textarea.entrada { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; min-height: 74px; }
.linha-teste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: var(--t-2); }
.link-arquivo { color: var(--info); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cartao-cab h3 { display: flex; align-items: center; gap: 8px; } .cartao-cab h3 svg { width: 18px; height: 18px; flex: none; color: var(--apagado); }