/* ==========================================================================
   Design UCDB App — camada "aplicativo" sobre o style.css.
   Componentes do Material Design 3 (m3.material.io/components):
   barra superior pequena, menu, barra de navegação (celular) e trilho de
   navegação (tablet e computador), abas principais, cartões preenchidos,
   botões e botão flutuante estendido (FAB).
   Medidas dos tokens oficiais do M3 (versão 6.1.0).
   ========================================================================== */

:root {
	--app-nav-h: 80px;      /* barra de navegação */
	--app-rail-w: 80px;     /* trilho de navegação */
	--app-topo-h: 64px;     /* barra superior pequena */
}

/* Espaço para a barra de navegação no celular */
body { padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)); }

/* --------------------------------------------------------------------------
   1. Barra superior pequena (top app bar)
   64 px, título em "title large" (22 px), sem borda. Ao rolar, muda para
   "surface-container" (tom, não sombra). O fixo no topo vem do style.css. */
.app-topbar {
	min-height: var(--app-topo-h);
	padding-block: 0 !important;
	border: 0 !important;
}
.app-topbar__linha { width: 100%; min-height: var(--app-topo-h); gap: 0.5rem; }
.app-topbar__marca { min-width: 0; }
.app-topbar .wp-block-site-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .wp-block-site-title a { text-decoration: none; }

/* --------------------------------------------------------------------------
   2. Menu (overflow) da barra superior
   Contêiner "surface-container", cantos de 4 px, elevação 2, itens de 48 px. */
.app-menu { position: relative; flex: none; }
.app-icone-botao {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 48px;
	min-width: 48px;
	padding: 0 0.875rem 0 0.75rem;
	border: 0;
	border-radius: var(--md-shape-full);
	background: transparent;
	color: var(--md-on-surface-variant);
	font: 600 0.875rem/1 var(--wp--preset--font-family--titulos);
	letter-spacing: 0.01em;
	cursor: pointer;
	--md-state: 0;
	background-image: linear-gradient(
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent),
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent));
}
.app-icone-botao:hover { --md-state: var(--md-state-hover); }
.app-icone-botao:focus-visible, .app-icone-botao[aria-expanded="true"] { --md-state: var(--md-state-focus); }
.app-icone-botao:active { --md-state: var(--md-state-pressed); }

.app-menu__lista {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 80;
	min-width: 220px;
	max-width: min(280px, calc(100vw - 32px));
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--md-surface-container);
	border-radius: var(--md-shape-xs);
	box-shadow: var(--md-elev-2);
	transform-origin: top right;
	animation: app-menu-abre var(--md-dur-medium) var(--md-ease-decelerate);
}
@keyframes app-menu-abre { from { opacity: 0; transform: scaleY(0.6); } to { opacity: 1; transform: none; } }
.app-menu__lista a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 12px 0 16px;
	color: var(--md-on-surface);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none !important;
}
.app-menu__lista a:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.app-menu__lista a:focus-visible { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); outline-offset: -3px; }
.app-menu__divisor { height: 1px; margin: 8px 0; background: var(--md-outline-variant); }

/* --------------------------------------------------------------------------
   3. Barra de navegação (celular) e trilho (a partir de 600 px)
   Barra: 80 px, "surface-container", indicador ativo de 64 × 32 px em forma
   de pílula na cor "secondary-container", rótulo "label medium" (12 px).
   Trilho: 80 px de largura, indicador de 56 × 32 px, FAB no topo. */
.app-nav-wrap { position: static; }
.app-nav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: flex;
	height: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--md-surface-container);
}
.app-nav__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-block: 12px 16px;
	color: var(--md-on-surface-variant);
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}
.app-nav__icone {
	display: grid;
	place-items: center;
	width: 64px;
	height: 32px;
	border-radius: var(--md-shape-full);
	position: relative;
	isolation: isolate;
}
.app-nav__icone::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--md-secondary-container);
	transform: scaleX(0.3);
	opacity: 0;
	transition: transform var(--md-dur-medium) var(--md-spring), opacity var(--md-dur-short) var(--md-ease);
}
.app-nav__icone svg { width: 24px; height: 24px; }
.app-nav__rotulo {
	font: 500 0.75rem/1.33 var(--wp--preset--font-family--titulos);
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.app-nav__item:hover .app-nav__icone { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.app-nav__item:focus-visible { outline: none; }
.app-nav__item:focus-visible .app-nav__icone { outline: 3px solid var(--md-secondary); outline-offset: 2px; }
.app-nav__item[aria-current="page"] { color: var(--md-on-surface); }
.app-nav__item[aria-current="page"] .app-nav__icone { color: var(--md-on-secondary-container); }
.app-nav__item[aria-current="page"] .app-nav__icone::before { transform: none; opacity: 1; }
.app-nav__item[aria-current="page"] .app-nav__rotulo { font-weight: 700; }

/* --------------------------------------------------------------------------
   4. Botão flutuante estendido (FAB) — falar no WhatsApp
   56 px, cantos de 16 px, cor primária (a ação que mais importa), elevação 3.
   Encolhe para só o ícone ao rolar para baixo (comportamento do M3). */
.app-fab {
	position: fixed;
	right: 16px;
	bottom: calc(var(--app-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
	z-index: 65;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px 0 16px;
	border-radius: var(--md-shape-l);
	background: var(--md-primary);
	color: var(--md-on-primary) !important;
	font: 700 1rem/1 var(--wp--preset--font-family--titulos);
	text-decoration: none !important;
	box-shadow: var(--md-elev-3);
	transition: padding var(--md-dur-medium) var(--md-spring), border-radius var(--md-dur-medium) var(--md-spring), box-shadow var(--md-dur-short) var(--md-ease);
	--md-state: 0;
	background-image: linear-gradient(
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent),
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent));
}
.app-fab:hover { --md-state: var(--md-state-hover); box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15); }
.app-fab:focus-visible { --md-state: var(--md-state-focus); }
.app-fab:active { --md-state: var(--md-state-pressed); border-radius: var(--md-shape-m); }
.app-fab svg { flex: none; }
.app-fab__rotulo {
	display: inline-block;
	max-width: 10em;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width var(--md-dur-medium) var(--md-spring), opacity var(--md-dur-short) var(--md-ease);
}
.app-fab.is-recolhido { padding: 0 16px; gap: 0; }
.app-fab.is-recolhido .app-fab__rotulo { max-width: 0; opacity: 0; }

/* Trilho de navegação a partir de 600 px (tablet e computador) */
@media (min-width: 600px) {
	body { padding-bottom: 0; }
	.wp-site-blocks { padding-left: var(--app-rail-w); }
	.app-nav-wrap {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 70;
		width: var(--app-rail-w);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		padding: calc(12px + env(safe-area-inset-top, 0px)) 0 16px;
		background: var(--md-surface);
		border-right: 1px solid var(--md-outline-variant);
	}
	/* Trilho com os destinos centralizados na vertical (alinhamento "center"
	   do M3); o FAB fica preso no topo do trilho. */
	.app-fab, .app-fab.is-recolhido {
		position: absolute;
		top: calc(12px + env(safe-area-inset-top, 0px));
		left: 50%;
		right: auto;
		bottom: auto;
		translate: -50% 0;
		flex-direction: column;
		gap: 4px;
		min-height: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		color: var(--md-on-surface) !important;
	}
	.app-fab svg {
		box-sizing: content-box;
		padding: 16px;
		border-radius: var(--md-shape-l);
		background-color: var(--md-primary);
		color: var(--md-on-primary);
		box-shadow: var(--md-elev-1);
		transition: border-radius var(--md-dur-medium) var(--md-spring);
	}
	.app-fab:active svg { border-radius: var(--md-shape-m); }
	.app-fab__rotulo, .app-fab.is-recolhido .app-fab__rotulo { max-width: none; opacity: 1; font: 600 0.75rem/1.33 var(--wp--preset--font-family--titulos); }
	.app-nav {
		position: static;
		flex-direction: column;
		gap: 12px;
		height: auto;
		padding: 0;
		background: transparent;
	}
	.app-nav__item { flex: none; padding-block: 0; min-height: 56px; width: var(--app-rail-w); }
	.app-nav__icone { width: 56px; }
}
/* Tela baixa (computador com a janela pequena): destinos voltam para o topo,
   abaixo do FAB, para não ficarem por cima dele. */
@media (min-width: 600px) and (max-height: 560px) {
	.app-nav-wrap { justify-content: flex-start; padding-top: calc(112px + env(safe-area-inset-top, 0px)); }
}

/* --------------------------------------------------------------------------
   5. Abas principais (primary tabs)
   48 px de altura, rótulo "title small" (14 px), indicador de 3 px na cor
   primária, cantos superiores arredondados; rolam para o lado se não
   couberem. Ficam presas logo abaixo da barra superior. */
.app-abas {
	position: sticky;
	top: var(--ucdb-topo, 64px);
	z-index: 40;
	background: var(--md-surface);
	border-bottom: 1px solid var(--md-outline-variant);
	transition: background-color var(--md-dur-medium) var(--md-ease);
}
body.ucdb-rolado .app-abas { background: var(--md-surface-container); }
.app-abas__lista {
	display: flex;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: 16px;
}
.app-abas__lista::-webkit-scrollbar { display: none; }
.app-abas__aba {
	flex: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 72px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: var(--md-on-surface-variant);
	font: 600 0.875rem/1.43 var(--wp--preset--font-family--titulos);
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	--md-state: 0;
	background-image: linear-gradient(
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent),
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent));
}
.app-abas__aba:hover { --md-state: var(--md-state-hover); color: var(--md-on-surface); }
.app-abas__aba:focus-visible { --md-state: var(--md-state-focus); outline-offset: -3px; }
.app-abas__aba:active { --md-state: var(--md-state-pressed); }
.app-abas__texto { position: relative; display: inline-flex; align-items: center; min-height: 48px; }
.app-abas__texto::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--md-primary);
	transform: scaleX(0);
	transition: transform var(--md-dur-medium) var(--md-spring);
}
.app-abas__aba[aria-selected="true"] { color: var(--md-primary); }
.app-abas__aba[aria-selected="true"] .app-abas__texto::after { transform: none; }
@media (min-width: 840px) { .app-abas__lista { justify-content: center; } }

/* Conteúdo das abas: começa mais perto das abas */
.ucdb-abas.is-abas > .ucdb-aba > :first-child { padding-top: var(--wp--preset--spacing--40) !important; }
.ucdb-aba:focus-visible { outline-offset: -3px; }
/* Sem JavaScript, as seções aparecem uma embaixo da outra (nada se perde). */

/* Cabeça das telas (título grande, como a barra superior "large") */
.app-cabeca .wp-block-post-title { margin: 0; }
.app-cabeca p { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   6. Cartões preenchidos (filled cards)
   Fundo "surface-container-highest", cantos de 12 px, sem sombra. */
.ucdb-card.has-background,
.wp-block-group.has-nevoa-background-color[style*="border-radius"],
.wp-block-group.has-rosa-claro-background-color[style*="border-radius"] {
	background-color: var(--md-surface-container-highest) !important;
	border-radius: var(--md-shape-m) !important;
}

/* Cartões que levam a outra tela: o cartão inteiro é tocável (link esticado),
   com camada de estado e seta no título. */
.ucdb-jornada .ucdb-card { position: relative; }
.ucdb-jornada .ucdb-card h3 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: var(--wp--preset--font-size--grande); }
.ucdb-jornada .ucdb-card h3::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ucdb-jornada .ucdb-card h3 a { color: var(--md-on-surface); text-decoration: none; }
.ucdb-jornada .ucdb-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ucdb-jornada .ucdb-card:hover { background-image: linear-gradient(color-mix(in srgb, var(--md-on-surface) 8%, transparent), color-mix(in srgb, var(--md-on-surface) 8%, transparent)); }
.ucdb-jornada .ucdb-card:active { background-image: linear-gradient(color-mix(in srgb, var(--md-on-surface) 10%, transparent), color-mix(in srgb, var(--md-on-surface) 10%, transparent)); }
.ucdb-jornada .ucdb-card h3 a:focus-visible { outline: none; }
.ucdb-jornada .ucdb-card:has(a:focus-visible) { outline: 3px solid var(--md-secondary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. Botão de texto (text button) para ações de menor peso */
.wp-block-button.is-style-texto > .wp-block-button__link {
	background-color: transparent;
	color: var(--md-primary);
	padding-inline: 12px;
}

/* --------------------------------------------------------------------------
   8. Rodapé: compacto, acima da barra de navegação */
footer.wp-block-group.ucdb-dark { padding-block: var(--wp--preset--spacing--40) !important; }

/* Capa mais curta: no app, a primeira tela mostra também os caminhos */
.ucdb-hero { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }

/* A antiga barra fixa de contato não existe nesta versão */
.ucdb-cta-bar { display: none !important; }