/* =========================================================================
   The Clinical — CHROME compartilhado (sidebar recolhível + topbar global)
   Fonte única usada por theclinical.html e nova-tela-premium.html
   Cores literais (independe das variáveis de cada página)
   ========================================================================= */

/* --- sidebar --- */
.sidebar{
  width:238px; flex-shrink:0; box-sizing:border-box;
  background:linear-gradient(180deg,#0c0b09,#070605);
  border-right:1px solid rgba(var(--brand-rgb),.13);
  display:flex; flex-direction:column; padding:22px 16px;
  position:sticky; top:0; height:100vh; transition:width .25s ease;
}
.sidebar *{ box-sizing:border-box; }
.brand{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 18px; position:relative; }
.brand .collapse{ position:absolute; top:-2px; right:-2px; width:26px; height:26px; border-radius:8px;
  border:1px solid rgba(var(--brand-rgb),.13); background:transparent; color:#8a8172; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.brand .collapse:hover{ color:var(--brand); border-color:rgba(var(--brand-rgb),.3); }
.brand .collapse svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.brand .logo{ display:flex; align-items:center; justify-content:center; }
.brand .word{ font-size:11px; letter-spacing:.42em; color:var(--brand); font-weight:300; padding-left:.42em; }
.brand .plan-chip{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink); border:1px solid rgba(var(--brand-rgb),.28);
  background:rgba(var(--brand-rgb),.07); border-radius:999px; padding:2px 9px; margin-top:2px; white-space:nowrap; }
.sidebar.collapsed .plan-chip{ display:none; }
.nav{ display:flex; flex-direction:column; gap:3px; margin-top:14px; flex:1; }
.nav a{ display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:11px; color:#c3bbaa;
  text-decoration:none; font-size:14px; font-weight:300; letter-spacing:.01em; transition:.18s; }
.nav a svg{ width:19px; height:19px; stroke:currentColor; fill:none; flex-shrink:0; opacity:.9; }
.nav a .lbl{ white-space:nowrap; overflow:hidden; }
.nav a:hover{ background:rgba(var(--brand-rgb),.06); color:#ece4d3; }
.nav a.active{ background:var(--grad-gold); color:#100d08; font-weight:400; }
.nav a.active svg{ stroke:#100d08; opacity:1; }
.side-foot{ margin-top:8px; border-top:1px solid rgba(var(--brand-rgb),.13); padding-top:14px; }
.personalize{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(var(--brand-rgb),.13); color:#c3bbaa; background:transparent; cursor:pointer; font-family:inherit; font-size:13.5px; width:100%; transition:.18s; }
.personalize:hover{ border-color:rgba(var(--brand-rgb),.3); color:var(--brand); }
.personalize .pi{ display:inline-flex; } .personalize svg{ width:17px; height:17px; stroke:currentColor; fill:none; }
.sidebar.collapsed{ width:76px; }
.sidebar.collapsed .word,.sidebar.collapsed .nav a .lbl,.sidebar.collapsed .personalize .lbl{ display:none; }
.sidebar.collapsed .nav a,.sidebar.collapsed .personalize{ justify-content:center; gap:0; padding:11px; }
.sidebar.collapsed .brand .collapse{ transform:rotate(180deg); }

/* --- topbar global --- */
.appbar{ display:flex; align-items:center; gap:18px; padding:14px 30px; box-sizing:border-box;
  border-bottom:1px solid rgba(var(--brand-rgb),.13); background:rgba(10,9,8,.72); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:30; }
.appbar *{ box-sizing:border-box; }
.gsearch{ flex:1; max-width:430px; display:flex; align-items:center; gap:10px; height:42px; padding:0 14px; border-radius:12px;
  border:1px solid rgba(var(--brand-rgb),.13); background:rgba(255,255,255,.02); color:#8a8172; cursor:text; transition:.2s; }
.gsearch:focus-within{ border-color:rgba(var(--brand-rgb),.3); background:rgba(var(--brand-rgb),.04); }
.gsearch svg{ width:17px; height:17px; stroke:#8a8172; fill:none; }
.gsearch input{ flex:1; background:transparent; border:none; outline:none; color:#ece4d3; font-family:inherit; font-size:14px; font-weight:300; }
.gsearch input::placeholder{ color:#8a8172; }
.kbd{ font-size:11px; color:#8a8172; border:1px solid rgba(var(--brand-rgb),.13); border-radius:6px; padding:2px 7px; letter-spacing:.05em; }
.gactions{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.gbell{ position:relative; width:42px; height:42px; border-radius:12px; border:1px solid rgba(var(--brand-rgb),.13);
  background:transparent; color:#c3bbaa; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.gbell:hover{ color:var(--brand); border-color:rgba(var(--brand-rgb),.3); }
.gbell svg{ width:19px; height:19px; fill:none; stroke:currentColor; }
.gdot{ position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; border-radius:999px;
  background:var(--grad-gold); color:#100d08; font-size:11px; font-weight:500; display:grid; place-items:center; padding:0 5px; }
.gprofile{ display:flex; align-items:center; gap:11px; cursor:pointer; padding:5px 6px; border-radius:12px; transition:.2s; }
.gprofile:hover{ background:rgba(var(--brand-rgb),.05); }
.gava{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#3a2f1e,#15110b);
  border:1px solid rgba(var(--brand-rgb),.3); display:grid; place-items:center; color:var(--brand); font-size:14px; }
.gwho b{ display:block; font-size:14px; font-weight:400; color:#ece4d3; } .gwho span{ font-size:12px; color:#8a8172; }
.gprofile svg{ stroke:#8a8172; fill:none; width:16px; height:16px; }

/* --- mobile nav --- */
.mobile-nav{ display:none; }
@media (max-width:920px){
  .sidebar{ display:none; }
  .appbar{ padding:12px 14px; gap:12px; } .gwho{ display:none; } .gsearch{ max-width:none; min-width:0; }
  .kbd{ display:none; } .gprofile{ display:none; } .gactions{ gap:12px; }
  /* painel Personalizar: centralizado acima da barra inferior */
  .tc-panel{ left:12px !important; right:12px !important; width:auto !important;
    bottom:calc(72px + env(safe-area-inset-bottom)) !important; top:auto !important;
    max-height:70vh; overflow-y:auto; }
  .mobile-nav{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:linear-gradient(180deg,#0c0b09,#070605); border-top:1px solid rgba(var(--brand-rgb),.13);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around; }
  .mobile-nav a{ color:#8a8172; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; text-decoration:none; }
  .mobile-nav a svg{ width:21px; height:21px; stroke:currentColor; fill:none; }
  .mobile-nav a.active{ color:var(--brand); }
}

/* ===================== CHROME — tema claro ===================== */
:root[data-theme="light"] .sidebar{ background:linear-gradient(180deg,#f8f3e9,#f0e9d9); border-right:1px solid rgba(150,120,60,.2); color:#5c5341; }
:root[data-theme="light"] .brand .collapse{ border-color:rgba(150,120,60,.2); color:#8a7f6a; }
:root[data-theme="light"] .brand .collapse:hover{ color:var(--brand); border-color:rgba(var(--brand-rgb),.4); }
:root[data-theme="light"] .brand .word{ color:var(--brand); }
:root[data-theme="light"] .brand .plan-chip{ color:var(--brand-ink); border-color:rgba(var(--brand-rgb),.35); background:rgba(var(--brand-rgb),.08); }
:root[data-theme="light"] .nav a{ color:#5c5341; }
:root[data-theme="light"] .nav a:hover{ background:rgba(var(--brand-rgb),.1); color:#2b2419; }
:root[data-theme="light"] .side-foot{ border-top:1px solid rgba(150,120,60,.2); }
:root[data-theme="light"] .personalize{ border-color:rgba(150,120,60,.2); color:#5c5341; }
:root[data-theme="light"] .personalize:hover{ border-color:rgba(var(--brand-rgb),.4); color:var(--brand); }
:root[data-theme="light"] .appbar{ background:rgba(248,243,233,.82); border-bottom:1px solid rgba(150,120,60,.2); }
:root[data-theme="light"] .gsearch{ border-color:rgba(150,120,60,.2); background:rgba(120,95,45,.04); color:#8a7f6a; }
:root[data-theme="light"] .gsearch svg{ stroke:#8a7f6a; }
:root[data-theme="light"] .gsearch input{ color:#2b2419; }
:root[data-theme="light"] .gsearch input::placeholder{ color:#8a7f6a; }
:root[data-theme="light"] .kbd{ color:#8a7f6a; border-color:rgba(150,120,60,.2); }
:root[data-theme="light"] .gbell{ border-color:rgba(150,120,60,.2); color:#5c5341; }
:root[data-theme="light"] .gbell:hover{ color:var(--brand); border-color:rgba(var(--brand-rgb),.4); }
:root[data-theme="light"] .gwho b{ color:#2b2419; } :root[data-theme="light"] .gwho span{ color:#8a7f6a; }
:root[data-theme="light"] .gprofile svg{ stroke:#8a7f6a; }
:root[data-theme="light"] .mobile-nav{ background:linear-gradient(180deg,#f8f3e9,#f0e9d9); border-top:1px solid rgba(150,120,60,.2); }
:root[data-theme="light"] .mobile-nav a{ color:#8a7f6a; }

/* ============================================================
   ESQUEMAS DE COR (data-scheme) — dark + claro. Fonte unica p/ todas as telas.
   Cobre os dois conjuntos de nomes de token (brand e gold/grad).
   Esquema padrao (dourado champanhe) vem do :root de cada pagina.
   ============================================================ */
:root[data-scheme="olive"]{ --brand-rgb:156,175,107; --brand:#9caf6b; --brand-600:#b3c489; --brand-700:#7d8f4e; --brand-ink:#d8dea8;
  --grad-gold:linear-gradient(135deg,#d3dca6,#a9bb72 46%,#75863f);
  --gold:#9caf6b; --gold-lt:#d8dea8; --gold-deep:#7d8f4e; --gold-soft:rgba(156,175,107,.14); --grad:linear-gradient(135deg,#d3dca6,#a9bb72 46%,#75863f); }
:root[data-theme="light"][data-scheme="olive"]{ --brand-rgb:111,127,63; --brand:#6f7f3f; --brand-600:#5f6f34; --brand-700:#51602c; --brand-ink:#55632e;
  --grad-gold:linear-gradient(135deg,#c9d69a,#9caf6b 46%,#6f7f3f);
  --gold:#6f7f3f; --gold-lt:#55632e; --gold-deep:#51602c; --gold-soft:rgba(111,127,63,.13); --grad:linear-gradient(135deg,#c9d69a,#9caf6b 46%,#6f7f3f); }

:root[data-scheme="sapphire"]{ --brand-rgb:143,166,212; --brand:#8fa6d4; --brand-600:#a9bce2; --brand-700:#6a7fb0; --brand-ink:#c6d2ec;
  --grad-gold:linear-gradient(135deg,#bccdf0,#8fa6d4 46%,#54699e);
  --gold:#8fa6d4; --gold-lt:#c6d2ec; --gold-deep:#6a7fb0; --gold-soft:rgba(143,166,212,.14); --grad:linear-gradient(135deg,#bccdf0,#8fa6d4 46%,#54699e); }
:root[data-theme="light"][data-scheme="sapphire"]{ --brand-rgb:74,95,150; --brand:#4a5f96; --brand-600:#3f5285; --brand-700:#354674; --brand-ink:#35406e;
  --grad-gold:linear-gradient(135deg,#b3c4ea,#7f93bf 46%,#4a5f96);
  --gold:#4a5f96; --gold-lt:#35406e; --gold-deep:#354674; --gold-soft:rgba(74,95,150,.13); --grad:linear-gradient(135deg,#b3c4ea,#7f93bf 46%,#4a5f96); }

:root[data-scheme="rose"]{ --brand-rgb:202,154,143; --brand:#ca9a8f; --brand-600:#ddb3a7; --brand-700:#a5766a; --brand-ink:#edcabd;
  --grad-gold:linear-gradient(135deg,#e9bfae,#ca9a8f 46%,#9d6a5a);
  --gold:#ca9a8f; --gold-lt:#edcabd; --gold-deep:#a5766a; --gold-soft:rgba(202,154,143,.14); --grad:linear-gradient(135deg,#e9bfae,#ca9a8f 46%,#9d6a5a); }
:root[data-theme="light"][data-scheme="rose"]{ --brand-rgb:165,105,90; --brand:#a5695a; --brand-600:#925a4c; --brand-700:#7d4a3e; --brand-ink:#86503f;
  --grad-gold:linear-gradient(135deg,#e4bcac,#c99a8f 46%,#a5695a);
  --gold:#a5695a; --gold-lt:#86503f; --gold-deep:#7d4a3e; --gold-soft:rgba(165,105,90,.13); --grad:linear-gradient(135deg,#e4bcac,#c99a8f 46%,#a5695a); }

:root[data-scheme="amethyst"]{ --brand-rgb:164,136,184; --brand:#a488b8; --brand-600:#bda2cf; --brand-700:#856a99; --brand-ink:#d8c6e6;
  --grad-gold:linear-gradient(135deg,#cbb2dc,#a488b8 46%,#6f5488);
  --gold:#a488b8; --gold-lt:#d8c6e6; --gold-deep:#856a99; --gold-soft:rgba(164,136,184,.14); --grad:linear-gradient(135deg,#cbb2dc,#a488b8 46%,#6f5488); }
:root[data-theme="light"][data-scheme="amethyst"]{ --brand-rgb:111,84,136; --brand:#6f5488; --brand-600:#5f4675; --brand-700:#4f3a62; --brand-ink:#5c4372;
  --grad-gold:linear-gradient(135deg,#c6b1d6,#a488b8 46%,#6f5488);
  --gold:#6f5488; --gold-lt:#5c4372; --gold-deep:#4f3a62; --gold-soft:rgba(111,84,136,.13); --grad:linear-gradient(135deg,#c6b1d6,#a488b8 46%,#6f5488); }

/* logo TC segue o esquema */
.brand .logo svg{ stroke:var(--brand); }

/* ===== Painel Personalizar ===== */
.tc-panel{ position:fixed; z-index:130; width:288px; background:#15120e; border:1px solid rgba(var(--brand-rgb),.2);
  border-radius:16px; padding:16px; box-shadow:0 24px 60px rgba(0,0,0,.55); display:none; color:#ece4d3; font-family:inherit; }
.tc-panel.show{ display:block; }
.tc-sec + .tc-sec{ margin-top:15px; padding-top:15px; border-top:1px solid rgba(var(--brand-rgb),.14); }
.tc-sec h4{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8a8172; margin:0 0 11px; font-weight:500; }
.tc-sw-row{ display:flex; gap:11px; flex-wrap:wrap; }
.tc-sw{ width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0; position:relative; transition:.15s; }
.tc-sw:hover{ transform:scale(1.08); }
.tc-sw.active{ border-color:#ece4d3; }
.tc-sw .ck{ position:absolute; inset:0; display:none; place-items:center; }
.tc-sw.active .ck{ display:grid; }
.tc-sw .ck svg{ width:15px; height:15px; stroke:#fff; fill:none; stroke-width:3; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.tc-sw-custom{ overflow:hidden; background:conic-gradient(from 0deg,#e0574a,#e0a24a,#d9d24a,#6fbf5a,#5ab6c4,#7f8fd4,#b07fd4,#d47fae,#e0574a); }
.tc-sw-custom input[type=color]{ position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); opacity:0; cursor:pointer; border:none; padding:0; background:transparent; }
.tc-swname{ font-size:11px; color:#8a8172; margin-top:9px; }
.tc-modeseg{ display:flex; gap:5px; background:rgba(255,255,255,.05); border-radius:11px; padding:4px; }
.tc-modeseg button{ flex:1; height:34px; border:none; background:transparent; color:#c3bbaa; cursor:pointer; font-family:inherit; font-size:13px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:.15s; }
.tc-modeseg button svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.tc-modeseg button.active{ background:var(--grad-gold); color:#100d08; font-weight:500; }
.tc-photo{ display:flex; gap:8px; }
.tc-pbtn{ flex:1; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px;
  border:1px solid rgba(var(--brand-rgb),.25); background:transparent; color:#c3bbaa; cursor:pointer; font-family:inherit; font-size:12.5px; transition:.15s; }
.tc-pbtn:hover{ color:var(--brand); border-color:var(--brand); }
.tc-pbtn svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
:root[data-theme="light"] .tc-panel{ background:#fffdf9; border-color:rgba(150,120,60,.22); color:#2b2419; box-shadow:0 24px 60px rgba(90,70,30,.2); }
:root[data-theme="light"] .tc-sec h4{ color:#8a7f6a; }
:root[data-theme="light"] .tc-modeseg{ background:rgba(120,95,45,.07); }
:root[data-theme="light"] .tc-modeseg button{ color:#5c5341; }
:root[data-theme="light"] .tc-sw.active{ border-color:#2b2419; }
:root[data-theme="light"] .tc-pbtn{ color:#5c5341; }