/* Clarice — biblioteca particular. Papel claro, tinta escura, verde-petróleo e dourado. */
:root {
  --papel: #FAF9F5; --papel-2: #F2EEE7; --cartao: #FFFFFF; --linha: #E7E0D3; --linha-2: #D9D0BF;
  --tinta: #1E2430; --tinta-2: #4A5160; --tinta-3: #5F6672;
  --petroleo: #B4475E; --petroleo-2: #933A4D; --petroleo-claro: #FBE8EC; --rosa: #F4A2B0;
  --ouro: #B8893B; --ouro-claro: #F6EBD6;
  --vermelho: #B4443A; --vermelho-claro: #F8E4E1; --verde: #2F7D4F; --verde-claro: #E2F1E7; --ambar: #B7791F; --ambar-claro: #FBEFD9;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 12px; --r-sm: 8px;
  --sombra: 0 1px 2px rgba(30, 36, 48, .06), 0 4px 16px rgba(30, 36, 48, .06);
  --sombra-forte: 0 12px 40px rgba(30, 36, 48, .18);
  --topo: 64px; --abas: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--petroleo); }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.mudo { color: var(--tinta-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botões e campos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linha-2); background: var(--cartao); cursor: pointer; font-weight: 550; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { border-color: var(--tinta-3); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-pri { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.btn-pri:hover { background: var(--petroleo-2); border-color: var(--petroleo-2); }
.btn-ouro { background: var(--ouro); border-color: var(--ouro); color: #fff; }
.btn-perigo { color: var(--vermelho); border-color: #E6C2BD; }
.btn-perigo:hover { background: var(--vermelho-claro); border-color: var(--vermelho); }
.btn-leve { border-color: transparent; background: transparent; }
.btn-leve:hover { background: var(--papel-2); border-color: transparent; }
.btn-p { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-ic { width: 40px; padding: 0; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); letter-spacing: .01em; }
.campo small { color: var(--tinta-3); font-size: 12px; }
.in, select.in, textarea.in { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--linha-2); border-radius: var(--r-sm); background: var(--cartao); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.in { min-height: 90px; resize: vertical; line-height: 1.45; }
.in:focus { border-color: var(--petroleo); box-shadow: 0 0 0 3px rgba(180, 71, 94, .16); }
.grade-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 14px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--petroleo); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha-2); background: var(--cartao);
  font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap; color: var(--tinta-2); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip .n { font-size: 11.5px; opacity: .7; }
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.selo-lido { background: var(--verde-claro); color: var(--verde); }
.selo-lendo { background: var(--ouro-claro); color: #8A6526; }
.selo-emprestado { background: var(--ambar-claro); color: var(--ambar); }
.selo-atrasado { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-desejo { background: #EDE7F4; color: #6A4C93; }
.selo-parcial { background: #E3EEF8; color: #2F5F8A; }
.selo-uso { background: #EDE7F4; color: #6A4C93; }
.pend-lista { display: grid; gap: 6px; margin-top: 10px; } .pend-lista > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.selo-neutro { background: var(--papel-2); color: var(--tinta-2); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: var(--sombra); }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrada-arte { position: relative; overflow: hidden; background: #FAF9F5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px; border-right: 1px solid var(--linha); }
.entrada-arte .retrato { width: min(520px, 80%); aspect-ratio: 1; object-fit: cover; }
.entrada-arte .frase { position: relative; max-width: 440px; text-align: center; }
.entrada-arte .frase p { font-family: var(--serif); font-size: 19px; line-height: 1.45; margin: 0 0 6px; font-style: italic; }
.entrada-arte .frase small { color: var(--tinta-2); }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.entrada-caixa { width: 100%; max-width: 380px; display: grid; gap: 18px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 48px; height: 48px; border-radius: 50%; }
.marca b { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; display: block; line-height: 1; }
.marca small { color: var(--tinta-3); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.entrada-caixa h1 { font-size: 26px; }
.abas-entrada { display: inline-flex; justify-self: start; border: 1px solid var(--linha-2); border-radius: 999px; padding: 3px; background: var(--cartao); }
.abas-entrada button { border: 0; background: transparent; border-radius: 999px; padding: 8px 20px; font-weight: 600; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; }
.abas-entrada button[aria-selected="true"] { background: var(--tinta); color: #fff; }
.codigo-caixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--petroleo); border-radius: var(--r-sm); background: var(--petroleo-claro); }
.codigo-caixa code { font: 600 17px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--petroleo-2); }
.entrada-caixa .dedic { font-family: var(--serif); font-style: italic; color: var(--tinta-2); border-left: 3px solid var(--rosa); padding-left: 12px; margin: 0; }
.erro-msg { background: var(--vermelho-claro); color: var(--vermelho); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; }
.rodape-entrada { font-size: 12px; color: var(--tinta-3); text-align: center; }

/* ---------- moldura do app ---------- */
.topo { position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: rgba(251, 248, 243, .88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linha); }
.topo .marca img { width: 32px; height: 32px; }
.topo .marca b { font-size: 22px; }
.topo .marca small { font-size: 10.5px; }
.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 999px; color: var(--tinta-2); text-decoration: none; font-weight: 550; font-size: 14px; }
.nav a:hover { background: var(--papel-2); color: var(--tinta); }
.nav a[aria-current="page"] { background: var(--tinta); color: #fff; }
.nav svg, .abas svg { width: 18px; height: 18px; flex: none; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.usuario-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--linha); background: var(--cartao); font-size: 13px; font-weight: 550; cursor: pointer; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--petroleo-claro); color: var(--petroleo); font-weight: 700; font-size: 12px; }
.conteudo { max-width: 1320px; margin: 0 auto; padding: 24px 24px 64px; }
.cab-pag { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cab-pag h1 { font-size: 30px; }
.cab-pag p { margin: 4px 0 0; color: var(--tinta-2); }
.abas { display: none; }

/* ---------- acervo ---------- */
.busca-grande { position: relative; flex: 1; min-width: 240px; max-width: 560px; }
.busca-grande svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none; }
.busca-grande .in { padding-left: 42px; min-height: 46px; border-radius: 999px; font-size: 15px; }
.busca-grande kbd { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 11px var(--sans); color: var(--tinta-3); border: 1px solid var(--linha-2); border-radius: 5px; padding: 1px 6px; background: var(--papel); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 18px; }
.filtros .in { width: auto; min-height: 34px; padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.filtros .sep { width: 1px; height: 22px; background: var(--linha-2); margin: 0 4px; }
.resumo-lista { font-size: 13px; color: var(--tinta-3); margin-left: auto; }
.estantegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 26px 20px; }
.livro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.capa { position: relative; aspect-ratio: 2 / 3; width: 100%; border-radius: 4px 8px 8px 4px; overflow: hidden; background: var(--papel-2);
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 6px 14px -4px rgba(30,36,48,.28), inset 3px 0 0 rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; }
.livro:hover .capa, .livro:focus-visible .capa { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 14px 26px -6px rgba(30,36,48,.35); }
.capa img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.capa::after { z-index: 2; content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(255,255,255,.1) 60%, transparent); }
.capa-gerada { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 16% 11% 16% 15%; }
.capa-gerada::before, .capa-gerada::after { content: ""; position: absolute; left: 15%; right: 11%; height: 1px; background: rgba(255,255,255,.4); box-shadow: 0 3px 0 rgba(255,255,255,.22); }
.capa-gerada::before { top: 8%; } .capa-gerada::after { bottom: 9%; }
.capa-gerada .rotulo { background: #FBF6EC; color: var(--tinta); border-radius: 2px; padding: 10px 9px 9px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); display: grid; gap: 6px; }
.capa-gerada b { font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.capa-gerada .rotulo i { display: block; width: 26px; height: 1px; background: var(--ouro); margin: 0 auto; }
.capa-gerada span { font-size: 9.5px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
.ficha-topo .capa-gerada b { font-size: 13px; }
.marcas-capa { position: absolute; top: 5px; right: 5px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.marcas-capa .selo { box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 10.5px; padding: 1px 7px; }
.fav { position: absolute; z-index: 2; left: 10px; top: 0; width: 16px; height: 26px; background: var(--ouro); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.livro-titulo { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.livro-autor { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -4px; }
.estrelas { color: var(--ouro); letter-spacing: 1px; font-size: 12px; }
.tabela-wrap { overflow-x: auto; border-radius: var(--r); }
.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--linha); background: var(--papel); position: sticky; top: 0; cursor: pointer; white-space: nowrap; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:hover td { background: #FDFBF7; cursor: pointer; }
.tabela .mini { width: 30px; height: 44px; border-radius: 2px 4px 4px 2px; overflow: hidden; position: relative; background: var(--papel-2); }
.tabela .mini img { width: 100%; height: 100%; object-fit: cover; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.vazio { text-align: center; padding: 64px 20px; color: var(--tinta-2); }
.vazio h2 { font-size: 24px; margin-bottom: 8px; }
.vazio .btn { margin-top: 14px; }
.carregar-mais { display: flex; justify-content: center; padding: 28px 0 0; }

/* ---------- gaveta (ficha do livro) ---------- */
.veu { position: fixed; inset: 0; background: rgba(30, 36, 48, .32); z-index: 60; opacity: 0; transition: opacity .2s; }
.veu.aberto { opacity: 1; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--papel); z-index: 61; box-shadow: var(--sombra-forte);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.gaveta.aberta { transform: none; }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.gaveta-corpo { overflow-y: auto; padding: 20px 22px 40px; flex: 1; }
.ficha-topo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
.ficha-topo h2 { font-size: 24px; line-height: 1.2; }
.ficha-topo .sub { color: var(--tinta-2); margin: 4px 0 8px; font-family: var(--serif); font-style: italic; }
.ficha-topo .autor { font-weight: 600; color: var(--tinta-2); }
.lugar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--petroleo-claro); color: var(--petroleo-2); margin: 18px 0; }
.lugar b { font-size: 15px; } .lugar small { display: block; color: var(--petroleo); opacity: .85; }
.lugar svg { width: 26px; height: 26px; flex: none; }
.lugar.sem { background: var(--ambar-claro); color: var(--ambar); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; font-size: 14px; margin: 0; }
.dados dt { color: var(--tinta-3); }
.dados dd { margin: 0; }
.secao { margin-top: 22px; }
.secao h3 { font-size: 16px; margin-bottom: 8px; }
.sinopse { font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); white-space: pre-line; }
.avaliar { display: inline-flex; gap: 2px; }
.avaliar button { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--linha-2); cursor: pointer; padding: 2px; }
.avaliar button.on { color: var(--ouro); }
.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13.5px; }
.linha-tempo li { display: flex; gap: 10px; } .linha-tempo time { color: var(--tinta-3); min-width: 82px; }
.mini-estante { display: grid; grid-template-columns: repeat(25, 1fr); gap: 2px; margin-top: 8px; }
.mini-estante i { height: 8px; border-radius: 1px; background: var(--linha); }
.mini-estante i.aqui { background: var(--petroleo); box-shadow: 0 0 0 2px rgba(180,71,94,.3); }

/* ---------- cadastro ---------- */
.cad-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.modos { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--papel-2); border-radius: 22px; margin-bottom: 14px; }
.modos button { flex: 1 1 auto; padding: 0 12px; border: 0; background: transparent; border-radius: 999px; height: 36px; font-weight: 600; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.modos button[aria-pressed="true"] { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra); }
.painel { padding: 18px; }
.camera { position: relative; aspect-ratio: 4 / 3; background: #111; border-radius: var(--r); overflow: hidden; display: grid; place-items: center; color: #ddd; }
.camera video { width: 100%; height: 100%; object-fit: cover; }
.camera .mira { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 38%; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.camera .mira::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #FF5A4E; box-shadow: 0 0 8px #FF5A4E; animation: varre 1.6s ease-in-out infinite; }
@keyframes varre { 0%, 100% { translate: 0 -14px; } 50% { translate: 0 14px; } }
.camera .lido-ok { position: absolute; inset: 0; background: rgba(47, 125, 79, .45); opacity: 0; transition: opacity .15s; pointer-events: none; }
.camera .lido-ok.on { opacity: 1; }
.camera-msg { position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000; }
.isbn-grande .in { font-size: 22px; letter-spacing: .06em; min-height: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.sessao-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.sessao-lista li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--papel); }
.sessao-lista li .mini { width: 24px; height: 36px; border-radius: 2px; overflow: hidden; flex: none; background: var(--papel-2); position: relative; }
.sessao-lista li .mini img { width: 100%; height: 100%; object-fit: cover; }
.sessao-lista li span { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-livro { padding: 20px; }
.form-livro .cab { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.form-livro .capa { cursor: pointer; }
.form-livro .capa .trocar { position: absolute; z-index: 3; inset: auto 0 0 0; background: rgba(30,36,48,.7); color: #fff; font-size: 11.5px; text-align: center; padding: 5px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; margin-bottom: 12px; }
.aviso-ambar { background: var(--ambar-claro); color: #7A5214; }
.aviso-verde { background: var(--verde-claro); color: var(--verde); }
.aviso-azul { background: var(--petroleo-claro); color: var(--petroleo-2); }
.rodape-form { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }
.resultados-busca { display: grid; gap: 8px; margin-top: 12px; }
.resultado { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--cartao); cursor: pointer; }
.resultado:hover { border-color: var(--petroleo); }
.resultado .mini { width: 40px; height: 60px; border-radius: 2px; overflow: hidden; background: var(--papel-2); position: relative; }
.resultado .mini img { width: 100%; height: 100%; object-fit: cover; }
.resultado b { display: block; font-size: 14px; } .resultado small { color: var(--tinta-3); }
.lote-saida { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; font-size: 13px; max-height: 360px; overflow-y: auto; }
.lote-saida li { display: flex; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--papel); }
.barra { height: 8px; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--petroleo); border-radius: 99px; transition: width .3s; }

/* ---------- estante ---------- */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--tinta-2); margin-bottom: 16px; }
.legenda button { background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; }
.legenda button.apagado { opacity: .35; }
.movel { background: linear-gradient(#8B6A4A, #7A5B3E); border-radius: 10px; padding: 10px; box-shadow: var(--sombra-forte); display: grid; gap: 10px; overflow-x: auto; }
.prateleira { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.prateleira .rot { color: #F3E6D3; font-family: var(--serif); font-weight: 600; font-size: 18px; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.vaos { display: grid; grid-template-columns: repeat(var(--cols, 25), minmax(36px, 1fr)); gap: 4px; background: #5E4630; padding: 6px; border-radius: 6px; box-shadow: inset 0 -6px 0 #4A3725; min-width: 980px; }
.vao { position: relative; height: 92px; border-radius: 3px; background: #F6EEDF; border: 0; padding: 0; cursor: pointer; display: flex; align-items: flex-end; overflow: hidden; transition: transform .1s, box-shadow .1s; }
.vao:hover, .vao:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.35); z-index: 2; outline: none; }
.vao .enche { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 1px; align-items: flex-end; padding: 0 2px; height: 100%; }
.vao .enche i { flex: 0 0 calc((100% - 4px) / var(--cap, 10) - 1px); border-radius: 1px 1px 0 0; box-shadow: inset -1px 0 0 rgba(0,0,0,.15); }
.vao .n { position: absolute; top: 2px; text-shadow: 0 0 3px #F6EEDF, 0 0 3px #F6EEDF; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: rgba(30,36,48,.55); z-index: 1; }
.vao.cheio::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--vermelho); border-radius: 3px; }
.vao.destaque { box-shadow: 0 0 0 3px #FFD166, 0 0 18px #FFD166; z-index: 3; }
.vao.apagado { opacity: .25; }
.estante-dica { font-size: 13px; color: var(--tinta-3); margin-top: 10px; }
.painel-vao h3 { font-size: 20px; }
.lista-vao { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.lista-vao li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--cartao); border: 1px solid var(--linha); cursor: pointer; font-size: 13.5px; }
.lista-vao li .ord { width: 22px; color: var(--tinta-3); font-size: 12px; text-align: right; }
.lista-vao li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- números ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { padding: 16px 18px; }
.kpi small { display: block; color: var(--tinta-3); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.kpi b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--tinta-2); }
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grafico { padding: 18px; min-width: 0; }
.grafico h3 { font-size: 17px; margin-bottom: 12px; }
.barras-h { display: grid; gap: 8px; }
.barras-h .l { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px; }
.barras-h .l span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-h .l .trilho { height: 12px; background: var(--papel-2); border-radius: 99px; overflow: hidden; position: relative; }
.barras-h .l .trilho i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.barras-h .l .trilho i.lidos { opacity: 1; } .barras-h .l .trilho i.total { opacity: .35; }
.barras-h .l b { text-align: right; font-variant-numeric: tabular-nums; }
svg.colunas text { font: 11px var(--sans); fill: var(--tinta-3); }
.anel { display: flex; align-items: center; gap: 18px; }

/* ---------- ajustes ---------- */
.ajustes { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.menu-ajustes { display: grid; gap: 2px; position: sticky; top: calc(var(--topo) + 20px); }
.menu-ajustes button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; font-weight: 550; color: var(--tinta-2); }
.menu-ajustes button[aria-current="true"] { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra); }
.bloco { padding: 22px; display: grid; gap: 16px; }
.bloco h2 { font-size: 22px; }
.bloco p.mudo { margin: -8px 0 0; }
.linhas { display: grid; gap: 6px; }
.linha-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--linha); background: var(--papel); flex-wrap: wrap; }
.linha-item .nome { flex: 1; min-width: 140px; font-weight: 550; }
.linha-item input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--linha-2); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }

/* ---------- avisos ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 20px; z-index: 90; background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 550;
  box-shadow: var(--sombra-forte); opacity: 0; transition: opacity .2s, translate .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; translate: -50% 0; }
.toast.erro { background: var(--vermelho); }
.modal-veu { position: fixed; inset: 0; z-index: 80; background: rgba(30,36,48,.4); display: grid; place-items: center; padding: 16px; }
.modal { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--papel); border-radius: 16px; box-shadow: var(--sombra-forte); padding: 22px; display: grid; gap: 14px; }
.modal h2 { font-size: 22px; }
.modal .rodape-form { margin-top: 4px; }
.girando { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.carregando-pag { display: grid; place-items: center; padding: 80px 0; color: var(--tinta-3); gap: 12px; }

/* ---------- celular ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .abas { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--abas) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
  .abas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--tinta-3); font-size: 11px; font-weight: 600; }
  .abas a[aria-current="page"] { color: var(--petroleo); }
  .abas a.cadastrar svg { width: 44px; height: 44px; padding: 11px; background: var(--petroleo); color: #fff; border-radius: 50%; margin-top: -22px; box-shadow: 0 6px 16px rgba(180,71,94,.4); }
  .conteudo { padding: 16px 16px calc(var(--abas) + 40px + env(safe-area-inset-bottom, 0px)); }
  .topo { padding: 0 16px; }
  .ajustes { grid-template-columns: minmax(0, 1fr); }
  .menu-ajustes { position: static; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .graficos { grid-template-columns: minmax(0, 1fr); }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada-arte { display: none; }
  .entrada-caixa .marca img { width: 64px; height: 64px; }
}
@media (max-width: 640px) {
  .cab-pag h1 { font-size: 25px; }
  .estantegrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
  .grade-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c2, .c3, .c4 { grid-column: span 1; } .c6, .c2x { grid-column: 1 / -1; }
  .ficha-topo { grid-template-columns: 100px minmax(0, 1fr); }
  .ficha-topo h2 { font-size: 20px; }
  .form-livro .cab { grid-template-columns: 90px minmax(0, 1fr); }
  .topo .marca small, .usuario-chip .nome-u { display: none; }
  .busca-grande kbd { display: none; }
  .barras-h .l { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 36px; }
  .resumo-lista { margin-left: 0; width: 100%; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros > * { flex: none; }
  .resumo-lista { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .topo, .abas, .filtros, .btn { display: none !important; }
  body { background: #fff; }
}

/* ===== estante = biblioteca da casa: planta + 6 prateleiras com 6 espaços ===== */
.sala-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 16px; }
.planta svg { width: 100%; height: auto; display: block; background: var(--papel-2, #F3EEE3); border-radius: 10px; padding: 6px; box-shadow: var(--sombra, 0 1px 3px rgba(0,0,0,.12)); }
.pl-prat { cursor: pointer; outline: none; } .pl-prat:hover rect:last-of-type, .pl-prat:focus-visible rect:nth-of-type(3) { stroke: #B4475E; }
.pl-prat.sel rect:nth-of-type(3) { stroke: #B4475E; stroke-width: 4; }
.movel { grid-template-columns: repeat(6, minmax(128px, 1fr)); gap: 10px; align-items: start; }
.coluna { background: #5E4630; border-radius: 6px; padding: 6px; box-shadow: inset 0 -6px 0 #4A3725; min-width: 0; }
.coluna.sel { outline: 3px solid #FFD166; }
.coluna .topo { color: #F3E6D3; text-align: center; padding: 2px 2px 6px; display: grid; gap: 1px; position: static; height: auto; background: none; backdrop-filter: none; border: 0; z-index: auto; }
.coluna .topo b { font-family: var(--serif); font-size: 16px; } .coluna .topo small { font-size: 11px; opacity: .8; }
.coluna .vaos { display: grid; grid-template-columns: 1fr; gap: 4px; background: none; padding: 0; box-shadow: none; min-width: 0; }
.coluna .vao { height: 70px; }
.coluna .vao .n { text-align: left; left: 6px; right: auto; font-size: 12px; }
.coluna .vao .et { position: absolute; left: 24px; right: 4px; top: 3px; font-size: 10px; line-height: 1.15; color: rgba(30,36,48,.75); text-align: right; z-index: 1; text-shadow: 0 0 3px #F6EEDF, 0 0 3px #F6EEDF; max-height: 24px; overflow: hidden; }
.coluna .vao .qtd { position: absolute; right: 5px; bottom: 3px; font-size: 10px; font-weight: 700; color: rgba(30,36,48,.7); z-index: 1; text-shadow: 0 0 3px #F6EEDF, 0 0 3px #F6EEDF; }
.plano-lista { max-height: 46vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: 8px; }
.plano-lista details { border-bottom: 1px solid var(--linha); padding: 6px 10px; } .plano-lista details.vazio-esp { opacity: .55; }
.plano-lista summary { cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.plano-lista ol { margin: 6px 0 4px 18px; padding: 0; font-size: 13px; }
@media (max-width: 760px) { .sala-wrap { grid-template-columns: 1fr; } .movel { overflow-x: auto; } }
@media print { body.imprimindo-plano > *:not(.modal-veu) { display: none !important; } body.imprimindo-plano .modal-veu { position: static; background: none; } body.imprimindo-plano .modal { box-shadow: none; max-width: none; } body.imprimindo-plano .plano-lista { max-height: none; overflow: visible; } body.imprimindo-plano .rodape-form, body.imprimindo-plano #aFolga { display: none; } }

/* ===== cadastro com leitor USB ===== */
.usb-pronto { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--verde-claro); color: var(--tinta); margin-bottom: 12px; }
.usb-pronto b { font-family: var(--serif); font-size: 20px; color: var(--verde); } .usb-pronto small { color: var(--tinta-2); font-size: 13px; }
.usb-campo { width: 100%; min-width: 0; box-sizing: border-box; font-size: 22px; min-height: 56px; letter-spacing: .06em; margin-bottom: 10px; }
.usb-ultimo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 10px; border: 2px solid var(--linha); min-height: 96px; }
.usb-ultimo:empty { display: none; }
.usb-ultimo.ok { border-color: var(--verde); background: var(--verde-claro); } .usb-ultimo.aviso { border-color: var(--ambar); background: var(--ambar-claro); }
.usb-ultimo.erro { border-color: var(--vermelho); background: var(--vermelho-claro); }
.usb-ultimo b { font-family: var(--serif); font-size: 18px; } .usb-capa { width: 64px; display: grid; place-items: center; }
.dedic-acervo { font-family: var(--serif); font-style: italic; color: var(--tinta-2); border-left: 3px solid var(--rosa); padding-left: 12px; margin: 6px 0 8px; max-width: 60ch; }

/* ===== números clicáveis ===== */
button.clic { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.kpi.clic { display: block; width: 100%; border: 1px solid var(--linha); background: var(--papel, #fff); transition: transform .12s, box-shadow .12s, border-color .12s; }
button.kpi.clic:hover, button.kpi.clic:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(30,36,48,.3); border-color: var(--petroleo); outline: none; }
.barras-h button.l.clic { width: 100%; background: none; border: 0; padding: 3px 4px; margin: -3px -4px; border-radius: 8px; }
.barras-h button.l.clic:hover, .barras-h button.l.clic:focus-visible { background: var(--papel-2); outline: none; }
.colecao { display: grid; gap: 2px; }
.colecao button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: none; border: 0; padding: 8px 6px; border-radius: 8px; font-size: 14.5px; border-bottom: 1px solid var(--linha); }
.colecao button:hover, .colecao button:focus-visible { background: var(--papel-2); outline: none; }
.clic-svg { cursor: pointer; } .clic-svg:hover, .clic-svg:focus-visible { opacity: .75; outline: none; }
.chip-extra { background: var(--petroleo); color: #fff; border-color: var(--petroleo); }

/* ===== Cadastrar: resultado grande ao lado do leitor ===== */
.usb-painel { padding: 22px 24px; border-left: 6px solid var(--linha); border-radius: var(--r, 12px); }
.usb-painel.ok { border-left-color: var(--verde); background: var(--verde-claro); }
.usb-painel.aviso { border-left-color: var(--ambar); background: var(--ambar-claro); }
.usb-painel.erro { border-left-color: var(--vermelho); background: var(--vermelho-claro); }
.usb-painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; }
.usb-estado { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.usb-painel.ok .usb-estado { color: var(--verde); } .usb-painel.erro .usb-estado { color: var(--vermelho); } .usb-painel.aviso .usb-estado { color: var(--ambar); }
.usb-painel-corpo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; }
.usb-painel-capa { width: 150px; display: grid; place-items: center; }
.usb-painel-sem { width: 150px; height: 220px; display: grid; place-items: center; border-radius: 8px; background: var(--papel-2); color: var(--tinta-3); }
.usb-painel h2 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; overflow-wrap: anywhere; }
.usb-painel-autor { font-size: 17px; margin: 0; color: var(--tinta-2); }
.usb-painel-nota { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.usb-recentes { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.usb-recentes > div { display: flex; gap: 8px; flex-wrap: wrap; }
.usb-rec .mini { width: 36px; height: 54px; border-radius: 3px; overflow: hidden; display: block; background: var(--papel-2); position: relative; }
.usb-rec .mini img { width: 100%; height: 100%; object-fit: cover; }
.usb-rec.ambar { opacity: .6; }
@media (min-width: 821px) { .usb-ultimo.na-lateral { display: none; } }
@media (max-width: 820px) {
  .cad-grid { grid-template-columns: minmax(0, 1fr); }
  .usb-painel { padding: 16px; } .usb-painel-corpo { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .usb-painel-capa { width: 96px; } .usb-painel h2 { font-size: 20px; }
}

/* ---- Revisão de design (nov/2026): toque, foco, zoom do iPhone, avisos ---- */
:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.vao:focus-visible, .kpi.clic:focus-visible, .colecao:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }
@media (pointer: coarse) {
  .btn, .btn-p, .chip, .modos button, .avaliar button { min-height: 44px; min-width: 44px; }
  .in, select.in, .filtros .in, .filtros select, input, select, textarea { font-size: 16px; min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; }
}
@media (max-width: 1000px) {
  .toast { bottom: calc(var(--abas) + 16px + env(safe-area-inset-bottom, 0px)); }
}
.erro-msg[role="alert"] { font-weight: 500; }

/* ---------- 1.5: aparência (claro/escuro) e "Conheça mais sobre o Clarice" ---------- */
.sobre { display: grid; gap: 10px; max-width: 70ch; }
.sobre h3 { font-size: 18px; margin-top: 14px; }
.sobre p { margin: 0; line-height: 1.65; }
.sobre .assina { font-family: var(--serif); font-style: italic; color: var(--petroleo-2); }
.sobre-contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sobre-contato li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sobre-contato li span { min-width: 56px; color: var(--tinta-3); font-size: 13px; }
.tema-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.tema-op { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: var(--r); border: 2px solid var(--linha-2); background: var(--cartao); cursor: pointer; min-height: 44px; }
.tema-op[aria-checked="true"] { border-color: var(--petroleo); box-shadow: 0 0 0 3px rgba(180, 71, 94, .16); }
.tema-op small { color: var(--tinta-3); }
.tema-op .amostra { display: block; height: 44px; border-radius: 8px; border: 1px solid var(--linha-2); margin-bottom: 6px; }
.tema-op .amostra.claro { background: linear-gradient(90deg, #FAF9F5 60%, #B4475E 60%); }
.tema-op .amostra.escuro { background: linear-gradient(90deg, #171A21 60%, #E27A90 60%); }

html[data-tema="escuro"] {
  --papel: #171A21; --papel-2: #1E222B; --cartao: #232833; --linha: #313846; --linha-2: #414A5C;
  --tinta: #ECE8DF; --tinta-2: #C3C0B8; --tinta-3: #A0A5B0;
  --petroleo: #E27A90; --petroleo-2: #F0A0B1; --petroleo-claro: #3A2630; --rosa: #F4A2B0;
  --ouro: #D6A956; --ouro-claro: #3A3120;
  --vermelho: #F08A80; --vermelho-claro: #3B2523; --verde: #6CC08B; --verde-claro: #1F3328; --ambar: #E0A850; --ambar-claro: #3A2F1A;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --sombra-forte: 0 12px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
html[data-tema="escuro"] .btn-pri, html[data-tema="escuro"] .chip-extra, html[data-tema="escuro"] .abas a.cadastrar svg { color: #1B1317; }
html[data-tema="escuro"] .btn-ouro { color: #1B1517; }
html[data-tema="escuro"] .chip[aria-pressed="true"], html[data-tema="escuro"] .abas-entrada button[aria-selected="true"],
html[data-tema="escuro"] .nav a[aria-current="page"], html[data-tema="escuro"] .toast { color: var(--papel); }
html[data-tema="escuro"] .btn-perigo { border-color: #6A3A36; }
html[data-tema="escuro"] .topo, html[data-tema="escuro"] header.topo { background: rgba(23, 26, 33, .88); }
html[data-tema="escuro"] .abas { background: rgba(23, 26, 33, .95); }
html[data-tema="escuro"] .tabela tr:hover td { background: #2A303C; }
html[data-tema="escuro"] .entrada-arte { background: #171A21; }
html[data-tema="escuro"] .selo-lendo { background: var(--ouro-claro); color: #E8C27A; }
html[data-tema="escuro"] .selo-desejo, html[data-tema="escuro"] .selo-uso { background: #30283D; color: #C7AEEA; }
html[data-tema="escuro"] .selo-parcial { background: #1F2E3D; color: #8CB9E3; }
html[data-tema="escuro"] .aviso-ambar { color: #F0CF98; }
html[data-tema="escuro"] .mf-esp span, html[data-tema="escuro"] .mf-c span small { color: var(--tinta-3); }
html[data-tema="escuro"] .num-movel { background: #3A3120; color: #F3E6D3; }
html[data-tema="escuro"] .assist-barra i { background: var(--linha); }
html[data-tema="escuro"] .planta svg { background: var(--papel-2); }
html[data-tema="escuro"] .linha-item input[type="color"] { background: var(--cartao); }
html[data-tema="escuro"] .modal-veu, html[data-tema="escuro"] .veu { background: rgba(0, 0, 0, .55); }
html[data-tema="escuro"] .in:focus { box-shadow: 0 0 0 3px rgba(226, 122, 144, .25); }
@media print { html[data-tema="escuro"] { --papel: #fff; --papel-2: #f3eee3; --cartao: #fff; --linha: #e7e0d3; --linha-2: #d9d0bf; --tinta: #1E2430; --tinta-2: #4A5160; --tinta-3: #5F6672; color-scheme: light; } }

/* ---------- Conferência de inventário e relatórios (js/conferir.js) ---------- */
.cf-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cf-card { padding: 18px 20px; margin-bottom: 8px; }
.cf-card h2 { font-size: 20px; margin-bottom: 4px; }
.cf-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cf-rot { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.cf-rot .in { margin-top: 4px; font-weight: 400; }
.cf-contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cf-c { padding: 14px 16px; }
.cf-c small { display: block; color: var(--tinta-3); font-size: 12.5px; font-weight: 600; }
.cf-c b { display: block; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cf-c span { font-size: 12.5px; color: var(--tinta-2); }
.cf-c-ambar { border-color: var(--ambar); }
.cf-c-verm { border-color: var(--vermelho); }
.cf-c-verde { border-color: var(--verde); }
.cf-barra { height: 8px; border-radius: 999px; background: var(--papel-2); overflow: hidden; margin-top: 8px; }
.cf-barra i { display: block; height: 100%; background: var(--verde); transition: width .25s; }
.cf-leitura { padding: 16px 18px; margin-bottom: 8px; }
.cf-leitura label { display: block; font-size: 13.5px; margin-bottom: 8px; }
.cf-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cf-linha .in { flex: 1 1 240px; font-size: 18px; min-height: 48px; font-variant-numeric: tabular-nums; }
.cf-fb { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--papel-2); color: var(--tinta); display: flex; flex-direction: column; gap: 2px; font-size: 15px; border: 2px solid transparent; }
.cf-fb b { font-size: 18px; }
.cf-fb.cf-ok { background: var(--verde-claro); color: var(--verde); border-color: var(--verde); }
.cf-fb.cf-rep, .cf-fb.cf-aviso { background: var(--ambar-claro); color: #7A5214; border-color: var(--ambar); }
.cf-fb.cf-erro { background: var(--vermelho-claro); color: var(--vermelho); border-color: var(--vermelho); }
.cf-fb.cf-flash { animation: cfFlash .45s ease-out; }
@keyframes cfFlash { from { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(0, 0, 0, .12); } to { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .cf-fb.cf-flash { animation: none; } }
.cf-ultimas { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tinta-2); }
.cf-ultimas li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-u-erro { color: var(--vermelho); } .cf-u-ok { color: var(--verde); } .cf-u-aviso, .cf-u-rep { color: var(--ambar); }
.cf-cod { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.cf-grupo { margin-bottom: 12px; overflow: hidden; }
.cf-grupo > summary { cursor: pointer; padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cf-grupo .tabela tr:hover td { cursor: pointer; }
@media (max-width: 640px) { .cf-contadores { grid-template-columns: 1fr 1fr; } .cf-c b { font-size: 26px; } }
@media print { .topo, .abas, .nao-imprimir, .cf-abas, .toast { display: none !important; } .conteudo { padding: 0 !important; } .cf-grupo { break-inside: avoid; box-shadow: none; } .tabela tr:hover td { background: none; } }