/* watch.dailybe.app
   Layout: um "rack" de leitura, de cima para baixo: faixa de alertas → Agora → Hoje × ontem × semana → Bloqueios → Functions → Workers.
   Cores dos gráficos e superfícies: paleta validada da skill dataviz (azul = hoje; cinzas = contexto; status só com ícone + texto). */
:root {
  --plano: #f9f9f7;          /* fundo da página */
  --cartao: #fcfcfb;         /* superfície dos quadros e gráficos */
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --apagado: #6e6c66;        /* rótulos (≥ 4.5:1 no cartão) */
  --grade: #e1e0d9;
  --eixo: #c3c2b7;
  --borda: rgba(11, 11, 11, 0.10);
  --hoje: #2a78d6;           /* série 1 */
  --hoje-lavado: rgba(42, 120, 214, 0.10);
  --ontem: #898781;
  --semana: #c3c2b7;
  --marca: #9d2235;          /* vinho do dailyBe, só no logotipo */
  --ok: #0ca30c;
  --ok-texto: #006300;
  --atencao: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  --lavado-critico: rgba(208, 59, 59, 0.08);
  --lavado-atencao: rgba(250, 178, 25, 0.12);
  --lavado-ok: rgba(12, 163, 12, 0.08);
  --foco: #2a78d6;

  --f-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dado: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-1: 0.75rem;   /* rótulos */
  --t-2: 0.8125rem; /* tabelas */
  --t-3: 0.9375rem; /* texto */
  --t-4: 1.125rem;  /* títulos de seção */
  --t-5: 1.75rem;   /* números dos quadros */
  --t-6: 3rem;      /* número principal */
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plano: #0d0d0d; --cartao: #1a1a19; --tinta: #f0efec; --tinta-2: #c3c2b7; --apagado: #a3a198;
    --grade: #2c2c2a; --eixo: #383835; --borda: rgba(255, 255, 255, 0.10);
    --hoje: #3987e5; --hoje-lavado: rgba(57, 135, 229, 0.14); --ontem: #898781; --semana: #52514e;
    --marca: #c4455a; --ok-texto: #0ca30c;
    --lavado-critico: rgba(208, 59, 59, 0.16); --lavado-atencao: rgba(250, 178, 25, 0.12); --lavado-ok: rgba(12, 163, 12, 0.12);
    --foco: #3987e5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --plano: #0d0d0d; --cartao: #1a1a19; --tinta: #f0efec; --tinta-2: #c3c2b7; --apagado: #a3a198;
  --grade: #2c2c2a; --eixo: #383835; --borda: rgba(255, 255, 255, 0.10);
  --hoje: #3987e5; --hoje-lavado: rgba(57, 135, 229, 0.14); --ontem: #898781; --semana: #52514e;
  --marca: #c4455a; --ok-texto: #0ca30c;
  --lavado-critico: rgba(208, 59, 59, 0.16); --lavado-atencao: rgba(250, 178, 25, 0.12); --lavado-ok: rgba(12, 163, 12, 0.12);
  --foco: #3987e5;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plano);
  color: var(--tinta);
  font: 400 var(--t-3)/1.5 var(--f-ui);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 48px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--plano); }
.pagina { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pagina > *, .secao > *, main { min-width: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-4); font-weight: 600; letter-spacing: -0.01em; }
.sub { color: var(--apagado); font-size: var(--t-2); }
.num { font-variant-numeric: tabular-nums; }
.dado { font-family: var(--f-dado); font-size: 0.92em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--plano);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-block: 14px 12px;
  border-bottom: 1px solid var(--borda);
}
.logo { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.logo i { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); display: inline-block; transform: translateY(-1px); font-style: normal; }
.logo span { font-weight: 500; color: var(--apagado); }
.topo .estado { color: var(--apagado); font-size: var(--t-2); margin-right: auto; }
.topo .estado b { color: var(--tinta-2); font-weight: 500; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.botao {
  border: 1px solid var(--borda); background: var(--cartao); border-radius: 8px;
  padding: 6px 12px; font-size: var(--t-2); font-weight: 500; cursor: pointer;
}
.botao:hover { border-color: var(--eixo); }
.botao[aria-pressed="true"] { border-color: var(--hoje); color: var(--hoje); }
.botao.primario { background: var(--hoje); color: #fff; border-color: transparent; }
.carregando .conteudo { opacity: 0.55; transition: opacity 0.2s; }

/* ---------- alertas ---------- */
.alertas { display: grid; gap: 8px; }
.alerta {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--cartao);
}
.alerta .ic { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; margin-top: 1px; }
.alerta b { font-weight: 600; }
.alerta p { margin: 0; color: var(--tinta-2); font-size: var(--t-2); min-width: 0; overflow-wrap: anywhere; }
.alerta.critico { background: var(--lavado-critico); border-color: color-mix(in srgb, var(--critico) 40%, transparent); }
.alerta.critico .ic { background: var(--critico); }
.alerta.atencao { background: var(--lavado-atencao); border-color: color-mix(in srgb, var(--atencao) 55%, transparent); }
.alerta.atencao .ic { background: var(--atencao); color: #0b0b0b; }
.alerta.ok { background: var(--lavado-ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.alerta.ok .ic { background: var(--ok); }
.alerta.info .ic { background: var(--apagado); }

/* ---------- seções ---------- */
.secao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.secao > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.secao > header .sub { flex: 1 1 260px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; min-width: 0; }

/* quadros (stat tiles) */
.quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.quadro { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.quadro .rot { font-size: var(--t-1); color: var(--apagado); letter-spacing: 0.02em; }
.quadro .val { font-size: var(--t-5); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.quadro .det { font-size: var(--t-1); color: var(--tinta-2); overflow-wrap: anywhere; }
.quadro.principal { grid-column: span 2; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rot rot" "val graf" "det graf"; align-items: end; gap: 2px 16px; }
.quadro.principal .rot { grid-area: rot; }
.quadro.principal .val { grid-area: val; font-size: var(--t-6); line-height: 1; }
.quadro.principal .det { grid-area: det; }
.quadro.principal svg { grid-area: graf; justify-self: end; width: 100%; max-width: 240px; height: 56px; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); font-weight: 600; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo.ruim { color: var(--critico); }
.selo.meio { color: var(--tinta-2); }
.selo.meio::before { background: var(--atencao); }
.selo.bom { color: var(--ok-texto); }
.selo.bom::before { background: var(--ok); }
.ruim-texto { color: var(--critico); }

/* comparativo */
.grade-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.grafico { position: relative; height: 280px; }
.grafico.alto { height: 360px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-2); color: var(--tinta-2); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 16px; height: 2px; border-radius: 2px; display: inline-block; }
.legenda i.barra { width: 10px; height: 10px; border-radius: 3px; }
.cartao h3 { font-size: var(--t-3); font-weight: 600; margin-bottom: 2px; }
.cartao > .sub { margin: 0 0 12px; }
.leitura { margin: 0; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--cartao); font-size: var(--t-2); color: var(--tinta-2); }
.leitura b { color: var(--tinta); font-weight: 600; }
details.tabela-grafico { margin-top: 10px; font-size: var(--t-2); }
details.tabela-grafico summary { cursor: pointer; color: var(--apagado); }

/* tabelas */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); }
.rolagem.limite { max-height: 520px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-2); }
th, td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--grade); white-space: nowrap; vertical-align: top; }
th { position: sticky; top: 0; background: var(--cartao); font-weight: 600; color: var(--tinta-2); font-size: var(--t-1); letter-spacing: 0.02em; z-index: 1; }
th[data-ordem] { cursor: pointer; user-select: none; }
th[data-ordem]:hover { color: var(--tinta); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: color-mix(in srgb, var(--hoje) 5%, transparent); }
td .vazio { color: var(--apagado); }
.etiqueta { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: var(--t-1); font-weight: 600; border: 1px solid var(--borda); color: var(--tinta-2); }
.etiqueta.e429 { border-color: color-mix(in srgb, var(--serio) 60%, transparent); }
.etiqueta.e401 { border-color: color-mix(in srgb, var(--atencao) 70%, transparent); }
.etiqueta.e403 { border-color: color-mix(in srgb, var(--critico) 45%, transparent); }
.etiqueta.monitor { border-style: dashed; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.comando { font-family: var(--f-dado); font-size: var(--t-1); color: var(--tinta-2); background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; }

/* workers */
.workers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.worker h3 { font-family: var(--f-dado); font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); margin-bottom: 8px; overflow-wrap: anywhere; }
.worker .linha { display: flex; gap: 20px; flex-wrap: wrap; }
.worker .linha div { display: grid; }

/* login */
.login { min-height: 70vh; display: grid; place-items: center; }
.login .cartao { max-width: 380px; display: grid; gap: 14px; padding: 28px; text-align: left; }
.login h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.login p { margin: 0; color: var(--tinta-2); }
.erro { color: var(--critico); font-size: var(--t-2); }

/* dica do gráfico */
.dica { position: fixed; pointer-events: none; z-index: 20; background: var(--cartao); color: var(--tinta); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; font-size: var(--t-2); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }

@media (max-width: 860px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .quadro.principal { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .grafico { height: 240px; }
  .grafico.alto { height: 420px; }
  .quadro .val { font-size: 1.5rem; }
  .quadro.principal .val { font-size: 2.5rem; }
  .topo .estado { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }