/* ======================================================================
   R2.1T.V2 | Direcao de Arte Final - Palacio Civico Vivo
   Camada visual carregada depois do Sistema Visual Territorial V1.

   Objetivos:
   1. transformar consistencia em identidade memoravel;
   2. criar hierarquia visual entre salao principal, leitura e acao;
   3. dar uma cor funcional a cada momento do ciclo territorial;
   4. orientar sem criar ranking, urgencia artificial ou decoracao vazia;
   5. preservar acessibilidade, responsividade e reduced motion.
   ====================================================================== */

:root {
    --tv2-art-ink: #0d1d38;
    --tv2-art-text: #384a68;
    --tv2-art-muted: #71809a;
    --tv2-art-line: rgba(74, 95, 144, .14);
    --tv2-art-line-strong: rgba(74, 95, 144, .24);
    --tv2-art-surface: rgba(255, 255, 255, .82);
    --tv2-art-surface-strong: rgba(255, 255, 255, .96);
    --tv2-art-accent: #6f5ce7;
    --tv2-art-accent-rgb: 111, 92, 231;
    --tv2-art-accent-2: #3e7be8;
    --tv2-art-accent-2-rgb: 62, 123, 232;
    --tv2-art-radius: 30px;
    --tv2-art-radius-hero: 42px;
    --tv2-art-shadow:
        0 1px 0 rgba(255, 255, 255, .96) inset,
        0 18px 55px rgba(43, 59, 99, .08),
        0 6px 18px rgba(43, 59, 99, .04);
    --tv2-art-shadow-up:
        0 1px 0 rgba(255, 255, 255, .98) inset,
        0 28px 72px rgba(43, 59, 99, .12),
        0 8px 24px rgba(43, 59, 99, .06);
}

/* ----------------------------------------------------------------------
   01 | Cor funcional por momento do ciclo
   ---------------------------------------------------------------------- */
body.tv2-context-active,
.tv2-page,
.tv2-public-body,
.tv2-public-page {
    --tv2-art-accent: #6f5ce7;
    --tv2-art-accent-rgb: 111, 92, 231;
    --tv2-art-accent-2: #3e7be8;
    --tv2-art-accent-2-rgb: 62, 123, 232;
}

body.tv2-module-vision,
.tv2-vision-page {
    --tv2-art-accent: #159bb6;
    --tv2-art-accent-rgb: 21, 155, 182;
    --tv2-art-accent-2: #6b5de5;
    --tv2-art-accent-2-rgb: 107, 93, 229;
}

body.tv2-module-square,
.tv2-square-page {
    --tv2-art-accent: #7155db;
    --tv2-art-accent-rgb: 113, 85, 219;
    --tv2-art-accent-2: #1ba0c2;
    --tv2-art-accent-2-rgb: 27, 160, 194;
}

body.tv2-module-agenda,
.tv2-agenda-page {
    --tv2-art-accent: #8b61d7;
    --tv2-art-accent-rgb: 139, 97, 215;
    --tv2-art-accent-2: #d49b34;
    --tv2-art-accent-2-rgb: 212, 155, 52;
}

body.tv2-module-action,
.tv2-action-page {
    --tv2-art-accent: #d86465;
    --tv2-art-accent-rgb: 216, 100, 101;
    --tv2-art-accent-2: #df8a36;
    --tv2-art-accent-2-rgb: 223, 138, 54;
}

body.tv2-module-transition,
.tv2-transition-page {
    --tv2-art-accent: #3c72df;
    --tv2-art-accent-rgb: 60, 114, 223;
    --tv2-art-accent-2: #18a2bb;
    --tv2-art-accent-2-rgb: 24, 162, 187;
}

body.tv2-module-institutional,
.tv2-institutional-page,
.tv2-protocol-page {
    --tv2-art-accent: #376bce;
    --tv2-art-accent-rgb: 55, 107, 206;
    --tv2-art-accent-2: #2e9c78;
    --tv2-art-accent-2-rgb: 46, 156, 120;
}

body.tv2-module-governance,
.tv2-governance-page {
    --tv2-art-accent: #7456d7;
    --tv2-art-accent-rgb: 116, 86, 215;
    --tv2-art-accent-2: #bd55b4;
    --tv2-art-accent-2-rgb: 189, 85, 180;
}

body.tv2-module-horizon,
.tv2-hv-page,
.tv2-hv-public {
    --tv2-art-accent: #168fae;
    --tv2-art-accent-rgb: 22, 143, 174;
    --tv2-art-accent-2: #4d68df;
    --tv2-art-accent-2-rgb: 77, 104, 223;
}

body.tv2-module-memory,
.tv2-temporal-page,
.tv2-temporal-public {
    --tv2-art-accent: #bd8731;
    --tv2-art-accent-rgb: 189, 135, 49;
    --tv2-art-accent-2: #745bd5;
    --tv2-art-accent-2-rgb: 116, 91, 213;
}

body.tv2-module-regional {
    --tv2-art-accent: #278e70;
    --tv2-art-accent-rgb: 39, 142, 112;
    --tv2-art-accent-2: #2498ba;
    --tv2-art-accent-2-rgb: 36, 152, 186;
}

body.tv2-module-realization,
.tv2-realization-page {
    --tv2-art-accent: #d47a32;
    --tv2-art-accent-rgb: 212, 122, 50;
    --tv2-art-accent-2: #a84db0;
    --tv2-art-accent-2-rgb: 168, 77, 176;
}

body.tv2-module-moderation,
.tv2-moderation-page {
    --tv2-art-accent: #b65f70;
    --tv2-art-accent-rgb: 182, 95, 112;
    --tv2-art-accent-2: #7155d8;
    --tv2-art-accent-2-rgb: 113, 85, 216;
}

/* ----------------------------------------------------------------------
   02 | Contexto civico do shell
   ---------------------------------------------------------------------- */
body.tv2-context-active {
    --cr-page-bg: #f6f8fd;
}

body.tv2-context-active .cr-topbar {
    border-bottom-color: rgba(var(--tv2-art-accent-rgb), .10) !important;
    background:
        radial-gradient(760px 180px at 15% 0%, rgba(var(--tv2-art-accent-rgb), .07), transparent 62%),
        radial-gradient(760px 180px at 85% 0%, rgba(var(--tv2-art-accent-2-rgb), .055), transparent 62%),
        rgba(255,255,255,.91) !important;
    box-shadow: 0 10px 34px rgba(34,50,88,.075) !important;
}

body.tv2-context-active .cr-iconbtn,
body.tv2-context-active .cr-user__btn {
    color: #273a5d !important;
    border-color: rgba(var(--tv2-art-accent-rgb), .11) !important;
    background: rgba(255,255,255,.82) !important;
}

body.tv2-context-active .cr-topbar input,
body.tv2-context-active .cr-topbar .form-control {
    color: #263a5c !important;
    border-color: rgba(var(--tv2-art-accent-rgb), .12) !important;
    background: rgba(250,252,255,.88) !important;
}

body.tv2-context-active #sidebarLeft {
    border-right-color: rgba(var(--tv2-art-accent-rgb), .11);
    background:
        radial-gradient(360px 260px at 0 0, rgba(var(--tv2-art-accent-rgb), .055), transparent 72%),
        rgba(255, 255, 255, .96);
}

body.tv2-context-active #sidebarLeft .sidebar-menu-item.active > .sidebar-menu-button,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.is-active > .sidebar-menu-button,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.open > .sidebar-menu-button {
    color: #26375a;
    border-color: rgba(var(--tv2-art-accent-rgb), .18);
    background: linear-gradient(135deg, rgba(var(--tv2-art-accent-rgb), .11), rgba(var(--tv2-art-accent-2-rgb), .07));
    box-shadow: 0 10px 26px rgba(var(--tv2-art-accent-rgb), .09);
}

body.tv2-context-active #sidebarLeft .sidebar-menu-item.active .sidebar-menu-icon,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.is-active .sidebar-menu-icon {
    color: var(--tv2-art-accent);
}

/* ----------------------------------------------------------------------
   03 | Campo espacial do Palacio Civico Vivo
   ---------------------------------------------------------------------- */
.tv2-page,
.tv2-public-body,
.tv2-public-page {
    position: relative;
    isolation: isolate;
}

.tv2-page::before,
.tv2-public-body::before,
.tv2-public-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 11%, rgba(var(--tv2-art-accent-rgb), .065) 0 1px, transparent 1.8px) 0 0 / 32px 32px,
        radial-gradient(circle at 80% 18%, rgba(var(--tv2-art-accent-2-rgb), .05) 0 1px, transparent 1.7px) 0 0 / 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.50), transparent 70%);
    opacity: .72;
}

.tv2-page::after,
.tv2-public-body::after,
.tv2-public-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 58vw;
    height: 58vw;
    max-width: 960px;
    max-height: 960px;
    right: -24vw;
    top: 6vh;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--tv2-art-accent-rgb), .07), transparent 67%);
    filter: blur(8px);
}

.tv2-page .tv2-container {
    width: min(1540px, calc(100% - 42px));
}

/* ----------------------------------------------------------------------
   04 | Salao principal e herois
   ---------------------------------------------------------------------- */
.tv2-hero,
.tv2-agenda-hero,
.tv2-curatorship-hero,
.tv2-hv-hero,
.tv2-governance-hero,
.tv2-institutional-hero,
.tv2-protocol-hero,
.tv2-temporal-hero,
.tv2-moderation-hero,
.tv2-action-hero,
.tv2-realization-hero,
.tv2-region-hero,
.tv2-regional-hero,
.tv2-square-hero,
.tv2-transition-hero,
.tv2-transition-form-hero,
.tv2-vision-intro,
.tv2-public-hero,
.tv2-hv-public-hero,
.tv2-temporal-public-hero,
.tv2-regional-public-hero,
.tv2-public-governance-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--tv2-art-radius-hero) !important;
    border-color: rgba(var(--tv2-art-accent-rgb), .15) !important;
    background:
        radial-gradient(700px 360px at 100% 0%, rgba(var(--tv2-art-accent-2-rgb), .11), transparent 72%),
        radial-gradient(640px 420px at 0% 100%, rgba(var(--tv2-art-accent-rgb), .10), transparent 72%),
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(251,253,255,.76)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.98) inset,
        0 32px 90px rgba(35, 51, 91, .10),
        0 8px 24px rgba(35, 51, 91, .05) !important;
}

.tv2-hero::before,
.tv2-agenda-hero::before,
.tv2-curatorship-hero::before,
.tv2-hv-hero::before,
.tv2-governance-hero::before,
.tv2-institutional-hero::before,
.tv2-protocol-hero::before,
.tv2-temporal-hero::before,
.tv2-moderation-hero::before,
.tv2-action-hero::before,
.tv2-realization-hero::before,
.tv2-region-hero::before,
.tv2-regional-hero::before,
.tv2-square-hero::before,
.tv2-transition-hero::before,
.tv2-transition-form-hero::before,
.tv2-vision-intro::before,
.tv2-public-hero::before,
.tv2-hv-public-hero::before,
.tv2-temporal-public-hero::before,
.tv2-regional-public-hero::before,
.tv2-public-governance-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    right: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--tv2-art-accent-rgb), .52), rgba(var(--tv2-art-accent-2-rgb), .40), transparent);
    pointer-events: none;
}

.tv2-hero::after,
.tv2-agenda-hero::after,
.tv2-curatorship-hero::after,
.tv2-governance-hero::after,
.tv2-institutional-hero::after,
.tv2-moderation-hero::after,
.tv2-action-hero::after,
.tv2-realization-hero::after,
.tv2-square-hero::after,
.tv2-transition-hero::after,
.tv2-transition-form-hero::after,
.tv2-vision-intro::after,
.tv2-public-hero::after,
.tv2-public-governance-hero::after {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    right: -110px;
    bottom: -150px;
    border: 1px solid rgba(var(--tv2-art-accent-rgb), .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 38px rgba(var(--tv2-art-accent-rgb), .025),
        0 0 0 78px rgba(var(--tv2-art-accent-2-rgb), .018);
    pointer-events: none;
}

.tv2-page h1,
.tv2-public-page h1,
.tv2-public-body h1 {
    max-width: 1060px;
    margin-top: .16em;
    color: var(--tv2-art-ink) !important;
    font-size: clamp(2.25rem, 4vw, 4.65rem);
    line-height: .99;
    letter-spacing: -.052em;
    text-wrap: balance;
}

.tv2-page h2,
.tv2-public-page h2,
.tv2-public-body h2 {
    color: var(--tv2-art-ink) !important;
    font-size: clamp(1.45rem, 2.05vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.tv2-page h3,
.tv2-public-page h3,
.tv2-public-body h3 {
    letter-spacing: -.025em;
}

.tv2-section-kicker,
.tv2-kicker,
.tv2-hv-public-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in srgb, var(--tv2-art-accent) 76%, #243553) !important;
    font-size: .73rem;
    text-transform: uppercase;
}

.tv2-section-kicker::before,
.tv2-kicker::before,
.tv2-hv-public-kicker::before {
    content: "";
    width: 19px;
    height: 1px;
    background: linear-gradient(90deg, var(--tv2-art-accent), var(--tv2-art-accent-2));
    box-shadow: 0 0 12px rgba(var(--tv2-art-accent-rgb), .34);
}

/* ----------------------------------------------------------------------
   05 | Superficies, secoes e profundidade
   ---------------------------------------------------------------------- */
.tv2-glass {
    border-color: rgba(var(--tv2-art-accent-rgb), .11) !important;
    box-shadow: var(--tv2-art-shadow) !important;
}

.tv2-container > section,
.tv2-container > .tv2-glass,
.tv2-public-page main > section,
.tv2-public-body main > section {
    position: relative;
}

.tv2-container > section[data-tv2-section-index]::before,
.tv2-container > .tv2-glass[data-tv2-section-index]::before {
    content: attr(data-tv2-section-index);
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 18px;
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--tv2-art-accent-rgb), .12);
    border-radius: 999px;
    color: rgba(57, 73, 108, .48);
    background: rgba(255,255,255,.62);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .07em;
    pointer-events: none;
}

.tv2-page article,
.tv2-public-page article,
.tv2-public-body article {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

.tv2-page a:not(.tv2-button):hover article,
.tv2-page article:hover,
.tv2-public-page a:not(.tv2-button):hover article,
.tv2-public-body a:not(.tv2-button):hover article {
    border-color: rgba(var(--tv2-art-accent-rgb), .18);
}

/* Evita elevar elementos que sao parte de mapas, linhas do tempo ou grids decorativos. */
.tv2-page article.tv2-map-context,
.tv2-page .tv2-realization-map article,
.tv2-page .tv2-agenda-time-map article {
    transform: none;
}

/* ----------------------------------------------------------------------
   06 | Botoes como gestos civicos
   ---------------------------------------------------------------------- */
.tv2-button {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 999px !important;
    font-weight: 850;
}

.tv2-button--primary {
    border-color: rgba(255,255,255,.25) !important;
    background: linear-gradient(135deg, var(--tv2-art-accent), var(--tv2-art-accent-2)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.28) inset,
        0 14px 32px rgba(var(--tv2-art-accent-rgb), .22) !important;
}

.tv2-button--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.22) 48%, transparent 72%);
    transition: transform .42s ease;
    pointer-events: none;
}

.tv2-button--primary:hover::after,
.tv2-button--primary:focus-visible::after {
    transform: translateX(110%);
}

.tv2-button--primary:hover,
.tv2-button--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.30) inset,
        0 20px 42px rgba(var(--tv2-art-accent-rgb), .29) !important;
}

.tv2-button--glass {
    border-color: rgba(var(--tv2-art-accent-rgb), .13) !important;
    background: rgba(255,255,255,.79) !important;
}

.tv2-button--glass:hover,
.tv2-button--glass:focus-visible {
    border-color: rgba(var(--tv2-art-accent-rgb), .26) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 12px 28px rgba(var(--tv2-art-accent-rgb), .10) !important;
}

/* ----------------------------------------------------------------------
   07 | Formularios como instrumentos de deliberacao
   ---------------------------------------------------------------------- */
.tv2-page input,
.tv2-page select,
.tv2-page textarea,
.tv2-public-body input,
.tv2-public-body select,
.tv2-public-body textarea,
.tv2-public-page input,
.tv2-public-page select,
.tv2-public-page textarea {
    min-height: 45px;
    border-radius: 15px !important;
    border-color: rgba(73, 95, 143, .16) !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.tv2-page textarea,
.tv2-public-body textarea,
.tv2-public-page textarea {
    min-height: 116px;
    line-height: 1.58;
}

.tv2-page input:focus,
.tv2-page select:focus,
.tv2-page textarea:focus,
.tv2-public-body input:focus,
.tv2-public-body select:focus,
.tv2-public-body textarea:focus,
.tv2-public-page input:focus,
.tv2-public-page select:focus,
.tv2-public-page textarea:focus {
    border-color: rgba(var(--tv2-art-accent-rgb), .48) !important;
    box-shadow: 0 0 0 4px rgba(var(--tv2-art-accent-rgb), .105) !important;
}

.tv2-page label > span,
.tv2-page legend,
.tv2-public-body label > span,
.tv2-public-page label > span {
    margin-bottom: 6px;
    color: #273a5e !important;
    font-size: .78rem;
    font-weight: 850;
}

/* ----------------------------------------------------------------------
   08 | Numeros, metricas e paineis de leitura
   ---------------------------------------------------------------------- */
.tv2-page [class*="stat"] strong,
.tv2-page [class*="metric"] strong,
.tv2-page [class*="signal"] strong,
.tv2-public-body [class*="stat"] strong,
.tv2-public-page [class*="stat"] strong,
.tv2-public-page [class*="metric"] strong {
    font-variant-numeric: tabular-nums;
}

.tv2-page [class*="stat"] > article,
.tv2-page [class*="metric"] > article,
.tv2-public-page [class*="stat"] > article,
.tv2-public-body [class*="stat"] > article {
    border-color: rgba(var(--tv2-art-accent-rgb), .10) !important;
}

.tv2-page [class*="stat"] strong:first-child,
.tv2-page [class*="metric"] strong:first-child,
.tv2-public-page [class*="stat"] strong:first-child {
    color: color-mix(in srgb, var(--tv2-art-accent) 75%, #223657);
}

/* ----------------------------------------------------------------------
   09 | Vazio, alerta, memoria e estados
   ---------------------------------------------------------------------- */
.tv2-page [class*="empty"],
.tv2-public-page [class*="empty"],
.tv2-public-body [class*="empty"] {
    border-color: rgba(var(--tv2-art-accent-rgb), .15) !important;
}

.tv2-page [class*="empty"] .material-icons,
.tv2-public-page [class*="empty"] .material-icons,
.tv2-public-body [class*="empty"] .material-icons {
    color: var(--tv2-art-accent);
}

.tv2-install-warning,
.tv2-realization-warning,
.tv2-institutional-alert,
.tv2-transition-alert {
    border-color: rgba(211, 122, 59, .22) !important;
    background: linear-gradient(145deg, rgba(255,250,241,.95), rgba(255,255,255,.82)) !important;
}

/* ----------------------------------------------------------------------
   10 | Atlas Vivo com moldura territorial
   ---------------------------------------------------------------------- */
.tv2-map-panel {
    border-color: rgba(var(--tv2-art-accent-rgb), .13) !important;
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(var(--tv2-art-accent-2-rgb), .08), transparent 70%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,252,255,.76)) !important;
}

.tv2-atlas-map {
    border-color: rgba(var(--tv2-art-accent-rgb), .16);
    box-shadow:
        0 1px 0 rgba(255,255,255,.98) inset,
        0 22px 58px rgba(38, 57, 95, .10);
}

.tv2-map-marker {
    background: linear-gradient(145deg, var(--tv2-art-accent), var(--tv2-art-accent-2));
    box-shadow:
        0 0 0 2px rgba(var(--tv2-art-accent-rgb), .22),
        0 8px 20px rgba(var(--tv2-art-accent-rgb), .28);
}

.tv2-map-marker::after {
    border-color: rgba(var(--tv2-art-accent-rgb), .22);
}

/* ----------------------------------------------------------------------
   11 | Bussola civica e linha de leitura
   ---------------------------------------------------------------------- */
.tv2-reading-progress {
    position: fixed;
    z-index: 1205;
    top: var(--cr-topbar-h, 0px);
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    background: rgba(255,255,255,.30);
}

.tv2-reading-progress > i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--tv2-art-accent), var(--tv2-art-accent-2));
    box-shadow: 0 0 14px rgba(var(--tv2-art-accent-rgb), .44);
    transition: width .08s linear;
}

.tv2-civic-compass {
    position: fixed;
    z-index: 1200;
    top: calc(var(--cr-topbar-h, 64px) + 20px);
    right: 20px;
    width: 184px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--tv2-art-accent-rgb), .14);
    border-radius: 18px;
    color: #304360;
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 42px rgba(38,55,92,.11);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    pointer-events: none;
}

.tv2-civic-compass__row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tv2-civic-compass__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--tv2-art-accent), var(--tv2-art-accent-2));
    box-shadow: 0 8px 18px rgba(var(--tv2-art-accent-rgb), .20);
}

.tv2-civic-compass__icon .material-icons {
    font-size: 17px;
}

.tv2-civic-compass small {
    display: block;
    color: #7b879c;
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tv2-civic-compass strong {
    display: block;
    margin-top: 1px;
    color: #1e3153;
    font-size: .78rem;
    line-height: 1.15;
}

.tv2-civic-compass__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(var(--tv2-art-accent-rgb), .10);
    color: #7b879c;
    font-size: .62rem;
    font-weight: 760;
}

body.tv2-public-context .tv2-reading-progress {
    top: 0;
}

body.tv2-public-context .tv2-civic-compass {
    top: 18px;
}

/* ----------------------------------------------------------------------
   12 | Secoes em foco, sem transformar scroll em espetaculo
   ---------------------------------------------------------------------- */
.tv2-art-section {
    transition: border-color .25s ease, box-shadow .25s ease;
}

.tv2-art-section.is-tv2-current-section.tv2-glass {
    border-color: rgba(var(--tv2-art-accent-rgb), .19) !important;
}

/* ----------------------------------------------------------------------
   13 | Tabelas, listas e densidade institucional
   ---------------------------------------------------------------------- */
.tv2-page table,
.tv2-public-page table,
.tv2-public-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(73,95,143,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
}

.tv2-page th,
.tv2-public-page th,
.tv2-public-body th {
    color: #394b68;
    background: rgba(var(--tv2-art-accent-rgb), .045);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.tv2-page th,
.tv2-page td,
.tv2-public-page th,
.tv2-public-page td,
.tv2-public-body th,
.tv2-public-body td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(73,95,143,.09);
}

.tv2-page tr:last-child td,
.tv2-public-page tr:last-child td,
.tv2-public-body tr:last-child td {
    border-bottom: 0;
}

/* ----------------------------------------------------------------------
   14 | Ponte de Realizacao alinhada ao restante da Politeia
   ---------------------------------------------------------------------- */
.tv2-realization-page .tv2-realization-shell {
    min-height: 100%;
}

.tv2-realization-page .tv2-realization-map__source,
.tv2-realization-page .tv2-realization-target,
.tv2-realization-page .tv2-realization-link-card,
.tv2-realization-page .tv2-realization-candidate {
    border-color: rgba(var(--tv2-art-accent-rgb), .12) !important;
    box-shadow: var(--tv2-art-shadow);
}

.tv2-realization-page .tv2-realization-core {
    box-shadow:
        0 0 0 10px rgba(var(--tv2-art-accent-rgb), .06),
        0 18px 38px rgba(var(--tv2-art-accent-rgb), .18);
}

/* ----------------------------------------------------------------------
   15 | Publico e privado, mesma qualidade, densidades diferentes
   ---------------------------------------------------------------------- */
.tv2-public-body,
.tv2-public-page {
    --tv2-art-radius-hero: 38px;
}

.tv2-public-body main,
.tv2-public-page main {
    position: relative;
}

.tv2-public-nav,
.tv2-hv-public-nav {
    border-color: rgba(var(--tv2-art-accent-rgb), .11) !important;
    box-shadow: 0 14px 42px rgba(38,55,92,.075) !important;
}

.tv2-public-nav a:hover,
.tv2-hv-public-nav a:hover,
.tv2-public-nav a:focus-visible,
.tv2-hv-public-nav a:focus-visible {
    color: color-mix(in srgb, var(--tv2-art-accent) 78%, #253653) !important;
    background: rgba(var(--tv2-art-accent-rgb), .065);
}

/* ----------------------------------------------------------------------
   16 | Responsividade
   ---------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .tv2-civic-compass {
        display: none;
    }
}

@media (max-width: 900px) {
    :root {
        --tv2-art-radius: 24px;
        --tv2-art-radius-hero: 30px;
    }

    .tv2-page h1,
    .tv2-public-page h1,
    .tv2-public-body h1 {
        font-size: clamp(2rem, 8vw, 3.35rem);
        line-height: 1.02;
    }

    .tv2-container > section[data-tv2-section-index]::before,
    .tv2-container > .tv2-glass[data-tv2-section-index]::before {
        top: 12px;
        right: 12px;
        opacity: .72;
    }
}

@media (max-width: 680px) {
    .tv2-page .tv2-container,
    .tv2-public-body .tv2-container,
    .tv2-public-page .tv2-container,
    .tv2-hv-public-shell,
    .tv2-temporal-public-shell {
        width: min(100% - 18px, 1540px) !important;
    }

    .tv2-hero,
    .tv2-agenda-hero,
    .tv2-curatorship-hero,
    .tv2-hv-hero,
    .tv2-governance-hero,
    .tv2-institutional-hero,
    .tv2-protocol-hero,
    .tv2-temporal-hero,
    .tv2-moderation-hero,
    .tv2-action-hero,
    .tv2-realization-hero,
    .tv2-region-hero,
    .tv2-regional-hero,
    .tv2-square-hero,
    .tv2-transition-hero,
    .tv2-transition-form-hero,
    .tv2-vision-intro,
    .tv2-public-hero,
    .tv2-hv-public-hero,
    .tv2-temporal-public-hero,
    .tv2-regional-public-hero,
    .tv2-public-governance-hero {
        border-radius: 25px !important;
    }

    .tv2-reading-progress {
        height: 2px;
    }
}

/* ----------------------------------------------------------------------
   17 | Acessibilidade
   ---------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    .tv2-glass,
    .tv2-page input,
    .tv2-page select,
    .tv2-page textarea,
    .tv2-public-body input,
    .tv2-public-body select,
    .tv2-public-body textarea {
        border-color: rgba(30,49,83,.34) !important;
    }

    .tv2-page p,
    .tv2-page li,
    .tv2-public-page p,
    .tv2-public-page li,
    .tv2-public-body p,
    .tv2-public-body li {
        color: #293a56 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv2-button,
    .tv2-button::after,
    .tv2-page article,
    .tv2-public-page article,
    .tv2-public-body article,
    .tv2-art-section,
    .tv2-reading-progress > i {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ======================================================================
   R2.1T.V3 | Acabamento Responsivo e Congelamento Visual
   Camada final de polimento sobre o Palacio Civico Vivo.

   Escopo:
   1. ritmo tipografico e leitura longa;
   2. proporcao segura em desktop, notebook, tablet e mobile;
   3. foco, toque, contraste e estados vazios;
   4. tabelas, formularios e mapas responsivos;
   5. reducao de ruido visual sem alterar identidade funcional;
   6. congelamento da gramatica visual antes da homologacao H1.
   ====================================================================== */

/* 01 | Tipografia de leitura e hierarquia final */
.tv2-page h1,
.tv2-page h2,
.tv2-page h3,
.tv2-public-page h1,
.tv2-public-page h2,
.tv2-public-page h3,
.tv2-public-body h1,
.tv2-public-body h2,
.tv2-public-body h3 {
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.tv2-page p,
.tv2-page li,
.tv2-public-page p,
.tv2-public-page li,
.tv2-public-body p,
.tv2-public-body li {
    text-wrap: pretty;
}

.tv2-page :where(p, li),
.tv2-public-page :where(p, li),
.tv2-public-body :where(p, li) {
    line-height: 1.68;
}

.tv2-page :where(.tv2-section-kicker, small),
.tv2-public-page :where(.tv2-section-kicker, small),
.tv2-public-body :where(.tv2-section-kicker, small) {
    letter-spacing: .015em;
}

/* 02 | Ritmo arquitetonico comum */
.tv2-page .tv2-container,
.tv2-public-page .tv2-container,
.tv2-public-body .tv2-container {
    padding-block-end: clamp(42px, 7vw, 96px);
}

.tv2-page .tv2-art-section,
.tv2-public-page .tv2-art-section,
.tv2-public-body .tv2-art-section {
    scroll-margin-top: 104px;
}

.tv2-page .tv2-art-section + .tv2-art-section,
.tv2-public-page .tv2-art-section + .tv2-art-section,
.tv2-public-body .tv2-art-section + .tv2-art-section {
    margin-top: clamp(16px, 2.1vw, 30px);
}

.tv2-page .tv2-glass,
.tv2-public-page .tv2-glass,
.tv2-public-body .tv2-glass {
    overflow-wrap: anywhere;
}

/* 03 | Primeira dobra controlada, sem herois gigantes */
.tv2-page .tv2-container > .tv2-art-section:first-child,
.tv2-public-page .tv2-container > .tv2-art-section:first-child,
.tv2-public-body .tv2-container > .tv2-art-section:first-child {
    margin-top: clamp(14px, 2vw, 28px);
}

.tv2-page .tv2-container > .tv2-art-section:first-child h1,
.tv2-public-page .tv2-container > .tv2-art-section:first-child h1,
.tv2-public-body .tv2-container > .tv2-art-section:first-child h1 {
    max-width: 18ch;
}

.tv2-page .tv2-container > .tv2-art-section:first-child p,
.tv2-public-page .tv2-container > .tv2-art-section:first-child p,
.tv2-public-body .tv2-container > .tv2-art-section:first-child p {
    max-width: 74ch;
}

/* 04 | Acoes e alvos de toque */
.tv2-page :where(button, .btn, [role="button"], a.tv2-button),
.tv2-public-page :where(button, .btn, [role="button"], a.tv2-button),
.tv2-public-body :where(button, .btn, [role="button"], a.tv2-button) {
    min-height: 44px;
}

.tv2-page :where(a, button, input, select, textarea):focus-visible,
.tv2-public-page :where(a, button, input, select, textarea):focus-visible,
.tv2-public-body :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(var(--tv2-art-accent-rgb), .30) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(var(--tv2-art-accent-rgb), .08) !important;
}

.tv2-page :where(input, select, textarea),
.tv2-public-page :where(input, select, textarea),
.tv2-public-body :where(input, select, textarea) {
    max-width: 100%;
}

.tv2-page textarea,
.tv2-public-page textarea,
.tv2-public-body textarea {
    min-height: 118px;
    resize: vertical;
}

/* 05 | Tabelas e conteudo institucional denso */
.tv2-page table,
.tv2-public-page table,
.tv2-public-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tv2-page th,
.tv2-page td,
.tv2-public-page th,
.tv2-public-page td,
.tv2-public-body th,
.tv2-public-body td {
    vertical-align: top;
    line-height: 1.5;
}

.tv2-page th,
.tv2-public-page th,
.tv2-public-body th {
    color: var(--tv2-art-ink);
    font-weight: 750;
}

/* 06 | Estados vazios e mensagens, menos cara de erro tecnico */
.tv2-page :where([class*="empty"], [class*="warning"]),
.tv2-public-page :where([class*="empty"], [class*="warning"]),
.tv2-public-body :where([class*="empty"], [class*="warning"]) {
    border-radius: max(18px, calc(var(--tv2-art-radius) - 8px));
}

.tv2-page :where([class*="empty"], [class*="warning"]) .material-icons,
.tv2-public-page :where([class*="empty"], [class*="warning"]) .material-icons,
.tv2-public-body :where([class*="empty"], [class*="warning"]) .material-icons {
    flex: 0 0 auto;
}

/* 07 | Atlas Vivo, enquadramento final */
.tv2-map,
.tv2-map-canvas,
[data-tv2-map] {
    max-width: 100%;
    overscroll-behavior: contain;
}

.leaflet-container {
    font-family: inherit;
    background: #eef3fa;
}

.leaflet-control-zoom a {
    color: var(--tv2-art-ink) !important;
    background: rgba(255,255,255,.94) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    color: var(--tv2-art-text);
    background: rgba(255,255,255,.97);
}

/* 08 | Cards densos, sem saltos desnecessarios */
.tv2-page :where(article, section, aside).tv2-glass,
.tv2-public-page :where(article, section, aside).tv2-glass,
.tv2-public-body :where(article, section, aside).tv2-glass {
    contain: paint;
}

.tv2-page :where(.material-icons, .material-symbols-outlined),
.tv2-public-page :where(.material-icons, .material-symbols-outlined),
.tv2-public-body :where(.material-icons, .material-symbols-outlined) {
    flex-shrink: 0;
}

/* 09 | Notebooks e tablets */
@media (max-width: 1180px) {
    .tv2-page .tv2-container,
    .tv2-public-page .tv2-container,
    .tv2-public-body .tv2-container {
        width: min(100% - 30px, 1240px);
    }

    .tv2-page .tv2-art-section + .tv2-art-section,
    .tv2-public-page .tv2-art-section + .tv2-art-section,
    .tv2-public-body .tv2-art-section + .tv2-art-section {
        margin-top: 18px;
    }
}

@media (max-width: 900px) {
    .tv2-page,
    .tv2-public-page,
    .tv2-public-body {
        --tv2-art-radius: 24px;
        --tv2-art-radius-hero: 30px;
    }

    .tv2-page .tv2-container,
    .tv2-public-page .tv2-container,
    .tv2-public-body .tv2-container {
        width: min(100% - 24px, 760px);
    }

    .tv2-page .tv2-container > .tv2-art-section:first-child h1,
    .tv2-public-page .tv2-container > .tv2-art-section:first-child h1,
    .tv2-public-body .tv2-container > .tv2-art-section:first-child h1 {
        max-width: 22ch;
    }

    .tv2-page table,
    .tv2-public-page table,
    .tv2-public-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 10 | Mobile final */
@media (max-width: 680px) {
    .tv2-page .tv2-container,
    .tv2-public-page .tv2-container,
    .tv2-public-body .tv2-container {
        width: min(100% - 18px, 620px);
        padding-block-end: 54px;
    }

    .tv2-page .tv2-glass,
    .tv2-public-page .tv2-glass,
    .tv2-public-body .tv2-glass {
        border-radius: 20px !important;
    }

    .tv2-page h1,
    .tv2-public-page h1,
    .tv2-public-body h1 {
        font-size: clamp(1.85rem, 8vw, 2.55rem) !important;
        line-height: 1.04 !important;
    }

    .tv2-page h2,
    .tv2-public-page h2,
    .tv2-public-body h2 {
        font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
    }

    .tv2-page :where(.btn, button, a.tv2-button),
    .tv2-public-page :where(.btn, button, a.tv2-button),
    .tv2-public-body :where(.btn, button, a.tv2-button) {
        min-height: 46px;
    }

    .tv2-page :where(input, select),
    .tv2-public-page :where(input, select),
    .tv2-public-body :where(input, select) {
        min-height: 46px !important;
        font-size: 16px !important;
    }

    .tv2-page textarea,
    .tv2-public-page textarea,
    .tv2-public-body textarea {
        font-size: 16px !important;
    }

    .leaflet-control-attribution {
        max-width: 72vw;
        white-space: normal;
        line-height: 1.25;
    }
}

/* 11 | Contraste forcado e navegacao assistiva */
@media (forced-colors: active) {
    .tv2-page .tv2-glass,
    .tv2-public-page .tv2-glass,
    .tv2-public-body .tv2-glass {
        border: 1px solid CanvasText !important;
        box-shadow: none !important;
        background: Canvas !important;
    }

    .tv2-reading-progress > i {
        background: Highlight !important;
    }
}

/* 12 | Fallback para navegadores sem vidro */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .tv2-page .tv2-glass,
    .tv2-public-page .tv2-glass,
    .tv2-public-body .tv2-glass {
        background: rgba(255,255,255,.97) !important;
    }
}

/* 13 | Congelamento visual: nenhuma animacao e requisito de compreensao */
@media (prefers-reduced-motion: reduce) {
    .tv2-page *,
    .tv2-public-page *,
    .tv2-public-body * {
        scroll-behavior: auto !important;
    }
}

/* ======================================================================
   R2.1T.H1.1 | Homologacao runtime: casco e Ponte de Realizacao

   Corrige dois achados reais de runtime:
   1. item ativo da sidebar deve permanecer legivel em qualquer tema;
   2. Ponte de Realizacao nunca pode parecer vazia por falha de reveal.
   ====================================================================== */

/* 01 | Item territorial ativo sempre legivel */
body.tv2-context-active #sidebarLeft .sidebar-menu-item.active > .sidebar-menu-button,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.is-active > .sidebar-menu-button {
    color: #26375a !important;
    -webkit-text-fill-color: #26375a !important;
}

body.tv2-context-active #sidebarLeft .sidebar-menu-item.active > .sidebar-menu-button > span,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.is-active > .sidebar-menu-button > span,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.active > .sidebar-menu-button > .sidebar-menu-icon,
body.tv2-context-active #sidebarLeft .sidebar-menu-item.is-active > .sidebar-menu-button > .sidebar-menu-icon {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 02 | A Ponte inicia visivel ate o inicializador JS assumir o reveal.
   A classe is-visible continua preservando o comportamento comum. */
.tv2-realization-page[data-tv2-page] [data-tv2-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* 03 | Sidebar aberta nao deve alterar a legibilidade do canvas territorial. */
body.tv2-context-active.cr-sidebar-open .tv2-realization-page,
body.tv2-context-active:not(.cr-sidebar-closed) .tv2-realization-page {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tv2-realization-page[data-tv2-page] [data-tv2-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}