/* ============================================================
   NEXIA · Design System — Fundação (Fase 00)
   Arquivo central de tokens e componentes.
   Instalado em: /opt/sofia-panel/static/nexia.css
   Carregado por: base.html (todas as telas herdam)
   Regra: NÃO muda o layout das telas — só centraliza cor,
   espaçamento e as "peças" reaproveitáveis.
   ============================================================ */

/* -------- 1. TOKENS (tema ESCURO = padrão atual do Nexia) -------- */
:root {
  /* Fundos e superfícies */
  --nx-bg:        #0f1117;
  --nx-surface:   #1a1d26;
  --nx-surface-2: #21242f;
  --nx-border:    #2a2d3a;
  --nx-border-2:  #1e2130;

  /* Texto (viés leve para o roxo — escolhido, não cinza puro) */
  --nx-ink:       #e6e4ee;
  --nx-ink-soft:  #9ca3af;
  --nx-ink-faint: #868d9c;

  /* Roxo da marca — UM só (fim dos 4 roxos concorrentes) */
  --nx-accent:        #17423A;  /* preenchimento: botões, ativo   */
  --nx-accent-hover:  #2C6B5C;
  --nx-accent-text:   #8FB0A3;  /* sálvia como texto/ícone no escuro */
  --nx-accent-soft:   #26332e;  /* fundo suave verde              */
  --nx-accent-2:      #0f2e28;  /* sombra do acento (gradiente/hover) */
  --nx-gold:          #C6A664;  /* dourado — acabamento (traços, ícones) */

  /* Semânticos (feedback geral) */
  --nx-good: #4ade80;
  --nx-warn: #fbbf24;
  --nx-crit: #f87171;
  --nx-info: #60a5fa;

  /* Cores dos status de consulta (padronizadas — ver Agenda) */
  --nx-st-agendado:     #fbbf24; /* amarelo  */
  --nx-st-confirmacao:  #22d3ee; /* ciano    */
  --nx-st-ultimo-aviso: #fb923c; /* laranja  */
  --nx-st-confirmado:   #4ade80; /* verde    */
  --nx-st-aguardando:   #f472b6; /* rosa     */
  --nx-st-atendido:     #60a5fa; /* azul     */
  --nx-st-desmarcou:    #9ca3af; /* cinza    */
  --nx-st-faltou:       #f87171; /* vermelho */

  /* Régua de espaçamento e cantos */
  --nx-space-1: 4px;  --nx-space-2: 8px;  --nx-space-3: 12px;
  --nx-space-4: 16px; --nx-space-5: 24px; --nx-space-6: 32px;
  --nx-radius-sm: 8px; --nx-radius: 12px; --nx-radius-lg: 16px;

  /* Tipografia */
  --nx-font: 'Mulish', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nx-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Tema CLARO — via preferência do sistema */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --nx-bg:        #FBF8F2;
    --nx-surface:   #FFFDF9;
    --nx-surface-2: #F1E9DA;
    --nx-border:    #E4D6BE;
    --nx-border-2:  #EDE3CF;
    --nx-ink:       #23201B;
    --nx-ink-soft:  #5A4E3C;
    --nx-ink-faint: #6E6555;
    --nx-accent-text: #17423A;
    --nx-accent-soft: #E4EFE8;
  }
}
/* Tema forçado pelo botão (sobrepõe a preferência do sistema) */
:root[data-theme="light"] {
  --nx-bg:    #FBF8F2;
  --nx-surface:   #FFFDF9;
  --nx-surface-2: #F1E9DA;
  --nx-border:  #E4D6BE;
  --nx-border-2:  #EDE3CF;
  --nx-ink:     #23201B;
  --nx-ink-soft:  #5A4E3C;
  --nx-ink-faint: #6E6555;
  --nx-accent-text: #17423A;
  --nx-accent-soft: #E4EFE8;
}
:root[data-theme="dark"] {
  --nx-bg: #0f1117; --nx-surface: #1a1d26; --nx-surface-2: #21242f;
  --nx-border: #2a2d3a; --nx-border-2: #1e2130;
  --nx-ink: #e6e4ee; --nx-ink-soft: #9ca3af; --nx-ink-faint: #868d9c;
  --nx-accent-text: #8FB0A3; --nx-accent-soft: #26332e;
}

/* -------- 2. PEÇAS (componentes reaproveitáveis) -------- */

/* Botões */
.nx-btn { display: inline-flex; align-items: center; gap: var(--nx-space-2);
  font-family: var(--nx-font); font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--nx-radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.nx-btn-primary { background: var(--nx-accent); color: #fff; }
.nx-btn-primary:hover { background: var(--nx-accent-hover); }
.nx-btn-ghost { background: var(--nx-surface); color: var(--nx-ink); border-color: var(--nx-border); }
.nx-btn-ghost:hover { border-color: var(--nx-accent); color: var(--nx-accent-text); }

/* variantes de botao (aditivo — guia de estilo) */
.nx-btn-secondary { background: var(--nx-accent-soft); color: var(--nx-accent-text); border-color: var(--nx-border); }
.nx-btn-secondary:hover { border-color: var(--nx-accent); }
.nx-btn-danger { background: var(--nx-crit); color: #fff; }
.nx-btn-danger:hover { filter: brightness(1.08); }

/* ---- Botoes legados UNIFICADOS (fonte unica de coesao; markup nao muda) ---- */
.btn-p{ display:inline-flex; align-items:center; gap:6px; background:var(--nx-accent); color:#fff;
  border:none; border-radius:9px; padding:8px 18px; font-size:.88rem; font-weight:600; line-height:1.25;
  cursor:pointer; font-family:inherit; }
.btn-p:hover{ background:var(--nx-accent-hover); }
.btn-p:active{ transform:translateY(1px); }
.btn-p:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-prim{ display:inline-flex; align-items:center; gap:6px; background:var(--nx-accent); color:#fff;
  border:none; border-radius:9px; padding:8px 20px; font-size:.86rem; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-prim:hover{ background:var(--nx-accent-hover); }
.btn-prim:active{ transform:translateY(1px); }
.btn-sec{ display:inline-flex; align-items:center; gap:6px; background:var(--nx-surface); color:var(--nx-ink-soft);
  border:1px solid var(--nx-border); border-radius:9px; padding:8px 18px; font-size:.86rem; cursor:pointer; font-family:inherit; }
.btn-sec:hover{ border-color:var(--nx-accent-text); color:var(--nx-accent-text); }

/* ---- Cards legados UNIFICADOS (fonte unica; tokenizados p/ acompanhar o tema) ---- */
.card-dark{ background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:var(--nx-radius); }
.stat-card{ background:var(--nx-surface); border:1px solid var(--nx-border); border-radius:var(--nx-radius); padding:20px 24px; }

/* ---- Tabs pilula (padrao canonico) — fonte unica; .fi-*/.lu-* sao aliases ---- */
.nx-tabs, .fi-tabs, .lu-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.nx-tab, .fi-tab, .lu-tab{ font-size:.86rem; color:var(--nx-ink-soft); background:var(--nx-surface);
  border:1px solid var(--nx-border); border-radius:999px; padding:7px 15px; cursor:pointer; font-family:inherit; }
.nx-tab:hover, .fi-tab:hover, .lu-tab:hover{ border-color:var(--nx-accent-text); color:var(--nx-accent-text); }
.nx-tab.on, .nx-tab.ativo, .fi-tab.on, .lu-tab.on{ background:var(--nx-accent); color:#FBF8F2; border-color:var(--nx-accent-text); }
.nx-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }

/* Cards */
.nx-card { background: var(--nx-surface); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: var(--nx-space-5); }

/* Bloco de indicador (stat) */
.nx-stat { background: var(--nx-surface); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 20px 24px; }
.nx-stat-num { font-size: 2.4rem; font-weight: 700; color: var(--nx-accent-text);
  font-variant-numeric: tabular-nums; line-height: 1; }
.nx-stat-label { font-size: .85rem; color: var(--nx-ink-faint); margin-top: 4px; }

/* Campos de formulário */
.nx-input { width: 100%; background: var(--nx-bg); color: var(--nx-ink);
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm);
  padding: 10px 12px; font-family: var(--nx-font); font-size: .9rem; }
.nx-input::placeholder { color: var(--nx-ink-faint); }
.nx-input:focus { outline: none; border-color: var(--nx-accent); }

/* Tabela */
.nx-table-wrap { overflow-x: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius); }
.nx-table { width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--nx-ink); }
.nx-table th { text-align: left; font-family: var(--nx-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--nx-ink-faint);
  background: var(--nx-surface-2); padding: 10px 14px; }
.nx-table td { padding: 10px 14px; border-top: 1px solid var(--nx-border); }
.nx-table tbody tr:hover { background: var(--nx-border-2); }

/* Etiquetas de status de consulta */
.nx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem;
  font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--_c) 15%, transparent);
  color: var(--_c); border: 1px solid color-mix(in srgb, var(--_c) 35%, transparent); }
.nx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--_c); }
.nx-pill.agendado     { --_c: var(--nx-st-agendado); }
.nx-pill.confirmacao  { --_c: var(--nx-st-confirmacao); }
.nx-pill.ultimo-aviso { --_c: var(--nx-st-ultimo-aviso); }
.nx-pill.confirmado   { --_c: var(--nx-st-confirmado); }
.nx-pill.aguardando   { --_c: var(--nx-st-aguardando); }
.nx-pill.atendido     { --_c: var(--nx-st-atendido); }
.nx-pill.desmarcou    { --_c: var(--nx-st-desmarcou); }
.nx-pill.faltou       { --_c: var(--nx-st-faltou); }

/* ============================================================
   NEXIA · Shell de página (Fase 03)
   Cabeçalho único de todas as telas: título + contexto da
   clínica + ações. Referência visual: Curve (SaaS limpo).
   Usado via o macro templates/_pagehead.html.
   ============================================================ */
.nx-page-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--nx-border)}
.nx-page-title{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;color:var(--nx-ink);line-height:1.2}
.nx-page-title > i{color:var(--nx-accent-text);font-size:1.15rem}
.nx-page-title small{font-weight:400;color:var(--nx-ink-faint);font-size:.8rem}
.nx-page-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.nx-clinic{position:relative}
.nx-clinic-btn{display:inline-flex;align-items:center;gap:7px;background:var(--nx-surface);border:1px solid var(--nx-border);color:var(--nx-ink-soft);border-radius:9px;padding:7px 12px;font-size:.85rem;cursor:pointer;font-family:inherit}
.nx-clinic-btn:hover{border-color:var(--nx-accent);color:var(--nx-ink)}
.nx-clinic-menu{display:none;position:absolute;top:calc(100% + 5px);right:0;min-width:210px;background:var(--nx-surface);border:1px solid var(--nx-border);border-radius:10px;z-index:1000;overflow:hidden;box-shadow:0 8px 24px #0009}
.nx-clinic.open .nx-clinic-menu{display:block}
.nx-clinic-opt{display:block;padding:9px 14px;font-size:.85rem;color:var(--nx-ink-soft);text-decoration:none;white-space:nowrap}
.nx-clinic-opt:hover{background:var(--nx-surface-2);color:var(--nx-ink)}

@media(max-width:768px){
  .nx-page-head{gap:10px}
  .nx-page-tools{margin-left:0;width:100%}
}

/* ============================================================
   NEXIA · Sofia-guia (Fase 04) — botão + painel de orientação
   ============================================================ */
.nx-guia-btn{display:inline-flex;align-items:center;gap:6px;background:var(--nx-accent-soft);border:1px solid var(--nx-border);color:var(--nx-accent-text);border-radius:9px;padding:7px 12px;font-size:.85rem;cursor:pointer;font-family:inherit}
.nx-guia-btn:hover{border-color:var(--nx-accent);color:var(--nx-ink)}
.guia-panel{position:fixed;right:20px;bottom:20px;width:350px;max-width:calc(100vw - 32px);height:480px;max-height:calc(100vh - 90px);background:var(--nx-surface);border:1px solid var(--nx-border);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:9000;display:none;flex-direction:column;overflow:hidden}
.guia-panel.open{display:flex}
.guia-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--nx-border);background:var(--nx-surface-2)}
.guia-head .av{width:28px;height:28px;border-radius:50%;background:var(--nx-accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.guia-head .t{font-weight:700;font-size:.92rem;color:var(--nx-ink);line-height:1.1}
.guia-head .t small{display:block;font-weight:400;font-size:.7rem;color:var(--nx-ink-faint)}
.guia-head .x{margin-left:auto;background:none;border:none;color:var(--nx-ink-faint);cursor:pointer;font-size:1.3rem;line-height:1}
.guia-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.guia-m{max-width:88%;padding:9px 12px;border-radius:12px;font-size:.88rem;line-height:1.5;white-space:pre-wrap}
.guia-m.u{align-self:flex-end;background:var(--nx-accent);color:#fff;border-bottom-right-radius:3px}
.guia-m.a{align-self:flex-start;background:var(--nx-surface-2);border:1px solid var(--nx-border);color:var(--nx-ink);border-bottom-left-radius:3px}
.guia-nav{align-self:flex-start}
.guia-nav a{display:inline-flex;align-items:center;gap:6px;background:var(--nx-accent-soft);border:1px solid var(--nx-accent);color:var(--nx-accent-text);border-radius:8px;padding:6px 11px;font-size:.82rem;text-decoration:none;font-weight:600}
.guia-sug{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.guia-sug button{background:var(--nx-surface-2);border:1px solid var(--nx-border);color:var(--nx-ink-soft);border-radius:16px;padding:6px 10px;font-size:.76rem;cursor:pointer;text-align:left}
.guia-sug button:hover{border-color:var(--nx-accent);color:var(--nx-accent-text)}
.guia-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--nx-border)}
.guia-in input{flex:1;background:var(--nx-surface-2);border:1px solid var(--nx-border);color:var(--nx-ink);border-radius:9px;padding:9px 11px;font-size:.86rem;outline:none}
.guia-in button{background:var(--nx-accent);color:#fff;border:none;border-radius:9px;padding:0 14px;cursor:pointer}
.guia-dots::after{content:'';animation:guiad 1.2s infinite}
@keyframes guiad{0%{content:'.'}33%{content:'..'}66%{content:'...'}}
@media(max-width:768px){.guia-panel{right:8px;left:8px;width:auto;bottom:8px}}

/* ---- Marca Nexia (20/07): tabelas Bootstrap .table-dark -> claro quente ---- */
.table.table-dark, table.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: #23201B;
  --bs-table-border-color: #E4D6BE;
  --bs-table-striped-bg: rgba(0,0,0,.025);
  --bs-table-striped-color: #23201B;
  --bs-table-hover-bg: rgba(23,66,58,.08);
  --bs-table-hover-color: #23201B;
  --bs-table-active-bg: rgba(23,66,58,.12);
  --bs-table-active-color: #23201B;
  color: #23201B;
}
.table.table-dark > thead { color: #5A4E3C; }

/* ---- Marca Nexia (20/07): botão primário Bootstrap -> verde ---- */
.btn-primary {
  --bs-btn-bg: #17423A; --bs-btn-border-color: #17423A;
  --bs-btn-hover-bg: #2C6B5C; --bs-btn-hover-border-color: #2C6B5C;
  --bs-btn-active-bg: #123128; --bs-btn-active-border-color: #123128;
  --bs-btn-disabled-bg: #17423A; --bs-btn-disabled-border-color: #17423A;
}

/* ---- Marca Nexia (20/07): Fraunces (display) nos titulos ---- */
:root { --nx-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; }
.nx-page-title, .page-title, .main > h1, .main > h2 {
  font-family: var(--nx-font-display); font-weight: 600; letter-spacing: -.01em;
}


/* === UX ultima milha (01/08/2026): acessibilidade + skeletons === */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #B8912F;outline-offset:2px;border-radius:3px}
@keyframes nx-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.nx-skel{background:#EDE3CF;background-image:linear-gradient(90deg,#EDE3CF 0,#F6F0E2 200px,#EDE3CF 400px);background-size:800px 100%;animation:nx-shimmer 1.15s linear infinite;border-radius:7px;display:block}
.nx-skel-line{height:12px;margin:8px 0}
.nx-skel-circle{width:96px;height:96px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.nx-skel{animation:none}}


/* Toast global + tabelas responsivas (UX Proximo, 01/08/2026) */
.nx-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:99500;background:#17423A;color:#FBF8F2;padding:11px 18px;border-radius:10px;font-size:.9rem;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 24px rgba(35,32,26,.3);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;max-width:90vw;text-align:center}
.nx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.nx-toast.err{background:#BC5A3C}
.nx-toast.aviso{background:#B8912F}
.nx-toast.info{background:#2C6B5C}
.nx-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---- L4 tipografia (01/08): escala unica + Fraunces nos titulos ---- */
:root{
  --nx-text-xs: .72rem;
  --nx-text-sm: .82rem;
  --nx-text-base: .92rem;
  --nx-text-lg: 1.08rem;
  --nx-text-xl: 1.3rem;
  --nx-text-2xl: 1.6rem;
  --nx-text-3xl: 2.1rem;
  --nx-leading: 1.5;
  --nx-leading-tight: 1.2;
}
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* titulos das telas de conteudo em Fraunces (so familia+tracking; peso/tamanho preservados) */
.main h1, .main h2, .main .page-title, .main .pac-hd h2, .main .hj-header h2,
.main .ot-header h2, .main .sec-title, .main .card-title{
  font-family: var(--nx-font-display); letter-spacing:-.01em;
}

/* ---- L5 densidade — modo Compacto (opt-in, :root[data-density=compact]) ---- */
:root[data-density="compact"]{ --nx-space-1:3px; --nx-space-2:6px; --nx-space-3:9px; --nx-space-4:12px; }
/* tabelas (maior ganho de densidade) — !important p/ vencer padding inline */
:root[data-density="compact"] td,
:root[data-density="compact"] th{ padding-top:5px!important; padding-bottom:5px!important; }
:root[data-density="compact"] .nx-table td,
:root[data-density="compact"] .nx-table th{ padding:5px 10px!important; }
/* respiro do conteudo principal */
:root[data-density="compact"] .main{ padding-top:14px; padding-bottom:14px; }
/* linhas de altura mais justa no corpo */
:root[data-density="compact"] body{ line-height:1.35; }
/* controles de formulario e botoes um pouco menores */
:root[data-density="compact"] .nx-btn,
:root[data-density="compact"] .nx-input,
:root[data-density="compact"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-density="compact"] select,
:root[data-density="compact"] textarea{ padding-top:6px; padding-bottom:6px; }
/* cartoes/paineis do design system */
:root[data-density="compact"] .nx-card,
:root[data-density="compact"] .nx-stat{ padding:12px 14px; }

/* ---- controles nativos (date/time/select/scrollbar) seguem o tema ---- */
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* ---- L6 responsivo/mobile (01/08): conteudo (shell ja e responsivo) ---- */
@media (max-width: 768px){
  body{ overflow-x: hidden; }                 /* mata scroll horizontal residual da pagina */
  .main table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fin-tabs-wrap, .nx-crumb{ padding-left:16px; padding-right:16px; }
  .fin-tabs{ flex-wrap:wrap; }
  .nx-page-title, .main > h1, .main > h2, .page-title{ font-size:1.12rem; }
  .nx-stat-num{ font-size:1.8rem; }
  .nx-card, .nx-stat{ padding:12px 14px; }
}

/* ---- L8 micro-polimento (01/08): foco, transicoes, selecao, reduced-motion ---- */
/* transicoes sutis em interativos (props baratas, nunca layout) */
a, button, .nx-btn, .nav-link, .nx-clinic-btn, .nx-guia-btn,
input:not([type=range]), select, textarea, [role="button"]{
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* foco de TECLADO acessivel (nao dispara no clique de mouse) */
a:focus-visible, button:focus-visible, .nx-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--nx-accent-text);
  outline-offset: 2px;
  border-radius: 6px;
}
/* selecao de texto com a marca */
::selection{ background: var(--nx-accent-soft); color: var(--nx-ink); }
/* remove o flash azul de toque no mobile */
a, button, .nx-btn, .nav-link, [role="button"]{ -webkit-tap-highlight-color: transparent; }
/* respeita quem pede menos movimento */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= CAMADA CRAFT (movimento, profundidade, estados vazios) ================= */
/* profundidade sutil nos cards (premium, nao intrusivo) */
.card-dark, .nx-card, .stat-card{ box-shadow: 0 1px 2px rgba(35,32,26,.05), 0 6px 20px rgba(35,32,26,.05); }
:root[data-theme="dark"] .card-dark, :root[data-theme="dark"] .nx-card, :root[data-theme="dark"] .stat-card{
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.30); }
/* lift no hover (opt-in em elementos clicaveis) */
.nx-lift{ transition: transform .16s ease, box-shadow .16s ease; }
.nx-lift:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(35,32,26,.08), 0 16px 36px rgba(35,32,26,.12); }
/* entrada suave da pagina (so opacidade — nao quebra position:fixed) */
@keyframes nx-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.main{ animation: nx-fade-in .22s ease-out both; }
/* estado vazio ilustrado — componente reutilizavel */
.nx-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 24px; color:var(--nx-ink-faint); }
.nx-empty .ic{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--nx-accent-soft); color:var(--nx-accent-text); font-size:1.7rem; margin-bottom:14px; }
.nx-empty h4{ margin:0 0 4px; color:var(--nx-ink); font-size:1rem; font-weight:600; }
.nx-empty p{ margin:0 0 14px; font-size:.86rem; max-width:44ch; line-height:1.5; }
@media (prefers-reduced-motion: reduce){ .main{ animation:none; } .nx-lift{ transition:none; } .nx-lift:hover{ transform:none; } }