/* ============================================================
 * LifeOS · base.css · v4.0.0 (chassi)
 * ------------------------------------------------------------
 * O QUE ESTÁ AQUI: tudo que é "LifeOS" mas usado em 2+ páginas.
 * Layouts (body offset, sidebar), screens globais (login, loading),
 * + camada de compatibilidade legacy → Verdant durante a migração.
 *
 * O QUE NÃO ESTÁ AQUI:
 * - Componentes universais → /design-system/components.css
 * - CSS específico de uma única página → <pagina>/<pagina>.css
 *
 * Carregar nesta ordem:
 *   1. /design-system/tokens.css       (variáveis Verdant)
 *   2. /design-system/reset.css        (body, scroll, atmosfera)
 *   3. /design-system/components.css   (componentes .v-*)
 *   4. /assets/base.css                ← este
 *   5. <page>.css                      (específico)
 *
 * O carregamento é feito automaticamente por shared/sidebar.js
 * (que toda página importa via <script type="module" src=".../sidebar.js">).
 * ============================================================ */


/* ============================================================
 * § 1 · TOKENS DE CHASSI (valores sem equivalente no tokens.css)
 * ------------------------------------------------------------
 * A camada de alias legacy→Verdant foi REMOVIDA (migração de tokens
 * concluída: TODAS as superfícies — páginas, chassi, CSS injetado e Otto
 * — consomem os tokens canônicos do tokens.css). Aqui sobraram só os
 * valores de chassi que não têm equivalente Verdant: z-index, container
 * e breakpoints. Fontes/cores/raio/espaço agora vêm do tokens.css.
 * ============================================================ */
:root{
  /* z-index → valores fixos (precisos pra hierarquia) */
  --z-content:        1;
  --z-sidebar:        50;
  --z-dropdown:       200;
  --z-modal:          150;
  --z-modal-form:     200;
  --z-modal-bank:     215;
  --z-loading:        1000;
  --z-toast:          9000;
  --z-confirm:        9500;
  --z-critical:       99999;
  --z-otto-overlay:   100000;
  --z-otto-confirm:   200000;

  /* container global */
  --page-max:         1400px;
  --page-pad:         18px;

  /* breakpoints */
  --bp-mobile:        680px;
  --bp-tablet:        1100px;
  --bp-desktop:       1600px;
}


/* ============================================================
 * § 2 · BODY OFFSET PRA SIDEBAR
 * ------------------------------------------------------------
 * A sidebar global LifeOS é fixa lateral em desktop, drawer top em
 * mobile. Reserva o espaço dela no body.
 * (As regras visuais da própria sidebar continuam em assets/sidebar.css
 * por enquanto — durante migração consomem os aliases legacy acima.)
 * ============================================================ */
:root{
  --lifeos-sb-w:           240px;
  --lifeos-sb-w-collapsed: 64px;
  --lifeos-sb-topbar-h:    54px;
}
html.has-sidebar body{
  padding-left: var(--lifeos-sb-w);
}
html.has-sidebar.sidebar-collapsed body{
  padding-left: var(--lifeos-sb-w-collapsed);
}
@media (max-width: 1199px){
  html.has-sidebar body{
    padding-left: 0;
    padding-top: var(--lifeos-sb-topbar-h);
  }
}


/* ============================================================
 * § 3 · LOADING SPLASH GLOBAL
 * ------------------------------------------------------------
 * Tela mostrada antes do app montar. Reescrita com tokens Verdant.
 * ============================================================ */
.loading{
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity var(--d3) var(--ease);
}
.loading.fade-out{ opacity: 0; pointer-events: none; }
.lifeos-load{
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 240px; max-width: 60%;
  animation: lifeosLoadIn .5s var(--ease-out) both;
}
@keyframes lifeosLoadIn{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}
.lifeos-load-name{
  font: 500 24px/1 'Inter', system-ui, sans-serif;
  font-style: normal;
  color: var(--tx);
  letter-spacing: -.01em;
}
.lifeos-load-bar{
  width: 100%; height: 1px;
  background: var(--line);
  overflow: hidden;
  position: relative;
  --lifeos-load-progress: 0;
}
.lifeos-load-bar::after{
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: var(--brand);
  animation: lifeosLoadBar 1.6s var(--ease) infinite;
}
.lifeos-load-bar.determinate::after{
  animation: none;
  left: 0;
  width: calc(var(--lifeos-load-progress) * 1%);
  transition: width var(--d2) var(--ease-out);
}
@keyframes lifeosLoadBar{
  0%   { left: -30%; }
  100% { left: 100%; }
}
.lifeos-load-status{
  font: 500 11px/1.3 'Inter', system-ui, sans-serif;
  color: var(--tx3);
  letter-spacing: .06em;
  text-transform: lowercase;
  text-align: center;
  min-height: 14px;
  margin-top: 4px;
  transition: color var(--d2);
}
.lifeos-load-status.error{ color: var(--crit); font-weight: 600; }


/* ============================================================
 * § 4 · LOGIN SCREEN
 * ------------------------------------------------------------
 * Reescrita com Verdant. Mantém estrutura/JS atual.
 * ============================================================ */
.login-screen{
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center; justify-content: center;
  z-index: 500;
  padding: 20px;
  overflow: hidden;
}
.login-bg-grid{
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
  animation: loginGridShift 20s linear infinite;
}
@keyframes loginGridShift{
  from{ background-position: 0 0; }
  to  { background-position: 80px 80px; }
}
.login-bg-glow{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 30% 20%, var(--atm-1), transparent 50%),
    radial-gradient(ellipse 500px 500px at 80% 70%, var(--atm-2), transparent 50%),
    radial-gradient(ellipse 400px 300px at 50% 90%, var(--atm-1), transparent 50%);
  animation: loginGlowFloat 12s var(--ease) infinite;
}
@keyframes loginGlowFloat{
  0%,100%{ opacity: .7; transform: translate(0,0); }
  33%    { opacity: 1;  transform: translate(20px,-15px); }
  66%    { opacity: .85; transform: translate(-15px,10px); }
}
.login-screen.fade-out{ animation: loginFadeOut 1.4s var(--ease) forwards; }
@keyframes loginFadeOut{
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; visibility: hidden; transform: scale(1.08); filter: blur(16px); }
}
.login-box{
  position: relative;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 48px 40px 32px;
  width: 100%; max-width: 420px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.02),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: loginBoxIn 1.1s var(--ease-out) var(--d2) both;
}
@keyframes loginBoxIn{
  from{ opacity: 0; transform: translateY(24px) scale(.96); filter: blur(8px); }
  to  { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}
.login-logo{
  display: flex; align-items: center;
  gap: 14px;
  margin-bottom: 38px;
  animation: loginItemIn .8s var(--ease-out) .5s both;
}
.login-logo .logo-ic{
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
}
.login-logo .logo-ic svg{ width: 24px; height: 24px; color: var(--on-brand); }
.login-logo-tx{ display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.login-logo-tx b{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; font-weight: 500;
  letter-spacing: -.02em;
  color: var(--tx);
}
.login-logo-tx small{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--tx4);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.login-title{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 34px; font-weight: 500;
  letter-spacing: -.025em;
  color: var(--tx);
  margin-bottom: 6px;
  line-height: 1.05;
  animation: loginItemIn .8s var(--ease-out) .6s both;
  background: linear-gradient(180deg, var(--tx) 0%, var(--tx2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-sub{
  font-size: 13px;
  color: var(--tx3);
  font-weight: 500;
  margin-bottom: 32px;
  animation: loginItemIn .8s var(--ease-out) .7s both;
}
@keyframes loginItemIn{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
.login-form{ display: flex; flex-direction: column; gap: 10px; }
.login-form > *:nth-child(1){ animation: loginItemIn .8s var(--ease-out) .8s both; }
.login-form > *:nth-child(2){ animation: loginItemIn .8s var(--ease-out) .9s both; }
.login-form > *:nth-child(3){ animation: loginItemIn .8s var(--ease-out) 1s both; }
.login-input{
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--tx);
  font-size: 14px; font-weight: 500;
  outline: none;
  transition: all var(--d2) var(--ease-out);
}
.login-input:focus{
  border-color: var(--brand);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.login-input::placeholder{ color: var(--tx4); }

.login-btn{
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  padding: 15px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-brand);
  border: none;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: all var(--d2) var(--ease-out);
  box-shadow: 0 4px 16px var(--ring), inset 0 1px 0 rgba(255,255,255,.2);
}
.login-btn::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
}
.login-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--ring), inset 0 1px 0 rgba(255,255,255,.3);
}
.login-btn:hover::before{ transform: translateX(100%); }
.login-btn:active{ transform: translateY(0); }

.login-err{
  padding: 11px 13px;
  background: color-mix(in srgb, var(--crit) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, var(--line));
  border-radius: var(--r-sm);
  color: var(--crit);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  text-align: center;
  display: none;
  animation: loginErrIn var(--d3) var(--ease-out);
}
.login-err.active{ display: block; }
@keyframes loginErrIn{
  from{ opacity: 0; transform: translateY(-6px) scale(.96); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
.login-footer{
  margin-top: 24px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--tx4);
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: loginItemIn .8s var(--ease-out) 1.2s both;
}
.login-spinner{
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: v-rot .7s linear infinite;
}


/* ============================================================
 * § 5 · SYNC DOT (indicador persistente bottom-left)
 * ------------------------------------------------------------
 * Reescrito com tokens Verdant. JS atual usa .sync-dot.
 * ============================================================ */
.sync-dot{
  position: fixed;
  bottom: 18px; left: 18px;
  padding: 9px 16px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: var(--tx3);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: 9px;
  z-index: 60;
  box-shadow: var(--sh);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease-out);
}
.sync-dot::before{
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
}
.sync-dot.active{ display: inline-flex; opacity: 1; transform: translateY(0); }
.sync-dot.saving{ color: var(--warn); }
.sync-dot.saving::before{
  background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
  animation: syncPulse 1s var(--ease) infinite;
}
.sync-dot.error{
  color: var(--crit);
  border-color: color-mix(in srgb, var(--crit) 40%, var(--line));
  background: color-mix(in srgb, var(--crit) 10%, var(--panel));
}
.sync-dot.error::before{
  background: var(--crit);
  box-shadow: 0 0 12px var(--crit);
  animation: syncPulse .7s var(--ease) infinite;
}
@keyframes syncPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .4; } }


/* ============================================================
 * § 6 · CONFETTI (celebração)
 * ============================================================ */
.confetti-host{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-loading);
  overflow: hidden;
}
.confetti{
  position: absolute;
  top: -12px;
  width: 9px; height: 13px;
  border-radius: 2px;
  animation: confettiFall 2.5s var(--ease-out) forwards;
  opacity: .95;
}
@keyframes confettiFall{
  0%   { transform: translateY(-20px) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}


/* ============================================================
 * § 7 · UNDO TOAST + APP TOAST (legacy, mapeados pra Verdant)
 * ------------------------------------------------------------
 * Páginas legadas chamam toast() antigo. Re-estiliza com Verdant
 * até migrarem pra v-toast.
 * ============================================================ */
.undo-toast,
.app-toast{
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(140%);
  padding: 11px 18px;
  max-width: min(90vw, 420px);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  display: flex; align-items: center;
  gap: 10px;
  z-index: 95;
  transition: transform var(--d3) var(--ease-out);
  box-shadow: var(--sh);
  font-size: 13px; font-weight: 600;
  color: var(--tx);
}
.undo-toast.active,
.app-toast.active{
  transform: translateX(-50%) translateY(0);
}
.app-toast.error{ border-color: color-mix(in srgb, var(--crit) 50%, var(--line)); color: var(--crit); }
.app-toast.success{ border-color: color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--good); }
.app-toast.warn{ border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.app-toast .at-msg{ flex: 1; line-height: 1.35; overflow-wrap: anywhere; }
.undo-text{ font-size: 13px; font-weight: 500; color: var(--tx); }
.undo-btn{
  display: inline-flex; align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  letter-spacing: -.01em;
}
.undo-btn svg{ width: 11px; height: 11px; }


/* ============================================================
 * § 8 · EDIT/DEL ACTION BUTTONS (universais — usado em todas listas)
 * ------------------------------------------------------------
 * Páginas legadas usam .edit-del, .edit-del2.
 * ============================================================ */
/* v4.1.x: estilo migrado pro DS — os botões emitem agora
   .v-btn v-btn-sec v-btn--icon v-btn--sm (+ v-btn--danger no del).
   Aqui fica SÓ o posicionamento absoluto na linha; as classes
   .edit-del/.edit-del2 permanecem como hook do handler de clique
   (app.js:1990,2056 e equivalentes em financeiro/empresas). */
.edit-del,
.edit-del2{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.edit-del{ right: 7px; }
.edit-del2{ right: 36px; }


/* ============================================================
 * § 9 · FORM LAYOUT HELPERS (mantidos; markup .v-* puro vem do DS)
 * ------------------------------------------------------------
 * v-form-input/select/textarea/btn foram migrados pra v-inp/v-sel/v-ta/v-btn
 * em P2.1, P7 e P8. As regras dos componentes ficam em design-system/components.css.
 * Aqui ficam apenas helpers de LAYOUT (group/row/label/actions/foot).
 * ============================================================ */
.v-form-group{ display: flex; flex-direction: column; gap: 6px; }
.v-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-form-label{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  color: var(--tx3);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field-error{
  border-color: var(--crit) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent) !important;
  animation: fieldShake var(--d3) var(--ease);
}
@keyframes fieldShake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}
.field-err-msg{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  color: var(--crit);
  font-weight: 600;
  margin-top: 5px;
  display: none;
  letter-spacing: .02em;
}
.field-err-msg.visible{ display: block; animation: fieldErrIn var(--d2) var(--ease-out); }
@keyframes fieldErrIn{
  from{ opacity: 0; transform: translateY(-3px); }
  to  { opacity: 1; transform: translateY(0); }
}

.v-form-actions{
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px;
  justify-content: flex-end;
}
.v-form-foot{
  display: flex; justify-content: flex-end;
  gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}

.btn-spinner{
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: v-rot .7s linear infinite;
  vertical-align: -1px;
}


/* ============================================================
 * § 10 · MODAL LEGACY (.v-modal-backdrop, .modal, .confirm-modal)
 * ------------------------------------------------------------
 * Usado por shared/modal.js e código inline. Reescrito Verdant.
 * ============================================================ */
.v-modal-backdrop{
  position: fixed; inset: 0;
  /* perf (v3.14.5): backdrop-filter:blur REMOVIDO — blur full-screen no
     compositor deixava a abertura de modal pesada (mesma lição da sidebar
     v3.0.8). Fundo um pouco mais escuro compensa a leitura. */
  background: rgba(0,0,0,.82);
  z-index: var(--z-modal);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
#formBackdrop{ z-index: var(--z-modal-form); }
.v-modal-backdrop.active{ display: flex; animation: backdropIn var(--d1) var(--ease); }
.v-modal-backdrop.closing{ animation: backdropOut var(--d1) var(--ease) forwards; }
.v-modal-backdrop.closing .modal,
.v-modal-backdrop.closing .v-form-modal,
.v-modal-backdrop.closing .cal-modal,
.v-modal-backdrop.closing .twt-modal{ animation: modalOut var(--d1) var(--ease) forwards; }
@keyframes backdropIn{ from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut{ from { opacity: 1; } to { opacity: 0; } }
.modal,
.v-form-modal{
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  max-width: 500px;
  width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--sh);
  animation: modalIn var(--d2) var(--ease-out);
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(8px) scale(.985); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalOut{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to  { opacity: 0; transform: translateY(6px) scale(.985); }
}
.v-modal-head,
.v-form-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.v-modal-title,
.v-form-title{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 500;
  color: var(--tx);
  letter-spacing: -.015em;
}
.v-modal-close{
  background: transparent;
  border: none;
  color: var(--tx3);
  font-size: 22px;
  cursor: pointer;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all var(--d1) var(--ease);
  line-height: 1;
}
.v-modal-close:hover{ background: var(--panel-2); color: var(--tx); }
.v-modal-body,
.v-form-body{
  padding: 18px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
}

/* confirm modal */
.confirm-backdrop{ padding: 20px; }
.confirm-modal{
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 28px 24px 22px;
  max-width: 380px; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 12px;
  box-shadow: var(--sh);
  animation: modalIn var(--d3) var(--ease-out);
}
.confirm-ic{
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--tx3);
}
.confirm-ic.danger{
  background: color-mix(in srgb, var(--crit) 10%, transparent);
  border-color: color-mix(in srgb, var(--crit) 35%, var(--line));
  color: var(--crit);
}
.confirm-ic.warn{
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  color: var(--warn);
}
.confirm-ic.success{
  background: color-mix(in srgb, var(--good) 10%, transparent);
  border-color: color-mix(in srgb, var(--good) 35%, var(--line));
  color: var(--good);
}
.confirm-ic.primary{
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand);
}
.confirm-ic svg{ width: 22px; height: 22px; }
.confirm-title{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--tx);
  letter-spacing: -.01em;
}
.confirm-msg{
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.45;
  max-width: 300px;
}
.confirm-actions{
  display: flex; gap: 8px;
  margin-top: 8px; width: 100%;
}
.confirm-actions .v-btn{ flex: 1; padding: 11px 16px; }


/* ============================================================
 * § 11 · RESPIRO VERDANT (overrides em legacy)
 * ------------------------------------------------------------
 * Verdant é generoso com espaço. Páginas legadas tinham cards
 * com padding apertado. Aqui aumentamos paddings/gaps em containers
 * principais usando vars Verdant (--s4, --s5, --s6).
 * ============================================================ */
.wrap{ padding:var(--s4); gap:var(--s4); }
.pcol{ padding:var(--s4); gap:var(--s4); border-radius:var(--r-lg); }
.sec{ padding:var(--s4) var(--s4); border-radius:var(--r-md); }
.sh{ margin-bottom:var(--s3); padding-bottom:var(--s3); gap:var(--s2); }
.lsb,.rsb{ gap:var(--s4); }
.pbd{ gap:var(--s4); }

/* Items dentro das seções (tasks, meals, list items) — respiro */
.t,.li,.lci,.cpi,.qn-item{
  padding:var(--s2) var(--s3);
  border-radius:var(--r-sm);
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease), transform var(--d1) var(--ease-out);
}

/* Cards financeiros mais respiráveis */
.fin-tx-row,.fin-row{ padding:var(--s2) var(--s3); }


/* ============================================================
 * § 12 · MOTION VERDANT (hover lift + glow nos cards)
 * ------------------------------------------------------------
 * Adiciona microinterações Verdant aos containers principais
 * (hover lift). O spotlight de cursor foi removido.
 * ============================================================ */

/* Cards de pessoa (Patrick/Pamella) */
.pcol{
  position:relative;
  /* v4.0.9: overflow:hidden REMOVIDO — .pcol precisa de overflow-y:auto pra
     scroll interno funcionar (estilo do scroll definido em style.css:167).
     Era o terceiro overflow:hidden encontrado na .pcol. */
  transition: border-color var(--d2) var(--ease), transform var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease);
}
.pcol:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.5), var(--glow, 0 0 0 0 transparent);
}

/* Section cards */
.sec{
  position:relative;
  transition: border-color var(--d2) var(--ease), background var(--d2) var(--ease);
}
.sec:hover{
  border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
}

/* Botões LEGACY em Verdant geral — micro spring (.v-btn já tem no components.css) */
.opt-btn,.shortcuts-btn,.logout-btn,.dt-nav-btn,.back-btn{
  transition: transform var(--d1) var(--spring), background var(--d2) var(--ease), border-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
/* v3.14.6: scale de :active removido (afundava o botão) */

/* Hover em itens de lista — Verdant translate sutil */
.t:hover,.li:hover,.cpi:hover,.qn-item:hover{
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

/* DT card (data + hora) */
.dt-card{
  transition: border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.dt-card:hover{
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.4);
}

/* Mobile: reduz padding pra não comer demais */
@media (max-width: 680px){
  .wrap{ padding:var(--s2); gap:var(--s2); }
  .pcol{ padding:var(--s3); gap:var(--s3); }
  .sec{ padding:var(--s3); }
}


/* ============================================================
 * § 13 · BOTÕES "ADD" LEGACY — força gradient brand
 * ------------------------------------------------------------
 * v4.0.11: .v-btn-pri REMOVIDO daqui. O components.css JA define o
 * gradient do .v-btn-pri — duplicar aqui com !important fazia o app
 * divergir do showcase (que só carrega components.css). components.css
 * é a ÚNICA fonte de verdade dos componentes .v-*.
 * Aqui ficam só classes legacy não-DS (fin-add-btn, add-tx-btn).
 * ============================================================ */
.fin-add-btn,
.add-tx-btn{
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: var(--on-brand) !important;
  border-color: transparent !important;
}
.fin-add-btn:hover,
.add-tx-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--glow);
  filter: brightness(1.05);
}

/* Switch/toggle activated → verde brand (não azul) */
.fin-tab.active,
.tab.active:not(.v-active),
.mode-btn.active,
.fin-toggle-btn.active,
.tx-type-tab.active{
  background: var(--brand) !important;
  color: var(--on-brand) !important;
  border-color: var(--brand) !important;
}


/* ============================================================
 * § 14 · HOVERS / ACTIVES / FOCUS GLOBAIS (padrão Verdant)
 * ------------------------------------------------------------
 * Garante que qualquer elemento clicável tenha:
 *  - transição d1 var(--ease) em bg/border/color/transform
 *  - :active scale .97 (botões)
 *  - focus-visible com ring brand
 * Sem criar hover onde não há clicável.
 * ============================================================ */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[role="tab"],
[role="menuitem"]{
  transition:
    background-color var(--d1) var(--ease),
    border-color var(--d1) var(--ease),
    color var(--d1) var(--ease),
    transform var(--d1) var(--ease);
}

/* v3.14.6: active scale(.97) dos botões legacy REMOVIDO (afundava o botão) */

/* v3.14.6: "halo" de focus (anel 3px) e scale de :active REMOVIDOS a pedido
   do dono — botão afundava e tudo ganhava aro ao receber foco (inclusive no
   auto-focus das modais). Campos de texto indicam foco pela borda colorida
   (.v-inp:focus no DS).
   v3.14.7 (DIRETRIZ-UI): navegação por TECLADO ganha indicador discreto —
   outline fino 1px, sem halo. :focus-visible em botões só dispara via teclado
   (clique de mouse não mostra nada). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none; /* borda colorida do .v-inp:focus indica */
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible{
  outline: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset: 2px;
}


/* ============================================================
 * § 15 · SHIMMER em botões "add" LEGACY
 * ------------------------------------------------------------
 * v4.0.11: .v-btn-pri REMOVIDO — components.css já tem o shimmer ::after
 * no .v-btn-pri. Duplicar aqui criava ::after concorrente. Aqui ficam só
 * as classes legacy (fin-add-btn, add-tx-btn) que não viraram .v-btn ainda.
 * ============================================================ */
.fin-add-btn,
.add-tx-btn{
  position: relative;
  overflow: hidden;
}
.fin-add-btn::after,
.add-tx-btn::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.fin-add-btn:hover::after,
.add-tx-btn:hover::after{
  transform: translateX(130%);
}
.fin-add-btn > *,
.add-tx-btn > *{
  position: relative;
  z-index: 1;
}


/* ============================================================
 * § 16 · CONTAINMENT de cards (ex-spotlight)
 * ------------------------------------------------------------
 * O glow radial verde que seguia o cursor foi REMOVIDO (a pedido).
 * Sobra só o containment (position/overflow/z-index) dos cards —
 * inofensivo, evita regressão de layout. mountSpotlight saiu do ds.js.
 * ============================================================ */
.sec,
.uicard,
.fin-hero-card,
.bank-person-card,
.otto-card,
.dw,
.hub-card,
.hub-zone,
.fin-tx-day,
.v-uicard,
.v-dw{
  position: relative;
  overflow: hidden;
}
.sec > *,
.uicard > *,
.fin-hero-card > *,
.bank-person-card > *,
.otto-card > *,
.dw > *,
.hub-card > *,
.hub-zone > *,
.fin-tx-day > *{
  position: relative;
  z-index: 1;
}


/* ============================================================
 * § 17 · ASSINATURAS VERDANT — LINHA ANIMADA em cabeçalhos
 * ------------------------------------------------------------
 * Cabeçalhos de seção (.sh, .v-sec-h, .fin-page-title etc.) ganham
 * uma linha verde que cresce da esquerda quando entra no viewport.
 * Adicionar classe .in via IntersectionObserver pra disparar.
 * ============================================================ */
.sh,
.fin-page-title,
.fin-section-head,
.hub-zone-head{
  position: relative;
}
.sh::after,
.fin-page-title::after,
.fin-section-head::after,
.hub-zone-head::after{
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand), transparent);
  transition: width .9s var(--ease-out);
  pointer-events: none;
}
.sh.in::after,
.fin-page-title.in::after,
.fin-section-head.in::after,
.hub-zone-head.in::after,
/* fallback: se classe .in não vier, mostra ao hover do parent */
.sec:hover .sh::after,
.fin-page:hover .fin-page-title::after{
  width: 120px;
}


/* ============================================================
 * § 18 · ASSINATURAS VERDANT — SCROLL REVEAL
 * ------------------------------------------------------------
 * Elementos com .reveal entram com fade+slide quando aparecem.
 * Gate via body.js-anim — sem JS, conteúdo nunca fica invisível.
 * ============================================================ */
.reveal{
  transition: opacity var(--d3) var(--ease-out), transform var(--d3) var(--ease-out);
}
body.js-anim .reveal:not(.in){
  opacity: 0;
  transform: translateY(16px);
}
body.js-anim .reveal.in{
  opacity: 1;
  transform: none;
}


/* ============================================================
 * § 19 · REDUCED MOTION — desliga tudo
 * ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body.js-anim .reveal{
    opacity: 1 !important;
    transform: none !important;
  }
  .sh::after,
  .fin-page-title::after{
    width: 120px !important;
    transition: none !important;
  }
}


/* ============================================================
 * § 20 · NOTAS
 * ------------------------------------------------------------
 * Componentes ainda presentes em assets/style.css que não foram
 * portados aqui ainda (Fase 2 fará):
 *   - .wrap (grid dashboard)         → vai pra assets/dashboard.css
 *   - .pcol/.pat/.pam (pessoas)      → vai pra assets/dashboard.css
 *   - .sec/.sh primitives            → universal, pode virar .v-sec
 *   - .hdr / .logo                   → pode descontinuar
 *   - .day-picker/.day-chip          → universal, pode virar .v-day-chip
 *   - .mode-switch                   → universal, pode virar .v-segmented
 *   - .meal-check-modal              → page-specific (dashboard)
 *   - sidebar.css / cmdk JS-injected → continuam, consomem aliases acima
 * ============================================================ */