/*
 * ARBOO — tema claro persistente.
 * Carregado depois do CSS incorporado ao guia para preservar a identidade
 * visual da tela de entrada mesmo quando app/guia.html for regenerado.
 */

:root,
:root[data-theme="dark"] {
  color-scheme: only light;
  --bg: #FBF9F4;
  --surface: #FFFFFF;
  --surface2: #F3EFE6;
  --ink: #1E2126;
  --ink2: #4B544D;
  --ink3: #5F6B62;
  --line: #D8D1C5;
  --prim: #2E7D4F;
  --prim-ink: #FFFFFF;
  --prim-soft: #E7F3EB;
  --accent: #9C6A12;
  --accent-soft: #F7ECD2;
  --bark: #6E5240;
  --danger: #A53A2A;
  --danger-soft: #FBEAE6;
  --ok: #2E7D4F;
  --chip: #EEF1EA;
  --shadow: 0 1px 3px rgba(28, 42, 32, .08), 0 8px 24px rgba(28, 42, 32, .07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: only light;
    --bg: #FBF9F4;
    --surface: #FFFFFF;
    --surface2: #F3EFE6;
    --ink: #1E2126;
    --ink2: #4B544D;
    --ink3: #5F6B62;
    --line: #D8D1C5;
    --prim: #2E7D4F;
    --prim-ink: #FFFFFF;
    --prim-soft: #E7F3EB;
    --accent: #9C6A12;
    --accent-soft: #F7ECD2;
    --bark: #6E5240;
    --danger: #A53A2A;
    --danger-soft: #FBEAE6;
    --ok: #2E7D4F;
    --chip: #EEF1EA;
    --shadow: 0 1px 3px rgba(28, 42, 32, .08), 0 8px 24px rgba(28, 42, 32, .07);
  }
}

body {
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 24px 24px, var(--bg);
  color: var(--ink);
}

header {
  background: rgba(251, 249, 244, .96);
  border-bottom-color: var(--line);
  box-shadow: 0 3px 16px rgba(28, 42, 32, .05);
  backdrop-filter: blur(12px);
}

body.arbini {
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 24px 24px, var(--bg);
}

.arbhome {
  color: var(--ink);
}

.arbhome .topo .lmarca span,
.arbhome .usair,
.arbhome .sech span,
.arbhome .cardf .ft,
.arbhome .and .seta {
  color: var(--ink3);
}

.arbhome .usair b,
.arbhome .perg h1,
.arbhome .sech b {
  color: var(--ink);
}

.arbhome .usair a {
  color: var(--prim);
}

.arbhome .st {
  color: var(--ink2);
}

.arbhome .st i {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--prim-soft);
}

.arbhome .st.off i {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.arbhome .avatar {
  background: var(--surface);
  border-color: var(--line);
  color: var(--prim);
  box-shadow: var(--shadow);
}

.arbhome .perg p,
.arbhome .cardf .d,
.arbhome .mais a span,
.arbhome .and span {
  color: var(--ink2);
}

.arbhome .loc {
  background: var(--prim-soft);
  border-color: #BFD8C8;
  color: #1F653E;
  font-weight: 700;
}

.arbhome .cardf {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}

.arbhome .cardf:hover {
  border-color: #A9CDB5;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28, 42, 32, .11);
}

.arbhome .cardf:active {
  background: var(--surface2);
  transform: translateY(0);
}

.arbhome .cardf .ic,
.arbhome .and .aic {
  background: var(--prim-soft);
  color: var(--prim);
}

.arbhome .cardf.lar .ic {
  background: var(--accent-soft);
  color: var(--accent);
}

.arbhome .cardf .ft svg {
  color: var(--prim);
}

.arbhome .cardf.lar .ft svg {
  color: var(--accent);
}

.arbhome .mais a,
.arbhome .and a {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(28, 42, 32, .05);
}

.arbhome .mais a:hover {
  border-color: #A9CDB5;
  background: var(--prim-soft);
}

.arbhome .and a:hover {
  border-color: #A9CDB5;
}

#prscroll {
  border-color: var(--line);
  background: radial-gradient(circle at 1px 1px, #D7D0C3 1px, transparent 0) 0 0 / 26px 26px, var(--surface2);
}

#prscroll #dwrap {
  box-shadow: 0 16px 44px rgba(28, 42, 32, .18);
}

#przoom {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 8px 22px rgba(28, 42, 32, .16);
}

#przoom button {
  color: var(--ink2);
}

#przoom button:hover {
  background: var(--prim-soft);
  color: var(--prim);
}

#przoom .pct {
  color: var(--ink2);
}

.chkbadge {
  background: var(--surface2);
  border-color: var(--line);
  color: var(--ink3);
}

.ferramentas {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.ferramentas .v2g {
  border-bottom-color: var(--line);
}

.ferramentas .v2l,
.ferramentas label {
  color: var(--ink3) !important;
}

.tool {
  color: var(--ink2);
  font-weight: 600;
}

.tool:hover {
  background: var(--surface2);
  color: var(--ink);
}

.tool.on {
  border-color: var(--prim);
  background: var(--prim-soft);
  color: #1F653E;
  font-weight: 700;
}

.tool.on .dot {
  border-color: var(--prim);
}

.ferramentas input[type="range"] {
  accent-color: var(--prim);
}

.cro-panel {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.cro-panel .tb {
  background: var(--surface2);
  border-color: var(--line);
  color: var(--ink);
}

.cro-panel .tb.on,
.cro-panel .tb:hover {
  border-color: var(--prim);
  color: var(--prim);
  background: var(--prim-soft);
}

.cro-panel label {
  color: var(--ink3) !important;
}

.cro-panel select {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.probar.cro-panel .abtn.sub {
  background: var(--surface2);
  border-color: var(--line);
  color: var(--ink);
}

.probar.cro-panel .abtn.sub:hover {
  border-color: var(--prim);
  color: var(--prim);
  background: var(--prim-soft);
}

.cap {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cap p,
.cap li,
.cap th,
.cap td {
  overflow-wrap: anywhere;
}

.prmeta {
  min-width: 0;
}

.prmeta > * {
  min-width: 0;
}

.prmeta input,
.prmeta select {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

@media (max-width: 760px) {
  .prmeta {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .ferramentas .v2g {
    display: contents !important;
  }

  .ferramentas .v2l {
    display: none !important;
  }
}

/* ---- prancheta expandida (tela cheia) — tema claro ---- */
#prwrap {
  background: var(--bg);
}

.prtop,
.prfoot {
  background: var(--surface);
  border-color: var(--line);
}

.prtop h1 {
  color: var(--ink);
}

.prtop .pvolt {
  border-color: var(--line);
  color: var(--ink2);
}

.prtop .pvolt:hover {
  border-color: var(--prim);
  color: var(--prim);
}

.prtop .prmeta select,
.prtop .prmeta input {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
}

body.arbpran .ferramentas {
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

.prfoot .prlegend,
.prfoot .prlegsimb {
  color: var(--ink2);
}

.prdicas summary {
  color: var(--ink3);
  border-color: var(--line);
}

.prdicas summary::before {
  color: var(--accent);
}

.prdicas[open] .hint {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink2);
  box-shadow: 0 12px 30px rgba(28, 42, 32, .18);
}

/* tinta em bolinhas + botão primário do checklist — tema claro */
.tool.cdot.on,
.tool.cdot:hover {
  background: transparent;
  border-color: transparent;
}

.tool.cdot.on .dot {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--prim);
}

.abtn.prim {
  background: var(--prim);
  border-color: var(--prim);
  color: #fff;
}

.ferramentas,
#prscroll {
  scrollbar-color: rgba(95, 107, 98, .35) transparent;
}