/* CSS Document */

/*
 * Meu Canil - design system "Operacao" (direcao 1b).
 *
 * Importa o CSS de dashboard do engine (paginas legadas continuam funcionando)
 * e, em cima dele, define o shell escuro, a sidebar, os cards, as tabelas e as
 * pilulas de status do novo design. Os tokens vivem em
 * _meu-canil/resources/bootstrap-theme.css.
 *
 * A hierarquia vem de bordas e do contraste entre o canvas e o branco:
 * nenhum componente novo usa sombra.
 */

@import "../../_engine/layouts/layout-dashboard-css.css";

/* ------------------------------------------------------------------ base */

body {
	font-family: "Plus Jakarta Sans", Helvetica, sans-serif;
	background-color: var(--mc-canvas);
	color: var(--mc-text);
}

.main {
	background-color: var(--mc-canvas);
	--pulsate-color: var(--mc-accent);
}

a {
	text-decoration: none;
}

/* Titulo das paginas legadas, alinhado a nova paleta. */
.title {
	background-color: transparent !important;
	border-bottom: 1px solid var(--mc-border);
}

/* O engine marca font-size/weight do titulo como !important. */
.title h1 {
	font-size: 24px !important;
	font-weight: 800 !important;
	letter-spacing: -.025em;
	color: var(--mc-text);
}

.portlet {
	background-color: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	box-shadow: none !important;
}

.btn {
	font-weight: 600;
}

.btn-primary {
	--bs-btn-bg: var(--mc-accent);
	--bs-btn-border-color: var(--mc-accent);
	--bs-btn-hover-bg: var(--mc-accent-hover);
	--bs-btn-hover-border-color: var(--mc-accent-hover);
	--bs-btn-active-bg: var(--mc-accent-hover);
	--bs-btn-active-border-color: var(--mc-accent-hover);
}

.form-control,
.form-select {
	border-color: var(--mc-border-input);
	border-radius: var(--mc-radius-control);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

/* --------------------------------------------------------------- wordmark */

.mc-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	flex: none;
}

.mc-brand__mark {
	color: var(--mc-accent-light);
	display: block;
	flex: none;
}

.mc-brand__word {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1;
}

/* Sobre fundo claro o simbolo usa o accent escuro. */
.mc-brand--light {
	color: var(--mc-ink);
}

.mc-brand--light .mc-brand__mark {
	color: var(--mc-accent);
}

/* ------------------------------------------------------------- topo (app) */

.mc-topbar {
	height: 64px;
	background: var(--mc-ink);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 24px;
	position: sticky;
	top: 0;
	z-index: 1030;
}

.mc-topbar__toggle {
	background: none;
	border: 0;
	color: var(--mc-on-ink);
	font-size: 20px;
	padding: 0;
	line-height: 1;
}

.mc-topbar__toggle:hover {
	color: #fff;
}

/* O gatilho da sidebar so aparece quando ela vira offcanvas. */
.mc-topbar__toggle {
	display: none;
}

.mc-topbar__context {
	padding-left: 24px;
	border-left: 1px solid var(--mc-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-on-ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-topbar__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.mc-topbar__ghost {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-on-ink);
	border: 1px solid var(--mc-ink-2);
	padding: 8px 14px;
	border-radius: var(--mc-radius-nav);
	white-space: nowrap;
}

.mc-topbar__ghost:hover {
	color: #fff;
	border-color: var(--mc-accent-light);
}

.mc-topbar__icon {
	font-size: 17px;
	color: var(--mc-on-ink);
	line-height: 1;
}

.mc-topbar__icon:hover {
	color: #fff;
}

.mc-topbar__user {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.mc-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mc-ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: var(--mc-accent-light);
	flex: none;
}

/* Menu do usuario dentro da barra escura. */
.mc-topbar .dropdown-menu {
	--bs-dropdown-link-active-bg: var(--mc-accent);
	border-color: var(--mc-border);
	border-radius: var(--mc-radius-card);
}

/* ----------------------------------------------------------- shell / grid */

.mc-shell {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	align-items: start;
}

.mc-shell__aside {
	padding: 20px 12px 20px 20px;
}

.mc-shell__main {
	padding: 20px 20px 28px 12px;
	min-width: 0;
}

/* Paginas sem sidebar usam o mesmo respiro. */
.mc-page {
	padding: 20px;
}

/* ---------------------------------------------------------------- sidebar */

.mc-nav {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 10px;
}

.mc-nav__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mc-text-3);
	padding: 8px 12px;
}

.mc-nav__divider {
	height: 1px;
	background: var(--mc-border-subtle);
	margin: 10px 12px;
	border: 0;
}

.mc-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--mc-radius-nav);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-text-cell);
	margin-bottom: 2px;
	min-height: 40px;
}

.mc-nav__item:hover {
	background: var(--mc-table-head);
	color: var(--mc-text);
}

.mc-nav__item i {
	font-size: 15px;
	width: 18px;
	flex: none;
}

/*
 * So o rotulo estica; o contador tambem e um span e nao pode entrar aqui.
 *
 * O `overflow-wrap` e por causa da coluna estreita: rotulo de uma palavra so
 * ("Solicitacoes") nao tem onde quebrar e transbordava por cima do contador.
 */
.mc-nav__item span:not(.mc-nav__count) {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mc-nav__item--active,
.mc-nav__item--active:hover {
	background: var(--mc-accent);
	color: #fff;
}

.mc-nav__item--disabled,
.mc-nav__item--disabled:hover {
	color: var(--mc-text-3);
	background: none;
	pointer-events: none;
}

/* Cada item de topo do menu e um portlet proprio, empilhado. */
.mc-nav + .mc-nav {
	margin-top: 12px;
}

/* Seta do item que abre dropdown — depois do contador, na ponta. */
.mc-nav__item .mc-nav__caret,
.mc-nav__menu .dropdown-item .mc-nav__caret {
	font-size: 11px;
	width: auto;
	opacity: .5;
}

/* ------------------------------------------- dropdown da sidebar (a direita) */

/* Mesma superficie do portlet: borda, sem sombra. */
.mc-nav__menu {
	min-width: 224px;
	padding: 6px;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	background: var(--mc-surface);
	box-shadow: none;
}

.mc-nav__menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--mc-radius-nav);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-text-cell);
	min-height: 40px;
}

.mc-nav__menu .dropdown-item i {
	font-size: 15px;
	width: 18px;
	flex: none;
}

.mc-nav__menu .dropdown-item span:not(.mc-nav__count) {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mc-nav__menu .dropdown-item:hover,
.mc-nav__menu .dropdown-item:focus {
	background: var(--mc-table-head);
	color: var(--mc-text);
}

.mc-nav__menu .dropdown-item.active,
.mc-nav__menu .dropdown-item.active:hover {
	background: var(--mc-accent);
	color: #fff;
}

.mc-nav__menu .dropdown-item.active .mc-nav__count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.mc-nav__menu .dropdown-item.disabled {
	color: var(--mc-text-3);
}

.mc-nav__menu .dropdown-header {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mc-text-3);
	padding: 8px 12px;
}

/*
 * Quarto nivel. O dropdown do Bootstrap nao aninha sozinho — clicar no item
 * pai fecharia o menu de fora —, entao o submenu do submenu abre no hover.
 */
.mc-nav__nested > .dropdown-menu {
	top: 0;
	left: 100%;
	margin: 0 0 0 4px;
}

.mc-nav__nested:hover > .dropdown-menu {
	display: block;
}

.mc-nav__count {
	font-size: 11px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--mc-error-bg);
	color: var(--mc-error-fg);
	flex: none;
}

.mc-nav__item--active .mc-nav__count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* --------------------------------------------------------- cabecalho de pagina */

.mc-pagehead {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.mc-pagehead__title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 0;
}

.mc-pagehead__subtitle {
	font-size: 14px;
	color: var(--mc-text-2);
	margin: 2px 0 0;
}

/*
 * `align-items: center` porque a faixa mistura botao com pill de status: no
 * `stretch` padrao a pill esticava ate a altura do botao e virava um losango
 * com o texto solto la em cima.
 */
.mc-pagehead__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------- botoes */

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	padding: 11px 18px;
	border-radius: var(--mc-radius-control);
	border: 1px solid transparent;
	background: var(--mc-accent);
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
}

.mc-btn:hover {
	background: var(--mc-accent-hover);
	color: #fff;
}

.mc-btn--ghost {
	background: var(--mc-surface);
	border-color: var(--mc-border-input);
	color: var(--mc-text-cell);
	font-weight: 600;
	font-size: 13px;
	padding: 10px 14px;
}

.mc-btn--ghost:hover {
	background: var(--mc-table-head);
	color: var(--mc-text);
}

.mc-btn--danger {
	background: var(--mc-error-fg);
}

.mc-btn--danger:hover {
	background: #a82a41;
}

.mc-btn--sm {
	font-size: 12.5px;
	padding: 8px 13px;
	border-radius: var(--mc-radius-control-sm);
}

.mc-btn--block {
	width: 100%;
}

/* Acao que existe mas ainda nao esta liberada — o botao continua a vista para
   dizer o que vem depois, sem convidar ao clique. */
.mc-btn--disabled,
.mc-btn--disabled:hover {
	background: var(--mc-border-subtle);
	border-color: var(--mc-border);
	color: var(--mc-text-3);
	cursor: not-allowed;
}

/*
 * Botao desabilitado: fora de alcance, sem prometer nada. So quando esta
 * trabalhando (o rotulo carrega um spinner) o cursor vira progresso.
 */
.mc-btn:disabled {
	opacity: .7;
	cursor: not-allowed;
}

.mc-btn:disabled:has(.mc-spinner) {
	cursor: progress;
}

/* Giro de espera dentro do botao — herda a cor do texto dele. */
.mc-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mc-spin .6s linear infinite;
}

@keyframes mc-spin {
	to { transform: rotate(360deg); }
}

/* Quem prefere menos movimento ve o indicador parado, nao ve nada girando. */
@media (prefers-reduced-motion: reduce) {
	.mc-spinner { animation: none; }
}

.mc-input {
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: var(--mc-radius-control);
	border: 1px solid var(--mc-border-input);
	background: var(--mc-surface);
	color: var(--mc-text);
	min-width: 200px;
}

.mc-select {
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: var(--mc-radius-control);
	border: 1px solid var(--mc-border-input);
	background: var(--mc-surface);
	color: var(--mc-text);
}

.mc-select:focus {
	outline: none;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

.mc-input::placeholder {
	color: var(--mc-text-3);
}

.mc-input:focus {
	outline: none;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

.mc-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--mc-accent);
	white-space: nowrap;
}

.mc-link:hover {
	color: var(--mc-accent-hover);
}

/* Trancado (servico indisponivel ate o clube confirmar a afiliacao). */
.mc-link--disabled,
.mc-link--disabled:hover {
	color: var(--mc-text-3);
	cursor: not-allowed;
}

/* Como botao (uma acao, nao um endereco): sem a roupa nativa de <button>. */
button.mc-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

/* ------------------------------------------------------------------ cards */

.mc-card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
}

.mc-card--flush {
	overflow: hidden;
}

.mc-card--pad {
	padding: 20px;
}

.mc-card--ink {
	background: var(--mc-ink);
	border-color: var(--mc-ink);
	color: #fff;
	padding: 20px;
}

.mc-card__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--mc-border-subtle);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mc-card__title {
	font-size: 16px;
	font-weight: 800;
	margin: 0;
}

.mc-card__subtitle {
	font-size: 13px;
	color: var(--mc-text-2);
	margin: 2px 0 0;
}

.mc-card__head .mc-btn--ghost,
.mc-card__head .mc-link {
	margin-left: auto;
}

.mc-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mc-accent);
}

.mc-card--ink .mc-eyebrow {
	color: var(--mc-accent-light);
}

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

.mc-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.mc-kpi {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 16px;
}

.mc-kpi__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-kpi__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	flex: none;
	background: var(--mc-accent);
}

.mc-kpi__dot--pending { background: var(--mc-pending-dot); }
.mc-kpi__dot--attention { background: var(--mc-attention-dot); }
.mc-kpi__dot--approved { background: var(--mc-approved-dot); }
.mc-kpi__dot--error { background: var(--mc-error-dot); }

.mc-kpi__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--mc-text-2);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mc-kpi__value {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-top: 10px;
	line-height: 1.1;
}

.mc-kpi__note {
	font-size: 12px;
	color: var(--mc-text-3);
	margin-top: 2px;
}

/* ----------------------------------------------------------------- pilula */

.mc-pill {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mc-neutral-bg);
	color: var(--mc-neutral-fg);
	white-space: nowrap;
}

.mc-pill--pending { background: var(--mc-pending-bg); color: var(--mc-pending-fg); }
.mc-pill--attention { background: var(--mc-attention-bg); color: var(--mc-attention-fg); }
.mc-pill--approved { background: var(--mc-approved-bg); color: var(--mc-approved-fg); }
.mc-pill--error { background: var(--mc-error-bg); color: var(--mc-error-fg); }
.mc-pill--transit { background: var(--mc-transit-bg); color: var(--mc-transit-fg); }

.mc-chip {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--mc-canvas);
	border: 1px solid var(--mc-border);
	padding: 6px 12px;
	border-radius: 999px;
}

/* Chip de item selecionado — o de raça já escolhida, por exemplo. */
.mc-chip--on {
	border-color: var(--mc-accent);
	background: #F5FBFB;
	color: var(--mc-accent);
}

/*
 * `hidden` vem do navegador com a mesma especificidade de uma classe, e perde
 * para qualquer componente que declare `display` (`.mc-alert` é flex, `.mc-chip`
 * é inline-block). Sem isto, esconder um elemento pelo atributo — como fazem os
 * avisos que aparecem conforme o formulário é preenchido — não surte efeito.
 */
[hidden] {
	display: none !important;
}

/* ----------------------------------------------------------------- alerta */

.mc-alert {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 14px 18px;
	margin-bottom: 16px;
}

.mc-alert__icon {
	font-size: 18px;
	line-height: 1;
	flex: none;
	color: var(--mc-accent);
}

.mc-alert__body {
	flex: 1;
	min-width: 0;
}

.mc-alert__title {
	font-size: 14.5px;
	font-weight: 700;
}

.mc-alert__text {
	font-size: 13px;
	color: var(--mc-text-2);
	margin-top: 2px;
}

.mc-alert--error {
	background: var(--mc-alert-error-bg);
	border-color: var(--mc-alert-error-border);
}

.mc-alert--error .mc-alert__icon { color: var(--mc-error-fg); }

.mc-alert--attention {
	background: var(--mc-attention-bg);
	border-color: #F0E0B4;
}

.mc-alert--attention .mc-alert__icon { color: var(--mc-attention-dot); }

.mc-alert--approved {
	background: var(--mc-approved-bg);
	border-color: #CBE4D2;
}

.mc-alert--approved .mc-alert__icon { color: var(--mc-approved-dot); }

.mc-alert--accent {
	background: var(--mc-pending-bg);
	border-color: #C9E6E8;
}

/* ---------------------------------------------------------------- tabelas */

/*
 * As tabelas do design sao grids, nao <table>: cada linha e um grid com a
 * mesma template-columns do cabecalho. A pagina define as colunas via
 * --mc-cols e o layout empilha em cartoes abaixo de 768px.
 */

.mc-table {
	--mc-cols: 1fr;
}

.mc-table__head,
.mc-table__row {
	display: grid;
	grid-template-columns: var(--mc-cols);
	gap: 16px;
	align-items: center;
}

.mc-table__head {
	padding: 11px 20px;
	background: var(--mc-table-head);
	border-bottom: 1px solid var(--mc-border);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-text-3);
}

.mc-table__row {
	padding: 14px 20px;
	border-bottom: 1px solid var(--mc-border-subtle);
}

.mc-table__row:hover {
	background: var(--mc-table-head);
}

/* Alvo de ?highlight_dog= — some sozinho depois da animacao. */
.mc-table__row--highlight {
	animation: mc-row-highlight 2.4s ease-out;
}

@keyframes mc-row-highlight {
	0%, 40% { background: var(--mc-pending-bg); }
	100% { background: transparent; }
}

.mc-table__primary {
	font-size: 14px;
	font-weight: 700;
}

.mc-table__meta {
	font-size: 12px;
	color: var(--mc-text-2);
	margin-top: 2px;
}

.mc-table__cell {
	font-size: 13px;
	color: var(--mc-text-cell);
	min-width: 0;
	overflow-wrap: anywhere;
}

.mc-table__sub {
	font-size: 12px;
	color: var(--mc-text-3);
}

/*
 * A celula de acoes mistura alturas — botao, botao pequeno, icone, as vezes um
 * link solto. Sem `align-items` os itens esticam e o texto de um link fica
 * colado no topo, desalinhado dos botoes ao lado.
 */
.mc-table__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.mc-table__end {
	text-align: right;
}

.mc-table__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 20px;
	font-size: 13px;
	color: var(--mc-text-2);
}

/* Rotulo que so aparece quando a linha vira cartao. */
.mc-table__row [data-label]::before {
	content: attr(data-label);
	display: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-text-3);
	margin-bottom: 4px;
}

/* Barra de progresso da etapa. */
.mc-progress {
	height: 4px;
	background: var(--mc-border-subtle);
	border-radius: 2px;
	overflow: hidden;
}

.mc-progress__bar {
	height: 100%;
	background: var(--mc-accent);
	border-radius: 2px;
}

.mc-progress__bar--pending { background: var(--mc-pending-dot); }
.mc-progress__bar--attention { background: var(--mc-attention-dot); }
.mc-progress__bar--approved { background: var(--mc-approved-dot); }
.mc-progress__bar--error { background: var(--mc-error-dot); }
.mc-progress__bar--transit { background: var(--mc-transit-fg); }

.mc-progress__step {
	font-size: 12px;
	color: var(--mc-text-3);
	margin-top: 6px;
}

/* Estado vazio dentro do card. */
.mc-empty {
	padding: 44px 20px;
	text-align: center;
}

.mc-empty__title {
	font-size: 16px;
	font-weight: 700;
}

.mc-empty__text {
	font-size: 13.5px;
	color: var(--mc-text-2);
	margin: 6px 0 0;
}

/* Abas de filtro da fila. */
.mc-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 12px 20px;
	border-bottom: 1px solid var(--mc-border-subtle);
}

.mc-tab {
	font-size: 13px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: var(--mc-radius-nav);
	color: var(--mc-text-2);
}

.mc-tab:hover {
	background: var(--mc-table-head);
	color: var(--mc-text);
}

.mc-tab--active,
.mc-tab--active:hover {
	background: var(--mc-ink);
	color: #fff;
}

.mc-tabs__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--mc-text-2);
}

/*
 * Filtro aplicado à fila. Vive entre as abas e a lista, porque é a lista que
 * ele encurta — e os contadores das abas e dos KPIs junto. O controle no canto
 * não bastava para dizer isso.
 */
.mc-filterbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	font-size: 13px;
	color: var(--mc-attention-fg);
	background: var(--mc-attention-bg);
	border-bottom: 1px solid var(--mc-border-subtle);
}

.mc-filterbar > i {
	flex: none;
	font-size: 14px;
}

.mc-filterbar > span {
	flex: 1;
	min-width: 0;
}

.mc-filterbar__clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mc-attention-fg);
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid currentColor;
	white-space: nowrap;
}

.mc-filterbar__clear:hover {
	background: rgba(255, 255, 255, .55);
	color: var(--mc-attention-fg);
}

/* Controle de filtro com valor: mesmo destaque do chip escolhido. */
.mc-select--on,
.mc-input--on {
	border-color: var(--mc-accent);
	background: #F5FBFB;
	color: var(--mc-accent);
	font-weight: 700;
}

/* Paginacao. */
.mc-pagination {
	margin-left: auto;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mc-pagination a,
.mc-pagination span {
	border: 1px solid var(--mc-border-input);
	padding: 7px 12px;
	border-radius: var(--mc-radius-control-sm);
	background: var(--mc-surface);
	color: var(--mc-text-2);
	font-size: 13px;
}

.mc-pagination a:hover {
	background: var(--mc-table-head);
	color: var(--mc-text);
}

.mc-pagination .mc-pagination__current {
	font-weight: 700;
	color: var(--mc-ink);
}

/* Lista rotulo/valor do card lateral. */
.mc-datalist__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--mc-border-subtle);
	font-size: 13px;
}

.mc-datalist__label { color: var(--mc-text-2); }
.mc-datalist__value { font-weight: 700; text-align: right; }

/* --------------------------------------------------------- landing publica */

/*
 * Faixas full-bleed com o miolo na coluna do site.
 *
 * O engine (elements/section.css) transforma todo <section> em container do
 * Bootstrap, o que impede o fundo escuro do hero e do rodape de encostar na
 * borda da tela. Aqui o container e desfeito e a largura volta pelo padding:
 * o fundo ocupa a tela inteira, o conteudo para na mesma largura das demais
 * paginas. O padding lateral e o maior entre o respiro do design e a sobra
 * ate a coluna central, entao telas estreitas nunca perdem a margem.
 *
 * --mc-content acompanha os mesmos degraus de elements/section.css.
 */
:root {
	--mc-content: 100%;
	--mc-gutter: 20px;
}

@media (min-width: 576px) { :root { --mc-content: 540px; } }
@media (min-width: 768px) { :root { --mc-content: 720px; } }
@media (min-width: 992px) { :root { --mc-content: 960px; --mc-gutter: 32px; } }
@media (min-width: 1200px) { :root { --mc-content: 1140px; } }
@media (min-width: 1400px) { :root { --mc-content: 1320px; } }

.mc-site > section,
.mc-site-header,
.mc-site-footer {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: max(var(--mc-gutter), (100% - var(--mc-content)) / 2);
	padding-right: max(var(--mc-gutter), (100% - var(--mc-content)) / 2);
}

/*
 * Dois ajustes para o rodape caber no proprio fundo escuro:
 *
 * 1. O #wrapper do engine e um flex column de altura fixa (100%). Quando a
 *    pagina passa da altura da tela, cabecalho e rodape encolhem — flex: none
 *    trava os dois no tamanho natural.
 * 2. components/footer.css fixa `footer { height: 67px }` para o rodape de uma
 *    linha do engine. Como aqui o rodape tem duas linhas, a altura precisa
 *    voltar a ser automatica, senao o copyright vaza para fora da faixa.
 */
.mc-site-header,
.mc-site-footer {
	flex: none;
}

.mc-site-footer {
	height: auto;
}

/* O respiro lateral vem da regra full-bleed acima. */
.mc-site-header {
	height: 68px;
	background: var(--mc-ink);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 18px;
}

.mc-site-header__nav {
	margin-left: 48px;
	display: flex;
	gap: 28px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-on-ink);
}

/* Sem isto os links caem na cor de link do Bootstrap, nao na do cabecalho. */
.mc-site-header__nav a { color: inherit; }
.mc-site-header__nav a:hover { color: #fff; }

.mc-site-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.mc-site-header__login {
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-on-ink);
}

.mc-site-header__login:hover { color: #fff; }

.mc-hero {
	background: var(--mc-ink);
	color: #fff;
	padding-top: 60px;
	padding-bottom: 76px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 56px;
	align-items: start;
}

.mc-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mc-accent-light);
	border: 1px solid var(--mc-ink-2);
	padding: 6px 12px;
	border-radius: 999px;
}

.mc-hero__title {
	font-size: 60px;
	line-height: 1.05;
	letter-spacing: -.03em;
	font-weight: 800;
	margin: 24px 0 0;
	max-width: 16ch;
	text-wrap: pretty;
}

.mc-hero__text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mc-on-ink);
	margin: 20px 0 0;
	max-width: 54ch;
}

.mc-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 48px;
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--mc-ink-2);
}

.mc-hero__stat-value {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--mc-accent-light);
}

.mc-hero__stat-label {
	font-size: 13px;
	color: var(--mc-on-ink);
	margin-top: 4px;
}

.mc-authcard {
	background: #fff;
	color: var(--mc-ink);
	border-radius: var(--mc-radius-card-lg);
	padding: 28px;
}

.mc-authcard__switch {
	display: flex;
	gap: 6px;
	background: var(--mc-border-subtle);
	padding: 4px;
	border-radius: 10px;
	margin-bottom: 22px;
}

.mc-authcard__tab {
	flex: 1;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-text-2);
	padding: 9px;
	border-radius: 7px;
	border: 0;
	background: none;
	cursor: pointer;
}

.mc-authcard__tab--active {
	background: #fff;
	color: var(--mc-ink);
	font-weight: 700;
}

.mc-authcard__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--mc-text-2);
	margin-bottom: 6px;
}

.mc-authcard__input {
	display: block;
	width: 100%;
	background: var(--mc-canvas);
	border: 1px solid var(--mc-border-input);
	border-radius: var(--mc-radius-control);
	padding: 12px 14px;
	font-size: 15px;
	color: var(--mc-ink);
	margin-bottom: 16px;
}

.mc-authcard__input:focus {
	outline: none;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

.mc-authcard__submit {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	background: var(--mc-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 13px;
	border: 0;
	border-radius: var(--mc-radius-control);
	cursor: pointer;
}

.mc-authcard__submit:hover { background: var(--mc-accent-hover); }

.mc-authcard__hint {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
	color: var(--mc-text-2);
}

.mc-authcard__foot {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--mc-border-subtle);
	font-size: 12px;
	color: var(--mc-text-2);
	line-height: 1.5;
}

.mc-section {
	padding-top: 64px;
	padding-bottom: 64px;
}

.mc-section__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mc-accent);
}

.mc-section__title {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 12px 0 8px;
}

.mc-section__text {
	font-size: 16px;
	color: var(--mc-text-2);
	margin: 0 0 32px;
	max-width: 62ch;
}

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

.mc-service {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 22px;
}

.mc-service__icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--mc-pending-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--mc-accent);
}

.mc-service__title {
	font-size: 16px;
	font-weight: 700;
	margin: 14px 0 6px;
}

.mc-service__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin: 0;
}

.mc-steps {
	padding-bottom: 64px;
}

.mc-steps__card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card-lg);
	padding: 36px 32px;
}

/* No design os passos respiram mais que os cards de servico. */
.mc-steps .mc-grid-4 {
	gap: 24px;
}

.mc-step {
	border-top: 2px solid var(--mc-accent);
	padding-top: 16px;
}

.mc-step__number {
	font-size: 12px;
	font-weight: 800;
	color: var(--mc-accent);
}

.mc-step__title {
	font-size: 17px;
	font-weight: 700;
	margin: 8px 0 6px;
}

.mc-step__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin: 0;
}

.mc-split {
	padding-bottom: 72px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.mc-split__ink {
	background: var(--mc-ink);
	color: #fff;
	border-radius: var(--mc-radius-card-lg);
	padding: 36px;
}

.mc-split__title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 14px 0 12px;
	max-width: 20ch;
}

.mc-split__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mc-on-ink);
	margin: 0 0 24px;
	max-width: 48ch;
}

.mc-split__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14.5px;
}

.mc-split__list i {
	color: var(--mc-accent-light);
	margin-right: 10px;
}

.mc-split__photo {
	border-radius: var(--mc-radius-card-lg);
	overflow: hidden;
	min-height: 420px;
}

.mc-split__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-site-footer {
	background: var(--mc-ink);
	color: var(--mc-on-ink);
	padding-top: 40px;
	padding-bottom: 40px;
}

.mc-site-footer__top {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.mc-site-footer__links {
	margin-left: auto;
	display: flex;
	gap: 24px;
	font-size: 13px;
	flex-wrap: wrap;
}

.mc-site-footer__links a { color: inherit; }
.mc-site-footer__links a:hover { color: #fff; }

/* No rodape a marca e um degrau menor que no cabecalho. */
.mc-site-footer .mc-brand__word { font-size: 15px; }

.mc-site-footer__legal {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mc-ink-2);
	font-size: 12.5px;
}

/* -------------------------------------------------- onboarding (cadastro) */

.mc-onboard-header {
	height: 64px;
	background: var(--mc-ink);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 0 32px;
	flex: none;
}

.mc-onboard-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 18px;
}

.mc-onboard-header__hint {
	font-size: 13.5px;
	color: var(--mc-on-ink);
}

/* Botao de contorno sobre a barra escura. */
.mc-btn--ghost-ink {
	background: none;
	color: #fff;
	border: 1px solid var(--mc-ink-2);
	padding: 8px 16px;
}

.mc-btn--ghost-ink:hover {
	background: var(--mc-ink-2);
}

.mc-onboard {
	background: var(--mc-canvas);
}

.mc-wizard {
	max-width: 1060px;
	margin: 0 auto;
	padding: 36px 24px 72px;
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* ------------------------------------------------------- trilho de etapas */

.mc-rail {
	position: sticky;
	top: 24px;
}

.mc-rail__title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: 4px;
}

.mc-rail__lead {
	font-size: 13px;
	color: var(--mc-text-2);
	margin-bottom: 20px;
}

.mc-rail__steps {
	display: flex;
	flex-direction: column;
}

.mc-rail__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border: 0;
	background: none;
	text-align: left;
	width: 100%;
	cursor: pointer;
	color: inherit;
}

.mc-rail__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: var(--mc-border-subtle);
	color: var(--mc-text-3);
}

/* Etapa ja preenchida. */
.mc-rail__item--done .mc-rail__dot {
	background: var(--mc-pending-bg);
	color: var(--mc-accent);
}

.mc-rail__item--active .mc-rail__dot {
	background: var(--mc-ink);
	color: #fff;
}

.mc-rail__text {
	flex: 1;
	min-width: 0;
}

.mc-rail__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-text-2);
}

.mc-rail__item--active .mc-rail__label {
	font-weight: 800;
	color: var(--mc-ink);
}

.mc-rail__summary {
	display: block;
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------- cartao do passo */

.mc-wizard__card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
}

.mc-wizard__head {
	padding: 28px 32px 0;
}

.mc-wizard__counter {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mc-accent);
}

.mc-wizard__title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 10px 0 6px;
}

.mc-wizard__subtitle {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin: 0;
	max-width: 60ch;
}

.mc-wizard__body {
	padding: 26px 32px 4px;
}

.mc-wizard__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 32px;
	margin-top: 22px;
	border-top: 1px solid var(--mc-border-subtle);
}

.mc-wizard__foot-end {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Motivo pelo qual o passo ainda nao pode avancar. */
.mc-wizard__blocked {
	font-size: 12.5px;
	color: var(--mc-text-3);
}

.mc-wizard__step {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* --------------------------------------------------------------- campos */

.mc-field__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 7px;
}

.mc-field__optional {
	font-weight: 600;
	color: var(--mc-text-3);
}

.mc-field__hint {
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 7px;
}

.mc-field__input {
	width: 100%;
	box-sizing: border-box;
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--mc-border-input);
	border-radius: var(--mc-radius-control);
	background: var(--mc-surface);
	color: var(--mc-text);
}

.mc-field__input:focus {
	outline: none;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

/* O nome do canil e o campo principal do primeiro passo. */
.mc-field__input--lead {
	font-size: 17px;
	font-weight: 600;
	padding: 14px 16px;
}

.mc-field__input--ok { border-color: #9CCBBE; }
.mc-field__input--bad { border-color: #F0B7C0; }

.mc-field__note {
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 7px;
}

.mc-field__note--ok { color: var(--mc-approved-fg); }
.mc-field__note--bad { color: var(--mc-error-fg); }

.mc-field-row {
	display: grid;
	gap: 14px;
}

.mc-field-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mc-field-row--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.mc-field-inline {
	display: flex;
	gap: 10px;
	align-items: center;
}

.mc-field__status {
	font-size: 13px;
	font-weight: 600;
}

.mc-field__status--loading { color: var(--mc-text-2); }
.mc-field__status--ok { color: var(--mc-approved-fg); }
.mc-field__status--bad { color: var(--mc-error-fg); }

.mc-divider {
	height: 1px;
	background: var(--mc-border-subtle);
}

/* ------------------------------------------------- escolhas e caixas */

.mc-choices {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.mc-choice {
	display: block;
	border-radius: 11px;
	padding: 16px 18px 18px;
	position: relative;
	border: 1.5px solid var(--mc-border);
	background: var(--mc-surface);
	color: inherit;
	cursor: pointer;
	text-align: left;
	width: 100%;
}

.mc-choice--on {
	border-color: var(--mc-accent);
	background: #F5FBFB;
}

.mc-choice__tick {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: transparent;
	color: transparent;
}

.mc-choice--on .mc-choice__tick {
	background: var(--mc-accent);
	color: #fff;
}

.mc-choice__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.mc-choice__text {
	display: block;
	font-size: 13px;
	color: var(--mc-text-2);
	margin-top: 4px;
	line-height: 1.45;
}

.mc-fieldset__title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
}

/* Caixa de marcacao propria: a do Bootstrap nao acompanha a paleta. */
.mc-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mc-text-cell);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

.mc-check__box {
	width: 19px;
	height: 19px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	border: 1.5px solid #C7D0D9;
	color: transparent;
	flex: none;
}

.mc-check--on .mc-check__box {
	background: var(--mc-accent);
	border-color: var(--mc-accent);
	color: #fff;
}

/* ------------------------------------------------------ lista de clubes */

.mc-notice {
	display: flex;
	gap: 12px;
	background: var(--mc-table-head);
	border: 1px solid var(--mc-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
}

.mc-notice i {
	font-size: 16px;
	color: var(--mc-accent);
	flex: none;
}

.mc-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-option {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	border-radius: 11px;
	padding: 15px 18px;
	border: 1.5px solid var(--mc-border);
	background: var(--mc-surface);
	color: inherit;
	cursor: pointer;
	text-align: left;
	width: 100%;
}

.mc-option--on {
	border-color: var(--mc-accent);
	background: #F5FBFB;
}

/* Opcao que existe mas nao esta liberada — o cartao de um clube que ainda nao
   cadastrou a chave Stripe. Fica a vista, apagada, com o motivo no lugar do
   texto de sempre: sumir deixaria a pergunta no ar, e quem resolve e o clube. */
.mc-option--off {
	background: var(--mc-border-subtle);
	border-color: var(--mc-border-subtle);
	color: var(--mc-text-3);
	cursor: not-allowed;
}

.mc-option--off .mc-option__radio {
	opacity: .45;
}

.mc-option__radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	margin-top: 2px;
	border: 1.5px solid #C7D0D9;
	background: var(--mc-surface);
}

.mc-option--on .mc-option__radio {
	border: 5px solid var(--mc-accent);
}

.mc-option__text {
	flex: 1;
	min-width: 0;
}

.mc-option__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mc-option__name {
	font-size: 15px;
	font-weight: 700;
}

.mc-option__tag {
	font-size: 11px;
	font-weight: 700;
	background: var(--mc-pending-bg);
	color: var(--mc-accent);
	padding: 3px 8px;
	border-radius: 999px;
}

.mc-option__meta {
	display: block;
	font-size: 13px;
	color: var(--mc-text-2);
	margin-top: 3px;
}

/* --------------------------------------------------- requisitos de senha */

.mc-access {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.mc-access__fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mc-rules {
	background: var(--mc-table-head);
	border: 1px solid var(--mc-border);
	border-radius: 10px;
	padding: 18px 20px;
}

.mc-rules__title {
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 12px;
}

.mc-rules__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.mc-rule {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--mc-text-2);
}

.mc-rule i {
	font-size: 14px;
	color: #C7D0D9;
}

.mc-rule--ok {
	color: var(--mc-text);
}

.mc-rule--ok i {
	color: var(--mc-approved-dot);
}

/* ------------------------------------------------- revisao e assinatura */

.mc-review {
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	overflow: hidden;
	margin-bottom: 24px;
}

.mc-review__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: baseline;
	padding: 14px 18px;
	border-bottom: 1px solid var(--mc-border-subtle);
}

.mc-review__row:last-child { border-bottom: 0; }

.mc-review__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mc-text-3);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.mc-review__value {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.mc-review__edit {
	font-size: 13px;
	font-weight: 700;
	color: var(--mc-accent);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

.mc-sign__title {
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 6px;
}

.mc-sign__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin: 0 0 14px;
	max-width: 64ch;
}

.mc-sign__pad {
	border: 1px dashed #C7D0D9;
	border-radius: 11px;
	background: #FCFDFD;
	position: relative;
	height: 190px;
}

.mc-sign__pad canvas {
	width: 100%;
	height: 190px;
	display: block;
	touch-action: none;
	cursor: crosshair;
}

.mc-sign__placeholder {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	text-align: center;
	font-size: 13px;
	color: #B6C1CC;
	pointer-events: none;
}

/* Linha-guia da assinatura, como no papel. */
.mc-sign__line {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 52px;
	height: 1px;
	background: var(--mc-border);
	pointer-events: none;
}

.mc-sign__foot {
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.mc-sign__status {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-approved-fg);
}

.mc-sign__clear {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-text-cell);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

/* --------------------------------------------------------- tela de envio */

.mc-done {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}

.mc-done__card {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card-lg);
	padding: 40px;
}

.mc-done__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mc-approved-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--mc-approved-fg);
}

.mc-done__title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 22px 0 10px;
}

.mc-done__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--mc-text-2);
	margin: 0;
	max-width: 56ch;
}

.mc-done__text strong { color: var(--mc-ink); }

.mc-next {
	margin: 32px 0;
	padding: 24px;
	background: var(--mc-table-head);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
}

.mc-next__title {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-text-3);
	margin-bottom: 18px;
}

.mc-next__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mc-next__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.mc-next__number {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mc-border-subtle);
	color: var(--mc-text-2);
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* O primeiro passo e o que esta acontecendo agora. */
.mc-next__item--current .mc-next__number {
	background: var(--mc-accent);
	color: #fff;
}

.mc-next__label {
	font-size: 15px;
	font-weight: 700;
}

.mc-next__text {
	font-size: 13.5px;
	color: var(--mc-text-2);
	margin-top: 3px;
}

.mc-done__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mc-btn--quiet {
	background: var(--mc-surface);
	color: var(--mc-text-cell);
	border: 1px solid var(--mc-border-input);
}

.mc-btn--quiet:hover {
	background: var(--mc-table-head);
}

/* Passo bloqueado: o botao continua visivel, mas inerte. */
.mc-btn--off {
	background: var(--mc-border-subtle);
	color: var(--mc-text-3);
	pointer-events: none;
}

/* ------------------------------------------------- assistente "adicionar cao" */

.mc-guide {
	max-width: 820px;
}

.mc-crumbs {
	font-size: 13px;
	color: var(--mc-text-3);
	margin-bottom: 8px;
}

.mc-crumbs a {
	color: var(--mc-text-2);
	font-weight: 600;
}

.mc-crumbs span {
	margin: 0 6px;
}

.mc-guide__title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 0 0 6px;
}

.mc-guide__lead {
	font-size: 15px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin: 0 0 24px;
	max-width: 62ch;
}

.mc-quiz {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 26px 28px;
}

.mc-quiz__step + .mc-quiz__step {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--mc-border-subtle);
}

.mc-quiz__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.mc-quiz__number {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mc-accent);
}

.mc-quiz__question {
	font-size: 17px;
	font-weight: 800;
}

.mc-quiz__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
}

.mc-quiz__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Cartao de resposta: com icone na pergunta 1, com radio na 2. */
.mc-answer {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	border-radius: 11px;
	padding: 15px 17px;
	border: 1.5px solid var(--mc-border);
	background: var(--mc-surface);
	color: inherit;
	cursor: pointer;
	text-align: left;
	width: 100%;
}

.mc-answer--on {
	border-color: var(--mc-accent);
	background: #F5FBFB;
}

.mc-answer__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: var(--mc-canvas);
	color: var(--mc-accent);
}

.mc-answer--on .mc-answer__icon {
	background: var(--mc-accent);
	color: #fff;
}

.mc-answer__radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	margin-top: 2px;
	border: 1.5px solid #C7D0D9;
	background: var(--mc-surface);
}

.mc-answer--on .mc-answer__radio {
	border: 5px solid var(--mc-accent);
}

.mc-answer__text {
	flex: 1;
	min-width: 0;
}

.mc-answer__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.mc-answer__hint {
	display: block;
	font-size: 13px;
	color: var(--mc-text-2);
	margin-top: 3px;
	line-height: 1.45;
}

/* ------------------------------------------------------ servico indicado */

.mc-result {
	background: var(--mc-surface);
	border: 1.5px solid var(--mc-accent);
	border-radius: var(--mc-radius-card);
	margin-top: 16px;
}

/* Quando falta um pre-requisito o cartao inteiro muda de tom. */
.mc-result--blocked {
	border-color: var(--mc-alert-error-border);
}

.mc-result__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 24px 28px 0;
}

.mc-result__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: var(--mc-pending-bg);
	color: var(--mc-accent);
}

.mc-result__eyebrow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mc-text-3);
}

.mc-result__title {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-top: 4px;
}

.mc-result__desc {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin-top: 8px;
	max-width: 58ch;
}

.mc-result__facts {
	display: flex;
	gap: 28px;
	padding: 14px 18px;
	margin: 22px 28px 0;
	background: var(--mc-table-head);
	border: 1px solid var(--mc-border);
	border-radius: 10px;
	flex-wrap: wrap;
}

.mc-result__fact-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-text-3);
}

.mc-result__fact-value {
	font-size: 15px;
	font-weight: 700;
	margin-top: 4px;
}

.mc-result__divider {
	width: 1px;
	background: var(--mc-border);
}

.mc-result__section {
	padding: 22px 28px 0;
}

.mc-result__section-title {
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 12px;
}

.mc-reqs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-req {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mc-req i {
	font-size: 15px;
	margin-top: 2px;
	color: var(--mc-approved-dot);
}

.mc-req__label {
	font-size: 14.5px;
	font-weight: 700;
}

.mc-req__note {
	font-size: 13px;
	color: var(--mc-text-2);
	margin-top: 2px;
	line-height: 1.5;
}

/* Pre-requisito que o canil ainda nao cumpre. */
.mc-req--missing i { color: var(--mc-error-fg); }
.mc-req--missing .mc-req__label { color: var(--mc-error-fg); }

.mc-result__block {
	margin: 22px 28px 0;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--mc-alert-error-bg);
	border: 1px solid var(--mc-alert-error-border);
	border-radius: 10px;
	padding: 16px 18px;
}

.mc-result__block i {
	font-size: 17px;
	color: var(--mc-error-fg);
	margin-top: 1px;
}

.mc-result__block-title {
	font-size: 14.5px;
	font-weight: 700;
}

.mc-result__block-text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mc-text-2);
	margin-top: 3px;
}

.mc-result__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 28px;
	margin-top: 22px;
	border-top: 1px solid var(--mc-border-subtle);
	flex-wrap: wrap;
}

.mc-result__restart {
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-text-cell);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

.mc-result__other {
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mc-accent);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

/* -------------------------------------------------------- todos os servicos */

.mc-catalog {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	margin-top: 16px;
	overflow: hidden;
}

.mc-catalog__head {
	padding: 20px 28px 4px;
}

.mc-catalog__title {
	font-size: 17px;
	font-weight: 800;
}

.mc-catalog__lead {
	font-size: 14px;
	color: var(--mc-text-2);
	margin-top: 4px;
}

.mc-catalog__list {
	padding: 16px 28px 24px;
	display: flex;
	flex-direction: column;
}

.mc-catalog__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 15px 0;
	border-top: 1px solid var(--mc-border-subtle);
	color: inherit;
}

.mc-catalog__item:hover {
	color: var(--mc-accent);
}

.mc-catalog__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--mc-canvas);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--mc-accent);
	flex: none;
}

.mc-catalog__text {
	flex: 1;
	min-width: 0;
}

.mc-catalog__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.mc-catalog__desc {
	display: block;
	font-size: 13.5px;
	color: var(--mc-text-2);
	margin-top: 3px;
	line-height: 1.5;
}

.mc-catalog__chevron {
	font-size: 13px;
	color: #C7D0D9;
	margin-top: 5px;
}

/* Servicos que partem de um cao ja no painel. */
.mc-catalog__foot {
	padding: 18px 28px 24px;
	background: var(--mc-table-head);
	border-top: 1px solid var(--mc-border);
}

.mc-catalog__foot-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--mc-text-2);
}

.mc-catalog__foot .mc-catalog__item {
	border-top: 0;
	padding: 14px 0 0;
}

.mc-catalog__foot .mc-catalog__icon {
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	color: var(--mc-text-2);
}

.mc-guide__shortcut {
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--mc-text-2);
}

.mc-guide__shortcut button {
	font-weight: 700;
	color: var(--mc-accent);
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

/* ------------------------------------------- conteudo com coluna de apoio */

/*
 * Telas de solicitacao: o trabalho fica na coluna larga e o contexto (o que o
 * servico faz, prazo, checklist, decisao) na estreita. A coluna de apoio some
 * abaixo de 1200px, onde ela ja nao cabe ao lado da sidebar.
 */
.mc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}

.mc-layout--narrow {
	grid-template-columns: minmax(0, 1fr) 300px;
}

.mc-layout--wide {
	grid-template-columns: minmax(0, 1fr) 380px;
}

.mc-layout__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Empilhamento simples de cards dentro de uma coluna. */
.mc-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mc-card__body {
	padding: 20px;
}

.mc-field {
	margin-bottom: 16px;
}

.mc-field:last-child {
	margin-bottom: 0;
}

.mc-select--block {
	width: 100%;
}

/* ------------------------------------------------- select com busca (picker)

   Raca, variedade e cor sao listas longas demais para um <select> nativo — sao
   centenas de racas, e no celular a lista nativa nao tem busca nenhuma. Esses
   campos usam o bootstrap-select, que ja vinha no projeto; o que segue e so
   faze-lo parecer um `.mc-field__input`.

   A classe `.mc-picker` vai no proprio <select>, junto de `.selectpicker`: o
   plugin copia as classes do elemento para o wrapper que cria no lugar dele
   (ver `bootstrap-select.js`, addClass(attr('class'))), entao ela chega aqui
   como `.bootstrap-select.mc-picker`. */

.bootstrap-select.mc-picker {
	width: 100%;
}

.bootstrap-select.mc-picker > .dropdown-toggle {
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	padding: 11px 14px;
	border-radius: var(--mc-radius-control);
	border: 1px solid var(--mc-border-input);
	background: var(--mc-surface);
	color: var(--mc-text);
	text-align: left;
}

/* O plugin monta o botao como `.btn`, que muda de cor sozinho ao passar o
   mouse e ao abrir. Um campo de formulario nao faz isso. */
.bootstrap-select.mc-picker > .dropdown-toggle:hover,
.bootstrap-select.mc-picker > .dropdown-toggle:active,
.bootstrap-select.mc-picker.show > .dropdown-toggle {
	background: var(--mc-surface);
	color: var(--mc-text);
	border-color: var(--mc-border-input);
}

.bootstrap-select.mc-picker > .dropdown-toggle:focus,
.bootstrap-select.mc-picker.show > .dropdown-toggle {
	outline: none !important;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

/* "Selecione" no mesmo cinza dos placeholders de texto. */
.bootstrap-select.mc-picker > .dropdown-toggle.bs-placeholder,
.bootstrap-select.mc-picker > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select.mc-picker > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select.mc-picker > .dropdown-toggle.bs-placeholder:active {
	color: var(--mc-text-3);
}

/* Variedade e cor nascem desabilitadas, ate a raca ser escolhida. */
.bootstrap-select.mc-picker.disabled > .dropdown-toggle {
	background: var(--mc-border-subtle);
	border-color: var(--mc-border);
	color: var(--mc-text-3);
}

.bootstrap-select.mc-picker .dropdown-menu {
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-control);
	padding: 6px;
	box-shadow: 0 10px 30px rgba(16, 34, 40, .10);
}

.bootstrap-select.mc-picker .dropdown-menu li a {
	padding: 8px 10px;
	border-radius: var(--mc-radius-control-sm);
	font-size: 13.5px;
	white-space: normal;
}

.bootstrap-select.mc-picker .dropdown-menu li a:hover,
.bootstrap-select.mc-picker .dropdown-menu li a:focus {
	background: var(--mc-table-head);
}

.bootstrap-select.mc-picker .dropdown-menu li.selected a,
.bootstrap-select.mc-picker .dropdown-menu li a.active {
	background: var(--mc-pending-bg);
	color: var(--mc-accent);
	font-weight: 700;
}

.bootstrap-select.mc-picker .dropdown-header {
	padding: 10px 10px 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-text-3);
}

.bootstrap-select.mc-picker .bs-searchbox {
	padding: 4px 4px 8px;
}

.bootstrap-select.mc-picker .bs-searchbox .form-control {
	padding: 9px 12px;
	border-radius: var(--mc-radius-control);
	border: 1px solid var(--mc-border-input);
	background: var(--mc-canvas);
	font-size: 13.5px;
	color: var(--mc-text);
}

.bootstrap-select.mc-picker .bs-searchbox .form-control:focus {
	outline: none;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

.bootstrap-select.mc-picker .no-results {
	margin: 0;
	padding: 10px;
	background: transparent;
	font-size: 13px;
	color: var(--mc-text-3);
	white-space: normal;
}

/* Linha de acoes no rodape de um formulario: voltar de um lado, avancar do
   outro, com espaco para dizer o que ainda falta. */
.mc-formfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
}

.mc-formfoot__end {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mc-formfoot__end .mc-field__note {
	margin-top: 0;
}

.mc-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
}

/* ------------------------------------------------------- etapas do fluxo */

.mc-flow {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.mc-flow__step {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius-card);
	padding: 12px 16px;
	min-width: 216px;
	color: inherit;
}

.mc-flow__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	background: var(--mc-border-subtle);
	color: var(--mc-text-2);
}

.mc-flow__step--current {
	border-color: var(--mc-accent);
}

.mc-flow__step--current .mc-flow__num {
	background: var(--mc-accent);
	color: #fff;
}

.mc-flow__step--done .mc-flow__num {
	background: var(--mc-approved-dot);
	color: #fff;
}

.mc-flow__label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
}

.mc-flow__sub {
	display: block;
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 2px;
}

/* ------------------------------------------------------- arquivo anexado */

.mc-file {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	padding: 13px 16px;
	background: var(--mc-surface);
}

.mc-file__icon {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mc-error-bg);
	color: var(--mc-error-fg);
	font-size: 18px;
}

.mc-file__body {
	flex: 1;
	min-width: 0;
}

.mc-file__name {
	font-size: 13.5px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-file__meta {
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 2px;
}

/* --------------------------------------------- conferencia contra o PDF */

/* O documento fica ao lado dos campos: e contra ele que o clube confere. */
.mc-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
}

.mc-compare__doc {
	border-left: 1px solid var(--mc-border-subtle);
	padding: 16px 18px;
}

.mc-compare__preview {
	border: 1px dashed #C7D0D9;
	border-radius: 11px;
	background: var(--mc-canvas);
	padding: 32px 18px;
	text-align: center;
	margin-top: 12px;
}

.mc-mark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--mc-approved-fg);
}

.mc-mark--bad {
	color: var(--mc-error-fg);
}

/* Caixa quadrada para `.mc-option` usado como marcacao multipla. */
.mc-option__box {
	width: 19px;
	height: 19px;
	border-radius: 5px;
	flex: none;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	border: 1.5px solid #C7D0D9;
	background: var(--mc-surface);
	color: transparent;
}

.mc-option--on .mc-option__box {
	background: var(--mc-accent);
	border-color: var(--mc-accent);
	color: #fff;
}

/* ------------------------------------------------------- fotos por angulo */

/*
 * O Registro Inicial e resolvido olhando foto por foto, dos dois lados: o
 * criador precisa ver de relance qual angulo falta, e o clube aprova ou recusa
 * cada um separadamente. Por isso o angulo e um card, e nao uma linha de lista
 * — e o mesmo card serve as duas telas, mudando so o rodape.
 */
.mc-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.mc-photo {
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Na tela do canil o envio de cada angulo e um formulario proprio, entao slot,
 * observacao e rodape ficam dentro dele. O formulario herda a coluna para os
 * cards da grade continuarem com a mesma altura e o rodape alinhado.
 */
.mc-photo__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

/* Recusada: o card inteiro muda de cor, senao a marcacao se perde na grade. */
.mc-photo--bad {
	border-color: var(--mc-alert-error-border);
	background: var(--mc-alert-error-bg);
}

.mc-photo__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-photo__name {
	font-size: 14px;
	font-weight: 700;
	flex: 1;
	min-width: 0;
}

.mc-photo__tag {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mc-neutral-bg);
	color: var(--mc-neutral-fg);
	white-space: nowrap;
}

.mc-photo__tag--required {
	background: var(--mc-error-bg);
	color: var(--mc-error-fg);
}

/*
 * O slot e ora um botao (abre a foto), ora um label (abre o seletor de
 * arquivo), ora uma div (sem foto e sem envio). As tres precisam parecer a
 * mesma caixa, entao o reset de botao vem junto.
 */
.mc-photo__slot {
	/* Alto o bastante para o exemplo ao fundo servir de referencia — e para a
	   foto enviada ser conferida sem abrir o modal. */
	height: 260px;
	position: relative;
	border: 1px solid var(--mc-border);
	border-radius: 9px;
	background: var(--mc-table-head);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	width: 100%;
	text-align: center;
	color: var(--mc-text-2);
}

button.mc-photo__slot,
label.mc-photo__slot {
	cursor: pointer;
}

.mc-photo__slot--empty {
	border: 1px dashed #C7D0D9;
	background-color: var(--mc-surface);
}

.mc-photo__slot--empty i {
	font-size: 22px;
	color: var(--mc-accent);
}

/*
 * Slot vazio com o exemplo do angulo ao fundo.
 *
 * O exemplo era um "Ver exemplo" no rodape — um clique a mais para ver
 * justamente o que evita a devolucao mais comum. Aqui ele vira a referencia
 * visual do proprio card: entra desbotado, atras de um veu branco, e o convite
 * de envio continua legivel por cima. `position: relative` no slot para o veu
 * cobrir so a area da imagem.
 */
.mc-photo__slot--example {
	background-position: center;
	/* `contain`: o exemplo serve de guia de enquadramento, entao precisa
	   aparecer inteiro. `cover` cortaria justamente as bordas que mostram onde
	   o cao comeca e termina. */
	background-size: contain;
	background-repeat: no-repeat;
}

.mc-photo__slot--example::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .82);
}

/* O conteudo do slot (icone + texto) sobe acima do veu. */
.mc-photo__slot--example > * {
	position: relative;
	z-index: 1;
}

/* Arrastando por cima, o veu abre um pouco: confirma o alvo sem esconder o
   exemplo que serve de guia. */
.mc-photo__slot--example.mc-photo__slot--over::before {
	background: rgba(230, 244, 245, .72);
}

/*
 * Envio em andamento.
 *
 * O upload recarrega a pagina, e ate ela voltar o card ficava identico ao que
 * era antes do clique — em foto grande, no celular, sao segundos parecendo que
 * nada aconteceu. A camada cobre o slot com a previa do arquivo escolhido e
 * diz o que esta acontecendo.
 */
.mc-photo__uploading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(255, 255, 255, .78);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mc-accent);
}

.mc-photo__uploading .mc-spinner {
	width: 22px;
	height: 22px;
	border-width: 3px;
}

/* Previa local do arquivo, atras da camada: some assim que a pagina volta com
   a foto de verdade. */
.mc-photo__preview {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card inteiro fora de alcance enquanto envia: um segundo clique trocaria o
   arquivo no meio do POST. */
.mc-photo--uploading {
	pointer-events: none;
}

.mc-photo--uploading .mc-photo__foot,
.mc-photo--uploading .mc-photo__remove {
	opacity: .5;
}

/*
 * Realce de "solte aqui". So a cor: o atalho `background` zeraria o
 * `background-size: contain` e o `background-position: center` do exemplo, que
 * vem de `--example` mais acima — o exemplo ao fundo saltava para o tamanho
 * natural no canto superior esquerdo enquanto o arquivo estivesse por cima.
 */
.mc-photo__slot--over {
	border-color: var(--mc-accent);
	background-color: var(--mc-pending-bg);
}

.mc-photo__slot-text {
	display: block;
	font-size: 12px;
	margin-top: 7px;
	color: var(--mc-text-2);
}

.mc-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-photo__note {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--mc-error-fg);
}

.mc-photo__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}

/* Aprovar e recusar dividem a largura em partes iguais: nenhuma das duas e o
   caminho esperado. */
.mc-photo__foot--split > .mc-btn {
	flex: 1;
}

.mc-photo__link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mc-text-2);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.mc-photo__link:hover {
	color: var(--mc-accent);
}

.mc-photo__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mc-text-3);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.mc-photo__remove:hover {
	color: var(--mc-error-fg);
}

/* Veredito do clube sobre uma foto. */
.mc-verdict {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.mc-verdict--ok { color: var(--mc-approved-fg); }
.mc-verdict--bad { color: var(--mc-error-fg); }
.mc-verdict--idle { color: var(--mc-text-3); }

/* ------------------------------------------------------------ miniaturas */

/* Conferencia final: as fotos aparecem so para confirmar que estao todas la. */
.mc-thumbs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.mc-thumb__frame {
	height: 96px;
	width: 100%;
	border: 1px solid var(--mc-border);
	border-radius: 9px;
	background: var(--mc-table-head);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
}

.mc-thumb__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-thumb__frame--empty {
	cursor: default;
	color: #C7D0D9;
	font-size: 20px;
}

.mc-thumb__label {
	font-size: 12px;
	color: var(--mc-text-2);
	margin-top: 6px;
	text-align: center;
}

/* --------------------------------------------------- numero em destaque */

.mc-metric {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
}

.mc-metric__value {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.mc-metric__unit {
	font-size: 14px;
	color: var(--mc-text-2);
}

.mc-specs {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mc-border-subtle);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mc-text-2);
}

/* Contagem com icone a esquerda e numero a direita. */
.mc-tally {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mc-tally__row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
}

.mc-tally__row span {
	flex: 1;
	min-width: 0;
}

.mc-tally__row strong {
	font-size: 13px;
	font-weight: 700;
}

.mc-tally__row i {
	font-size: 15px;
}

/* ------------------------------------------------- opcoes de nome (afixo) */

/*
 * O afixo e o unico servico em que o pedido e uma lista ordenada: seis nomes
 * em ordem de preferencia, avaliados um a um. A ordem e o dado, entao ela
 * aparece — cada linha carrega o seu numero, no formulario do canil, no
 * acompanhamento e na analise do clube.
 */

.mc-rank {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mc-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* Os seis campos do formulario, em duas colunas. */
.mc-names {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
}

.mc-name__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
}

.mc-name__label {
	font-size: 13px;
	font-weight: 700;
	flex: 1;
	min-width: 0;
}

/* Linha de uma opcao ja enviada: numero, nome e o retorno da CBKC. */
.mc-nameopt {
	display: flex;
	gap: 13px;
	align-items: center;
	border: 1px solid var(--mc-border);
	background: var(--mc-surface);
	border-radius: 11px;
	padding: 14px 16px;
}

.mc-nameopt--denied {
	border-color: var(--mc-alert-error-border);
	background: var(--mc-alert-error-bg);
}

.mc-nameopt--granted {
	border-color: #9CCBBE;
	background: #F5FBFB;
}

.mc-nameopt__body {
	flex: 1;
	min-width: 0;
}

.mc-nameopt__name {
	font-size: 15px;
	font-weight: 700;
}

.mc-nameopt__note {
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 3px;
}

.mc-nameopt--denied .mc-nameopt__note {
	color: var(--mc-error-fg);
}

.mc-nameopt__actions {
	display: flex;
	gap: 8px;
	flex: none;
}

/* Trilha horizontal das cinco etapas do afixo. */
.mc-track {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mc-track__step {
	padding: 0 14px;
	border-left: 1px solid var(--mc-border-subtle);
}

.mc-track__step:first-child {
	padding-left: 0;
	border-left: 0;
}

.mc-track__dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	margin-bottom: 10px;
	background: var(--mc-neutral-bg);
	color: var(--mc-text-3);
}

.mc-track__step--done .mc-track__dot {
	background: var(--mc-pending-bg);
	color: var(--mc-pending-fg);
}

.mc-track__step--current .mc-track__dot {
	background: var(--mc-transit-bg);
	color: var(--mc-transit-fg);
}

.mc-track__label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mc-text-3);
}

.mc-track__step--done .mc-track__label,
.mc-track__step--current .mc-track__label {
	color: var(--mc-text);
}

.mc-track__step--current .mc-track__label {
	font-weight: 800;
}

.mc-track__date {
	font-size: 12px;
	color: var(--mc-text-3);
	margin-top: 3px;
}

/*
 * Area de anexo do certificado, quando ainda nao ha arquivo. Serve tanto de
 * aviso ("disponivel quando...") quanto de botao que abre o modal de anexo,
 * entao os defaults de <button> precisam ser neutralizados aqui.
 */
.mc-dropnote {
	display: block;
	width: 100%;
	border: 1px dashed #C7D0D9;
	border-radius: 11px;
	background: var(--mc-table-head);
	padding: 22px;
	text-align: center;
	font: inherit;
	color: inherit;
}

button.mc-dropnote {
	cursor: pointer;
}

button.mc-dropnote:hover {
	border-color: var(--mc-accent);
}

.mc-dropnote i {
	font-size: 24px;
	color: var(--mc-accent);
}

.mc-dropnote__title {
	font-size: 14px;
	font-weight: 700;
	margin-top: 9px;
}

.mc-dropnote__text {
	font-size: 12.5px;
	color: var(--mc-text-2);
	margin-top: 4px;
}

/* Arquivo pairando sobre a area — o alvo do drop precisa ficar obvio. */
.mc-dropnote--over {
	border-color: var(--mc-accent);
	border-style: solid;
	background: var(--mc-pending-bg);
}

/* ------------------------------------------------------------------ modal
 *
 * Veste o modal do Bootstrap com o desenho do sistema: ele continua cuidando
 * de abrir, fechar e do backdrop, e as classes abaixo cuidam da aparencia.
 * Usar `.mc-modal` no `.modal-content` liga tudo de uma vez.
 */

.modal-backdrop.show {
	background: var(--mc-ink);
	opacity: .55;
}

.mc-modal {
	border: 0;
	border-radius: var(--mc-radius-card-lg);
	box-shadow: 0 30px 70px rgba(11, 31, 51, .35);
	overflow: hidden;
}

.mc-modal__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px 20px;
	border-bottom: 1px solid var(--mc-border-subtle);
}

/* Quadrado de icone do cabecalho: `--mc-modal-icon-*` troca a cor por tom. */
.mc-modal__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--mc-modal-icon-bg, var(--mc-pending-bg));
	color: var(--mc-modal-icon-fg, var(--mc-accent));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	flex: none;
}

.mc-modal__title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.mc-modal__subtitle {
	font-size: 13.5px;
	color: var(--mc-text-2);
	margin-top: 4px;
	line-height: 1.5;
}

.mc-modal__close {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--mc-radius-nav);
	background: transparent;
	color: var(--mc-text-3);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	cursor: pointer;
}

.mc-modal__close:hover {
	background: var(--mc-border-subtle);
	color: var(--mc-text);
}

.mc-modal__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px 28px;
}

.mc-modal__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background: var(--mc-table-head);
	border-top: 1px solid var(--mc-border-subtle);
}

/* Texto do rodape — o que falta preencher, a esquerda dos botoes. */
.mc-modal__foot-note {
	font-size: 12.5px;
	color: var(--mc-text-3);
	flex: 1;
	min-width: 0;
}

/* Rotulo de secao dentro do modal. */
.mc-modal__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--mc-text-3);
	margin-bottom: 8px;
}

.mc-modal__hint {
	font-size: 12.5px;
	color: var(--mc-text-3);
	margin-top: 8px;
	line-height: 1.5;
}

.mc-modal__label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 6px;
}

.mc-modal__req {
	color: var(--mc-error-fg);
}

.mc-modal__input {
	width: 100%;
	border: 1px solid var(--mc-border-input);
	border-radius: var(--mc-radius-control);
	padding: 12px 14px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--mc-text);
	background: var(--mc-surface);
}

.mc-modal__input:focus {
	outline: 0;
	border-color: var(--mc-accent);
	box-shadow: 0 0 0 3px rgba(14, 124, 134, .12);
}

.mc-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* Arquivo escolhido, com nome e tamanho no lugar do input cru. */
.mc-modal__file {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	padding: 13px 16px;
	background: #FCFDFD;
}

.mc-modal__file-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--mc-radius-control);
	background: var(--mc-surface);
	border: 1px solid var(--mc-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--mc-error-fg);
	flex: none;
}

.mc-modal__file-name {
	font-size: 14px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-modal__file-meta {
	font-size: 12.5px;
	color: var(--mc-text-2);
	margin-top: 2px;
}

/* Aviso neutro no fim do corpo. */
.mc-modal__note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--mc-table-head);
	border: 1px solid var(--mc-border);
	border-radius: 11px;
	padding: 14px 16px;
	font-size: 13px;
	color: var(--mc-neutral-fg);
	line-height: 1.55;
}

.mc-modal__note i {
	font-size: 15px;
	color: var(--mc-accent);
	margin-top: 1px;
	flex: none;
}

@media (max-width: 575.98px) {
	.mc-modal__grid { grid-template-columns: 1fr; }
	.mc-modal__head { padding: 20px; }
	.mc-modal__body { padding: 18px 20px; }
	.mc-modal__foot { padding: 14px 20px; flex-wrap: wrap; }
}

/* ----------------------------------------------------------- responsivo */

@media (max-width: 1199.98px) {
	.mc-layout,
	.mc-layout--narrow,
	.mc-layout--wide,
	.mc-compare {
		grid-template-columns: minmax(0, 1fr);
	}

	.mc-compare__doc {
		border-left: 0;
		border-top: 1px solid var(--mc-border-subtle);
	}

	.mc-hero {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 32px;
	}

	.mc-hero__title { font-size: 48px; }
	.mc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Sem a coluna de apoio ao lado, a grade de angulos ganha o espaco dela. */
	.mc-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
	/* A sidebar vira offcanvas: o shell passa a uma coluna. */
	.mc-shell { grid-template-columns: minmax(0, 1fr); }

	.mc-shell__aside {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: 280px;
		max-width: 86vw;
		background: var(--mc-surface);
		padding: 16px;
		overflow-y: auto;
		z-index: 1045;
		transform: translateX(-100%);
		transition: transform .2s ease;
	}

	.mc-shell--open .mc-shell__aside { transform: none; }

	.mc-shell__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(11, 31, 51, .5);
		z-index: 1040;
		display: none;
	}

	.mc-shell--open .mc-shell__backdrop { display: block; }

	/*
	 * A sidebar rola na vertical, entao um dropdown posicionado pela direita
	 * seria cortado. Aqui ele abre no proprio fluxo, recuado sob o item — o
	 * !important e para vencer o posicionamento inline do Popper.
	 */
	.mc-nav__menu {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 18px;
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Sem hover confiavel no toque: o quarto nivel ja vem aberto. */
	.mc-nav__nested > .dropdown-menu { display: block; }

	.mc-shell__main { padding: 16px; }

	.mc-topbar__toggle { display: block; }
	.mc-topbar__context { display: none; }

	.mc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mc-hero {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 40px;
		padding-bottom: 48px;
	}

	.mc-hero__title { font-size: 40px; max-width: none; }
	.mc-hero__stats { gap: 28px; }

	.mc-site-header {
		height: auto;
		min-height: 68px;
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.mc-site-header__nav { display: none; }
	.mc-site-header__actions { margin-left: auto; }

	.mc-section { padding-top: 44px; padding-bottom: 44px; }
	.mc-section__title { font-size: 30px; }

	.mc-steps { padding-bottom: 48px; }
	.mc-steps__card { padding: 24px 20px; }

	.mc-split {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 48px;
	}

	.mc-split__photo { min-height: 260px; }

	.mc-site-footer { padding-top: 32px; padding-bottom: 32px; }

	/* O trilho deixa de ser coluna e vira cabecalho do assistente. */
	.mc-wizard {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 24px 20px 56px;
	}

	.mc-rail { position: static; }

	.mc-onboard-header { padding: 0 20px; }

	.mc-wizard__head { padding: 22px 20px 0; }
	.mc-wizard__body { padding: 20px 20px 4px; }
	.mc-wizard__foot { padding: 18px 20px; margin-top: 18px; }

	.mc-done { padding: 32px 20px 56px; }
	.mc-done__card { padding: 28px 22px; }
	.mc-done__title { font-size: 26px; }
}

@media (max-width: 767.98px) {
	/* Tabelas viram cartoes empilhados. */
	.mc-table__head { display: none; }

	.mc-table__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 16px 16px;
	}

	.mc-table__row [data-label]::before { display: block; }

	.mc-table__end,
	.mc-table__actions { justify-content: flex-start; text-align: left; }

	.mc-table__actions .mc-btn,
	.mc-table__actions .mc-link { min-height: 44px; }

	.mc-kpis { grid-template-columns: minmax(0, 1fr); }
	.mc-grid-4 { grid-template-columns: minmax(0, 1fr); }
	.mc-photos { grid-template-columns: minmax(0, 1fr); }
	.mc-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* O rodape do formulario empilha: voltar em cima, avancar embaixo. */
	.mc-formfoot {
		flex-direction: column;
		align-items: stretch;
	}

	.mc-formfoot__end {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.mc-pagehead__actions { margin-left: 0; width: 100%; }
	.mc-pagehead__actions .mc-btn { min-height: 44px; }

	.mc-hero__title { font-size: 34px; }
	.mc-hero__stats { grid-template-columns: repeat(2, max-content); }
	.mc-authcard { padding: 20px; }

	.mc-topbar { padding: 0 16px; gap: 12px; }
	.mc-topbar__ghost { display: none; }
	.mc-topbar__user span:not(.mc-avatar) { display: none; }

	/* Uma coluna: os pares de campos passam a empilhar. */
	.mc-field-row--2,
	.mc-field-row--wide,
	.mc-choices,
	.mc-names,
	.mc-access { grid-template-columns: minmax(0, 1fr); }

	/* A trilha do afixo vira lista: cinco etapas nao cabem lado a lado. */
	.mc-track { grid-template-columns: minmax(0, 1fr); gap: 14px; }

	.mc-track__step {
		padding: 0 0 0 14px;
		border-left: 1px solid var(--mc-border-subtle);
	}

	.mc-nameopt { flex-wrap: wrap; }
	.mc-nameopt__actions { width: 100%; }

	.mc-wizard__foot .mc-btn { min-height: 44px; }

	/* A acao de editar cai para baixo do valor. */
	.mc-review__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.mc-review__edit { justify-self: start; }

	.mc-quiz { padding: 20px; }
	.mc-quiz__grid { grid-template-columns: minmax(0, 1fr); }

	.mc-result__head,
	.mc-result__section { padding-left: 20px; padding-right: 20px; }

	.mc-result__facts,
	.mc-result__block { margin-left: 20px; margin-right: 20px; }

	/* Empilhados, os separadores verticais entre os fatos nao fazem sentido. */
	.mc-result__facts { gap: 16px; }
	.mc-result__divider { display: none; }

	.mc-result__foot { padding: 18px 20px; }
	.mc-result__other { margin-left: 0; }

	.mc-catalog__head,
	.mc-catalog__list,
	.mc-catalog__foot { padding-left: 20px; padding-right: 20px; }
}