/* ============================================================
   MICRO-FEEDBACK — rolagem, botões, toasts, abas com linha de tinta e vidro 3D nos blocos de resumo.
   Compartilhado por todas as páginas (ver static/js/micro-feedback.js).
   O afundar do botão (scale .96) é feito por JS via Web Animations,
   porque um :active com "transition" aqui sobrescreveria a lista de
   transições que cada botão já tem.
   Seletores dos toasts usam ".toast-container .toast" de propósito:
   precisam vencer as regras ".toast" de landing.css e reunioes.css
   independentemente da ordem em que os CSS são carregados.
   ============================================================ */

/* ---------- barras de rolagem (padrão da plataforma, vale pra todas as telas) ----------
   Fina, em pílula, na cor do tema. ::-webkit-scrollbar cobre Chrome/Edge/Safari; o
   @supports cobre o Firefox, que ignora o webkit. Os dois não podem coexistir: no Chrome
   recente, scrollbar-width/scrollbar-color anulam o ::-webkit-scrollbar. Para uma área
   específica sem estilo (ou diferente), sobrescreva com um seletor mais específico. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb, 124, 58, 237), 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background: rgba(var(--accent-rgb, 124, 58, 237), 0.75);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb, 124, 58, 237), 0.55) rgba(128, 128, 128, 0.1);
  }
}

/* ---------- onda nos botões ---------- */
.fx-ripples {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  animation: fx-ripple 0.6s ease-out forwards;
}
@keyframes fx-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- toasts ---------- */
.toast-container .toast {
  position: relative;
  overflow: hidden;
  animation: fx-toast-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transition: opacity 0.2s ease, transform 0.2s ease, height 0.2s ease, padding 0.2s ease, margin 0.2s ease, border-width 0.2s ease;
}
@keyframes fx-toast-in {
  0%   { opacity: 0; transform: translateX(48px) scale(0.95); }
  100% { opacity: 1; transform: none; }
}
/* a saída fecha o espaço (a altura é fixada em px por micro-feedback.js) */
.toast-container .toast.leaving {
  animation: none;
  opacity: 0;
  transform: translateX(36px);
  height: 0 !important;
  padding-block: 0;
  margin-top: -0.6rem; /* cancela o gap do container */
  border-width: 0;
}

/* ícone de status desenhado */
.toast .fx-ic {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.toast.success .fx-ic, .toast.success .fx-tprog { color: #4ade80; }
.toast.error .fx-ic, .toast.error .fx-tprog { color: #f87171; }
.toast.warning .fx-ic, .toast.warning .fx-tprog { color: #fbbf24; }
.fx-ic .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fx-dash 0.5s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.fx-ic .d2 { animation-delay: 0.32s; }
.fx-ic .d3 { animation-delay: 0.5s; }
.fx-ic .pop { transform-origin: center; animation: fx-pop 0.45s 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) backwards; }
@keyframes fx-dash { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { from { transform: scale(0.4); opacity: 0; } }

/* barra de tempo restante; pausa enquanto o mouse está sobre o toast */
.fx-tprog {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  opacity: 0.75;
  transform-origin: left;
  animation: fx-tprog 4.5s linear forwards;
}
.toast:hover .fx-tprog { animation-play-state: paused; }
@keyframes fx-tprog { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .fx-ripple { display: none; }
  .toast-container .toast { animation: none; }
  .fx-ic .d { animation: none; stroke-dashoffset: 0; }
  .fx-ic .pop { animation: none; }
}

/* ============================================================
   ABAS — "linha de tinta" (ver micro-feedback.js, seção ABAS).
   Vale para as abas sublinhadas da plataforma (.tab-buttons, .tabs,
   .template-tabs, .tabbar). A linha fica branca em repouso; ao trocar de aba a
   cor recua do texto antigo pro centro, vira gota, cai na linha, a linha
   corre até a nova aba e arremessa a gota no texto novo.
   ============================================================ */
[data-ti] {
  position: relative;
  --ti-rise: 24px; /* distância linha -> centro do texto (o JS ajusta) */
  --ti-muted: var(--text-muted, #7c8798);
  --ti-hover: var(--text-secondary, #94a3b8);
  --ti-accent: var(--accent-light, #a78bfa);
  --ti-rgb: var(--accent-rgb, 124, 58, 237);
}
/* a linha própria da página (border-bottom do botão ativo) dá lugar à linha de tinta */
[data-ti] > .tab-button,
[data-ti] > .tab-btn {
  position: relative;
  border-bottom-color: transparent !important;
  /* respiro de 7px a mais entre o texto e a linha (mesmo ajuste feito na tela de Obras) */
  padding-bottom: calc(0.8rem + 7px);
}
/* as abas menores dos modelos de contrato têm padding próprio (0.55rem) */
.template-tabs[data-ti] > .tab-btn {
  padding-bottom: calc(0.55rem + 7px);
}
.ti-c {
  display: inline-block;
  white-space: pre;
  color: var(--ti-muted);
  transition: color 0.35s ease, text-shadow 0.35s ease;
  transition-delay: var(--dr, 0ms); /* ao sair: das pontas pro centro */
}
.ti-c.on {
  color: var(--ti-accent);
  text-shadow: 0 0 10px rgba(var(--ti-rgb), 0.45), 0 0 22px rgba(var(--ti-rgb), 0.18);
  transition-duration: 0.7s, 0.8s;
  transition-delay: var(--d, 0ms); /* ao entrar: do centro pras pontas, depois da gota bater */
}
[data-ti] > button:hover:not(.active) .ti-c:not(.on) {
  color: var(--ti-hover);
  transition-delay: 0s;
}

.ti-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--ti-rgb));
  box-shadow: 0 0 6px 1px rgba(var(--ti-rgb), 0.9), 0 0 16px 3px rgba(var(--ti-rgb), 0.5);
  transform-origin: 50% 100%;
  transition: left 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), top 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), width 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), background 0.15s ease, box-shadow 0.15s ease;
}
.ti-light.idle {
  background: #e9eef4;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.5), 0 0 14px 2px rgba(255, 255, 255, 0.18);
  transition: left 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), top 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), width 0.5s cubic-bezier(0.3, 1.4, 0.4, 1), background 1.3s ease, box-shadow 1.3s ease;
}
/* o pulso cresce pra cima (origem embaixo): crescer pra baixo criaria barra de rolagem na lista */
.ti-light.hit { animation: ti-impacto 0.55s ease-out; }
@keyframes ti-impacto {
  0%   { transform: scaleY(1); }
  35%  { transform: scaleY(2.6); box-shadow: 0 0 10px 3px rgba(var(--ti-rgb), 1), 0 0 28px 8px rgba(var(--ti-rgb), 0.6); }
  100% { transform: scaleY(1); }
}

/* gota que sobe da linha pro texto (ponta pra baixo, presa à linha) */
.ti-drop {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 10px;
  height: 14px;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(var(--ti-rgb), 0.85));
}
.ti-drop::before,
.ti-fall::before {
  content: "";
  position: absolute;
  inset: 0;
}
.ti-drop::before {
  background: radial-gradient(circle at 38% 34%, #fff 0%, rgb(var(--ti-rgb)) 52%, rgba(var(--ti-rgb), 0.92) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 14C3 11 0 9 0 5a5 5 0 0 1 10 0c0 4-3 6-5 9z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 14C3 11 0 9 0 5a5 5 0 0 1 10 0c0 4-3 6-5 9z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.ti-light.sweeping .ti-drop { animation: ti-gota-sobe 1.1s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
@keyframes ti-gota-sobe {
  0%   { transform: translate(-50%, 0) scale(0.3, 0.12); opacity: 0; }
  10%  { transform: translate(-50%, 0) scale(1.1, 0.3); opacity: 1; }
  34%  { transform: translate(-50%, calc(var(--ti-rise) * -0.4)) scale(0.78, 1.35); opacity: 1; }
  60%  { transform: translate(-50%, calc(var(--ti-rise) * -0.85)) scale(1, 1); opacity: 1; }
  70%  { transform: translate(-50%, calc(var(--ti-rise) * -0.95)) scale(1.25, 0.72); opacity: 1; }
  100% { transform: translate(-50%, calc(var(--ti-rise) * -1)) scale(3.6, 1.1); opacity: 0; }
}

/* gota que cai do texto antigo na linha (ponta pra cima, parte redonda embaixo) */
.ti-fall {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(var(--ti-rgb), 0.85));
}
.ti-fall::before {
  background: radial-gradient(circle at 38% 64%, #fff 0%, rgb(var(--ti-rgb)) 52%, rgba(var(--ti-rgb), 0.92) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0C7 3 10 5 10 9a5 5 0 0 1-10 0C0 5 3 3 5 0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0C7 3 10 5 10 9a5 5 0 0 1-10 0C0 5 3 3 5 0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* mancha de tinta que se alastra pelo texto novo depois do impacto
   (cresce só até 100%: passar disso criaria rolagem horizontal na lista) */
[data-ti] > button::before {
  content: "";
  position: absolute;
  inset: 5px 6px;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--ti-rgb), 0.3), rgba(var(--ti-rgb), 0.1) 60%, transparent);
  opacity: 0;
  transform: scale(0.05, 0.5);
}
[data-ti] > button.ti-ink::before { animation: ti-mancha 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) 0.62s backwards; }
@keyframes ti-mancha {
  0%   { transform: scale(0.05, 0.5); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1, 1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ti-light, .ti-c { transition: none !important; }
  .ti-light.hit, .ti-light.sweeping .ti-drop, [data-ti] > button.ti-ink::before { animation: none !important; }
}

/* ============================================================
   VIDRO 3D — blocos de resumo de dados (ver micro-feedback.js, seção VIDRO).
   Vale para:  Obras ........ .summary-stats .stat-tile
               Receita ...... .kpi-strip .kpi-card
               Perfis/Contrato .profile-hero__kpis .hero-kpi
   Os blocos mantêm o padding e o raio de cada tela (exceto os de Obras);
   aqui entram translucidez, arestas, sombra e a inclinação 3D.
   Para um bloco ficar de fora: data-glass="off" nele ou no contêiner.
   ============================================================ */

/* luzes coloridas atrás dos blocos: sem nada atrás, o vidro não tem o que desfocar */
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) {
  position: relative;
  isolation: isolate;
}
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"])::before {
  content: "";
  position: absolute;
  inset: -34px 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(14px);
  background:
    radial-gradient(220px 110px at 7% 50%, rgba(var(--accent-rgb, 124, 58, 237), 0.20), transparent 70%),
    radial-gradient(240px 120px at 26% 78%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(220px 110px at 44% 30%, rgba(144, 133, 233, 0.14), transparent 70%),
    radial-gradient(220px 110px at 62% 70%, rgba(var(--accent-rgb, 124, 58, 237), 0.09), transparent 70%),
    radial-gradient(200px 100px at 78% 35%, rgba(var(--warn-rgb, 243, 179, 95), 0.06), transparent 70%);
}
.kpi-strip:not([data-glass="off"])::before {
  background:
    radial-gradient(260px 120px at 16% 50%, rgba(var(--accent-rgb, 124, 58, 237), 0.20), transparent 70%),
    radial-gradient(260px 120px at 50% 60%, rgba(59, 130, 246, 0.15), transparent 70%),
    radial-gradient(260px 120px at 84% 45%, rgba(144, 133, 233, 0.14), transparent 70%);
}
.summary-stats:not([data-glass="off"]) { gap: 14px; padding: 6px 2px; }

:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi) {
  --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; --mx: 28%; --my: 0%;
  position: relative;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
          backdrop-filter: blur(16px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),          /* aresta de cima */
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),               /* aresta de baixo no escuro */
    inset 0 -14px 22px -14px rgba(0, 0, 0, 0.28),      /* espessura do vidro */
    0 16px 30px -14px rgba(0, 0, 0, 0.8),
    0 3px 7px rgba(0, 0, 0, 0.28);
  /* o levantamento usa a propriedade "translate" (transiciona sem brigar com a inclinação);
     o transform só existe no hover, pra não criar uma camada 3D por bloco em repouso */
  translate: 0 0;
  transition: transform 0.3s ease, translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.summary-stats:not([data-glass="off"]) > .stat-tile { min-width: 122px; padding: 14px 18px 13px; border-radius: 18px; }

/* brilho especular que segue o mouse */
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s;
  background: radial-gradient(170px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.15), transparent 62%);
}
/* reflexo diagonal fixo, como luz batendo na superfície */
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi)::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 30%, rgba(255, 255, 255, 0) 44%);
}
/* o conteúdo desliza um pouco em relação ao vidro: dá profundidade */
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi) > * {
  position: relative;
  z-index: 1;
  translate: var(--px) var(--py);
}
.summary-stats:not([data-glass="off"]) > .stat-tile .n,
.kpi-strip:not([data-glass="off"]) > .kpi-card .kpi-value,
.profile-hero__kpis:not([data-glass="off"]) > .hero-kpi strong { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi):hover {
  transform: perspective(720px) rotateX(var(--rx)) rotateY(var(--ry));
  translate: 0 -4px;
  transition: transform 0s, translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 -14px 22px -14px rgba(0, 0, 0, 0.28),
    0 26px 38px -16px rgba(0, 0, 0, 0.85),
    0 6px 12px rgba(0, 0, 0, 0.3);
}
:is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi):hover::before { opacity: 1; }

/* Obras: blocos de destaque (ciano) e de alerta (âmbar) viram vidro colorido */
.summary-stats:not([data-glass="off"]) > .stat-tile.accent {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.30) 0%, rgba(var(--accent-rgb), 0.09) 50%, rgba(var(--accent-rgb), 0.16) 100%);
  border-color: rgba(var(--accent-rgb), 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 1px 0 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 -14px 22px -14px rgba(0, 0, 0, 0.25),
    0 0 24px -8px rgba(var(--accent-rgb), 0.24), 0 16px 30px -14px rgba(0, 0, 0, 0.8), 0 3px 7px rgba(0, 0, 0, 0.28);
}
.summary-stats:not([data-glass="off"]) > .stat-tile.accent .n { color: #aeeaf4; }
.summary-stats:not([data-glass="off"]) > .stat-tile.accent .l { color: #7fd3e2; opacity: 1; }
.summary-stats:not([data-glass="off"]) > .stat-tile.warn {
  background: linear-gradient(150deg, rgba(var(--warn-rgb, 243, 179, 95), 0.28) 0%, rgba(var(--warn-rgb, 243, 179, 95), 0.08) 50%, rgba(var(--warn-rgb, 243, 179, 95), 0.15) 100%);
  border-color: rgba(var(--warn-rgb, 243, 179, 95), 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 1px 0 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.28), inset 0 -14px 22px -14px rgba(0, 0, 0, 0.25),
    0 0 24px -8px rgba(var(--warn-rgb, 243, 179, 95), 0.2), 0 16px 30px -14px rgba(0, 0, 0, 0.8), 0 3px 7px rgba(0, 0, 0, 0.28);
}
.summary-stats:not([data-glass="off"]) > .stat-tile.warn .n { color: #f3d6a8; }
.summary-stats:not([data-glass="off"]) > .stat-tile.warn .l { color: #e6b878; opacity: 1; }

/* celular: vidro sem desfoque (mais leve), sem luzes de fundo pesadas */
@media (max-width: 640px) {
  :is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"]) > :is(.stat-tile, .kpi-card, .hero-kpi) {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  }
  :is(.summary-stats, .kpi-strip, .profile-hero__kpis):not([data-glass="off"])::before { filter: none; opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.summary-stats, .kpi-strip, .profile-hero__kpis) > :is(.stat-tile, .kpi-card, .hero-kpi) { transition: none; }
}