/* forest — ponte p/ o markup do Morpheus 6 dentro do tema "bb".
   Carregado DEPOIS de style-bb.css.
   PALETA do forest: área de conteúdo = pergaminho claro, TEXTO MARROM ESCURO.
   texto #230707 / #4a2e18 ; borda #c09074 ; preenchimento marrom rgba(136,93,15,a)
   botão/acento #b4a814 (hover #c1b51c) ; perigo #8f2b2b */

/* ============================================================
   Bootstrap 5 — ESSENCIAIS (grid, utils, componentes)
   O layout do forest não carrega o CSS do Bootstrap, só o JS.
   ============================================================ */

/* --- grid --- */
.container, .container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.row > * { padding-right: 12px; padding-left: 12px; box-sizing: border-box; }
.row.g-0 { margin: 0; } .row.g-0 > * { padding: 0; }
.row.g-3 > * { margin-bottom: 12px; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1{flex:0 0 auto;width:8.333%}.col-2{flex:0 0 auto;width:16.666%}.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.333%}.col-5{flex:0 0 auto;width:41.666%}.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.333%}.col-8{flex:0 0 auto;width:66.666%}.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.333%}.col-11{flex:0 0 auto;width:91.666%}.col-12{flex:0 0 auto;width:100%}
@media (min-width: 768px) {
  .col-md-1{flex:0 0 auto;width:8.333%}.col-md-2{flex:0 0 auto;width:16.666%}.col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.333%}.col-md-5{flex:0 0 auto;width:41.666%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.333%}.col-md-8{flex:0 0 auto;width:66.666%}.col-md-9{flex:0 0 auto;width:75%}
  .col-md-10{flex:0 0 auto;width:83.333%}.col-md-12{flex:0 0 auto;width:100%}
}
@media (min-width: 992px) {
  .col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.333%}.col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-8{flex:0 0 auto;width:66.666%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-12{flex:0 0 auto;width:100%}
}

/* --- flex / display / texto utils --- */
.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}
.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-none{display:none!important}
.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}
.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}
.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}
.text-center{text-align:center!important}.text-end{text-align:right!important}.text-start{text-align:left!important}
.w-100{width:100%!important}.h-100{height:100%!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}
.float-end{float:right!important}.float-start{float:left!important}
.position-relative{position:relative!important}.position-absolute{position:absolute!important}
.text-danger{color:#8f2b2b!important}.text-success{color:#3f6b1f!important}.text-muted{color:#7a6552!important}
.text-warning{color:#8a6d1f!important}.fw-bold{font-weight:700!important}.small,.text-sm{font-size:.85em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* --- spacing utils --- */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}
.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}
.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}
.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.px-0{padding-left:0!important;padding-right:0!important}
.g-3{gap:1rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}
.margin-top{margin-top:1rem!important}.margin-bottom{margin-bottom:1rem!important}

/* ============================================================
   Botões  (.btn do v6 e .button do forest — o style-bb.css
   tem a regra .button num bloco mal fechado e nem sempre aplica)
   ============================================================ */
.btn,
a.button,
.content-page .button,
.box-panel .button,
button.button,
.content-page form button:not([class]) {
    display: inline-block;
    padding: 9px 22px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: #fff;
    background: #b4a814;
    border: none;
    border-radius: 5px;
    box-shadow: 0 .4em 8px rgba(31, 29, 29, 0.45);
    transition: all .3s ease;
}
.btn:hover, a.button:hover,
.content-page .button:hover, .box-panel .button:hover,
button.button:hover,
.content-page form button:not([class]):hover { background: #c1b51c; color: #fff; }
.button-border::after {
    content: ""; position: absolute; left: -3px; top: -3px;
    width: 100%; height: 100%;
    border: 3px solid rgba(80, 72, 57, 0.5); border-radius: 8px; pointer-events: none;
}
.btn-sm, .btn.btn-sm { padding: 5px 12px; font-size: 11px; }
.btn-lg { padding: 13px 28px; font-size: 14px; }
.btn-primary { background: #b4a814; }
.btn-secondary { background: #6b5d3a; }
.btn-danger { background: #8f2b2b; }
.btn-success { background: #4f7a2f; }
.btn-warning { background: #c79a2a; }
.btn-info { background: #3a6470; }
.btn-block, .btn.w-100, a.button.w-100 { display: block; width: 100%; }
.card-footer .button, .card-footer .btn { display: block; width: 100%; box-shadow: none; }

/* ============================================================
   Forms (dentro da área de conteúdo = fundo claro, texto escuro)
   ============================================================ */
.form-label, .col-form-label, .form-control-label {
    display: inline-block; margin-bottom: 4px; font-weight: bold; color: #4a2e18;
}
.content-page input[type=text], .content-page input[type=password], .content-page input[type=email],
.content-page input[type=number], .content-page input:not([type]), .content-page select, .content-page textarea,
.box-panel input[type=text], .box-panel input[type=password], .box-panel input:not([type]), .box-panel select, .box-panel textarea,
.form input[type=text], .form input[type=password], .form input[type=email], .form input[type=number],
.form input:not([type]), .form select, .form textarea,
.form-control, .form-select {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 7px 10px;
    font-size: 14px;
    color: #230707;
    /* neutraliza o background: url(../images/red-light-bg.jpg) herdado de style-bb.css */
    background-image: none;
    background-color: #f7efdd;
    border: 1px solid #c09074;
    border-radius: 3px;
    box-sizing: border-box;
}
.form-control:focus, .form-select:focus,
.content-page input:focus, .content-page textarea:focus, .content-page select:focus,
.form input:focus, .form textarea:focus, .form select:focus {
    outline: none; border-color: #8a5a2a; background-image: none; background-color: #fff;
}
textarea.form-control, .content-page textarea { min-height: 90px; }
.form-select { appearance: auto; }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.6em; margin-bottom: .3rem; }
.form-check-input { margin-left: -1.6em; }
.form-check.form-switch .form-check-input { width: 2.2em; }
.input-group { display: flex; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.form-text { font-size: 12px; color: #7a6552; }
.required, .text-danger { color: #8f2b2b; }

/* forms .form .row .label/.field (views de serviço restauradas do 5.2) */
.form .row { margin-bottom: 12px; overflow: hidden; }
.form .row .label { float: left; width: 150px; padding-top: 6px; min-height: 24px; font-weight: bold; color: #4a2e18; }
.form .row .field { margin-left: 160px; }
.form .row .field.block { margin-left: 0; display: block; }
.form .submit, .submit { margin-top: 16px; overflow: hidden; }
.form .submit::after, .submit::after { content: ""; display: block; clear: both; }

/* ============================================================
   Tabelas  (cabeçalho marrom, linhas com leve tom, borda #c09074)
   ============================================================ */
.table, table.list, .content-page table.list {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    color: #230707;
}
.table > :not(caption) > * > *,
table.list th, table.list td {
    padding: 7px 10px;
    border: 1px solid #c09074;
}
.table thead th, .table > thead, .table-dark, .table .table-dark,
table.list thead tr th {
    background: #8a6a3a;
    color: #fbf1dd;
    text-align: left;
    font-weight: bold;
}
.table-striped > tbody > tr:nth-of-type(odd) > *,
table.list tbody tr:nth-child(2n) td {
    background: rgba(136, 93, 15, 0.10);
}
.table-hover > tbody > tr:hover > *,
table.list tbody tr:hover td { background: rgba(180, 168, 20, 0.14); }
.table-bordered > :not(caption) > * > * { border: 1px solid #c09074; }
table.list.panel td:first-child { width: 42%; font-weight: bold; color: #4a2e18; }
table.list.panel td:nth-child(2n) { text-align: right; }

/* ============================================================
   box-panel  (views de serviço do 5.2)
   ============================================================ */
.box-panel { margin-bottom: 20px; }
.box-panel > h2, .box-panel .box-panel-title {
    display: inline-block;
    padding: 6px 14px;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fbf1dd;
    background: #8a6a3a;
    border: 1px solid #c09074;
    border-bottom: 0;
}
.box-panel .box-panel-content {
    padding: 16px;
    border: 1px solid #c09074;
    background: rgba(136, 93, 15, 0.06);
}

/* ============================================================
   Menu lateral do painel  (.panel-a — o 5.2 mistura com
   .list-group-item, que inflava os itens)
   ============================================================ */
td .panel-a,
.panel-a,
.panel-a.list-group-item,
.panel-a.list-group-item-action {
    display: block;
    width: auto;
    padding: 6px 4px;
    line-height: 1.4;
    font-size: 13px;
    font-weight: bold;
    color: #4a2e18 !important;
    background: none !important;
    border: 0 !important;
    text-decoration: none;
    transition: padding-left .2s ease;
}
.panel-a:hover { padding-left: 10px; color: #230707 !important; }
.panel-a.active { color: #7a5a0f !important; background: rgba(136, 93, 15, 0.14) !important; }
.panel .panel-a + br + hr,
.content-page .panel hr { margin: 0; }

/* ============================================================
   Alerts / badges / list-group
   ============================================================ */
.alert { padding: 12px 16px; margin-bottom: 1rem; border: 1px solid #c09074; background: rgba(136,93,15,.08); color: #230707; }
.alert-warning { border-color: #a9862f; background: rgba(169,134,47,.14); }
.alert-danger { border-color: #a04a4a; background: rgba(160,74,74,.14); }
.alert-success { border-color: #5c8a3c; background: rgba(92,138,60,.14); }
.badge { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: bold; line-height: 1; color: #fff; background: #8a6a3a; border-radius: 3px; vertical-align: middle; }
.badge.bg-success, .badge-success { background: #4f7a2f; }
.badge.bg-danger, .badge-danger { background: #8f2b2b; }
.badge.bg-primary, .badge-primary { background: #7a5a1f; }
.badge.bg-warning, .badge-warning { background: #8a6d1f; }
.badge.bg-secondary { background: #6b5d3a; }
.rounded-pill { border-radius: 999px; }

.list-group { display: flex; flex-direction: column; }
.list-group-item:not(.panel-a) {
    display: block;
    padding: 9px 14px;
    color: #230707;
    background: rgba(136,93,15,.05);
    border: 1px solid #c09074;
    border-bottom-width: 0;
    text-decoration: none;
}
.list-group-item:not(.panel-a):last-child { border-bottom-width: 1px; }
.list-group-item:not(.panel-a).active { background: rgba(136,93,15,.2); font-weight: bold; }
.list-group-item-action:not(.panel-a):hover { background: rgba(180,168,20,.12); }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }

/* ============================================================
   Cards (lista de personagens no painel etc.)
   ============================================================ */
.card { background: rgba(136, 93, 15, 0.08); border: 1px solid #c09074; border-radius: 0; }
.card-header { padding: 8px 12px; font-weight: bold; color: #4a2e18; border-bottom: 1px solid #c09074; text-align: center; }
.card-body { padding: 12px; }
.card-footer { padding: 8px; border-top: 1px solid #c09074; }
.img-fluid { max-width: 100%; height: auto; }

.list-characters { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.list-characters .character { text-decoration: none; }
.list-characters .character .card { width: 132px; }
.list-characters .character .character-avatar { padding: 8px; text-align: center; }
.list-characters .character.active .card { outline: 2px solid #b4a814; }
/* markup do panel/character.phtml do forest: <a class="character"><div class="name"><div class="avatar"> */
.content-page a.character { display: inline-block; text-decoration: none; color: #4a2e18; text-align: center; }
.content-page a.character .name { font-weight: bold; padding: 4px 0; }
.content-page a.character.active .name { color: #7a5a0f; }

/* ============================================================
   Nav-tabs / collapse / dropdown  (style-bb.css não cobre)
   ============================================================ */
.content-page .nav, .posts .nav { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 10px; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.show, .tab-content > .tab-pane.active { display: block; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.tab-pane.fade { opacity: 1; }
.dropdown-menu { display: none; position: absolute; z-index: 1000; min-width: 10rem; padding: 6px 0; background: #f7efdd; border: 1px solid #c09074; }
.dropdown-menu.show { display: block; }
.dropdown-item { display: block; padding: 6px 14px; color: #230707; text-decoration: none; }
.dropdown-item:hover { background: rgba(180,168,20,.12); }
.collapse:not(.show) { display: none; }
.collapse.show { display: block; }
@media (min-width: 992px) { .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } }

/* ============================================================
   breadcrumb v6
   ============================================================ */
.content-page .breadcrumb { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.content-page .breadcrumb .breadcrumb-item { display: inline; color: #7a6552; }
.content-page .breadcrumb .breadcrumb-item a { color: #7a5a0f; }
.content-page .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "› "; color: #7a6552; }

/* ============================================================
   Notícias (home / lista / post individual)
   ============================================================ */
.news-block .top-news-block {
    margin-bottom: 18px;
    border: 1px solid #c09074;
    background: rgba(136, 93, 15, 0.05);
}
.top-news.no-cover {
    padding-left: 0; height: auto; min-height: 0; background-image: none !important;
}
.top-news.no-cover::after { display: none; }
.top-news.no-cover .news-info h2,
.top-news.no-cover .news-info p,
.top-news.no-cover .news-date { margin-left: 0; }
.top-news.no-cover .news-info p { height: auto; max-height: 96px; }
.single-news { margin-bottom: 20px; }
.single-news img { max-width: 100%; height: auto; }
.single-news .image-cover { float: left; margin: 0 15px 10px 0; }
.single-news .image-cover img { max-width: 240px; }
ul.comments { list-style: none; margin: 10px 0; padding: 0; }
ul.comments li { padding: 10px 0; border-top: 1px solid #c09074; }
ul.comments li .desc .name { color: #4a2e18; font-weight: bold; }
ul.comments li .desc .created { float: right; color: #7a6552; font-size: 12px; }
ul.comments li .desc .body { line-height: 1.4; margin-top: 6px; }
.msg { padding: 10px; margin: 10px 0; background: rgba(136,93,15,.08); border: 1px solid #c09074; }

/* ============================================================
   reCAPTCHA
   ============================================================ */
.captcha { margin: 10px 0; }
#re-captcha { min-height: 78px; }

/* ============================================================
   Bootstrap 5 modal (o layout do forest carrega o JS do BS, não o CSS)
   ============================================================ */
.modal {
    position: fixed; top: 0; left: 0; z-index: 1055;
    display: none; width: 100%; height: 100%;
    overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal.show { display: block; }
.modal.fade .modal-dialog { transition: transform .2s ease-out; transform: translateY(-40px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog { position: relative; width: auto; margin: 1.75rem auto; max-width: 500px; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-lg { max-width: 800px; }
.modal-content {
    position: relative; display: flex; flex-direction: column; width: 100%;
    pointer-events: auto;
    background: #f2e6cd;
    color: #230707;
    border: 1px solid #8a5a2a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    outline: 0;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #c09074; }
.modal-header .modal-title { margin: 0; font-size: 16px; color: #4a2e18; }
.modal-body { position: relative; padding: 16px; max-height: 70vh; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #c09074; }
.btn-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: .25em;
    background: transparent; border: 0; color: #4a2e18; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { opacity: 1; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background: #000; }
.modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.modal-backdrop.show { opacity: .6; }
body.modal-open { overflow: hidden; }