:root {
    --orange: #f50;
    --red: #c00;
    --green: #7ba428;
    --fg-blue: #045a99;
    --blue: #045a99;
    --fg-dark-gray: #666676;
    --fg-darker-gray: #444454;
    --bg-orange: rgba(255,102,0,0.3);
    --bg-green: rgba(0,102,51,0.3);
    --bg-blue: #1484cb;
    --bg-gray: #eeeeee;
    --bg-less-light: #f9f6f3;
    --bg-light: #fbf9f7;
    --bg-dark: #f4f0ea;
    --font-family: 'Roboto condensed';
    --balloon-border-radius: 0;
    --balloon-color: var(--bg-blue);
}


#navbar-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ---------- Barra superior ---------- */
#header { margin-bottom: 0 !important; }
#navbar-cria .nav-link {
    padding: 0 10px !important;
    font-size: 1.2rem !important;
    line-height: 40px !important;
    color: #fff !important;
}
#navbar-cria .nav-link.dropdown-toggle::after { vertical-align: 0.15em; }
#navbar-cria .navbar-toggler { padding: 0 8px; line-height: 40px; }
#navbar-cria #lang-menu-button {
    padding: 0 10px !important;
    height: 28px;
    line-height: 28px;
    font-size: 1rem !important;
    font-family: 'Roboto Condensed' !important;
    font-weight: 500;
    border: none;
    box-shadow: none;
}
#navbar-cria .dropdown { display: flex; align-items: center; height: 40px; }
.content-wrapper {
    max-width: 100% !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-bottom: 20px;
}


/* ---------- Ícone de tooltip "i" ---------- */
.tip-icon {
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.85;
    position: relative;
}
.tip-icon:hover { opacity: 1; }

.tip-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
}
.tip-wrap > img { vertical-align: middle; opacity: 0.85; }
.tip-wrap:hover > img { opacity: 1; }
.tip-wrap > .tip-body {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background-color: var(--bg-blue);
    color: white;
    border: 1px solid #e0e0e0;
    padding: 5px;
    font-size: small;
    font-weight: normal;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1.35;
    white-space: normal;
    width: 300px;
    text-align: left;
    box-shadow: 5px 5px 5px #ccc;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 99999;
}
.tip-wrap > .tip-body b { font-weight: 600; }
.tip-wrap > .tip-body p { margin: 6px 0 0 0; }
.tip-wrap.tip-btn { margin-left: 0; cursor: default; vertical-align: baseline; }
/* Garante que o tooltip vença stacking de elementos vizinhos */
.tip-wrap:hover { z-index: 99999; position: relative; }
.tip-wrap:hover > .tip-body {
    opacity: 1;
    visibility: visible;
}

.tip-wrap.tip-right > .tip-body { left: auto; right: 0; }

/* Espaço entre o checkbox e o nome do campo nos filtros secundários */


.content-wrapper,
.content-wrapper *,
.content-wrapper *::before,
.content-wrapper *::after {
    box-sizing: content-box;
}

.content-wrapper label {
    display: inline;
    margin-bottom: 0;
}

.content-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
}

.content-wrapper b,
.content-wrapper strong {
    font-weight: bold;
}

.content-wrapper input,
.content-wrapper select,
.content-wrapper textarea,
.content-wrapper button {
    margin: 0;
    line-height: normal;
}

.content-wrapper input[type="checkbox"],
.content-wrapper input[type="radio"] {
    margin: revert;
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6 {
    margin-top: 0;
}

#div-menu,
#div-form,
footer,
#cookie-banner { line-height: normal; }

#div-menu img,
#div-form img { vertical-align: baseline; }
/* exceção: o ícone "i" fica centrado no rótulo (wrapper de tooltip do portal) */
#div-form .tip-wrap > img { vertical-align: middle; }

#div-form table                    { border-spacing: 2px; }
#div-form table[cellspacing="0"]   { border-spacing: 0; }
/* .geo-table declara border-collapse: collapse; o reset genérico de
   .content-wrapper tem especificidade maior e o anulava. */
#div-form .geo-table               { border-collapse: collapse; border-spacing: 0; }

/* Sem realce azul/sublinhado do Bootstrap nos links */
#div-menu a, #div-menu a:hover,
#div-form a, #div-form a:hover,
footer a,    footer a:hover { color: inherit; text-decoration: none; }

.menu-tip { flex-basis: 100%; padding-bottom: 4px; }


.bg-light-gray  { background-color: var(--bg-light) !important; box-shadow: 3px 3px 3px #ccc; }
.bg-light-gray:hover { background-color: var(--bg-less-light) !important; box-shadow: 3px 3px 3px #ccc; }
mi { color: var(--orange); }
html { font-size: min(max(11px, 1vmax), 14px); }
body { font-family: var(--font-family); color: #555; }
a { text-decoration: none; color: inherit; }

input[type=text] {
    font-family: 'Roboto'; color: var(--orange); font-weight: bold; font-size: 1rem;
    border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark);
}
.mapbiomas_sel {
    font-family: 'Roboto'; color: var(--orange); font-weight: bold; font-size: 1rem;
    border: none; box-shadow: none; background-color: #fff;
}
input[type=checkbox] { font-family: 'Roboto Condensed'; border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark); }
select { border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark); color: var(--orange); font-weight: bold; }
option { border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark); color: var(--orange); font-weight: bold; }
.lang-combo { font-family: 'Roboto Condensed'; border: none; box-shadow: none; background-color: var(--bg-blue); color: white; font-weight: 500; font-size: 1rem; }

:checked + span { font-weight: bold; color: var(--orange); background-color: rgb(20,132,203,0.15); }
.selected-layers { color: var(--orange); background-color: #fff; }
.selected-landuse { color: var(--orange); background-color: #fff; }
textarea {
    font-family: 'Roboto'; min-width: 200px; color: var(--orange); font-weight: bold; font-size: 1rem;
    border: 1px solid #eee; box-shadow: 3px 3px 3px #ccc; background-color: var(--bg-dark);
}

#query-info { font-size: small; color: #999; border-top: 1px solid #eee; margin-top: 3px; text-align: right; }
#div-link   { float: left; }

.elink  { color: var(--blue) }
.glink  { color: var(--orange) }
.fb-darkgreen { color: darkgreen }
.fb-darkgreen { color: darkgreen }

.more-info { font-weight: bold; color: #666; }
.more-info::after {
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==");
    display: inline-block; width: 14px; height: 16px; margin: 6px; vertical-align: bottom;
}

.video { font-weight: bold; color: #666; }
.video::after { content: '|▷'; margin-left: 4px; }
.audio { font-weight: bold; color: #666; }
.audio::after { content: url("https://specieslink.net/search/imgs/audio.png"); margin-left: 4px; }


#table-header { width: 100% }
#header-logo  { text-align: left; width: 220px; }

.news-alert   { color: var(--red);    font-size: 1.0rem; text-align: right; }
.news-warning { color: var(--orange); font-size: 1.0rem; text-align: right; float: right; max-width: 80%; }
.news-info    { color: var(--blue);   font-size: 1.0rem; text-align: right; }
.news-blink   { color: var(--red);    font-size: 1.0rem; text-align: right;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation { to { visibility: hidden; } }
@-webkit-keyframes blink-animation { to { visibility: hidden; } }

/* ---------- Accordion / General ---------- */
.underline { border-bottom: 1px solid #eee; }
em { color: #222; font-weight: 550 }
h1 { font-size: large; color: #444444; }

/* ---------- Flex layout ---------- */
.cflex-container {
    display: flex; flex-direction: column; flex-wrap: wrap; background-color: inherit;
}
.rflex-container {
    display: flex; flex-direction: row; flex-wrap: wrap; background-color: inherit;
}
.box1x0 { flex-grow: 0; overflow: hidden; margin: 4px 10px 0px 0px; padding: 4px; }
.box1x1 { flex-grow: 1; overflow: hidden; margin: 4px 10px 0px 0px; padding: 4px; }
.box2x1 { flex-grow: 2; flex-basis: auto; overflow: auto; }
.box3x1 { flex-grow: 3; flex-basis: auto; overflow: auto; }
.box4x1 { flex-grow: 4; flex-basis: auto; overflow: auto; }
.box    { color: #444; margin: 4px; padding: 4px; }
.box th { background-color: #eee; font-weight: 550 }

/* ---------- Grid layout ---------- */
.class-container { display: grid; width: 98%; grid-template-columns: 80% auto; grid-template-rows: auto; grid-gap: 5px; grid-auto-flow: row; }
.class-invs { overflow-y: scroll; }
.class-recs { }

/* ---------- Aba Registros: lista + inventário lateral ---------- */
.recs-layout   { display: flex; gap: 8px; align-items: flex-start; }
.recs-inv-side { flex: 0 1 auto; width: max-content; min-width: 220px; max-width: 30%;
                 position: sticky; top: 8px; max-height: 90vh; overflow-y: auto;
                 scrollbar-gutter: stable; }
.recs-inv-side .inv-rec-table td { overflow-wrap: anywhere; }
.recs-inv-side .inv-rec-table td.right { white-space: nowrap; overflow-wrap: normal; }

/* ---------- Images grid ---------- */
.image-box    { color: #444; margin: 4px; padding: 4px; }
.image-grid   { width: 120px; height: 180px; }
.image-grid td { text-align: center; height: 160px; }
.image-grid th { font-size: small; text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 20px; }

/* ---------- Alignment ---------- */
.center { text-align: center }
.left   { text-align: left !important }
.right  { text-align: right }
.high th { background-color: #ddd }
.float-left  { float: left }
.float-right { float: right }

/* ---------- Foreground colors ---------- */
.fg-orange    { color: var(--orange) }
.fg-gray      { color: var(--fg-dark-gray) }
.fg-light_gray { color: var(--fg-dark-gray) }
.fg-blue      { color: var(--fg-blue) }
.fg-darkgreen { color: darkgreen }

/* ---------- Divs de conteúdo ---------- */
#div-aux-record {
    display: none; padding-top: 20px; background-color: #fff;
    overflow-y: auto; overflow-x: hidden; transition: max-height 0.2s ease-out;
}
#div-form { display: none; }
#div-ins-cols {
    display: none; padding-top: 20px; background-color: #fff;
    overflow-x: hidden; transition: max-height 0.2s ease-out;
}
#div-result {
    display: none; padding-top: 20px; margin-bottom: 20px;
    background-color: #fff; overflow-x: hidden; transition: max-height 0.2s ease-out;
}
#div-show-images {
    width: 100%; height: calc(100% - 150px); top: 150px; left: 0px;
    position: absolute; background-color: #fff; display: none;
    vertical-align: bottom; box-shadow: 3px 3px 3px #ccc; overflow: hidden;
}
#show-images-info { height: 50px; font-size: small; }
#div-map { width: 100%; height: 98%; }

/* ---------- Mapa dos painéis de filtros geográficos ---------- */
.layer-map { width: 100%; min-width: 360px; max-width: 520px; height: 400px; margin: 0 auto; }
.layer-map-busy { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000;
                  background-color: rgba(255,255,255,0.9); color: #444; padding: 2px 10px; border-radius: 4px;
                  font-size: 0.9rem; pointer-events: none; }
.layer-map-busy[hidden] { display: none; }
[data-group] { cursor: pointer; }
.layer-map .landuse-legend { max-height: 230px; overflow-y: auto; }
.box th label.grp { cursor: pointer; margin-bottom: 0; }
.box th input.grp-chk { margin-right: 4px; vertical-align: middle; }
th.layer-group-loading { opacity: 0.6; }
th.layer-group-loaded img { opacity: 0.35; }

/* ---------- Aba Map (Leaflet) ---------- */
/* Altura responsiva do mapa (o container é injetado via AJAX no #div-result). */
#div-combo { width: 100%; height: 22px; }
#div-result #div-map { height: calc(80vh - 64px); }
#div-combo .map-combo { max-width: 100%; }

/* Controles Leaflet com área de toque maior em telas pequenas. */
@media (max-width: 767.98px) {
    #div-combo { height: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    #div-combo .map-combo { flex: 1 1 100%; }
    #div-result #div-map { height: 60vh; min-height: 360px; }
    .layer-map { min-width: 0; max-width: 100%; height: 60vh; min-height: 320px; }
    .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
    .legend { font-size: 9px; }
    .info.legend { max-width: 45vw; }
}

/* ---------- Map info / legend ---------- */
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; }
.info h4 { margin: 0 0 5px; color: #777; }
.legend { font-size: 10px; text-align: left; line-height: 18px; color: #555; }
.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

.img-cell  { max-width: 40%; }
.thumb-rec { box-shadow: 3px 3px 3px #ccc; }
.cel-row   { display: table-row-group; width: 100%; }

/* ---------- Warning / Error ---------- */
.warning        { text-align: center; color: var(--orange); font-size: 1rem; font-weight: bold; }
.warning::before { content: url('/static/website/img/search/warning-32.png'); padding-right: 5px; }
.error          { text-align: center; color: var(--red); font-size: medium; font-weight: bold; }
.error::before  { content: url('/static/website/img/search/error-32.png'); padding-right: 5px; }

/* ---------- Menu bar ---------- */
.flex-menu-bar { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.mi-records    { float: right }
.action-box    { flex-grow: 0; overflow: hidden; margin: 4px 10px 0px 0px; padding: 4px; }
.action-box, .action-box table, .action-box td, .action-box .action-submit { line-height: normal; }
.flex-box      { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }

/* ---------- Footer ---------- */
footer      { color: #666666; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 35px; border-top: 2px solid var(--bg-blue); bottom: 1px; }
footer span { width: 30%; text-align: center; }

/* ---------- Bullets ---------- */
.l-space { padding-left: 10px }
.r-space { padding-right: 10px }
.bullet  { letter-spacing: 0.4px; }
.bullet::before { content: url('/static/website/img/search/orange-bullet3.png'); }
.banner-link { color: #fff; text-decoration: none; font-size: 1.2rem; }

/* ---------- Action bar ---------- */
.action-bar  { background-color: #fff; opacity: 0.8; }
.none-box    { background-color: #fff; margin-right: 5px; }
.action-submit {
    padding: 5px 2px 5px 2px; font-size: 1.8rem; font-weight: 700;
    background-color: #fff; font-family: 'Roboto Condensed'; letter-spacing: -0.6px;
    border: none; color: var(--fg-blue); cursor: pointer; font-variant: small-caps;
}
.action-form           { color: var(--orange) }
.action-submit:hover   { color: var(--orange) !important; border: none; }
.action-submit:active  { color: var(--orange); border: none; }
.disabled              { color: #ccc }
.pointer               { cursor: pointer; }

/* ---------- Tables ---------- */
.geo-table          { empty-cells: hide; border-spacing: 0px; border-collapse: collapse; margin: 5px; }
.geo-table th       { text-align: center; border-bottom: 1px solid #fff; background-color: inherit; }
.geo-table td       { background-color: inherit; padding-left: 5px; }
.geo-table td:empty { border: 0px solid #eee; }
.geo-table th.title { text-align: left; border-bottom: 1px solid rgb(255,102,0,0.3); background-color: inherit; }
.geo-row            { cursor: pointer; user-select: none; }

.form-table    { max-width: 30vw; min-width: 20vw; }
.form-table th { text-align: left; border-bottom: 0px solid rgb(255,102,0,0.3); background-color: inherit; }
.form-table td { background-color: inherit; }

.sec-table { width: auto; }

.full-record-table    { font-size: medium; border-spacing: 2px; min-width: 70%; max-width: 95%; }
.full-record-table th { font-size: medium; font-weight: 600; text-align: left; border: 1px solid #eee; padding: 5px; }
.full-record-table td { font-size: medium; font-weight: 400; text-align: left; border: 1px solid #eee; padding: 5px; }
.no-border { border: none !important }

.annotation-table    { font-size: medium; border-spacing: 2px; min-width: 70%; }
.annotation-table tr { vertical-align: top; }
.annotation-table th { font-size: medium; font-weight: 600; text-align: left; border: 1px solid #eee; padding: 10px; vertical-align: top; }
.annotation-table td { font-size: medium; font-weight: 400; text-align: left; border: 1px solid #eee; padding: 10px; }

.numbers-table          { font-size: medium; border-spacing: 2px; empty-cells: hide; }
.numbers-table th       { font-size: medium; font-weight: 600; border: 1px double #eee; padding: 5px 10px; box-shadow: 1px 1px 1px #ccc; }
.numbers-table td       { font-size: medium; font-weight: 400; border: 1px double #eee; padding: 5px 10px; box-shadow: 1px 1px 1px #ccc; }
.numbers-table td:empty { border: 0px solid #eee; }

.num-hgap          { min-width: 10px }
.num-vgap          { height: 0px }
.num-logo,.num-graph { box-shadow: none !important; border: none !important; }
.num-logo-network    { min-height: 30px; min-width: 50px; max-width: 100px; }
.num-logo-collection { max-width: 70px; max-height: 70px; }
.num-cell          { width: 100px; height: 40px; font-size: x-large; font-weight: bold; color: var(--fg-dark-gray); }
.big-num           { font-size: large; font-weight: bold; color: var(--fg-blue); }
.hi-num            { font-size: x-large; font-weight: bold; color: var(--orange); }
.num-sect          { background-color: #eee; font-size: medium; }
.num-canvas-wrap   { display: inline-block; width: 80px; height: 40px; }
.num-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
.dups-calculating  { color: var(--orange); font-weight: 600; }

.inv-rec-table-wrapper { width: 100%; overflow-x: auto; }
.inv-rec-table    { font-size: 1.0rem; border-spacing: 2px; empty-cells: hide; }
.inv-rec-table th { font-size: 1.0rem; font-weight: 600; border: 1px double #eee; padding: 5px 10px; box-shadow: 1px 1px 1px #ccc; }
.inv-rec-table td { font-size: 1.0rem; font-weight: 400; border: 1px double #eee; padding: 5px 10px; box-shadow: 1px 1px 1px #ccc; }

.inv-rec-acc,.status-acc-1,.tax-status-acc-1 { color: #080; font-weight: 500 !important; cursor: pointer; font-style: italic; }
.inv-rec-syn,.status-syn-1   { color: #666; font-weight: 500 !important; cursor: pointer; font-style: italic; }
.inv-rec-amb,.status-amb-1   { color: #808; font-weight: 500; cursor: pointer; font-style: italic; }
.inv-rec-acc-lax,.status-acc-0 { color: #080; font-weight: 400 !important; cursor: pointer; font-style: italic; }
.inv-rec-syn-lax,.status-syn-0 { color: #888; font-weight: 400 !important; cursor: pointer; font-style: italic; }
.inv-rec-amb-lax,.status-amb-0 { color: #808; font-weight: 400; cursor: pointer; font-style: italic; }
.inv-rec-unk,.status-unk     { color: #960; font-weight: 400; cursor: pointer; font-style: italic; }
.inv-rec-gen,.status-gen     { color: #08f; font-weight: 400; cursor: pointer; font-style: italic; }
.italic { font-style: italic }

.ins-hgap { width: 10px; background-color: #fff; border-collapse: collapse; padding: 0px; border: none; border-spacing: 0px; }

.layers-table          { font-size: medium; border-spacing: 2px; empty-cells: hide; }
.layers-table th       { font-size: medium; font-weight: 600; border: none; padding: 2px; text-align: left; background-color: #fff; }
.layers-table td       { font-size: medium; font-weight: 400; border: 1px double #eee; padding: 2px; }
.layers-table td:empty { border: 0px solid #eee; }

.cite-table    { font-size: medium; border-spacing: 2px; empty-cells: hide; max-width: 60%; min-width: 80%; }
.cite-table th { font-size: medium; font-weight: 600; border: none; padding: 2px; text-align: left; background-color: #fff; }
.cite-table td { font-size: medium; font-weight: 400; border: none; padding: 2px; }
.cite-wrapper { text-align: center; }
.cite-wrapper .cite-table { display: inline-table; text-align: left; }
.cite-title { margin: 0; font-size: 1.6rem; line-height: 26px; }
.cite-network { text-align: center; }
.cite-table blockquote { margin: 0 0 0 40px; }

.sel-states-table    { float: right }
.sel-states-table th { padding-right: 10px; padding-left: 10px; }

/* ---------- Column layouts ---------- */
.cols-6 { columns: 200px 6; column-rule: 1px solid #eee; }
.cols-5 { columns: 200px 5; column-rule: 1px solid #eee; }
.cols-4 { columns: 200px 4; column-rule: 1px solid #eee; }
.cols-3 { columns: 200px 3; column-rule: 1px solid #eee; }
.cols-2 { columns: 200px 2; column-rule: 1px solid #eee; }

/* ---------- Interactive elements ---------- */
.sel-input  { height: 30px; width: 400px; font-size: large; }
.tiny       { font-size: small; }
.xtiny      { font-size: x-small; color: var(--fg-blue); }
.add-del    { font-size: x-large; font-weight: bold; color: var(--fg-dark-gray); cursor: pointer; }
.click      { cursor: pointer; color: var(--fg-blue); font-weight: 600; text-shadow: 1px 1px 1px #eee; }
.fechar     { cursor: pointer; color: var(--orange); font-weight: 600; text-shadow: 1px 1px 1px #eee; }
.click:hover { color: var(--orange); }
.tiny-click { cursor: pointer; font-size: small; color: var(--fg-blue); font-weight: 600; }
.clear-form { cursor: pointer; font-size: 1.2rem; color: var(--orange); font-weight: 600; }
.tip-icon   { cursor: help; color: var(--orange); font-size: small; }
.look       { cursor: pointer; color: var(--fg-blue); font-size: larger; }
.look:hover { color: var(--orange); }

/* ---------- Records / Dups tables ---------- */
.recs-table        { width: 100%; border-spacing: 0px; border: 1px solid #ccc; padding: 3px; }
.recs-table td     { padding: 4px; font-size: 1.0rem }
.recs-table td img { width: 100px }
.dups-table        { width: calc(100% - 200px); border-spacing: 0px; }
.dups-table td     { padding: 4px; font-size: medium }
.dups-table td img { width: 100px }
.dups-group        { margin-left: 40px; padding-left: 8px; background: var(--bg-light); }
.dups-group-title  { font-weight: 600; color: var(--fg-dark-gray); margin: 6px 0; }

/* Célula de título da cópia no markup de duplicatas */
.g-white           { background-color: #fbfbfb; }

/* ---------- Background utilities ---------- */
.bg-gray    { background-color: var(--bg-gray) !important }
.bg-geo     { background-color: #f0f0f0 !important }
.bg-white   { background-color: #ffffff !important }
.bg-dark    { background-color: var(--bg-dark) !important }
.bg-light   { background-color: var(--bg-light) !important }
.bg-green   { background-color: var(--bg-green) }
.bg-orange  { background-color: var(--bg-orange); }
.main-rec   { font-size: 1.1rem !important }

.close-button { float: right; z-index: 10; font-size: medium; font-weight: bold; height: 20px; color: var(--fg-blue) }

/* ---------- Comments ---------- */
.comment          { font-size: small; font-style: italic; }
.comment fieldset { border: 1px solid #eee; width: 80%; margin: 5px 10px 5px 10px; background-color: #fcfcfc; margin-left: 25px; }
.commFs           { border: 1px solid #fefefe; background-color: #fefefe; border-top-right-radius: 25px; border-bottom-left-radius: 25px; }
.commFs::before   { content: url('/static/website/img/search/comment-on.png'); margin-left: 15px; float: left; left: -40px }
.commBody         { margin-left: 15px; display: block }
.commSign         { width: 100%; display: block; text-align: right; font-style: italic }
.commNote         { font-size: x-small; color: #666666; text-align: left; display: block }
.commNote         { font-size: x-small; color: #666666; text-align: left; display: block }

/* Estado colapsado das anotações: reusa o mesmo PNG de .commFs::before
   no tamanho natural; clique faz lazy fetch via /search/method?action=annotations */
.btn-annotations-toggle {
    background: none; border: none; padding: 0;
    cursor: pointer; color: inherit; font: inherit;
    font-style: italic; text-align: left;
}
.btn-annotations-toggle:hover .annotations-ref { text-decoration: underline; }
.annotations-icon {
    display: inline-block;
    width: 32px; height: 32px;
    vertical-align: middle; margin-right: 4px;
    background: url('/static/website/img/search/comment-on.png') no-repeat center / contain;
}
.annotations-collapsed .annotations-body { margin-top: 4px; }

/* ---------- Top bar/disclaimer (Perl compat) ---------- */
#top-bar {
    width: 100%; height: 40px; background-color: var(--bg-blue);
    border-top: 2px solid var(--bg-blue); border-bottom: 2px solid var(--bg-blue);
    color: white; text-align: center;
}
#disclaimer {
    position: absolute; bottom: 10px; width: 90%; font-size: small;
    background-color: var(--bg-blue); color: white; z-index: 9;
    display: none; padding: 20px;
}
.button {
    background-color: white; border: none; font-weight: bold;
    color: var(--fg-blue); padding: 2px 4px;
}

/* ---------- Taxonomic classes ---------- */
.oV   { font-weight: bold; color: maroon; font-variant: small-caps; cursor: pointer }
.tK,.tP,.tC,.tO,.tF { font-weight: bold; color: maroon; font-variant: small-caps }
.tnoId { text-decoration: none; color: #0099cc; font-weight: normal }
.tGg  { font-style: italic; text-decoration: none; color: #08f }
.tUnk { text-decoration: none; color: #960 }
.tG   { font-style: italic; text-decoration: none; color: #960 }
.tE   { font-style: italic; text-decoration: none; color: #960 }
.tM   { font-style: normal; text-decoration: none; color: #960 }
.tS   { font-style: italic; text-decoration: none; color: #960 }

.tAcc { font-weight: bold; text-decoration: none; color: #080 }
.tGa  { font-weight: bold; font-style: italic; text-decoration: none; color: #080 }
.tEa  { font-weight: bold; font-style: italic; text-decoration: none; color: #080 }
.tMa  { font-weight: bold; font-style: normal; text-decoration: none; color: #080 }
.tSa  { font-weight: bold; font-style: italic; text-decoration: none; color: #080 }
.tGa-lax,.tGax { font-weight: normal; font-style: italic; text-decoration: none; color: #080 }
.tEa-lax,.tEax { font-weight: normal; font-style: italic; text-decoration: none; color: #080 }
.tMa-lax,.tMax { font-weight: normal; font-style: normal; text-decoration: none; color: #080 }
.tSa-lax,.tSax { font-weight: normal; font-style: italic; text-decoration: none; color: #080 }

.tSyn { font-weight: bold; text-decoration: none; color: #666 }
.tGs  { font-weight: bold; font-style: italic; text-decoration: none; color: #666 }
.tEs  { font-weight: bold; font-style: italic; text-decoration: none; color: #666 }
.tMs  { font-weight: bold; font-style: normal; text-decoration: none; color: #666 }
.tSs  { font-weight: bold; font-style: italic; text-decoration: none; color: #666 }
.tGs-lax,.tGsx { font-weight: normal; font-style: italic; text-decoration: none; color: #666 }
.tEs-lax,.tEsx { font-weight: normal; font-style: italic; text-decoration: none; color: #666 }
.tMs-lax,.tMsx { font-weight: normal; font-style: normal; text-decoration: none; color: #666 }
.tSs-lax,.tSsx { font-weight: normal; font-style: italic; text-decoration: none; color: #666 }

.tAmb { font-weight: normal; text-decoration: none; color: #808 }
.tG2  { font-weight: bold; font-style: italic; text-decoration: none; color: #808 }
.tE2  { font-weight: bold; font-style: italic; text-decoration: none; color: #808 }
.tM2  { font-weight: bold; font-style: normal; text-decoration: none; color: #808 }
.tS2  { font-weight: bold; font-style: italic; text-decoration: none; color: #808 }
.tG2-lax,.tG2x { font-weight: normal; font-style: italic; text-decoration: none; color: #808 }
.tE2-lax,.tE2x { font-weight: normal; font-style: italic; text-decoration: none; color: #808 }
.tM2-lax,.tM2x { font-weight: normal; font-style: normal; text-decoration: none; color: #808 }
.tS2-lax,.tS2x { font-weight: normal; font-style: italic; text-decoration: none; color: #808 }

.tA  { text-decoration: none; color: black }
.tT  { font-weight: bold; color: red }
.tR  { font-weight: bold; color: darkred }

em   { font-weight: bold; font-style: italic; color: #444444 }
u    { text-decoration: none; border-bottom: 1px solid maroon; }

.bC  { color: black; font-weight: bold }
.tN  { color: black; font-weight: bold }
.bA  { color: #444444; font-weight: bold }
.bT  { color: black; font-weight: bold }
.bL  { color: black }
.bY  { color: black; font-weight: bold }
.cY  { color: black; font-weight: bold }
.tY  { color: black; font-weight: bold }
.bI  { color: black }
.nO  { color: black }

ll   { color: var(--fg-blue); }
.ll  { color: var(--fg-blue); }
llb  { color: darkgoldenrod; font-weight: bold }
.llb { color: darkgoldenrod; font-weight: bold }
lf   { color: #444444; font-size: x-small; }

/* ---------- Campos do registro ---------- */
.cL  { color: #444444; font-weight: bold }       /* coletor */
.cN  { color: #444444; font-weight: bold }       /* nº do coletor */
.lP,.lM,.lS,.lC { color: black }                 /* localidade/município/estado/país — como .bL */
no   { color: black }                            /* notas — como .nO */
/* coords (lA/lO/eR) ficam em itálico via <i>, sem cor própria */

/* ---------- Labels ---------- */
.tag       { color: var(--fg-dark-gray); }
label      { color: var(--fg-dark-gray); font-style: normal; font-size: 1.1rem; }
label.geo  { font-style: normal; font-weight: 500; color: var(--fg-darker-gray); font-size: 1.1rem; }
label.cb   { color: var(--fg-dark-gray); cursor: pointer; font-size: 1.1rem; }
label.mod  { color: var(--fg-dark-gray); cursor: pointer; font-size: 1.0rem; }

.collID { vertical-align: top; background-color: #ffffff; width: 50px }

/* ---------- Graphics ---------- */
.graph-icon   { width: 30px; height: 30px; padding-top: 10px; }
.shadow       { box-shadow: 3px 3px 3px #ccc; }
.graph-canvas { box-shadow: 3px 3px 3px var(--bg-dark); background-color: var(--bg-light) }

/* ---------- Records viewer ---------- */
#recs-viewer-div {
    position: absolute; bottom: 10px; width: calc(100% - 100px); height: calc(100% - 100px);
    left: 100px; display: block; visibility: hidden;
    background-color: var(--bg-gray); flex-direction: row; box-shadow: 3px 3px 3px #ccc;
}

/* ---------- Control bar ---------- */
.control-bar { width: calc(100% - 25px); height: 26px; box-shadow: 3px 3px 3px #ccc; background-color: rgb(255,102,0,0.05); color: var(--fg-dark-gray); font-weight: bold; }
.control-bar select { border: none; box-shadow: none; background-color: inherit; }

#img-download a { color: var(--fg-blue); text-decoration: none; padding: 0 15px 5px 0; font-weight: 600; }

/* ---------- Background blues ---------- */
.bg-dark-blue   { background-color: rgb(255,255,255,0.1) }
.bg-blue        { background-color: rgb(20,132,203,0.075) }
.bg-light-blue  { background-color: rgb(20,132,203,0.05) }

/* ---------- Bullets with background ---------- */
.geo-bullet { background-color: rgb(128,0,0,0.7) !important; color: #fff; }
.mb-bullet  { background-color: rgb(153,102,0,0.7) !important; color: #fff; }
.hi-bullet  { background-color: rgb(20,132,203,0.8) !important; color: #fff; }
.lo-bullet  { background-color: rgb(238,238,238,1.0) !important; color: var(--blue); text-align: left; font-family: 'Roboto Condensed'; font-weight: 500; }

.bg-dark-gray   { background-color: rgb(204,204,204,0.1) }
.bg-medium-gray { background-color: rgb(204,204,204,0.075) }

.bg-beige       { background-color: rgb(255,102,0,0.05) }
.bg-light-beige { background-color: rgb(255,102,0,0.025) }

fieldset { border: 1px solid #fff; }

/* ---------- Institution / Collection selectors ---------- */
.sins1       { background-color: #eee; color: #1484cb; }
.sins2       { background-color: #eee; color: #045a99; }
.sins1 label { background-color: #eee; color: #1484cb; }
.sins2 label { background-color: #eee; color: #045a99; }
.scol1       { background-color: #fff; color: #444; font-weight: normal; }
.scol2       { background-color: #fff; color: #666; font-weight: normal; }

/* ---------- Width utilities ---------- */
.border { border: 1px solid #ccc !important; }
.icell  { width: 90% !important }
.w135   { width: 135px }
.w300   { width: 300px }
.w422   { width: 100% }
.w60    { width: 60px; max-width: 60px }
.w100pc { width: 95% }

/* ---------- Field clear ---------- */
.fcl       { color: #ccc; margin-left: 10px; font-size: large; font-style: normal; cursor: pointer; }
.fcl:hover { color: #f00; }

/* ---------- Visibility ---------- */
.hidden  { display: none; visibility: collapse; }
.hidden2 { display: table-row; visibility: visible; }

/* ---------- FAQ ---------- */
.faq            { padding-left: 10%; padding-right: 10%; font-size: medium; }
.faq em         { font-style: normal; font-weight: bold; }
.faq .faq-1     { list-style-type: none; }
.faq .faq-1 li b { color: var(--orange); font-size: 1.2rem; }
.faq-1 .faq-2     { list-style-type: square; }
.faq-1 .faq-2 li b { color: var(--fg-blue); font-size: 1.2rem; }
.faq-2 .faq-3     { list-style-type: square; }
.faq-2 .faq-3 li b { color: var(--fg-dark-gray); font-size: 1.1rem; }
.faq-3 .faq-4     { list-style-type: square; }
.faq-3 .faq-4 li b { color: var(--fg-dark-gray); font-size: 1.0rem; }

/* ---------- Redlist ---------- */
.redlist { color: white; font-weight: bold; background-color: #c00; border-radius: 0px 7px 0px 0px; padding: 0 5px; }

/* ---------- Grid viewer ---------- */
.grid-grid-table  { display: grid; width: 100%; height: 100%; grid-template-areas: "viewer" "thumbs" "info"; grid-template-columns: auto 150px; grid-template-rows: auto 100px; }
.grid-grid-viewer { grid-row: 1; grid-column: 1; }
.grid-grid-thumbs { grid-row: 1; grid-column: 2; overflow-y: scroll; }
.grid-grid-info   { grid-row: 2; grid-column: 1 / 2; overflow-y: scroll; }

.thumb { flex: auto; background-color: #efefef; color: #222; margin: 2px; font-size: x-small; text-align: center; }

/* ---------- OpenSeadragon ---------- */
#osd-container   { width: 100%; height: 100%; z-index: 15; display: none; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.8); }
#osd-header      { width: 100%; height: 60px; background-color: rgba(255,255,255,1.0); padding: 0px 20px; font-size: 1rem; }
#osd-header-logo { float: left; }
#osd-header-coll { font-size: 1.2rem; font-weight: bold; float: right; padding-right: 30px; margin-bottom: 3px }
#osd-viewer      { width: 100%; height: calc(100% - 150px); }
#osd-text        { width: 100%; height: 100px; background-color: rgba(255,255,255,1.0); padding: 3px 20px; font-size: 0.9rem; }

/* ---------- MapBiomas ---------- */
.mb-year { font-size: 0.9rem; font-weight: bold; }
.mb-n1   { font-size: 0.9rem; font-weight: normal; }
.mb-n2   { font-size: 0.9rem; font-weight: normal; font-style: italic; }
.mb-l1   { font-size: 0.9rem; font-weight: bold; background-color: #eee; }
.mb-l2   { font-size: 0.9rem; font-weight: normal; }

/* ---------- Ellipsis ---------- */
.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* ---------- Land use table ---------- */
.landuse-table    { width: 100%; border-spacing: 1px; margin-top: 4px !important; border-collapse: separate; }
.landuse-table td { padding: 0; font-size: 1px; line-height: 0; border: none; }
.lu-title    { font-size: 0.9rem; color: #666; font-weight: bold; display: block; margin-bottom: 3px; }
.lu-class    { background-color: #f9f9f9; font-size: 0.8rem; text-align: left; color: var(--fg-blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.lu-year-1   { height: 4px; background-color: #eee; cursor: help; }
.lu-year-2   { height: 4px; background-color: #eee; cursor: default; }
.lu-year-col { height: 4px; background-color: #d00; cursor: help; }
.lu-tick     { height: 14px; opacity: 0.85; cursor: help; min-width: 8px; }
.lu-tick:hover { opacity: 1.0; outline: 1px solid #555; }
/* Faixa de uso da terra sob a miniatura (aba Imagens): cabe na largura do thumb */
.thumb-landuse { max-width: 240px; margin: 4px auto 0; }
.thumb-landuse .lu-tick { min-width: 0; }
.thumb-landuse .lu-title { font-size: 0.7rem; }

.recs-table .landuse-table,
.dups-table .landuse-table      { width: auto; font-weight: normal; background-color: #f9f9f9;
                                  border-spacing: 0; margin: 0 !important; padding: 0 !important; }
.recs-table .landuse-table td,
.dups-table .landuse-table td   { padding: 4px; border: 1px solid #fff; font-size: 0.6rem; line-height: normal; }
.recs-table .lu-title,
.dups-table .lu-title           { display: inline; margin-bottom: 0; background-color: #fff;
                                  font-size: 1.0rem; text-align: left; font-weight: normal; color: var(--fg-blue); }
.recs-table .lu-year-1,
.dups-table .lu-year-1          { height: auto; background-color: #f9f9f9; color: var(--fg-blue); cursor: help; }
.recs-table .lu-year-2,
.dups-table .lu-year-2          { height: auto; background-color: #f9f9f9; color: #f9f9f9; cursor: auto; }
.recs-table .lu-year-col,
.dups-table .lu-year-col        { height: auto; background-color: #f00; color: #ff0000; cursor: help; }
.recs-table .lu-tick,
.dups-table .lu-tick            { height: 5px; opacity: 0.5; min-width: 0; cursor: help; }

.recs-table .lu-tick:hover,
.dups-table .lu-tick:hover      { opacity: 0.5; outline: none; }

/* ---------- GBIF backbone ---------- */
.gen-acc, .sp-acc, .sub-acc { color: darkgreen; font-style: italic; }
.acc, .hi-acc               { color: darkgreen; }
.gen-syn, .sp-syn, .sub-syn { color: #666; font-style: italic; }
.syn, .hi-syn               { color: #666; }
.gen-amb, .sp-amb, .sub-amb { color: fuchsia; font-style: italic; }
.amb, .hi-amb               { color: fuchsia; }
.gen-unk, .sp-unk, .sub-unk { color: orange; font-style: italic; }
.unk, .hi-unk               { color: orange; }

.users-layers { color: #800000 !important }

/* ---------- Rotate ---------- */
.rotate {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

/* ---------- Scroll text ---------- */
#scroll-container { border: none; border-radius: 5px; overflow: hidden; }
#scroll-text {
    -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%);
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}
@-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to   { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to   { -webkit-transform: translateX(-100%); }
}
@keyframes my-animation {
    from { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); }
    to   { -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

.coll-group { font-weight: bold }

/* ---------- Picker de Instituições e Coleções ---------- */
.ins-cols-picker  { padding: 1rem; }
.ins-cols-toolbar { padding: .5rem 0 1rem; border-bottom: 1px solid #ccc; margin-bottom: .5rem; }
.ins-cols-table   { width: 100%; border-collapse: collapse; }
.ins-cols-table tr.iccr td { padding: 2px 4px; }
.ins-cols-table .elink     { margin-left: .5rem; text-decoration: none; }

/* ---------- Refine local (clique em linha do painel lateral de inventário) ---------- */
.inv-rec-clickable td       { cursor: pointer; }
.inv-rec-clickable:hover    { background-color: #ffd; }
.inv-rec-selected           { background-color: #ffc !important; outline: 1px solid #d4a000; }
.refine-bar {
    background: #fff3cd; border: 1px solid #d4a000;
    padding: 6px 12px; margin: 0 0 8px 0; border-radius: 3px;
    font-size: 0.9em; color: #6b4e00;
}
.refine-bar-title  { font-weight: bold; margin-right: 6px; }
.refine-chip {
    display: inline-block; background: #fff; border: 1px solid #d4a000;
    border-radius: 12px; padding: 2px 6px 2px 10px; margin: 2px 6px 2px 0;
    white-space: nowrap;
}
.refine-chip-field { color: #8a6d00; }
.refine-chip .fcl {
    color: #888; cursor: pointer; margin-left: 8px;
    font-weight: bold; font-size: large; line-height: 1;
}
.refine-chip .fcl:hover { color: #c00; }
.refine-clear-all {
    cursor: pointer; text-decoration: underline; margin-left: 4px; color: #6b4e00;
}
.refine-clear-all:hover { color: #c00; }

/* ---------- Cookie banner ---------- */
#cookie-banner {
    position: fixed; bottom: 10px; width: 90%; left: 40px;
    font-size: small; background-color: var(--bg-blue); color: white;
    z-index: 9; padding: 20px; display: none;
}
#cookie-banner button {
    background-color: white; border: none; font-weight: bold;
    color: var(--fg-blue); padding: 4px 12px; cursor: pointer; margin-left: 10px;
}

/* ---------- Aba Gráficos: layout ícones + canvas (substitui os style inline antigos) ---------- */
.graph-body-row  { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.graph-icons-col { flex: 0 0 56px; padding: 8px; background-color: #fafafa; }

/* ---------- Aba Gráficos: ícones de tipo de chart ---------- */
.graph-icon {
    cursor: pointer;
    opacity: .55;
    margin: 4px 0;
    height: 32px;
    transition: opacity .15s ease, box-shadow .15s ease;
}
.graph-icon:hover    { opacity: .85; }
.graph-icon.selected {
    opacity: 1;
    box-shadow: 2px 2px 4px #888;
    border-radius: 2px;
}

/* ---------- Aba "Perfil ambiental" ---------- */
/* Cores, bordas e tipografia são as do legado; o que muda é a largura do card,
   que lá era fixa em 500px e aqui acompanha a coluna do grid Bootstrap. */
.bio-profile-wrapper { padding: 0 20px; }
.bio-profile-title { margin: 0 0 10px 0; font-size: 16px; font-weight: bold; }
.bio-profile-text { margin: 0; color: #666666; line-height: 1.5; font-size: 13px; }
.bio-profile-empty { margin-top: 20px; color: #888; }
/* Igual ao legado: quantos cards couberem por linha, centralizados. Nada de
   col-md-6/col-xl-4 — os tiers do Bootstrap 4 param no xl e travariam em 3 por
   linha para sempre, enquanto o legado chega a 4 a partir de ~2190px. */
.bio-profile-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

.bio-profile-card {
    /* 518px = os 500px do legado + 8px de padding + 1px de borda de cada lado
       (lá o box-sizing é content-box; aqui o Reboot deixa border-box). Manter a
       largura EXTERNA igual é o que reproduz a mesma quebra de linha. */
    flex: 0 1 518px;
    max-width: 518px;
    /* O legado trava 180px, mas lá o card nunca fica menor que 500px. Encolhido
       no celular, unidade longa ("Coef. de var.") quebra em duas linhas e com
       altura fixa o histograma saía da moldura. */
    min-height: 180px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.bio-profile-card-title {
    margin-top: 0;
    margin-bottom: 2px;
    font-size: 15px;
    color: #045a99;
    border-bottom: 1px solid #e60;
    padding-bottom: 3px;
}
.bio-profile-card-title.slope {
    color: orange;
    border-bottom: 1px solid rgb(8, 114, 201);
    padding: 5px 8px;
}
.bio-profile-info { vertical-align: middle; margin-left: 5px; cursor: help; }
.bio-profile-card-label {
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 13px;
}
.bio-profile-minmax { display: flex; justify-content: space-between; margin-bottom: 5px; }
.bio-profile-minmax > div { text-align: center; width: 48%; }
.bio-profile-minmax-caption { font-size: 12px; color: #666; }
.bio-profile-min { font-size: 16px; font-weight: bold; color: #045a99; }
.bio-profile-max { font-size: 16px; font-weight: bold; color: #e60; }
.bio-profile-canvas-wrap { position: relative; margin-top: auto; height: 75px; }
.bio-profile-canvas { width: 100% !important; }

/* ---------- Larguras base (alvo das media queries mobile) ---------- */
/* Faixa MapBiomas no card de registro (aba Registros) */
.landuse-scroll { width: 60vw; }
/* Wrapper do canvas da aba Gráficos (substitui o style inline antigo) */
.graph-canvas-wrapper { position: relative; width: 90%; height: calc(90vh - 280px); min-height: 600px; }

/* ---------- Aba Download ---------- */
.dwn-wrapper      { max-width: 1400px; margin: 0 auto; text-align: center; }
.dwn-title        { min-width: 70%; text-align: left; height: auto; padding: 2px 8px; }
.dwn-title h2     { margin: 0; }
.dwn-table        { text-align: left; }
.dwn-table > tbody > tr > td { vertical-align: top; }

/* Estado de erro da instrução. */
#dwn-msg          { display: block; margin: 4px 0 8px 0; }
.dwn-msg-error    { color: #f00; font-weight: bold; }

.dwn-boxes        { align-items: flex-start; }
.dwn-box-format,
.dwn-box-model    { flex: 0 1 auto; min-width: 220px; }
.dwn-box-fields   { flex: 1 1 240px; min-width: 0; }
.dwn-box-extra    { flex: 1 1 260px; min-width: 0; }

.dwn-box-head     { width: 100%; background-color: var(--bg-gray); margin-bottom: 6px; }

/* Coluna única: um checkbox por linha. */
.dwn-group        { margin-bottom: 10px; }
.dwn-group-head   { font-family: var(--font-family); font-weight: 550; color: var(--fg-dark-gray);
                    border-bottom: 1px solid #e3e3e3; margin-bottom: 3px; }
.dwn-field        { display: block; margin: 0; overflow-wrap: anywhere; }
.dwn-field input  { margin-right: 4px; vertical-align: middle; }
.dwn-note         { margin: 8px 0 0 0; }
.dwn-confirm      { margin-top: 4px; }

.dwn-receipt      { min-width: 60%; }
.dwn-receipt td   { padding: 4px 8px; }
.dwn-receipt-head { height: 30px; }
.dwn-not-queued   { text-align: left; margin: 4px 0; }

/* Aviso de ambiente de desenvolvimento na aba Download. */
.dwn-dev-note     { text-align: left; margin: 0 0 6px 0; padding: 4px 8px;
                    border-left: 3px solid var(--orange); background-color: var(--bg-dark);
                    color: var(--fg-dark-gray); font-size: 0.9em; }


/* ---------- Responsividade (mobile) ---------- */
/* Direção do flex (empilhado no celular) é controlada por classes Bootstrap no
   template (d-flex flex-column flex-md-row); a ordem segue o HTML-fonte (cards
   de registro antes do inventário) em ambos os layouts. Aqui tratamos apenas
   tamanho/posição que o Bootstrap 4 não expressa. Breakpoint alinhado ao md do
   Bootstrap (768px). */
@media (max-width: 767.98px) {
    #navbar-cria { height: auto !important; min-height: 40px !important; }
    #navbar-cria .abs-center-x { top: 0; height: 40px; }
    #navbar-cria #criamenu { order: 99; }
    #navbar-cria #criamenu .navbar-nav { height: auto; }
    #navbar-cria .navbar-toggler { line-height: 1; padding: 4px 8px; }

    /* Aba Registros: inventário em largura total, sem sticky (fica acima da lista).
       Zera o piso/teto da largura dinâmica do desktop. */
    .recs-inv-side { width: 100%; min-width: 0; max-width: none; position: static; max-height: none; overflow-y: visible; }
    .inv-rec-table-wrapper { overflow-x: visible; }

    /* Card de registro: encolhe logo/imagens, quebra texto longo, faixa rola */
    .recs-table td img { max-width: 60px; }
    .img-cell img { max-width: 80px !important; max-height: 80px !important; }
    .main-rec { overflow-wrap: anywhere; word-break: break-word; }
    .g-white { overflow-wrap: anywhere; word-break: break-word; }
    .landuse-scroll { width: 100%; overflow-x: visible; }
    .recs-table .landuse-table,
    .dups-table .landuse-table { width: 100%; }
    .recs-table .landuse-table td,
    .dups-table .landuse-table td { padding: 4px 0; }
    .recs-layout { overflow-x: hidden; overflow-y: hidden; }
    .recs-layout > *,
    .cflex-container { min-width: 0; max-width: 100%; }
    .recs-layout .box1x1 { margin-right: 0; max-width: 100%; }
    .recs-layout .box { margin-left: 0; margin-right: 0; }
    .recs-table { max-width: 100%; box-sizing: border-box; }
    .control-bar { height: auto; }
    .rec-logo-cell { width: 64px !important; }
    .btn-annotate { margin-right: 10%; }

    .recs-legend { width: 100%; }
    .recs-legend tbody { display: block; }
    .recs-legend tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
    .recs-legend td,
    .recs-legend th { display: inline-block; width: auto !important; }

    /* Formulário de filtros: 3 colunas de 20–30vw -> largura total, empilhadas */
    .form-table { max-width: 100%; min-width: 0; width: 100%; }

    /* Duplicatas: remove o recuo de 200px e reduz a indentação aninhada */
    .dups-table { width: 100%; max-width: 100%; box-sizing: border-box; }
    .dups-table td img { max-width: 60px; }
    .dup-logo-cell { width: 64px !important; }
    .dups-group { margin-left: 12px; }

    /* Modais de registro completo / anotações utilizáveis em telas pequenas */
    .full-record-table,
    .annotation-table { min-width: 0; width: 100%; }

    /* Aba Gráficos: canvas ocupa largura total e altura razoável no celular;
       ícones de tipo de gráfico viram uma faixa horizontal acima do canvas. */
    .inv-graph-wrapper { box-sizing: border-box; }
    .graph-canvas-wrapper { width: 100%; min-height: 360px; height: 60vh; }
    .graph-body-row  { flex-direction: column; }
    .graph-icons-col { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .graph-icons-col .graph-icon { height: 22px; margin: 0; }

    /* Rodapé de logos dos financiadores: quebra em várias linhas no celular */
    footer      { height: auto; flex-wrap: wrap; padding: 6px 4px; }
    footer span { width: auto; flex: 0 1 auto; }
    footer img  { max-height: 28px; width: auto; }

    /* Aba Números: encolhe larguras/fontes fixas das células. As linhas viram
       flex-wrap para que os campos que não cabem numa linha desçam para a
       próxima, em vez de ficarem fora da área visível (dependendo só do
       scroll horizontal do .table-responsive-md, pouco perceptível no mobile). */
    .num-cell        { width: auto; min-width: 64px; font-size: 1rem; padding: 4px 6px; }
    .hi-num          { font-size: 1.43rem; }
    .big-num         { font-size: 1.235rem; }
    .num-canvas-wrap { width: 56px; height: 32px; }

    /* As células vazias (.num-logo, .num-cell/.num-graph/.num-hgap sem conteúdo)
       são só espaçadores de grade do desktop; em flex viram caixas em branco
       e desorganizam a listagem, então somem no mobile. */
    .numbers-stats-table tr            { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
    .numbers-stats-table .num-sect     { flex: 1 1 100%; }
    .numbers-stats-table th.num-logo   { display: none; }
    .numbers-stats-table th.num-cell:empty,
    .numbers-stats-table th.num-graph:empty,
    .numbers-stats-table th.num-hgap:empty { display: none; }
    .numbers-stats-table .num-graph    { flex: 0 0 auto; }
    .numbers-stats-table th.num-cell   { flex: 1 1 auto; min-width: 90px; text-align: center; }

    /* Aba Perfil ambiental: o flex-basis de 518px já encolhe para a largura
       disponível; aqui só apertamos o respiro lateral e vertical. */
    .bio-profile-wrapper { padding: 0 8px; }
    .bio-profile-row { gap: 15px; }
    .bio-profile-card { margin-bottom: 0; }

    /* Aba Como citar. */
    .cite-wrapper .cite-table { display: table; width: 100%; min-width: 0; max-width: none; }
    .cite-table td:nth-child(1) { width: 4.5rem; vertical-align: top; }
    .cite-table td:nth-child(3) { width: 4.5rem; vertical-align: top; }
    .cite-table td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }
    .cite-table blockquote { margin-left: 10px; overflow-wrap: anywhere; }
    .cite-network { overflow-wrap: anywhere; }
    .cite-title { font-size: 1.3rem; }

    /* Aba Download. As listas de campos já são de coluna única em qualquer
       largura; aqui as 4 caixas empilham e os alvos de toque crescem. */
    .dwn-title { min-width: 0; width: 100%; }
    .dwn-title h2 { font-size: 1.1rem; }
    .dwn-table { min-width: 0; width: 100%; }
    .dwn-boxes { flex-direction: column; }
    .dwn-box-format, .dwn-box-model, .dwn-box-fields, .dwn-box-extra {
        flex: 1 1 100%; width: 100%; min-width: 0; }
    .dwn-box-format, .dwn-box-model, .dwn-box-fields, .dwn-box-extra { overflow-x: visible; }
    .dwn-field { padding: 3px 0; }
    .dwn-field input { width: 18px; height: 18px; }
    .dwn-confirm { width: 100%; }
    .dwn-receipt { min-width: 0; width: 100%; }
    .dwn-receipt td { overflow-wrap: anywhere; }
}

.es-debug-toggle { cursor: pointer; margin: 0; white-space: nowrap; }
.es-debug-toggle input { margin-right: 4px; vertical-align: middle; }
.es-debug { margin-bottom: 16px; }
.es-debug-head { padding: 4px 6px; font-size: 1rem; font-weight: bold; color: var(--fg-dark-gray); }
.es-debug pre { margin: 0 0 16px; padding: 8px; max-height: 320px; overflow: auto; font-size: 1rem; line-height: 1.4; color: #555;
                border: 1px solid #e0e0e0; background-color: var(--bg-gray); }

#back-to-top {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 900;
    padding: 6px 16px;
    border: 1px solid #ccc;
    border-radius: 18px;
    background-color: #fff;
    color: var(--fg-dark-gray);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    opacity: 0.85;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#back-to-top .btt-arrow { margin-right: 6px; font-size: 16px; }
#back-to-top[hidden] { display: none; }
#back-to-top:hover { opacity: 1; }

@media (max-width: 767.98px) {
    #back-to-top { bottom: 10px; padding: 5px 12px; font-size: 13px; line-height: 18px; }
    #back-to-top .btt-arrow { font-size: 15px; margin-right: 4px; }
}

.fg-orange { color: var(--orange); }
.fg-blue { color: var(--fg-blue); }
.faq { padding-left: 10%; padding-right: 10%; font-size: medium; }
.faq em { font-style: normal; font-weight: bold; }
.faq li > b:last-child { display: block; margin-bottom: 1rem; }
.faq li > b + ul { margin-top: 1rem; }
.faq .faq-1 { list-style-type: none; }
.faq .faq-1 li b { color: var(--orange); font-size: 1.2rem; }
.faq-1 .faq-2 { list-style-type: square; }
.faq-1 .faq-2 li b { color: var(--fg-blue); font-size: 1.2rem; }
#navbar-cria > .dropdown { margin-left: auto; }
#header-news { flex: 1 1 0; min-width: 0; margin-left: 20px; font-weight: bold; overflow-wrap: anywhere; }
#header-news .news-alert   { color: var(--red);    font-size: 1.0rem; text-align: right; }
#header-news .news-warning { color: var(--orange); font-size: 1.0rem; text-align: right; float: right; max-width: 80%; }
#header-news .news-info    { color: var(--blue);   font-size: 1.0rem; text-align: right; }
@media (max-width: 767.98px) {
    #header-news { flex-basis: 100%; margin-left: 0; }
    #header-news .news-warning { max-width: 100%; }
}
.search-order-dir { margin-left: 4px; padding: 0 6px; line-height: 1.4; vertical-align: middle; }