/* LifeOS — hub.css */
/* Cards do hub (home/index.html): grid, zonas, featured cards */

/* ============================================================ */
/* v2.31.17: HUB (home / index.html)                           */
/* ============================================================ */
.v-hub-wrap{
  max-width:var(--page-max,1400px);margin:0 auto;
  padding:48px 18px 96px;
  position:relative; /* K3: âncora pra .v-hub-cmdk-hint */
}

/* v4.0.6: K3 cmdk hint — botao de busca flutuante no canto superior direito */
.v-hub-cmdk-hint{
  position:absolute;
  top:24px;right:24px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  color:var(--tx2);
  font-family:var(--ff-mono);font-size:11px;font-weight:600;
  letter-spacing:0.04em;cursor:pointer;
  transition:all var(--d1) var(--ease);
  z-index:5;
}
.v-hub-cmdk-hint:hover{
  background:var(--panel);
  border-color:var(--tx2);
  color:var(--tx);
}
.v-hub-cmdk-hint svg{width:13px;height:13px;flex-shrink:0;}
@media (max-width:680px){
  .v-hub-cmdk-hint{top:16px;right:16px;padding:6px 10px;font-size:10px;}
}
.v-hub-header{
  margin-bottom:48px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}
.v-hub-greeting{
  font-family:var(--ff-serif,'Instrument Serif',serif);font-style: normal;font-weight:400;
  /* J5: era clamp(40px,5.5vw,64px) — dominava monitor wide. Reduzido pra melhor proporção. */
  font-size:clamp(36px,4vw,52px);line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(180deg, var(--brand) 30%, var(--brand-2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.v-hub-sub{
  color:var(--tx2);font-size:13px;
  font-family:var(--ff-mono,'Inter',system-ui,sans-serif);
  text-transform:lowercase;letter-spacing:.04em;margin-top:4px;
}
.v-hub-headside{
  font-family:var(--ff-mono,'Inter',system-ui,sans-serif);
  font-size:11px;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.1em;
  display:flex;align-items:center;gap:8px;
}
.v-hub-dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 8px color-mix(in srgb, var(--good) 60%, transparent)}

.v-hub-zone{margin-top:48px}
.v-hub-zone:first-of-type{margin-top:0}
.v-hub-zone-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.v-hub-zone-num{font-family:var(--ff-mono,'Inter',system-ui,sans-serif);font-size:11px;color:rgba(255,255,255,.18);letter-spacing:.15em}
.v-hub-zone-title{font-family:var(--ff-serif,'Instrument Serif',serif);font-style: normal;font-size:24px;font-weight:400;color:var(--tx)}
.v-hub-zone-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.07),transparent)}
.v-hub-zone-meta{font-family:var(--ff-mono,'Inter',system-ui,sans-serif);font-size:10px;color:rgba(255,255,255,.18);text-transform:uppercase;letter-spacing:.1em}

.v-hub-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:160px;gap:14px}

.v-hub-card{
  position:relative;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:22px;
  display:flex;flex-direction:column;
  transition:transform var(--d3) var(--spring),
             border-color var(--d3),
             background var(--d3),
             box-shadow var(--d3);
  text-decoration:none;color:inherit;
  isolation:isolate;
}
.v-hub-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% -10%,var(--glow),transparent 55%);
  opacity:0;transition:opacity var(--d3);pointer-events:none;z-index:-1;
}
.v-hub-card::after{
  content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0;transition:opacity var(--d3);pointer-events:none;
}
.v-hub-card:hover{
  /* J3 (v2.40.0): sombra discreta vibe 2026 (era 18px 50px + 0 0 50px glow estilo Dribbble 2018) */
  transform:translateY(-2px);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.v-hub-card:hover::before{opacity:.7}
.v-hub-card:hover::after{opacity:.6}
/* Verdant signature: icon flip de fundo no hover (-=ico:background brand) */
.v-hub-card:hover .v-hub-ico{
  transform: scale(1.08) translateY(-2px);
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.v-hub-card:hover .v-hub-arrow{opacity:1;transform:translateX(0)}

.v-hub-ico{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--icon-from,rgba(255,255,255,.08)),var(--icon-to,rgba(255,255,255,.03)));
  border:1px solid rgba(255,255,255,.08);
  color:var(--brand);
  margin-bottom:auto;
  transition:transform var(--d3) var(--spring);
}
.v-hub-ico svg{width:22px;height:22px;stroke-width:2}

.v-hub-name{
  font-size:19px;font-weight:700;letter-spacing:-.01em;
  margin-top:18px;line-height:1.2;
}
.v-hub-desc{
  font-size:12px;color:var(--tx2);
  font-family:var(--ff-mono,'Inter',system-ui,sans-serif);
  text-transform:lowercase;letter-spacing:.02em;line-height:1.45;
  margin-top:6px;
}

.v-hub-arrow{
  position:absolute;top:22px;right:22px;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--d2),transform var(--d2);
  color:var(--brand);
}
.v-hub-arrow svg{width:18px;height:18px;stroke-width:2.5}

.v-hub-owner-tag{
  position:absolute;top:22px;right:22px;
  font-size:9px;font-family:var(--ff-mono,'Inter',system-ui,sans-serif);
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  padding:3px 8px;border-radius:var(--r-full);
  border:1px solid currentColor;opacity:.7;
  transition:opacity var(--d2);
}
.v-hub-card:hover .v-hub-owner-tag{opacity:0}
.v-hub-owner-pat{color:color-mix(in srgb, var(--brand) 70%, var(--tx))}
.v-hub-owner-pam{color:var(--pam)}

/* K1 (v2.43.0): badges discretos no canto do card. */
.v-hub-card-badge{
  position:absolute;top:14px;right:14px;
  font:600 9px/1 var(--ff-mono,'Inter',system-ui,sans-serif);
  text-transform:uppercase;letter-spacing:.06em;
  padding:5px 9px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-full);
  color:var(--tx2);
  pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:3;
}
.v-hub-card-badge.warn{
  background:color-mix(in srgb, var(--amber) 18%, transparent);
  border-color:color-mix(in srgb, var(--amber) 40%, transparent);
  color:color-mix(in srgb, var(--warn) 80%, var(--tx));
}
.v-hub-card-badge.danger{
  background:color-mix(in srgb, var(--crit) 18%, transparent);
  border-color:color-mix(in srgb, var(--crit) 40%, transparent);
  color:color-mix(in srgb, var(--crit) 70%, var(--tx));
}

/* K2 (v2.43.0): linha "última atividade" no greeting. */
.v-hub-last-activity{
  display:inline-block;margin-top:4px;
  font:500 11px/1.3 var(--ff-mono);
  color:var(--tx3);
  text-transform:none;letter-spacing:0;
}

.v-hub-card.s-1{grid-column:span 1}
.v-hub-card.s-2{grid-column:span 2}
.v-hub-card.s-3{grid-column:span 3}
.v-hub-card.s-4{grid-column:span 4}

.v-hub-card.featured{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}
.v-hub-card.featured .v-hub-name{font-size:24px}

/* accent por feature */
/* J1 (v2.40.0): 13 accent colors reduzidos pra 4 famílias temáticas.
   - pessoal (rosa/lilás): rotinas, areas, agenda, notes
   - financeiro (azul/verde): fin-pf, otto-fin, relatorios, pj-pat
   - saúde (cyan): tarefas, refeicoes, treino, medicacao, agua, medidas
   - admin/util (amarelo/lilás): compras, otto, pj-pam */
.v-hub-card.f-rotinas,
.v-hub-card.f-areas,
.v-hub-card.f-agenda,
.v-hub-card.f-notes,
.v-hub-card.f-dashboard {--accent:color-mix(in srgb, var(--brand) 70%, var(--tx));--glow:color-mix(in srgb, var(--brand) 18%, transparent);--icon-from:color-mix(in srgb, var(--brand) 20%, transparent);--icon-to:color-mix(in srgb, var(--brand) 4%, transparent)}

/* ============ HUB MODAL GESTÃO INLINE (v3.0.27) ============ */
.v-hub-modal-add{display:flex;gap:8px;margin-bottom:12px}
.v-hub-modal-add input{flex:1}
.v-hub-modal-add-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md)}
.v-hub-modal-add-form input.v-inp{padding:8px 10px;font-size:13px}
.v-hub-mgmt-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);
  margin-bottom:5px;
  transition:background var(--d1);
}
.v-hub-mgmt-row:hover{background:var(--panel-2)}
.v-hub-mgmt-row.is-new{border-left:3px solid color-mix(in srgb, var(--brand) 65%, transparent)}
.v-hub-mgmt-name{flex:1;font:500 13px/1.3 var(--ff);color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-hub-mgmt-name.done{text-decoration:line-through;opacity:.55}
.v-hub-mgmt-date,.v-hub-mgmt-time{font:600 11px/1 var(--ff-mono);color:var(--tx2);letter-spacing:.04em;flex-shrink:0;min-width:55px}
.v-hub-mgmt-tag{font:700 10px/1 var(--ff-mono);letter-spacing:.06em;color:var(--tx2);flex-shrink:0}
/* v3.0.29: estado NÃO marcado = neutro (cinza, sem check visível).
   Estado MARCADO = verde sólido com check branco. */
.v-hub-mgmt-check{
  width:26px;height:26px;flex-shrink:0;
  background:transparent;
  border:1.5px solid var(--line-2);
  color:transparent;
  border-radius:6px;font:700 13px/1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--d1);
}
.v-hub-mgmt-check:hover{
  background:color-mix(in srgb, var(--good) 10%, transparent);
  border-color:color-mix(in srgb, var(--good) 50%, transparent);
  color:color-mix(in srgb, var(--good) 75%, var(--tx));
}
.v-hub-mgmt-check.done{
  background:var(--good);
  border-color:var(--good);
  color:#fff;
}
.v-hub-mgmt-check.done:hover{
  background:var(--good);
  border-color:var(--good);
}

/* v3.0.30: botão "comprar" da lista de compras — ícone carrinho neutro
   (não visualmente "check verde" pra não parecer "já feito"). */
.v-hub-mgmt-buy{
  width:26px;height:26px;flex-shrink:0;
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  color:color-mix(in srgb, var(--brand) 70%, var(--tx));
  border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--d1);
}
.v-hub-mgmt-buy:hover{
  background:color-mix(in srgb, var(--brand) 25%, transparent);
  color:#fff;
  border-color:color-mix(in srgb, var(--brand) 60%, transparent);
}
.v-hub-mgmt-buy svg{width:14px;height:14px}
.v-hub-mgmt-del{
  width:26px;height:26px;flex-shrink:0;
  background:color-mix(in srgb, var(--crit) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--crit) 30%, transparent);
  color:color-mix(in srgb, var(--crit) 70%, var(--tx));
  border-radius:6px;font:700 16px/1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--d1);
}
.v-hub-mgmt-del:hover{background:color-mix(in srgb, var(--crit) 22%, transparent);color:#fff}
.v-hub-modal-hint{
  margin-top:12px;padding:9px 12px;
  background:color-mix(in srgb, var(--brand) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius:var(--r-sm);
  font:500 11.5px/1.4 var(--ff);
  color:var(--tx2);
  text-align:center;
}
.v-hub-mgmt-water{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v-hub-mgmt-water-card{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px;
  display:flex;flex-direction:column;gap:6px;
}
.v-hub-mgmt-water-head{display:flex;justify-content:space-between;align-items:baseline}
.v-hub-mgmt-water-head b{font:700 13px/1 var(--ff)}
.v-hub-mgmt-water-num{font:700 18px/1 var(--ff-mono);color:var(--brand)}
.v-hub-mgmt-water-meta{font:500 11px/1 var(--ff-mono);color:var(--tx2);letter-spacing:.04em}
.v-hub-mgmt-water-ctrl{display:flex;gap:6px;margin-top:6px}
.v-hub-mgmt-water-ctrl button{
  flex:1;padding:10px;
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  color:color-mix(in srgb, var(--brand) 70%, var(--tx));border-radius:6px;
  font:700 16px/1;cursor:pointer;
  transition:all var(--d1);
}
.v-hub-mgmt-water-ctrl button:hover{background:color-mix(in srgb, var(--brand) 25%, transparent);color:#fff}

/* v3.0.28: seções por pessoa + ações inline */
.v-hub-mgmt-section{margin-bottom:18px}
/* v3.0.33: fold "mostrar concluídas" */
.v-hub-mgmt-done-fold{margin-top:6px}
.v-hub-mgmt-done-fold > summary{
  list-style:none;cursor:pointer;
  font:600 11px/1 var(--ff);letter-spacing:.02em;
  color:var(--tx2);
  padding:6px 10px;margin:4px 0;
  background:rgba(255,255,255,0.02);
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  transition:all var(--d1);user-select:none;
}
.v-hub-mgmt-done-fold > summary::-webkit-details-marker{display:none}
.v-hub-mgmt-done-fold > summary::before{
  content:'▸';display:inline-block;margin-right:6px;
  transition:transform var(--d1);color:var(--tx2);
}
.v-hub-mgmt-done-fold[open] > summary::before{transform:rotate(90deg)}
.v-hub-mgmt-done-fold > summary:hover{
  background:rgba(255,255,255,0.05);color:var(--tx);
  border-color:rgba(255,255,255,0.18);
}
.v-hub-mgmt-done-fold[open] > summary{margin-bottom:8px}
/* v3.0.34: refeição com descrição (2 linhas) */
.v-hub-mgmt-row-stack{align-items:flex-start}
.v-hub-mgmt-row-stack .v-hub-mgmt-check{margin-top:2px}
.v-hub-mgmt-name-wrap{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.v-hub-mgmt-name-wrap .v-hub-mgmt-name{white-space:normal;line-height:1.3}
.v-hub-mgmt-desc{
  font:500 11.5px/1.4 var(--ff);color:var(--tx2);
  white-space:normal;overflow:hidden;
  text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.v-hub-mgmt-desc.done{text-decoration:line-through;opacity:.55}
.v-hub-mgmt-desc.empty{font-style: normal;opacity:.5}
.v-hub-mgmt-section-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;margin-bottom:8px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.025);
  border:1px solid var(--line);
}
.v-hub-mgmt-section-head .dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.v-hub-mgmt-section-head.pat{border-left:3px solid var(--pat,var(--brand))}
.v-hub-mgmt-section-head.pat .dot{background:var(--pat,var(--brand))}
.v-hub-mgmt-section-head.pam{border-left:3px solid var(--pam,#f472b6)}
.v-hub-mgmt-section-head.pam .dot{background:var(--pam,#f472b6)}
.v-hub-mgmt-section-head b{font:700 13px/1 var(--ff);color:var(--tx);letter-spacing:-0.005em;flex:1}
.v-hub-mgmt-section-head .count{
  font:600 10.5px/1 var(--ff-mono);color:var(--tx2);
  letter-spacing:.06em;margin-right:6px;
  padding:3px 7px;background:rgba(255,255,255,0.04);
  border-radius:var(--r-full);
}
/* .v-hub-mgmt-add-btn migrado pra .v-btn v-btn-gho v-btn--sm (v4.0.14) */
.v-hub-mgmt-edit{
  width:26px;height:26px;flex-shrink:0;
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  color:color-mix(in srgb, var(--brand) 70%, var(--tx));
  border-radius:6px;font:600 13px/1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--d1);
}
.v-hub-mgmt-edit:hover{background:color-mix(in srgb, var(--brand) 22%, transparent);color:#fff}
.v-hub-mgmt-water-num-row{display:flex;align-items:baseline;gap:6px}
.v-hub-mgmt-water-goal{font:500 12px/1 var(--ff-mono);color:var(--tx2)}
.v-hub-mgmt-water-card.pat{border-left:3px solid var(--pat,var(--brand))}
.v-hub-mgmt-water-card.pam{border-left:3px solid var(--pam,#f472b6)}

.v-hub-card.f-tarefas,
.v-hub-card.f-refeicoes,
.v-hub-card.f-treino,
.v-hub-card.f-medicacao,
.v-hub-card.f-agua,
.v-hub-card.f-medidas {--accent:var(--info);--glow:color-mix(in srgb, var(--info) 18%, transparent);--icon-from:color-mix(in srgb, var(--info) 20%, transparent);--icon-to:color-mix(in srgb, var(--info) 4%, transparent)}

.v-hub-card.f-fin-pf,
.v-hub-card.f-otto-fin,
.v-hub-card.f-relatorios,
.v-hub-card.f-pj-pat {--accent:color-mix(in srgb, var(--brand) 70%, var(--tx));--glow:color-mix(in srgb, var(--brand) 22%, transparent);--icon-from:color-mix(in srgb, var(--brand) 20%, transparent);--icon-to:color-mix(in srgb, var(--brand) 4%, transparent)}

.v-hub-card.f-compras,
.v-hub-card.f-otto {--accent:color-mix(in srgb, var(--warn) 55%, var(--tx));--glow:color-mix(in srgb, var(--warn) 20%, transparent);--icon-from:color-mix(in srgb, var(--warn) 18%, transparent);--icon-to:color-mix(in srgb, var(--warn) 4%, transparent)}

.v-hub-card.f-pj-pam {--accent:var(--pam);--glow:color-mix(in srgb, var(--pam) 22%, transparent);--icon-from:color-mix(in srgb, var(--pam) 20%, transparent);--icon-to:color-mix(in srgb, var(--pam) 4%, transparent)}

.v-hub-card.f-jira {--accent:color-mix(in srgb, var(--good) 75%, var(--tx));--glow:color-mix(in srgb, var(--good) 20%, transparent);--icon-from:color-mix(in srgb, var(--good) 18%, transparent);--icon-to:color-mix(in srgb, var(--good) 4%, transparent)}

@media (max-width:1100px){
  .v-hub-grid{grid-template-columns:repeat(4,1fr)}
  .v-hub-card.s-3{grid-column:span 2}
  .v-hub-card.s-4{grid-column:span 4}
}
@media (max-width:680px){
  .v-hub-wrap{padding:32px 16px 64px}
  .v-hub-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px}
  .v-hub-card.s-1, .v-hub-card.s-2, .v-hub-card.s-3, .v-hub-card.s-4{grid-column:span 2}
  .v-hub-header{flex-direction:column;align-items:flex-start}
  .v-hub-greeting{font-size:38px}
}

/* hub não usa o body sem scroll do dashboard */
body:has(.v-hub-wrap){height:auto;min-height:100vh;overflow:auto}

/* pulse do destino âncora vindo do hub */
.collapsible.v-hub-anchor-pulse{
  animation:hub-anchor-pulse 2.4s ease;
}
@keyframes hub-anchor-pulse{
  0%, 100%{box-shadow:0 0 0 0 transparent}
  20%{box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent),0 0 30px color-mix(in srgb, var(--brand) 40%, transparent)}
  60%{box-shadow:0 0 0 6px color-mix(in srgb, var(--brand) 15%, transparent),0 0 40px color-mix(in srgb, var(--brand) 20%, transparent)}
}