/**
 * Cultivares — listagem (/obtentora/{cultura}/) e ficha (/sementes/{slug}/).
 *
 * Carregado só nessas duas telas, por functions/seeds/assets.php. Substitui todo o
 * style inline que existia nos templates.
 *
 * Restrição do PDF: html2canvas (via html2pdf) não lida bem com position:sticky,
 * oklch() e gradientes — daí todas as cores aqui serem hex e não haver nenhum
 * elemento fixo ou grudado.
 */

/* =========================================================================
   Tokens
   ====================================================================== */

.bs-seeds,
.bs-single,
.bs-breadcrumb {
	--bs-green: #97b43c;
	--bs-green-dark: #1e4524;
	--bs-green-hero: #23502a;
	--bs-green-soft: #f0f5e3;

	--bs-ink: #333331;
	--bs-ink-soft: #6f6f6a;
	--bs-muted: #8a8a85;

	--bs-page: #f5f4f1;
	--bs-surface: #ffffff;
	--bs-line: #e6e5e0;

	--bs-r: #2e9e4f;
	--bs-mr: #3e8e41;
	--bs-ms: #e0a31a;
	--bs-s: #e2543b;
	--bs-si: #b9b9b4;

	--bs-pref: #3e9e4f;
	--bs-tol: #e8964a;

	--bs-radius: 8px;
	--bs-gap: 20px;
}

.bs-seeds [hidden],
.bs-single [hidden] {
	display: none !important;
}

.bs-seeds,
.bs-single {
	background: var(--bs-page);
	color: var(--bs-ink);
}

.bs-seeds *,
.bs-single *,
.bs-breadcrumb * {
	box-sizing: border-box;
}

/*
 * O .container do Bootstrap 3 tem clearfix via ::before/::after. Quando o mesmo
 * elemento também é flex, esses pseudo-elementos viram itens do flex e estouram o
 * space-between — por isso são desligados nos três casos em que as duas coisas se
 * encontram.
 */
.bs-breadcrumb__inner::before,
.bs-breadcrumb__inner::after,
.bs-single-hero__inner::before,
.bs-single-hero__inner::after,
.bs-pagination__inner::before,
.bs-pagination__inner::after {
	display: none;
}

/* =========================================================================
   Botões e chips
   ====================================================================== */

.bs-btn {
	display: inline-block;
	border: 1px solid transparent;
	border-radius: 30px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s linear, color .15s linear;
}

.bs-btn:disabled {
	opacity: .45;
	cursor: default;
}

.bs-btn--primary {
	background: var(--bs-green);
	border-color: var(--bs-green);
	color: #fff;
}

.bs-btn--primary:hover:not(:disabled) {
	background: #86a233;
	color: #fff;
}

.bs-btn--ghost {
	background: var(--bs-surface);
	border-color: var(--bs-line);
	color: var(--bs-ink-soft);
}

.bs-btn--ghost:hover:not(:disabled) {
	color: var(--bs-ink);
}

.bs-btn--dark {
	background: #2b2b26;
	border-color: #2b2b26;
	color: #fff;
}

.bs-btn--pdf {
	background: var(--bs-green);
	border-color: var(--bs-green);
	color: #fff;
}

.bs-btn--pdf:hover {
	background: #86a233;
}

.bs-chip {
	display: inline-block;
	background: #eceae5;
	border: 1px solid transparent;
	border-radius: 30px;
	padding: 9px 20px;
	font-size: 13px;
	color: var(--bs-ink-soft);
	cursor: pointer;
	transition: background-color .15s linear, color .15s linear;
}

.bs-chip span {
	color: var(--bs-muted);
}

.bs-chip.is-active,
.bs-chip.is-active span {
	background: var(--bs-green);
	color: #fff;
}

.bs-chip--static {
	background: var(--bs-green-soft);
	border-color: #d4e3b0;
	color: #5c7324;
	cursor: default;
	font-size: 12px;
	padding: 6px 14px;
}

/* =========================================================================
   Breadcrumb da ficha
   ====================================================================== */

.bs-breadcrumb {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding: 14px 0;
}

.bs-breadcrumb__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.bs-breadcrumb__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bs-muted);
}

.bs-breadcrumb__trail li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--bs-line);
}

.bs-breadcrumb__trail a {
	color: var(--bs-green);
}

.bs-breadcrumb__back {
	padding: 8px 18px;
	font-size: 11px;
}

/* =========================================================================
   Listagem — banner
   ====================================================================== */

.bs-hero {
	background-color: var(--bs-green-dark);
	background-image: var(--bs-hero-image, none);
	background-size: cover;
	background-position: center;
	padding: 60px 0;
}

.bs-hero__panel {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 20px;
	background: rgba(30, 69, 36, .82);
	border-radius: 6px;
	text-align: center;
}

.bs-hero__title {
	margin: 0;
	font-size: 42px;
	font-weight: 300;
	line-height: 1.15;
	color: #cfe08c;
}

.bs-hero__title strong {
	font-weight: 700;
	color: #fff;
}

.bs-hero__subtitle {
	margin: 10px 0 0;
	font-size: 16px;
	color: #e9eede;
}

/* =========================================================================
   Listagem — filtros
   ====================================================================== */

.bs-filters {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding: 22px 0;
}

.bs-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bs-filters__row--top {
	justify-content: space-between;
	margin-bottom: 14px;
}

.bs-filters__regions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bs-filters__search {
	flex: 1 1 260px;
	max-width: 340px;
}

.bs-filters__input,
.bs-filters__select {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: 6px;
	font-size: 13px;
	color: var(--bs-ink);
}

.bs-filters__row--selects {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bs-filters__field {
	min-width: 0;
}

/* =========================================================================
   Listagem — contador, marcas, grid
   ====================================================================== */

.bs-results {
	padding: 24px 0 4px;
}

.bs-results__summary {
	margin: 0;
	font-size: 13px;
	color: var(--bs-ink-soft);
}

.bs-results__context {
	color: var(--bs-muted);
}

.bs-brands {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding: 22px 0;
}

.bs-brands__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 18px;
}

.bs-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 70px;
	padding: 6px;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	filter: grayscale(100%);
	opacity: .6;
	transition: opacity .15s linear, filter .15s linear;
}

.bs-brands__item img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.bs-brands__item:hover,
.bs-brands__item.is-active {
	filter: grayscale(0);
	opacity: 1;
}

.bs-brands__item.is-active {
	border-color: var(--bs-green);
}

.bs-brands__name {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bs-ink-soft);
}

.bs-grid-wrap {
	padding: 10px 0 40px;
}

.bs-group {
	margin-bottom: 34px;
}

.bs-group__header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 0 18px;
	border-bottom: 1px solid var(--bs-line);
	margin-bottom: 22px;
}

.bs-group__logo {
	max-width: 150px;
	max-height: 62px;
	object-fit: contain;
}

.bs-group__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bs-ink-soft);
}

.bs-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bs-gap);
}

.bs-card {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	transition: border-color .15s linear, box-shadow .15s linear;
}

.bs-card:hover {
	border-color: var(--bs-green);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
}

.bs-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	padding: 16px;
	text-decoration: none;
}

.bs-card__logo {
	max-width: 100%;
	max-height: 72px;
	object-fit: contain;
}

.bs-card__title {
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	color: var(--bs-ink);
}

.bs-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--bs-muted);
}

/* =========================================================================
   Listagem — paginação
   ====================================================================== */

.bs-pagination {
	padding: 10px 0 46px;
}

.bs-pagination__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.bs-pagination__status {
	margin: 0;
	font-size: 13px;
	color: var(--bs-muted);
}

.bs-pagination__controls {
	display: flex;
	gap: 10px;
}

/* =========================================================================
   Ficha — topo
   ====================================================================== */

.bs-single-hero {
	background: var(--bs-green-hero);
	padding: 34px 0;
}

.bs-single-hero__inner {
	display: flex;
	align-items: center;
	gap: 34px;
	flex-wrap: wrap;
}

.bs-single-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	min-height: 130px;
	padding: 18px;
	background: var(--bs-surface);
	border-radius: var(--bs-radius);
}

.bs-single-hero__logo img {
	max-width: 100%;
	max-height: 94px;
	object-fit: contain;
}

.bs-single-hero__logo-text {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: var(--bs-ink);
}

.bs-single-hero__meta {
	flex: 1 1 340px;
}

.bs-single-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	margin: 0 0 20px;
}

.bs-fact dt {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #b5cd6d;
}

.bs-fact dd {
	margin: 0;
	font-size: 17px;
	color: #fff;
}

.bs-tech {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-tech__logo {
	display: block;
	width: 98px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: #fff;
	border-radius: 4px;
	padding: 4px 8px;
	text-indent: -9999px;
	overflow: hidden;
}

.bs-tech__logo--intacta {
	background-image: url(../img/intacta.png);
}

.bs-tech__logo--roundup {
	background-image: url(../img/roundup-ready.png);
	width: 52px;
}

.bs-tech__logo--xtend {
	background-image: url(../img/i2x.png);
}

.bs-tech__logo--conkesta {
	background-image: url(../img/Conkesta_E3.png);
}

.bs-tech__logo--enlist {
	background-image: url(../img/Enlist.png);
}

.bs-tech__badge {
	display: inline-block;
	padding: 7px 14px;
	background: #fff;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--bs-green-dark);
}

/* =========================================================================
   Ficha — grade e painéis
   ====================================================================== */

.bs-single__body {
	padding: 30px 15px 50px;
}

.bs-row {
	display: grid;
	gap: var(--bs-gap);
	margin-bottom: var(--bs-gap);
}

.bs-row--main {
	grid-template-columns: 2fr 1fr;
	align-items: start;
}

.bs-row--single {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * auto-fit em vez de 3 colunas fixas: milho, trigo e sorgo não têm tabela de
 * nematoides, e o painel simplesmente não é renderizado — a linha se reorganiza em
 * vez de deixar uma coluna vazia reservada.
 */
.bs-row--health {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
}

.bs-col {
	min-width: 0;
}

.bs-panel {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 24px 26px;
	margin-bottom: var(--bs-gap);
}

.bs-panel__title {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--bs-green);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--bs-ink);
	display: inline-block;
}

.bs-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.bs-panel__kicker {
	margin: 2px 0 16px;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-panel__footnote {
	margin: 14px 0 0;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--bs-muted);
}

/* Painéis com cabeçalho sobre fundo escuro (descritores e época). */
.bs-panel--descritores,
.bs-panel--epoca {
	padding: 0;
	overflow: hidden;
}

.bs-panel--descritores .bs-panel__head,
.bs-panel--epoca .bs-panel__head {
	align-items: center;
	padding: 18px 26px;
	background: var(--bs-green-dark);
}

.bs-panel--descritores .bs-panel__title,
.bs-panel--epoca .bs-panel__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
}

.bs-panel--descritores .bs-panel__kicker,
.bs-panel--epoca .bs-panel__kicker {
	margin: 4px 0 0;
	color: #b5cd6d;
}

.bs-panel--descritores .bs-panel__body,
.bs-panel--epoca .bs-panel__body {
	padding: 10px 26px 22px;
}

/* Ficha técnica: card escuro. */
.bs-panel--ficha {
	background: var(--bs-green-dark);
	border-color: var(--bs-green-dark);
	color: #fff;
}

.bs-panel--ficha .bs-panel__title {
	color: #fff;
}

.bs-ficha__row {
	margin-bottom: 14px;
}

.bs-ficha__label {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #b5cd6d;
}

.bs-ficha__value {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #fff;
}

.bs-ficha__points {
	margin-top: 20px;
}

.bs-bullets {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.bs-bullets li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 7px;
	font-size: 13px;
	line-height: 1.45;
	color: #eef2e4;
}

.bs-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bs-green);
}

.bs-dots {
	display: inline-flex;
	gap: 4px;
}

.bs-dots__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4b6b41;
}

.bs-dots__dot.is-on {
	background: var(--bs-green);
}

/* =========================================================================
   Ficha — adaptação e mapa
   ====================================================================== */

/* auto-fit: sem mapa (cultivar sem região cadastrada), os dados ocupam a largura toda. */
.bs-adaptacao {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: center;
}

.bs-datalist {
	margin: 0;
}

.bs-datalist__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-datalist__row dt {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--bs-ink-soft);
}

.bs-datalist__row dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bs-ink);
}

.bs-adaptacao__subtitle {
	margin: 18px 0 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--bs-ink-soft);
}

.bs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-adaptacao__map svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 340px;
	margin: 0 auto;
}

/*
 * Toda UF começa apagada; as regiões recomendadas do cultivar ligam a sua cor.
 * A cascata resolve as UFs que pertencem a mais de um recorte (MT é centro-oeste E
 * cerrado, por exemplo): vence a última regra declarada abaixo.
 */
/*
 * Cada UF é um <g class="bs-uf bs-uf--REGIAO"> com um <path> (mais um segundo path
 * `.circle`, nos estados pequenos do Nordeste e no DF, que carrega a sigla). O traço
 * branco vem como atributo no próprio SVG; aqui só se controla o preenchimento.
 */
.bs-uf path {
	fill: #ddddd7;
}

.bs-uf text {
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	text-anchor: start;
	fill: #6f6f6a;
	pointer-events: none;
}

.bs-adaptacao__map[data-regioes~="norte"] .bs-uf--norte path { fill: #4c9a45; }
.bs-adaptacao__map[data-regioes~="nordeste"] .bs-uf--nordeste path { fill: #d2703a; }
.bs-adaptacao__map[data-regioes~="centro-oeste"] .bs-uf--centro-oeste path { fill: #e8964a; }
.bs-adaptacao__map[data-regioes~="sudeste"] .bs-uf--sudeste path { fill: #7fa83c; }
.bs-adaptacao__map[data-regioes~="sul"] .bs-uf--sul path { fill: #2f7d46; }
.bs-adaptacao__map[data-regioes~="cerrado"] .bs-uf--cerrado path { fill: #e8964a; }
.bs-adaptacao__map[data-regioes~="matopiba"] .bs-uf--matopiba path { fill: #c9552f; }

.bs-adaptacao__map[data-regioes~="norte"] .bs-uf--norte text,
.bs-adaptacao__map[data-regioes~="nordeste"] .bs-uf--nordeste text,
.bs-adaptacao__map[data-regioes~="centro-oeste"] .bs-uf--centro-oeste text,
.bs-adaptacao__map[data-regioes~="sudeste"] .bs-uf--sudeste text,
.bs-adaptacao__map[data-regioes~="sul"] .bs-uf--sul text,
.bs-adaptacao__map[data-regioes~="cerrado"] .bs-uf--cerrado text,
.bs-adaptacao__map[data-regioes~="matopiba"] .bs-uf--matopiba text {
	fill: #ffffff;
}

.bs-map-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--bs-ink-soft);
}

.bs-map-legend__item::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: #ddddd7;
}

.bs-map-legend__item--norte::before { background: #4c9a45; }
.bs-map-legend__item--nordeste::before { background: #d2703a; }
.bs-map-legend__item--centro-oeste::before { background: #e8964a; }
.bs-map-legend__item--sudeste::before { background: #7fa83c; }
.bs-map-legend__item--sul::before { background: #2f7d46; }
.bs-map-legend__item--cerrado::before { background: #e8964a; }
.bs-map-legend__item--matopiba::before { background: #c9552f; }

/* =========================================================================
   Ficha — doenças e nematoides
   ====================================================================== */

.bs-health {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-health__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-health__row:last-child {
	border-bottom: 0;
}

.bs-health__label {
	font-size: 13px;
	color: var(--bs-ink);
}

.bs-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	color: #fff;
}

.bs-badge--r { background: var(--bs-r); }
.bs-badge--mr { background: var(--bs-mr); }
.bs-badge--ms { background: var(--bs-ms); }
.bs-badge--s { background: var(--bs-s); }
.bs-badge--si { background: var(--bs-si); }

.bs-badge--rnc,
.bs-badge--count {
	background: var(--bs-green);
	font-size: 12px;
	letter-spacing: .5px;
	padding: 5px 14px;
	text-transform: uppercase;
}

.bs-badge--macro {
	background: var(--bs-green-dark);
	border-radius: 4px;
	margin-right: 8px;
	padding: 2px 8px;
}

.bs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0 0 var(--bs-gap);
	padding: 0;
	list-style: none;
	font-size: 11px;
	color: var(--bs-ink-soft);
}

.bs-legend__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bs-legend__dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.bs-legend__dot--preferencial { background: var(--bs-pref); }
.bs-legend__dot--tolerada { background: var(--bs-tol); }

/* CTA do PDF. */
.bs-panel--cta {
	background: #a9c34e;
	border-color: #a9c34e;
	text-align: center;
}

.bs-panel__title--cta {
	display: block;
	border: 0;
	padding: 0;
	margin-bottom: 8px;
	font-size: 20px;
	text-transform: none;
	color: #fff;
}

.bs-cta__text {
	margin: 0 0 16px;
	font-size: 12px;
	color: #f2f6e5;
}

/* =========================================================================
   Ficha — descritores
   ====================================================================== */

.bs-descritores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
	margin: 0;
}

.bs-descritores__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-descritores__item dt {
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--bs-muted);
}

.bs-descritores__item dd {
	margin: 0;
	font-size: 14px;
	color: var(--bs-ink);
}

/* =========================================================================
   Ficha — época de semeadura
   ====================================================================== */

.bs-epoca__scroll {
	overflow-x: auto;
}

.bs-epoca {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	table-layout: fixed;
}

.bs-epoca th,
.bs-epoca td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--bs-line);
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
}

.bs-epoca thead th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--bs-muted);
}

/*
 * A seletividade precisa incluir .bs-epoca: a regra genérica `.bs-epoca th, .bs-epoca td`
 * acima tem especificidade (0,1,1) e vencia as classes de coluna sozinhas (0,1,0) —
 * era por isso que a microrregião saía centralizada e a janela herdava o padding
 * lateral de 10px, desalinhando as barras das colunas de mês.
 */
.bs-epoca .bs-epoca__micro {
	width: 22%;
	text-align: left;
}

.bs-epoca__ciclo {
	width: 11%;
}

.bs-epoca__pop {
	width: 15%;
	color: var(--bs-ink-soft);
}

.bs-epoca__month {
	width: 8.6%;
}

.bs-epoca__group th {
	background: var(--bs-green-soft);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--bs-ink);
}

.bs-epoca .bs-epoca__window {
	padding: 8px 0;
}

/* 6 meses x 3 decêndios. As barras se posicionam por --bs-start/--bs-span. */
.bs-window {
	position: relative;
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	align-items: center;
	height: 16px;
}

.bs-window__tick {
	grid-row: 1;
	grid-column: var(--bs-col);
	justify-self: start;
	width: 1px;
	height: 16px;
	background: var(--bs-line);
}

.bs-window__bar {
	grid-row: 1;
	grid-column: var(--bs-start) / span var(--bs-span);
	height: 8px;
	border-radius: 5px;
}

/*
 * A tolerada é a faixa larga e fina, desenhada atrás; a preferencial é mais curta e
 * mais grossa, por cima. O laranja só aparece nas pontas, que é a leitura do protótipo.
 * A preferencial não leva margem lateral: ela precisa cobrir exatamente o seu span.
 */
.bs-window__bar--tolerada {
	height: 5px;
	background: var(--bs-tol);
}

.bs-window__bar--preferencial {
	height: 9px;
	background: var(--bs-pref);
}

.bs-epoca__image {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================================
   Responsivo
   ====================================================================== */

@media (max-width: 1199px) {
	.bs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.bs-hero {
		padding: 40px 0;
	}

	.bs-hero__title {
		font-size: 32px;
	}

	.bs-filters__row--selects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bs-row--main,
	.bs-row--health,
	.bs-adaptacao {
		grid-template-columns: 1fr;
	}

	.bs-single-hero__logo {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.bs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bs-descritores {
		grid-template-columns: 1fr;
	}

	.bs-filters__row--top {
		flex-direction: column;
		align-items: stretch;
	}

	.bs-filters__search {
		max-width: none;
	}

	.bs-single-hero__facts {
		gap: 20px;
	}
}

@media (max-width: 479px) {
	.bs-hero__title {
		font-size: 26px;
	}

	.bs-filters__row--selects {
		grid-template-columns: 1fr;
	}

	.bs-panel {
		padding: 18px;
	}

	.bs-panel--descritores .bs-panel__head,
	.bs-panel--epoca .bs-panel__head,
	.bs-panel--descritores .bs-panel__body,
	.bs-panel--epoca .bs-panel__body {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* Durante a geração do PDF nada pode estar em transição. */
.bs-printing * {
	transition: none !important;
	animation: none !important;
}