/* ==========================================================================
   TEMA: Editorial — refinado, serif Fraunces + Inter, paleta sóbria,
   acento terracota. Só cores/fontes/decoração; estrutura vem de base.css.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --papel: #faf8f4; --papel-2: #f3efe8; --cartao: #fff;
  --tinta: #232019; --tinta-2: #6b6457; --tinta-3: #938a78;
  --acento: #b4532a; --acento-2: #97431f; --borda: #e8e2d6;
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--tinta); background: var(--papel); }

.topo { color: var(--tinta); background: var(--papel); }
.barra-nav { background: var(--papel-2); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); box-shadow: 0 2px 8px -6px rgba(35,32,25,.4); }
#titulo { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
.sub { color: var(--tinta-2); }
.tag { font-family: 'Inter', sans-serif; }
.tag.b { background: rgba(180,83,42,.12); color: var(--acento-2); }
.tag.ilha { background: var(--papel-2); color: var(--tinta-2); }

.campo > span { color: var(--tinta-3); }
.campo.destaque > span { color: var(--acento-2); }

.rotulo { color: var(--tinta-3); }
.tab {
  color: var(--tinta-2); background: #fff; border: 1px solid var(--borda);
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { background: var(--papel-2); }
.tab[aria-selected="true"] { color: #fff; background: var(--acento); border-color: var(--acento); }
.campo select {
  color: var(--tinta); background-color: #fff; border: 1px solid var(--borda);
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 53%, calc(100% - 10px) 53%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.campo.destaque select { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(180,83,42,.18); }

.botao { color: var(--tinta); background: #fff; border: 1px solid var(--borda); transition: background .15s, border-color .15s; }
.botao:hover { background: var(--papel-2); }
.botao.primario { color: #fff; background: var(--acento); border-color: var(--acento); }
.botao.primario:hover { background: var(--acento-2); }
.botao.subtil { color: var(--tinta-2); background: transparent; border-color: transparent; }
.botao.subtil:hover { background: var(--papel-2); }

.explicacao { color: var(--tinta-2); }
.explicacao strong { color: var(--tinta); font-weight: 600; }
.aviso.info { background: #fff; border: 1px solid var(--borda); border-left: 3px solid var(--acento); color: var(--tinta); }
.aviso.alerta { background: #fff8f3; border: 1px solid #f0d9c8; border-left: 3px solid var(--acento); color: var(--acento-2); }

.serie { background: var(--cartao); border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(35,32,25,.04); transition: box-shadow .2s; }
.serie:hover { box-shadow: 0 10px 28px -16px rgba(35,32,25,.3); }
.serie > h2 { font-family: 'Fraunces', Georgia, serif; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

.linha { border-bottom: 1px solid var(--borda); }
.serie .linha:last-child { border-bottom: 0; }
.linha:hover { background: var(--papel-2); }
.num { color: var(--tinta-3); font-family: 'Fraunces', Georgia, serif; font-weight: 500; }
.nome { color: var(--tinta); }
.nome small { background: var(--papel-2); color: var(--tinta-2); }
.meta { color: var(--tinta-2); }
.lat { color: var(--acento-2); }
.linha.eqB { box-shadow: inset 3px 0 0 var(--acento); }
.linha.eqB .nome small { background: rgba(180,83,42,.14); color: var(--acento-2); }
.linha.eqIlha { box-shadow: inset 3px 0 0 var(--tinta-3); }
.linha.eqIlha .nome small { background: var(--papel-2); color: var(--tinta-2); }

.editor { background: var(--cartao); border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(35,32,25,.04); }
.editor-barra h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--tinta); }
.editor-barra h2 span { color: var(--acento-2); }
.editor-dica { color: var(--tinta-2); background: var(--papel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.editor-dica strong { color: var(--tinta); }
.editor-dica code { background: #fff; border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px; font-size: .85em; }
.tabela-wrap { border: 1px solid var(--borda); }
#tabelaEditor th { color: var(--tinta-2); background: var(--papel-2); border-bottom: 1px solid var(--borda); }
#tabelaEditor td { border-bottom: 1px solid var(--borda); }
#tabelaEditor tbody tr:hover { background: var(--papel); }
#tabelaEditor input[type="text"], #tabelaEditor input[type="number"] { color: var(--tinta); background: #fff; border: 1px solid var(--borda); }
#tabelaEditor input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(180,83,42,.15); }
#tabelaEditor input[type="checkbox"] { accent-color: var(--acento); }
.remover { color: var(--acento-2); background: rgba(180,83,42,.08); border: 1px solid rgba(180,83,42,.25); }
.remover:hover { background: rgba(180,83,42,.16); }

.rodape { color: var(--tinta-3); border-top: 1px solid var(--borda); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }