/* =========================================================================
 * Unbox Painel — Panel UI SDK (PRD 3.1 §8-11)
 *
 * Componentes construídos exclusivamente sobre o contrato público `--ubp-*`.
 * Nenhuma cor, raio ou espaçamento literal: trocar um token reflete em tudo.
 *
 * Tudo aqui vive sob `.ubp-panel`, então nada vaza para o site público — e o
 * Painel continua não enfileirando nada fora de /painel/.
 * ====================================================================== */

/* ---------- Ícones ---------- */

/*
 * `Icons::svg()` devolve um <span class="ubp-ico …"> envolvendo o <svg>, e é
 * no span que a classe cai. O dimensionamento vai no span; o SVG o preenche.
 */
.ubp-panel .ubp-ui-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.ubp-panel .ubp-ui-icon svg {
	width: 100%;
	height: 100%;
}

/* =========================================================================
 * Estrutura
 * ====================================================================== */

.ubp-panel .ubp-ui-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ubp-space-4);
	margin-bottom: var(--ubp-space-6);
}

.ubp-panel .ubp-ui-page-header__main {
	min-width: 0;
}

.ubp-panel .ubp-ui-page-header__eyebrow {
	margin: 0 0 var(--ubp-space-1);
	font-size: var(--ubp-text-xs);
	font-weight: var(--ubp-weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ubp-color-primary);
}

.ubp-panel .ubp-ui-page-header__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-2xl);
	font-weight: var(--ubp-weight-bold);
	line-height: 1.2;
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-page-header__description {
	margin: var(--ubp-space-2) 0 0;
	max-width: 68ch;
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ubp-space-2);
}

/* ---------- Section ---------- */

.ubp-panel .ubp-ui-section {
	margin-bottom: var(--ubp-space-6);
}

.ubp-panel .ubp-ui-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	margin-bottom: var(--ubp-space-3);
}

.ubp-panel .ubp-ui-section__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-lg);
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-section__description {
	margin: var(--ubp-space-1) 0 0;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-section__toggle {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-2);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	text-align: left;
}

.ubp-panel .ubp-ui-section__chevron {
	transform: rotate( -90deg );
	transition: transform var(--ubp-transition-base);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-section__toggle[aria-expanded="false"] .ubp-ui-section__chevron {
	transform: rotate( 180deg );
}

.ubp-panel .ubp-ui-section__actions {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-2);
}

/* ---------- Toolbar ---------- */

.ubp-panel .ubp-ui-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	margin-bottom: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-toolbar__start,
.ubp-panel .ubp-ui-toolbar__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ubp-space-2);
	min-width: 0;
}

/* ---------- Grid ---------- */

.ubp-panel .ubp-ui-grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-grid__cell {
	grid-column: span 12;
	min-width: 0;
}

@media ( min-width: 768px ) {

	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="1"]  { grid-column: span 1; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="2"]  { grid-column: span 2; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="3"]  { grid-column: span 3; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="4"]  { grid-column: span 4; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="5"]  { grid-column: span 5; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="6"]  { grid-column: span 6; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="7"]  { grid-column: span 7; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="8"]  { grid-column: span 8; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="9"]  { grid-column: span 9; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="10"] { grid-column: span 10; }
	.ubp-panel .ubp-ui-grid__cell[data-ubp-width="11"] { grid-column: span 11; }
}

/* Abaixo de 768px todo campo colapsa para 100% (PRD 3.0 §35). */

/* ---------- Stack / Divider ---------- */

.ubp-panel .ubp-ui-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-stack[data-ubp-gap="2"] { gap: var(--ubp-space-2); }
.ubp-panel .ubp-ui-stack[data-ubp-gap="3"] { gap: var(--ubp-space-3); }
.ubp-panel .ubp-ui-stack[data-ubp-gap="6"] { gap: var(--ubp-space-6); }
.ubp-panel .ubp-ui-stack[data-ubp-gap="8"] { gap: var(--ubp-space-8); }

.ubp-panel .ubp-ui-divider {
	height: 1px;
	margin: var(--ubp-space-5) 0;
	border: 0;
	background: var(--ubp-color-border);
}

/* =========================================================================
 * Card / KPI
 * ====================================================================== */

.ubp-panel .ubp-ui-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ubp-color-surface);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-lg);
	box-shadow: var(--ubp-shadow-sm);
	overflow: hidden;
}

.ubp-panel .ubp-ui-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	padding: var(--ubp-space-4) var(--ubp-space-5);
	border-bottom: 1px solid var(--ubp-color-border);
}

.ubp-panel .ubp-ui-card__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-md);
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-card__subtitle {
	margin: var(--ubp-space-1) 0 0;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-card__actions {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-2);
	flex: 0 0 auto;
}

.ubp-panel .ubp-ui-card__body {
	flex: 1 1 auto;
	padding: var(--ubp-space-5);
}

.ubp-panel .ubp-ui-card__footer {
	padding: var(--ubp-space-3) var(--ubp-space-5);
	background: var(--ubp-color-surface-alt);
	border-top: 1px solid var(--ubp-color-border);
	font-size: var(--ubp-text-sm);
}

/* Faixa de cor à esquerda indicando o tom — acompanhada sempre de texto. */
.ubp-panel .ubp-ui-card.is-tone-success { border-left: 3px solid var(--ubp-color-success); }
.ubp-panel .ubp-ui-card.is-tone-warning { border-left: 3px solid var(--ubp-color-warning); }
.ubp-panel .ubp-ui-card.is-tone-danger  { border-left: 3px solid var(--ubp-color-danger); }
.ubp-panel .ubp-ui-card.is-tone-critical{ border-left: 3px solid var(--ubp-color-critical); }
.ubp-panel .ubp-ui-card.is-tone-primary { border-left: 3px solid var(--ubp-color-primary); }
.ubp-panel .ubp-ui-card.is-tone-info    { border-left: 3px solid var(--ubp-color-info); }

/* ---------- KPI ---------- */

.ubp-panel .ubp-ui-kpi {
	display: flex;
	flex-direction: column;
	gap: var(--ubp-space-1);
	padding: var(--ubp-space-5);
	background: var(--ubp-color-surface);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-lg);
	box-shadow: var(--ubp-shadow-sm);
	text-decoration: none;
	color: inherit;
}

.ubp-panel a.ubp-ui-kpi.is-linked:hover,
.ubp-panel a.ubp-ui-kpi.is-linked:focus-visible {
	border-color: var(--ubp-color-primary);
	box-shadow: var(--ubp-shadow-md);
}

.ubp-panel .ubp-ui-kpi__icon {
	color: var(--ubp-color-primary);
	margin-bottom: var(--ubp-space-1);
}

.ubp-panel .ubp-ui-kpi__value {
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-2xl);
	font-weight: var(--ubp-weight-bold);
	line-height: 1.1;
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-kpi__label {
	font-size: var(--ubp-text-sm);
	font-weight: var(--ubp-weight-medium);
	color: var(--ubp-color-text-secondary);
}

.ubp-panel .ubp-ui-kpi__hint {
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

/* =========================================================================
 * Tabela
 * ====================================================================== */

.ubp-panel .ubp-ui-table-wrap {
	/* Rolagem confinada: a página nunca rola na horizontal (PRD §183). */
	overflow-x: auto;
	background: var(--ubp-color-surface);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-lg);
}

.ubp-panel .ubp-ui-table-wrap:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 2px;
}

.ubp-panel .ubp-ui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ubp-text-base);
}

.ubp-panel .ubp-ui-table__caption {
	padding: var(--ubp-space-3) var(--ubp-space-4);
	text-align: left;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-table th {
	padding: var(--ubp-space-3) var(--ubp-space-4);
	background: var(--ubp-color-surface-alt);
	border-bottom: 1px solid var(--ubp-color-border);
	font-size: var(--ubp-text-xs);
	font-weight: var(--ubp-weight-semibold);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ubp-color-muted);
	white-space: nowrap;
	text-align: left;
}

.ubp-panel .ubp-ui-table td {
	padding: var(--ubp-space-3) var(--ubp-space-4);
	border-bottom: 1px solid var(--ubp-color-border);
	vertical-align: middle;
}

.ubp-panel .ubp-ui-table tbody tr:last-child td {
	border-bottom: 0;
}

.ubp-panel .ubp-ui-table tbody tr:hover {
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-ui-table .is-align-end { text-align: right; }
.ubp-panel .ubp-ui-table .is-align-center { text-align: center; }

/* Mobile: cada linha vira um cartão rotulado (PRD §184). */
@media ( max-width: 767px ) {

	.ubp-panel .ubp-ui-table-wrap {
		border: 0;
		background: none;
		overflow-x: visible;
	}

	.ubp-panel .ubp-ui-table,
	.ubp-panel .ubp-ui-table tbody,
	.ubp-panel .ubp-ui-table tr,
	.ubp-panel .ubp-ui-table td {
		display: block;
		width: 100%;
	}

	.ubp-panel .ubp-ui-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	.ubp-panel .ubp-ui-table tr {
		margin-bottom: var(--ubp-space-3);
		background: var(--ubp-color-surface);
		border: 1px solid var(--ubp-color-border);
		border-radius: var(--ubp-radius-lg);
		overflow: hidden;
	}

	.ubp-panel .ubp-ui-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--ubp-space-3);
		text-align: right;
	}

	.ubp-panel .ubp-ui-table td::before {
		content: attr( data-label );
		flex: 0 0 auto;
		font-size: var(--ubp-text-xs);
		font-weight: var(--ubp-weight-semibold);
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--ubp-color-muted);
		text-align: left;
	}

	/* Célula sem rótulo (ações) ocupa a linha inteira. */
	.ubp-panel .ubp-ui-table td[data-label=""]::before {
		content: none;
	}
}

/* =========================================================================
 * Key/Value + Timeline
 * ====================================================================== */

.ubp-panel .ubp-ui-kv {
	display: grid;
	grid-template-columns: minmax( 120px, max-content ) 1fr;
	gap: var(--ubp-space-2) var(--ubp-space-4);
	margin: 0;
}

.ubp-panel .ubp-ui-kv__label {
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-kv__value {
	margin: 0;
	color: var(--ubp-color-text);
	overflow-wrap: anywhere;
}

@media ( max-width: 520px ) {

	.ubp-panel .ubp-ui-kv {
		grid-template-columns: 1fr;
		gap: var(--ubp-space-1);
	}

	.ubp-panel .ubp-ui-kv__value {
		margin-bottom: var(--ubp-space-2);
	}
}

.ubp-panel .ubp-ui-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ubp-panel .ubp-ui-timeline__item {
	position: relative;
	display: flex;
	gap: var(--ubp-space-3);
	padding: 0 0 var(--ubp-space-4) 0;
}

/* Fio ligando os marcadores; some no último item. */
.ubp-panel .ubp-ui-timeline__item::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 24px;
	bottom: 0;
	width: 1px;
	background: var(--ubp-color-border);
}

.ubp-panel .ubp-ui-timeline__item:last-child::before {
	display: none;
}

.ubp-panel .ubp-ui-timeline__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-surface-sunken);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-timeline__item.is-tone-success .ubp-ui-timeline__marker {
	background: var(--ubp-color-success-soft);
	color: var(--ubp-color-success);
}

.ubp-panel .ubp-ui-timeline__item.is-tone-warning .ubp-ui-timeline__marker {
	background: var(--ubp-color-warning-soft);
	color: var(--ubp-color-warning);
}

.ubp-panel .ubp-ui-timeline__item.is-tone-danger .ubp-ui-timeline__marker {
	background: var(--ubp-color-danger-soft);
	color: var(--ubp-color-danger);
}

.ubp-panel .ubp-ui-timeline__item.is-tone-primary .ubp-ui-timeline__marker {
	background: var(--ubp-color-primary-soft);
	color: var(--ubp-color-primary);
}

.ubp-panel .ubp-ui-timeline__content {
	min-width: 0;
	padding-top: 2px;
}

.ubp-panel .ubp-ui-timeline__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ubp-space-2);
}

.ubp-panel .ubp-ui-timeline__title {
	font-weight: var(--ubp-weight-medium);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-timeline__meta {
	font-family: var(--ubp-font-mono);
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-timeline__body {
	margin-top: var(--ubp-space-1);
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-text-secondary);
	overflow-wrap: anywhere;
}

/* =========================================================================
 * Navegação
 * ====================================================================== */

.ubp-panel .ubp-ui-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ubp-space-2);
	margin: 0 0 var(--ubp-space-2);
	padding: 0;
	list-style: none;
	font-size: var(--ubp-text-sm);
}

.ubp-panel .ubp-ui-breadcrumb__item + .ubp-ui-breadcrumb__item::before {
	content: "/";
	margin-right: var(--ubp-space-2);
	color: var(--ubp-color-subtle);
}

.ubp-panel .ubp-ui-breadcrumb a {
	color: var(--ubp-color-muted);
	text-decoration: none;
}

.ubp-panel .ubp-ui-breadcrumb a:hover,
.ubp-panel .ubp-ui-breadcrumb a:focus-visible {
	color: var(--ubp-color-primary);
	text-decoration: underline;
}

.ubp-panel .ubp-ui-breadcrumb [aria-current="page"] {
	color: var(--ubp-color-text-secondary);
	font-weight: var(--ubp-weight-medium);
}

/* ---------- Tabs ---------- */

.ubp-panel .ubp-ui-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubp-space-1);
	margin-bottom: var(--ubp-space-4);
	border-bottom: 1px solid var(--ubp-color-border);
}

.ubp-panel .ubp-ui-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--ubp-space-2);
	padding: var(--ubp-space-3) var(--ubp-space-4);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: var(--ubp-text-base);
	font-weight: var(--ubp-weight-medium);
	color: var(--ubp-color-muted);
	text-decoration: none;
	white-space: nowrap;
}

.ubp-panel .ubp-ui-tabs__item:hover {
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-tabs__item.is-active {
	color: var(--ubp-color-primary);
	border-bottom-color: var(--ubp-color-primary);
}

/* ---------- Paginação ---------- */

.ubp-panel .ubp-ui-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	margin-top: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-pagination__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ubp-space-1);
}

.ubp-panel .ubp-ui-pagination__page,
.ubp-panel .ubp-ui-pagination__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--ubp-space-3);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface);
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-text-secondary);
	text-decoration: none;
}

.ubp-panel .ubp-ui-pagination__page:hover,
.ubp-panel .ubp-ui-pagination__nav:hover {
	border-color: var(--ubp-color-border-strong);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-pagination__page.is-active {
	background: var(--ubp-color-primary);
	border-color: var(--ubp-color-primary);
	color: var(--ubp-color-on-primary);
	font-weight: var(--ubp-weight-semibold);
}

.ubp-panel .ubp-ui-pagination__nav.is-disabled {
	opacity: .45;
	pointer-events: none;
}

.ubp-panel .ubp-ui-pagination__gap {
	padding: 0 var(--ubp-space-1);
	color: var(--ubp-color-subtle);
}

.ubp-panel .ubp-ui-pagination__summary {
	margin: 0;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

/* =========================================================================
 * Botões
 * ====================================================================== */

.ubp-panel .ubp-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ubp-space-2);
	height: 38px;
	padding: 0 var(--ubp-space-4);
	border: 1px solid transparent;
	border-radius: var(--ubp-radius-md);
	font-family: var(--ubp-font-text);
	font-size: var(--ubp-text-base);
	font-weight: var(--ubp-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ubp-transition-fast), border-color var(--ubp-transition-fast), color var(--ubp-transition-fast);
	/* Alvo confortável no toque sem inflar o desktop. */
	min-width: 38px;
}

.ubp-panel .ubp-ui-button.is-size-sm {
	height: 32px;
	min-width: 32px;
	padding: 0 var(--ubp-space-3);
	font-size: var(--ubp-text-sm);
}

.ubp-panel .ubp-ui-button.is-icon-only {
	padding: 0;
}

.ubp-panel .ubp-ui-button.is-primary {
	background: var(--ubp-color-primary);
	border-color: var(--ubp-color-primary);
	color: var(--ubp-color-on-primary);
}

.ubp-panel .ubp-ui-button.is-primary:hover:not( [disabled] ) {
	background: var(--ubp-color-primary-hover);
	border-color: var(--ubp-color-primary-hover);
}

.ubp-panel .ubp-ui-button.is-secondary {
	background: var(--ubp-color-surface);
	border-color: var(--ubp-color-border-strong);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-button.is-secondary:hover:not( [disabled] ) {
	border-color: var(--ubp-color-primary);
	color: var(--ubp-color-primary);
}

.ubp-panel .ubp-ui-button.is-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ubp-color-text-secondary);
}

.ubp-panel .ubp-ui-button.is-ghost:hover:not( [disabled] ) {
	background: var(--ubp-color-surface-alt);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-button.is-danger {
	background: var(--ubp-color-danger);
	border-color: var(--ubp-color-danger);
	color: #ffffff;
}

.ubp-panel .ubp-ui-button.is-danger:hover:not( [disabled] ) {
	filter: brightness( .93 );
}

/*
 * Ícone acompanha o texto do botão.
 *
 * O SVG desenha com `currentColor`, então basta a cor certa chegar ao <span>
 * que o envolve. Herdar sozinho seria o esperado, mas o painel carrega folhas
 * anteriores que fixam cor em `.ubp-ico` de outros contextos — sem declarar
 * aqui, o ícone fica laranja sobre o fundo laranja do botão ativo.
 *
 * O ícone é parte do rótulo, não um elemento com cor própria.
 */
.ubp-panel .ubp-ui-button .ubp-ui-icon {
	color: inherit;
}

.ubp-panel .ubp-ui-button.is-primary .ubp-ui-icon {
	color: var(--ubp-color-on-primary);
}

.ubp-panel .ubp-ui-button.is-danger .ubp-ui-icon {
	color: #ffffff;
}

/* Estado desabilitado: o ícone desbota junto, não fica sozinho em destaque. */
.ubp-panel .ubp-ui-button[disabled] .ubp-ui-icon {
	color: inherit;
}

.ubp-panel .ubp-ui-button[disabled],
.ubp-panel .ubp-ui-button[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
}

.ubp-panel .ubp-ui-button.is-loading {
	pointer-events: none;
}

.ubp-panel .ubp-ui-button.is-loading .ubp-ui-button__label {
	opacity: .6;
}

/* Foco visível em TODO elemento interativo — requisito WCAG, não enfeite. */
.ubp-panel .ubp-ui-button:focus-visible,
.ubp-panel .ubp-ui-tabs__item:focus-visible,
.ubp-panel .ubp-ui-pagination__page:focus-visible,
.ubp-panel .ubp-ui-pagination__nav:focus-visible,
.ubp-panel .ubp-ui-section__toggle:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 2px;
}

/* =========================================================================
 * Feedback
 * ====================================================================== */

.ubp-panel .ubp-ui-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ubp-space-2);
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-surface-sunken);
	font-size: var(--ubp-text-xs);
	font-weight: var(--ubp-weight-semibold);
	line-height: 1.6;
	color: var(--ubp-color-text-secondary);
	white-space: nowrap;
}

.ubp-panel .ubp-ui-badge.is-tone-primary  { background: var(--ubp-color-primary-soft); color: var(--ubp-color-primary-active); }
.ubp-panel .ubp-ui-badge.is-tone-info     { background: var(--ubp-color-info-soft); color: var(--ubp-color-info); }
.ubp-panel .ubp-ui-badge.is-tone-success  { background: var(--ubp-color-success-soft); color: #15803d; }
.ubp-panel .ubp-ui-badge.is-tone-warning  { background: var(--ubp-color-warning-soft); color: #b45309; }
.ubp-panel .ubp-ui-badge.is-tone-danger   { background: var(--ubp-color-danger-soft); color: #b91c1c; }
.ubp-panel .ubp-ui-badge.is-tone-critical { background: var(--ubp-color-critical-soft); color: var(--ubp-color-critical); }
.ubp-panel .ubp-ui-badge.is-tone-muted    { background: var(--ubp-color-surface-alt); color: var(--ubp-color-muted); }

/* ---------- Status ---------- */

.ubp-panel .ubp-ui-status {
	display: inline-flex;
	align-items: center;
	gap: var(--ubp-space-2);
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-text-secondary);
	white-space: nowrap;
}

.ubp-panel .ubp-ui-status__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-muted);
	flex: 0 0 auto;
}

.ubp-panel .ubp-ui-status.is-tone-success  .ubp-ui-status__dot { background: var(--ubp-color-success); }
.ubp-panel .ubp-ui-status.is-tone-warning  .ubp-ui-status__dot { background: var(--ubp-color-warning); }
.ubp-panel .ubp-ui-status.is-tone-danger   .ubp-ui-status__dot { background: var(--ubp-color-danger); }
.ubp-panel .ubp-ui-status.is-tone-critical .ubp-ui-status__dot { background: var(--ubp-color-critical); }
.ubp-panel .ubp-ui-status.is-tone-info     .ubp-ui-status__dot { background: var(--ubp-color-info); }
.ubp-panel .ubp-ui-status.is-tone-primary  .ubp-ui-status__dot { background: var(--ubp-color-primary); }
.ubp-panel .ubp-ui-status.is-tone-muted    .ubp-ui-status__dot { background: var(--ubp-color-subtle); }

/* ---------- Alert ---------- */

.ubp-panel .ubp-ui-alert {
	display: flex;
	gap: var(--ubp-space-3);
	padding: var(--ubp-space-4);
	border: 1px solid var(--ubp-color-border);
	border-left-width: 3px;
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface);
	margin-bottom: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-alert__icon {
	flex: 0 0 auto;
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-alert__content {
	min-width: 0;
}

.ubp-panel .ubp-ui-alert__title {
	margin: 0;
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-alert__message {
	margin: var(--ubp-space-1) 0 0;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-text-secondary);
}

.ubp-panel .ubp-ui-alert__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ubp-space-2);
	margin-top: var(--ubp-space-3);
}

.ubp-panel .ubp-ui-alert.is-tone-info     { border-left-color: var(--ubp-color-info); background: var(--ubp-color-info-soft); }
.ubp-panel .ubp-ui-alert.is-tone-success  { border-left-color: var(--ubp-color-success); background: var(--ubp-color-success-soft); }
.ubp-panel .ubp-ui-alert.is-tone-warning  { border-left-color: var(--ubp-color-warning); background: var(--ubp-color-warning-soft); }
.ubp-panel .ubp-ui-alert.is-tone-danger   { border-left-color: var(--ubp-color-danger); background: var(--ubp-color-danger-soft); }
.ubp-panel .ubp-ui-alert.is-tone-critical { border-left-color: var(--ubp-color-critical); background: var(--ubp-color-critical-soft); }

.ubp-panel .ubp-ui-alert.is-tone-info .ubp-ui-alert__icon     { color: var(--ubp-color-info); }
.ubp-panel .ubp-ui-alert.is-tone-success .ubp-ui-alert__icon  { color: var(--ubp-color-success); }
.ubp-panel .ubp-ui-alert.is-tone-warning .ubp-ui-alert__icon  { color: var(--ubp-color-warning); }
.ubp-panel .ubp-ui-alert.is-tone-danger .ubp-ui-alert__icon   { color: var(--ubp-color-danger); }
.ubp-panel .ubp-ui-alert.is-tone-critical .ubp-ui-alert__icon { color: var(--ubp-color-critical); }

/* ---------- Empty / Error state ---------- */

.ubp-panel .ubp-ui-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ubp-space-2);
	padding: var(--ubp-space-12) var(--ubp-space-5);
	background: var(--ubp-color-surface);
	border: 1px dashed var(--ubp-color-border-strong);
	border-radius: var(--ubp-radius-lg);
}

.ubp-panel .ubp-ui-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-surface-sunken);
	color: var(--ubp-color-muted);
	margin-bottom: var(--ubp-space-2);
}

.ubp-panel .ubp-ui-empty__icon .ubp-ui-icon {
	width: 20px;
	height: 20px;
}

.ubp-panel .ubp-ui-empty__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-md);
	font-weight: var(--ubp-weight-semibold);
	color: var(--ubp-color-text);
}

.ubp-panel .ubp-ui-empty__description {
	margin: 0;
	max-width: 46ch;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-empty__code {
	margin-top: var(--ubp-space-2);
	padding: 2px var(--ubp-space-2);
	border-radius: var(--ubp-radius-sm);
	background: var(--ubp-color-surface-sunken);
	font-family: var(--ubp-font-mono);
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-empty__action {
	margin-top: var(--ubp-space-3);
}

.ubp-panel .ubp-ui-empty.is-error {
	border-style: solid;
	border-color: var(--ubp-color-danger);
}

.ubp-panel .ubp-ui-empty.is-error .ubp-ui-empty__icon {
	background: var(--ubp-color-danger-soft);
	color: var(--ubp-color-danger);
}

/* ---------- Skeleton ---------- */

.ubp-panel .ubp-ui-skeleton {
	display: flex;
	flex-direction: column;
	gap: var(--ubp-space-2);
}

.ubp-panel .ubp-ui-skeleton__line {
	display: block;
	height: 12px;
	border-radius: var(--ubp-radius-sm);
	background: linear-gradient(
		90deg,
		var(--ubp-color-surface-alt) 25%,
		var(--ubp-color-surface-sunken) 37%,
		var(--ubp-color-surface-alt) 63%
	);
	background-size: 400% 100%;
	animation: ubp-skeleton 1.4s ease infinite;
}

.ubp-panel .ubp-ui-skeleton__line:last-child {
	width: 60%;
}

@keyframes ubp-skeleton {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media ( prefers-reduced-motion: reduce ) {

	.ubp-panel .ubp-ui-skeleton__line {
		animation: none;
	}
}

/* ---------- Progress ---------- */

.ubp-panel .ubp-ui-progress {
	height: 6px;
	border-radius: var(--ubp-radius-full);
	background: var(--ubp-color-surface-sunken);
	overflow: hidden;
}

.ubp-panel .ubp-ui-progress__bar {
	display: block;
	height: 100%;
	background: var(--ubp-color-primary);
	transition: width var(--ubp-transition-base);
}

.ubp-panel .ubp-ui-progress.is-tone-success .ubp-ui-progress__bar { background: var(--ubp-color-success); }
.ubp-panel .ubp-ui-progress.is-tone-warning .ubp-ui-progress__bar { background: var(--ubp-color-warning); }
.ubp-panel .ubp-ui-progress.is-tone-danger  .ubp-ui-progress__bar { background: var(--ubp-color-danger); }

/* =========================================================================
 * Modal
 * ====================================================================== */

.ubp-panel .ubp-ui-modal[hidden] {
	display: none;
}

.ubp-panel .ubp-ui-modal {
	position: fixed;
	inset: 0;
	z-index: var(--ubp-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ubp-space-4);
}

.ubp-panel .ubp-ui-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 17, 19, 24, .5 );
}

.ubp-panel .ubp-ui-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: calc( 100vh - var(--ubp-space-8) );
	background: var(--ubp-color-surface);
	border-radius: var(--ubp-radius-lg);
	box-shadow: var(--ubp-shadow-lg);
	overflow: hidden;
}

.ubp-panel .ubp-ui-modal__dialog.is-size-sm { max-width: 420px; }
.ubp-panel .ubp-ui-modal__dialog.is-size-lg { max-width: 820px; }

.ubp-panel .ubp-ui-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	padding: var(--ubp-space-4) var(--ubp-space-5);
	border-bottom: 1px solid var(--ubp-color-border);
}

.ubp-panel .ubp-ui-modal__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-md);
	font-weight: var(--ubp-weight-semibold);
}

.ubp-panel .ubp-ui-modal__body {
	flex: 1 1 auto;
	padding: var(--ubp-space-5);
	overflow-y: auto;
}

.ubp-panel .ubp-ui-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--ubp-space-2);
	padding: var(--ubp-space-4) var(--ubp-space-5);
	border-top: 1px solid var(--ubp-color-border);
	background: var(--ubp-color-surface-alt);
}

/* Trava a rolagem do fundo enquanto um modal está aberto. */
body.ubp-modal-open {
	overflow: hidden;
}

/* =========================================================================
 * Drawer
 * ====================================================================== */

.ubp-panel .ubp-ui-drawer {
	align-items: stretch;
	padding: 0;
}

.ubp-panel .ubp-ui-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	max-height: 100vh;
	margin-left: auto;
	background: var(--ubp-color-surface);
	box-shadow: var(--ubp-shadow-lg);
}

.ubp-panel .ubp-ui-drawer__panel.is-start {
	margin-left: 0;
	margin-right: auto;
}

.ubp-panel .ubp-ui-drawer__panel.is-size-sm { max-width: 320px; }
.ubp-panel .ubp-ui-drawer__panel.is-size-lg { max-width: 560px; }

.ubp-panel .ubp-ui-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ubp-space-3);
	padding: var(--ubp-space-4) var(--ubp-space-5);
	border-bottom: 1px solid var(--ubp-color-border);
}

.ubp-panel .ubp-ui-drawer__title {
	margin: 0;
	font-family: var(--ubp-font-display);
	font-size: var(--ubp-text-md);
	font-weight: var(--ubp-weight-semibold);
}

.ubp-panel .ubp-ui-drawer__body {
	flex: 1 1 auto;
	padding: var(--ubp-space-5);
	overflow-y: auto;
}

.ubp-panel .ubp-ui-drawer__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--ubp-space-2);
	padding: var(--ubp-space-4) var(--ubp-space-5);
	border-top: 1px solid var(--ubp-color-border);
	background: var(--ubp-color-surface-alt);
}

/* No celular a gaveta ocupa tudo: 420px numa tela de 360 não é gaveta. */
@media ( max-width: 520px ) {

	.ubp-panel .ubp-ui-drawer__panel,
	.ubp-panel .ubp-ui-drawer__panel.is-size-sm,
	.ubp-panel .ubp-ui-drawer__panel.is-size-lg {
		max-width: none;
	}
}

/* =========================================================================
 * Tooltip
 * ====================================================================== */

.ubp-panel .ubp-ui-tooltip {
	position: relative;
	display: inline-flex;
}

.ubp-panel .ubp-ui-tooltip__trigger {
	display: inline-flex;
	align-items: center;
}

.ubp-panel .ubp-ui-tooltip__trigger:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: 2px;
	border-radius: var(--ubp-radius-sm);
}

.ubp-panel .ubp-ui-tooltip__bubble {
	position: absolute;
	z-index: var(--ubp-z-dropdown);
	max-width: 240px;
	padding: var(--ubp-space-2) var(--ubp-space-3);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-text);
	color: #ffffff;
	font-size: var(--ubp-text-xs);
	line-height: 1.45;
	white-space: normal;
	/* `visibility` em vez de `display`: o conteúdo continua no fluxo de
	   acessibilidade, então `aria-describedby` funciona. */
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--ubp-transition-fast);
	pointer-events: none;
}

.ubp-panel .ubp-ui-tooltip.is-top .ubp-ui-tooltip__bubble {
	bottom: calc( 100% + 6px );
	left: 50%;
	transform: translateX( -50% );
}

.ubp-panel .ubp-ui-tooltip.is-bottom .ubp-ui-tooltip__bubble {
	top: calc( 100% + 6px );
	left: 50%;
	transform: translateX( -50% );
}

.ubp-panel .ubp-ui-tooltip.is-start .ubp-ui-tooltip__bubble {
	right: calc( 100% + 6px );
	top: 50%;
	transform: translateY( -50% );
}

.ubp-panel .ubp-ui-tooltip.is-end .ubp-ui-tooltip__bubble {
	left: calc( 100% + 6px );
	top: 50%;
	transform: translateY( -50% );
}

/* Aparece no hover E no foco — teclado precisa da mesma informação. */
.ubp-panel .ubp-ui-tooltip:hover .ubp-ui-tooltip__bubble,
.ubp-panel .ubp-ui-tooltip__trigger:focus-visible + .ubp-ui-tooltip__bubble {
	visibility: visible;
	opacity: 1;
}

/* =========================================================================
 * Popover / menu de contexto
 * ====================================================================== */

.ubp-panel .ubp-ui-popover {
	position: relative;
	display: inline-flex;
}

.ubp-panel .ubp-ui-popover__panel[hidden] {
	display: none;
}

.ubp-panel .ubp-ui-popover__panel {
	position: absolute;
	top: calc( 100% + 6px );
	z-index: var(--ubp-z-dropdown);
	min-width: 200px;
	max-width: 320px;
	padding: var(--ubp-space-2);
	border: 1px solid var(--ubp-color-border);
	border-radius: var(--ubp-radius-md);
	background: var(--ubp-color-surface);
	box-shadow: var(--ubp-shadow-md);
}

.ubp-panel .ubp-ui-popover__panel.is-align-start { left: 0; }
.ubp-panel .ubp-ui-popover__panel.is-align-end { right: 0; }

.ubp-panel .ubp-ui-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ubp-panel .ubp-ui-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ubp-space-2);
	width: 100%;
	padding: var(--ubp-space-2) var(--ubp-space-3);
	border: 0;
	border-radius: var(--ubp-radius-sm);
	background: none;
	font: inherit;
	font-size: var(--ubp-text-sm);
	color: var(--ubp-color-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.ubp-panel .ubp-ui-menu__item:hover {
	background: var(--ubp-color-surface-alt);
}

.ubp-panel .ubp-ui-menu__item:focus-visible {
	outline: 2px solid var(--ubp-color-primary);
	outline-offset: -2px;
}

.ubp-panel .ubp-ui-menu__item.is-tone-danger {
	color: var(--ubp-color-danger);
}

.ubp-panel .ubp-ui-menu__separator {
	height: 1px;
	margin: var(--ubp-space-1) 0;
	background: var(--ubp-color-border);
}

/* =========================================================================
 * Utilitários
 * ====================================================================== */

.ubp-panel .ubp-ui-mono {
	font-family: var(--ubp-font-mono);
	font-size: var(--ubp-text-xs);
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-muted {
	color: var(--ubp-color-muted);
}

.ubp-panel .ubp-ui-truncate {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Visível só para leitor de tela. */
.ubp-panel .ubp-ui-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}