/* Camada "app" do celular. Tudo aqui so vale com html.ssf-app (classe posta pelo JS quando a tela tem ate 767px).
 * Cores da marca: verde #0f4f48, verde-limao #99ca45, fundo #f4f7f2. */

/* fora do modo app, nada do app aparece */
.ssf-m-appbar, .ssf-m-tabbar, .ssf-m-sheet, .ssf-m-backdrop, .ssf-m-libras { display: none; }

html.ssf-app {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 72px;
	overscroll-behavior-y: none;
}

html.ssf-app body {
	background: #f4f7f2;
	padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
}

html.ssf-m-locked, html.ssf-m-locked body { overflow: hidden; }

/* o cabecalho antigo sai (o menu, a busca e a acessibilidade viram o app) */
html.ssf-app .ssf-accessbar,
html.ssf-app .ssf-topbar,
html.ssf-app .ssf-brandbar { display: none !important; }

html.ssf-app .ssf-container { padding-inline: 16px !important; }

/* VLibras: o botao do plugin fica fora (continua clicavel por codigo); o app mostra o seu proprio */
html.ssf-app div[vw-access-button], html.ssf-app #vlibras-access-wrapper { display: none !important; }
html.ssf-app .ssf-vlibras-slot { display: none !important; }

/* ------------------------------------------------------------------ barra de app */
html.ssf-app .ssf-m-appbar {
	position: sticky;
	top: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 60px;
	padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
	background: #ffffff;
	border-bottom: 3px solid #99ca45;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease;
}

html.ssf-app .ssf-m-appbar.is-scrolled { box-shadow: 0 6px 18px rgba(15, 79, 72, 0.14); }

.ssf-m-skip { position: absolute; left: -9999px; top: 0; background: #0f4f48; color: #fff; padding: 10px 14px; border-radius: 0 0 10px 0; z-index: 1000; }
.ssf-m-skip:focus { left: 0; }

.ssf-m-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: #0f4f48; }
.ssf-m-brand img { height: 38px; width: auto; border-radius: 6px; flex: 0 0 auto; }
.ssf-m-brand__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ssf-m-brand__t strong { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssf-m-brand__t small { font-size: 11px; font-weight: 600; color: #4c7418; letter-spacing: 0.04em; text-transform: uppercase; }

.ssf-m-appbar__act { display: flex; gap: 6px; flex: 0 0 auto; }

.ssf-m-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 14px;
	background: #eef6dc; color: #0f4f48; cursor: pointer;
}
.ssf-m-iconbtn:active { background: #dcebb8; }
.ssf-m-iconbtn .ssf-m-ico svg { width: 22px; height: 22px; }

.ssf-m-ico { display: inline-flex; flex: 0 0 auto; }
.ssf-m-ico svg { width: 24px; height: 24px; display: block; }

/* ------------------------------------------------------------------ abas fixas */
html.ssf-app .ssf-m-tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 950;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid rgba(15, 79, 72, 0.12);
	box-shadow: 0 -8px 24px rgba(15, 79, 72, 0.1);
	box-sizing: border-box;
}

.ssf-m-tab {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 56px; padding: 6px 2px;
	border: 0; border-radius: 16px; background: transparent;
	color: #5b726e; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
	text-decoration: none; cursor: pointer;
}
.ssf-m-tab .ssf-m-ico svg { width: 24px; height: 24px; }
.ssf-m-tab.is-active { color: #0f4f48; background: #eef6dc; }
.ssf-m-tab.is-active::before {
	content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px;
	border-radius: 0 0 4px 4px; background: #99ca45;
}
.ssf-m-tab:active { background: #e3efc9; }

/* botao proprio do VLibras (aciona o do plugin) */
html.ssf-app .ssf-m-libras {
	position: fixed; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 940;
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; padding: 0; border: 0; border-radius: 16px;
	background: #1557a1; color: #fff; box-shadow: 0 8px 20px rgba(21, 87, 161, 0.35); cursor: pointer;
}
html.ssf-app .ssf-m-libras .ssf-m-ico svg { width: 26px; height: 26px; }
html.ssf-m-locked .ssf-m-libras { display: none !important; }

/* a janela do VLibras sobe para nao ficar embaixo das abas */
html.ssf-app [vw].enabled .vp-box { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ------------------------------------------------------------------ folhas (menu, busca, acessibilidade) */
html.ssf-app .ssf-m-backdrop {
	display: block; position: fixed; inset: 0; z-index: 980;
	background: rgba(8, 36, 33, 0.55); opacity: 0; transition: opacity 0.25s ease;
}
html.ssf-app .ssf-m-backdrop[hidden] { display: none; }
html.ssf-app .ssf-m-backdrop.is-open { opacity: 1; }

html.ssf-app .ssf-m-sheet {
	display: flex; flex-direction: column;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
	max-height: 86vh; max-height: 86dvh;
	background: #f4f7f2; border-radius: 26px 26px 0 0;
	box-shadow: 0 -16px 48px rgba(8, 36, 33, 0.3);
	transform: translateY(102%); transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.ssf-app .ssf-m-sheet[hidden] { display: none; }
html.ssf-app .ssf-m-sheet--tall { height: 92vh; height: 92dvh; max-height: 92dvh; }
html.ssf-app .ssf-m-sheet.is-open { transform: translateY(0); }

.ssf-m-sheet__grip { width: 42px; height: 5px; margin: 10px auto 0; border-radius: 4px; background: rgba(15, 79, 72, 0.22); flex: 0 0 auto; }
.ssf-m-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 6px; flex: 0 0 auto; }
.ssf-m-sheet__head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0f4f48; }
.ssf-m-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #e6eee0; color: #0f4f48; cursor: pointer; }
.ssf-m-sheet__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 16px 22px; }

/* atalhos (4 azulejos) */
.ssf-m-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.ssf-m-tile {
	display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px;
	border-radius: 18px; background: linear-gradient(135deg, #0f4f48, #1a6b61); color: #fff;
	font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none;
}
.ssf-m-tile .ssf-m-ico { width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.16); color: #d9f08a; }
.ssf-m-tile:active { filter: brightness(1.1); }

/* grupos de links */
.ssf-m-group { margin: 0 0 14px; background: #ffffff; border-radius: 20px; padding: 6px 4px; box-shadow: 0 1px 0 rgba(15, 79, 72, 0.06); }
.ssf-m-group h3 { margin: 0; padding: 12px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #4c7418; }

.ssf-m-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; color: #12403b; text-decoration: none; border-radius: 14px; }
.ssf-m-row + .ssf-m-row, .ssf-m-row + .ssf-m-acc, .ssf-m-acc + .ssf-m-row { border-top: 1px solid rgba(15, 79, 72, 0.07); }
.ssf-m-row:active { background: #eef6dc; }
.ssf-m-row .ssf-m-ico { color: #0f4f48; }
.ssf-m-row__t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ssf-m-row__t strong { font-size: 16px; font-weight: 700; }
.ssf-m-row__t small { font-size: 12.5px; color: #4f6762; font-weight: 500; line-height: 1.35; margin-top: 1px; }
.ssf-m-row__go svg { width: 18px; height: 18px; transform: rotate(-90deg); color: #8aa19c; }

.ssf-m-acc { border-top: 1px solid rgba(15, 79, 72, 0.07); }
.ssf-m-acc:first-of-type { border-top: 0; }
.ssf-m-acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 10px 14px; list-style: none; cursor: pointer; color: #12403b; }
.ssf-m-acc summary::-webkit-details-marker { display: none; }
.ssf-m-acc summary strong { font-size: 16px; font-weight: 700; }
.ssf-m-acc__chev svg { width: 20px; height: 20px; color: #8aa19c; transition: transform 0.2s ease; }
.ssf-m-acc[open] .ssf-m-acc__chev svg { transform: rotate(180deg); }
.ssf-m-acc[open] summary { color: #0f4f48; }
.ssf-m-acc__body { padding: 0 8px 10px 14px; }
.ssf-m-sub { display: block; padding: 12px 14px; margin-left: 4px; border-left: 3px solid #cfe49a; color: #1b4a44; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 0 12px 12px 0; }
.ssf-m-sub:active { background: #eef6dc; }

.ssf-m-menufoot { text-align: center; padding: 6px 0 4px; }
.ssf-m-menufoot p { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5b726e; }
.ssf-m-socials { display: flex; justify-content: center; gap: 12px; }
.ssf-m-social { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #0f4f48; color: #fff; }
.ssf-m-social svg { width: 22px; height: 22px; }

/* busca */
.ssf-m-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: #fff; border: 2px solid #0f4f48; border-radius: 18px; margin-top: 6px; }
.ssf-m-search .ssf-m-ico { color: #0f4f48; }
.ssf-m-search input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 17px; color: #0f4f48; outline: none; }
.ssf-m-search button { height: 46px; padding: 0 18px; border: 0; border-radius: 13px; background: #0f4f48; color: #fff; font-size: 15px; font-weight: 800; }
.ssf-m-hint { margin: 18px 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #4c7418; }
.ssf-m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ssf-m-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 79, 72, 0.16); color: #0f4f48; font-size: 15px; font-weight: 700; text-decoration: none; }
.ssf-m-chip:active { background: #eef6dc; }

/* acessibilidade */
.ssf-m-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.ssf-m-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px; border: 2px solid transparent; border-radius: 18px; background: #fff; color: #0f4f48; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ssf-m-act:active { background: #eef6dc; }
.ssf-m-act[aria-pressed="true"] { border-color: #0f4f48; background: #eef6dc; }

html.ssf-app main, html.ssf-app .site-main { max-width: 100%; }

/* ================================================================== HOME no modo app */

/* hero compacto */
html.ssf-app .ssf-hero { min-height: 0 !important; }
html.ssf-app .ssf-hero__inner { padding: 20px 16px 22px !important; min-height: 0 !important; }
html.ssf-app .ssf-hero__content { gap: 0 !important; }
html.ssf-app .ssf-hero__title { font-size: 26px !important; line-height: 1.1 !important; margin: 0 0 12px !important; }
html.ssf-app .ssf-hero__description { display: none !important; }
html.ssf-app .ssf-hero__search {
	display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px;
	padding: 6px 6px 6px 12px !important; border-radius: 18px !important; min-height: 0 !important;
}
html.ssf-app .ssf-hero__search input { flex: 1 1 auto; min-width: 0; width: auto !important; height: 46px !important; font-size: 16px !important; padding-inline: 4px !important; }
html.ssf-app .ssf-hero__search button { flex: 0 0 auto; width: auto !important; height: 46px !important; min-height: 0 !important; padding: 0 16px !important; border-radius: 13px !important; font-size: 13px !important; }
html.ssf-app .ssf-hero__search-icon { flex: 0 0 auto; }

/* secoes da home: menos respiro, cartoes mais compactos */
html.ssf-app .ssf-home-shortcuts,
html.ssf-app .ssf-home-news,
html.ssf-app .ssf-event-calendar,
html.ssf-app .ssf-weather,
html.ssf-app .ssf-salgado-conecta,
html.ssf-app .ssf-quick-links--categorized,
html.ssf-app .ssf-photo-gallery { padding-block: 10px !important; margin-block: 0 !important; background: transparent !important; }

html.ssf-app .ssf-home-shortcuts__shell,
html.ssf-app .ssf-weather__shell,
html.ssf-app .ssf-quick-links__shell { padding: 16px !important; border-radius: 22px !important; }

/* ---- acesso rapido: grade 3 colunas estilo "launcher" */
html.ssf-app .ssf-home-shortcuts__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px 8px !important; }
html.ssf-app .ssf-home-shortcut {
	display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start;
	gap: 7px !important; padding: 4px 0 !important; min-height: 0 !important; height: auto !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: center;
}
html.ssf-app .ssf-home-shortcut__icon { width: 58px !important; height: 58px !important; border-radius: 19px !important; }
html.ssf-app .ssf-home-shortcut__label { font-size: 12.5px !important; line-height: 1.2 !important; font-weight: 700 !important; width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
html.ssf-app .ssf-home-shortcuts__head h2 { font-size: 20px !important; }

/* ---- carrosseis horizontais (snap) */
html.ssf-app .ssf-home-news__list,
html.ssf-app .ssf-event-calendar__grid,
html.ssf-app .ssf-weather__forecast-grid,
html.ssf-app .ssf-photo-gallery__grid {
	display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	margin-inline: 0 !important; padding: 4px 2px 14px !important;
	scrollbar-width: none; grid-template-columns: none !important; grid-auto-flow: unset !important;
}
html.ssf-app .ssf-home-news__list::-webkit-scrollbar,
html.ssf-app .ssf-event-calendar__grid::-webkit-scrollbar,
html.ssf-app .ssf-weather__forecast-grid::-webkit-scrollbar,
html.ssf-app .ssf-photo-gallery__grid::-webkit-scrollbar { display: none; }

html.ssf-app .ssf-news-list-card { flex: 0 0 78% !important; scroll-snap-align: start; height: auto !important; }
html.ssf-app .ssf-event-card { flex: 0 0 74% !important; scroll-snap-align: start; height: auto !important; }
html.ssf-app .ssf-weather-day { flex: 0 0 104px !important; scroll-snap-align: start; height: auto !important; }
html.ssf-app .ssf-photo-gallery__item { flex: 0 0 80% !important; scroll-snap-align: start; width: auto !important; height: auto !important; grid-area: auto !important; }
html.ssf-app .ssf-photo-gallery__post { height: auto !important; }

/* os carrosseis nao podem alargar as colunas de grade que os contem */
html.ssf-app .ssf-home-news__inner,
html.ssf-app .ssf-weather__shell,
html.ssf-app .ssf-weather__forecast,
html.ssf-app .ssf-event-calendar .ssf-container,
html.ssf-app .ssf-photo-gallery .ssf-container { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; max-width: 100% !important; }
html.ssf-app .ssf-home-news__sidebar,
html.ssf-app .ssf-home-news__featured,
html.ssf-app .ssf-weather__forecast-grid,
html.ssf-app .ssf-event-calendar__grid,
html.ssf-app .ssf-photo-gallery__grid,
html.ssf-app .ssf-home-news__list { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
html.ssf-app section { max-width: 100vw; }

html.ssf-app .ssf-home-news__sidebar { padding: 14px 16px 6px !important; }
html.ssf-app .ssf-home-news__more { margin-top: 2px; }

/* ---- clima: cartao atual compacto */
html.ssf-app .ssf-weather__intro { padding: 0 2px 6px !important; }
html.ssf-app .ssf-weather__title { font-size: 20px !important; }
html.ssf-app .ssf-weather__card { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px !important; }
html.ssf-app .ssf-weather__extremes { grid-column: 1 / -1; }
html.ssf-app .ssf-weather__forecast { padding-top: 6px !important; }

/* ---- Salgado Digital (conecta): cartoes em linha */
html.ssf-app .ssf-salgado-conecta__grid { gap: 12px !important; }
html.ssf-app .ssf-salgado-conecta__intro { padding: 4px 2px !important; }
html.ssf-app .ssf-salgado-conecta__board { padding: 14px !important; gap: 12px !important; border-radius: 22px !important; }
html.ssf-app .ssf-salgado-conecta__brand { padding: 10px 4px !important; min-height: 0 !important; }
html.ssf-app .ssf-salgado-conecta__cards { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
html.ssf-app .ssf-salgado-conecta__card {
	display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
	min-height: 0 !important; height: auto !important; padding: 12px 14px !important;
}
html.ssf-app .ssf-salgado-conecta__card-icon { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; }
html.ssf-app .ssf-salgado-conecta__card-title { font-size: 15px !important; }
html.ssf-app .ssf-salgado-conecta__card-text { font-size: 12.5px !important; line-height: 1.35 !important; }
html.ssf-app .ssf-salgado-conecta__service { padding: 14px !important; }

/* ---- "Em que podemos te ajudar?": abas viram chips rolaveis */
html.ssf-app .ssf-quick-links__tabs { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 10px; scrollbar-width: none; }
html.ssf-app .ssf-quick-links__tabs::-webkit-scrollbar { display: none; }
html.ssf-app .ssf-quick-links__tab { flex: 0 0 auto !important; width: auto !important; min-height: 42px; padding: 0 16px !important; white-space: nowrap; border-radius: 999px !important; }
html.ssf-app .ssf-quick-links__headline h2 { font-size: 22px !important; }

/* galeria: cabecalho menor */
html.ssf-app .ssf-photo-gallery__header { padding-bottom: 4px !important; }

/* ================================================================== alto contraste e movimento reduzido */
body.ssf-contrast .ssf-m-appbar, body.ssf-contrast .ssf-m-tabbar { background: #000; border-color: #99ca45; }
body.ssf-contrast .ssf-m-brand, body.ssf-contrast .ssf-m-brand__t small { color: #99ca45; }
body.ssf-contrast .ssf-m-iconbtn, body.ssf-contrast .ssf-m-sheet__close { background: #1a1a1a; color: #99ca45; }
body.ssf-contrast .ssf-m-tab { color: #fff; }
body.ssf-contrast .ssf-m-tab.is-active { background: #99ca45; color: #000; }
body.ssf-contrast .ssf-m-sheet { background: #000; }
body.ssf-contrast .ssf-m-sheet__head h2, body.ssf-contrast .ssf-m-group h3, body.ssf-contrast .ssf-m-hint { color: #99ca45; }
body.ssf-contrast .ssf-m-group, body.ssf-contrast .ssf-m-act, body.ssf-contrast .ssf-m-chip, body.ssf-contrast .ssf-m-search { background: #111; border-color: #fff; color: #fff; }
body.ssf-contrast .ssf-m-row, body.ssf-contrast .ssf-m-acc summary, body.ssf-contrast .ssf-m-sub, body.ssf-contrast .ssf-m-row__t small, body.ssf-contrast .ssf-m-chip, body.ssf-contrast .ssf-m-act, body.ssf-contrast .ssf-m-search input, body.ssf-contrast .ssf-m-menufoot p { color: #fff; }
body.ssf-contrast .ssf-m-tile { background: #000; border: 2px solid #99ca45; }

@media (prefers-reduced-motion: reduce) {
	html.ssf-app .ssf-m-sheet, html.ssf-app .ssf-m-backdrop, .ssf-m-acc__chev svg { transition: none; }
}