/* DevControl — tema próprio (marca System: ciano #00B4D8 sobre dark). */
:root{
  --accent:#00B4D8; --accent-h:#0096b4; --accent-soft:rgba(0,180,216,.12);
  --bg:#0b1118; --card:#121a24; --card2:#0e151d;
  --border:#1e2a36; --border-h:#2b3a49;
  --txt:#e6edf3; --txt2:#9fb0c0; --muted:#6b7c8d;
  --ok:#1ade5e; --oks:rgba(26,222,94,.12); --err:#ff5d6c; --errs:rgba(255,93,108,.12);
  --r:10px; --r-sm:7px;
  /* Aliases de compatibilidade: modulos portados do SysDesk/Agencias usam --cb/--mt/--tx/--cm.
     Sem isto eles caem no fallback hardcoded do ERP de origem e ficam fora de tom. [portao design] */
  --cb:var(--border); --mt:var(--txt2); --tx:var(--txt); --cm:var(--card);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--txt2)}

/* App shell */
.dc-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.dc-sidebar{background:var(--card2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 12px}
.dc-main{display:flex;flex-direction:column;min-width:0}
.dc-topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--border)}
.dc-title{font-size:22px;font-weight:800;margin:0;letter-spacing:-.3px}
.dc-sub{color:var(--txt2);font-size:13px;margin-top:2px}
.dc-topbar-r{text-align:right}
.dc-tenant{font-weight:700;font-size:13px}
.dc-user{color:var(--muted);font-size:12px}
.dc-content{padding:24px 28px}

/* Menu de perfil (top-right) — espelha o padrão da Clínica (avatar + nome → dropdown) */
.dc-profile{position:relative}
.dc-profile-btn{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;cursor:pointer;padding:6px 8px;border-radius:var(--r-sm);color:var(--txt);font-family:inherit}
.dc-profile-btn:hover{background:var(--card);border-color:var(--border)}
.dc-ava{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#001018;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dc-profile-meta{text-align:right;line-height:1.2}
.dc-profile-meta b{display:block;font-size:13px;font-weight:700;color:var(--txt)}
.dc-profile-meta small{font-size:11px;color:var(--muted)}
.dc-profile-chev{color:var(--muted);flex:0 0 auto}
.dc-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.45);padding:7px;display:none;z-index:60}
.dc-menu.open{display:block}
.dc-menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm);color:var(--txt2);font-size:13px;font-weight:600}
.dc-menu a:hover{background:var(--card2);color:var(--txt)}
.dc-menu a.dc-menu-out:hover{color:var(--err)}
.dc-menu-h{padding:8px 11px;border-bottom:1px solid var(--border);margin-bottom:5px}
.dc-menu-h b{display:block;color:var(--txt);font-size:13px}
.dc-menu-h small{color:var(--muted);font-size:11px;display:block}

/* Brand + nav */
.dc-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:12px}
.dc-brand-logo{width:40px;height:40px;border-radius:9px;background:var(--accent);color:#001018;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-1px}
.dc-brand-logo.big{width:56px;height:56px;font-size:22px;margin:0 auto}
.dc-brand-logo-img{background:#fff;overflow:hidden;padding:3px}
.dc-brand-logo-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dc-brand-txt strong{display:block;font-size:15px}
.dc-brand-txt small{color:var(--muted);font-size:11px}
.dc-nav{flex:1;display:flex;flex-direction:column;gap:2px}
.dc-nav-sec{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:14px 8px 6px;font-weight:700}
.dc-nav-a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--txt2);font-weight:600;font-size:13px}
.dc-nav-a .i{width:18px;text-align:center}
.dc-nav-a:hover{background:var(--card);color:var(--txt)}
.dc-nav-a.active{background:var(--accent-soft);color:var(--accent)}
.dc-nav-a.soon{color:var(--muted);cursor:default;opacity:.7}
.dc-nav-a.soon em{margin-left:auto;font-style:normal;font-size:10px;background:var(--border);color:var(--txt2);padding:1px 6px;border-radius:20px}
.dc-nav-foot{border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
/* Accordion: cada grupo recolhe; abre só o do módulo ativo (um-aberto-por-vez). */
.dc-nav details.dc-grp{margin:0}
.dc-nav details.dc-grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.dc-nav details.dc-grp>summary::-webkit-details-marker{display:none}
.dc-nav details.dc-grp>summary.dc-nav-sec::after{content:'▸';margin-left:auto;font-size:9px;color:var(--muted);transition:transform .15s ease}
.dc-nav details.dc-grp[open]>summary.dc-nav-sec::after{transform:rotate(90deg)}
.dc-nav details.dc-grp>summary:hover{color:var(--txt2)}

/* Cards / KPIs */
.dc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.dc-card-h{font-size:15px;font-weight:700;margin:0 0 14px}
.dc-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
.dc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;display:block}
.dc-kpi:hover{border-color:var(--border-h)}
.dc-kpi-n{font-size:34px;font-weight:800;color:var(--accent);line-height:1}
.dc-kpi-l{color:var(--txt2);font-size:13px;margin-top:6px}

/* Form */
.dc-form{display:flex;flex-direction:column;gap:6px}
/* Variante de formulario em LINHA (filtro no topo de tela). Existe como classe para o layout
   nao morar num `style=` dentro do componente — inline vence media query. */
.dc-form.row{flex-direction:row;align-items:flex-end;gap:10px;flex-wrap:wrap}
.dc-form label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);font-weight:600;margin-top:8px}
/* `min-width:0` e o `minmax(0,1fr)` do FLEXBOX. Sem ele, um flex item tem `min-width:auto` =
   min-content, e o min-content de um <select> e a OPCAO MAIS LONGA (um nome de assinante
   inteiro): o campo nao encolhe e EMPURRA a pagina. Mesmo bug do grid, outra roupa. */
.dc-form input,.dc-form select,.dc-form textarea{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;color:var(--txt);font:inherit;outline:none;min-width:0;max-width:100%}
.dc-form input:focus,.dc-form select:focus,.dc-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dc-form label.dc-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--txt);margin-top:12px}
.dc-form label.dc-check input{width:auto;padding:0}
.dc-form-actions{display:flex;gap:10px;margin-top:14px}
/* min-height 44px: o alvo de toque era ~41px (padding 10 + 14/1.5). Regra 5.3 do design system.
   inline-flex+center mantem o texto centrado com a altura minima. */
.dc-btn{font:inherit;background:var(--accent);color:#001018;border:none;border-radius:var(--r-sm);padding:10px 18px;font-weight:700;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.dc-btn:hover{background:var(--accent-h)}
/* Foco de teclado: os chips de filtro sao <a> e ficavam so com o outline do navegador, fraco
   sobre fundo escuro. Mesmo anel ja usado nos inputs do .dc-form. */
.dc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
/* ghost com --border (#1e2a36) sobre --bg dava ~1.3:1 — a borda sumia e o chip nao parecia
   clicavel. --border-h ja existe no token set para exatamente isso. */
.dc-btn.ghost{background:transparent;border:1px solid var(--border-h);color:var(--txt2)}
.dc-btn.block{width:100%;margin-top:10px;padding:12px}
.dc-filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.dc-filtros .push{margin-left:auto}

/* Table */
.dc-table{width:100%;border-collapse:collapse}
.dc-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border)}
.dc-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.dc-row-actions{white-space:nowrap;text-align:right}
.dc-link{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0 6px}
.dc-link.danger{color:var(--err)}
.dc-muted{color:var(--muted)}

/* Pills + banners */
/* Controles dentro da celula da tabela. Existem como CLASSE porque `style=` inline vence
   qualquer folha — inclusive o @media que sobe a fonte para 16px no mobile. Com o inline, o
   media query virava decoracao: 11px dispara zoom automatico no iOS e o alvo ficava em 25px. */
.dc-cell-in{padding:4px;font-size:12px}
/* Tabela larga rola DENTRO do proprio bloco. Sem isto a PAGINA inteira rola de lado no celular
   — nesta tela cada linha tem 2 selects + 2 inputs + 3 acoes. Secao 5.4/6.3. */
.dc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* `min-width` e OPT-IN por tela, nunca piso global: numa tabela de 3 colunas ele criaria rolagem
   lateral sem necessidade. Use `.dc-table-wrap.wide` so onde a tabela e realmente larga. */
.dc-table-wrap.wide .dc-table{min-width:1100px}
.dc-pill{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.dc-pill.on{background:var(--oks);color:var(--ok)} .dc-pill.off{background:var(--border);color:var(--txt2)}
/* `vencido` pintado do mesmo cinza neutro de `aberto`/`cancelado` fazia a barra prometer
   "Vencidas" e a linha nao sinalizar perigo nenhum. Semantica de cor, secao 1.3. */
.dc-pill.late{background:var(--errs);color:var(--err)}
/* Selo de exigencia humana (ex.: divergencia de valor). Existe para tirar o `#7a2d2d` cravado
   no HTML — hex solto viola a secao 6.1 e nao acompanha tema nenhum. */
.dc-pill.crit{background:var(--errs);border:1px solid var(--err);color:var(--err)}
/* Selo usado como LINK. O selo (secao 2) e indicador de estado, nao controle — mas quando ele
   navega, precisa de alvo de toque. Classe propria em vez de repintar o `.dc-pill` inteiro. */
a.dc-pill-link{text-decoration:none}
/* nao herdava a fonte do app: caia nos 13.33px default do UA */
.dc-profile-btn{font:inherit}
.dc-banner{padding:11px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:13px}
.dc-banner.ok{background:var(--oks);border-left:3px solid var(--ok);color:var(--ok)}
.dc-banner.erro{background:var(--errs);border-left:3px solid var(--err);color:var(--err)}

/* Planos */
.dc-planos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-plano{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center}
.dc-plano-nome{font-weight:700;font-size:16px}
.dc-plano-preco{font-size:30px;font-weight:800;color:var(--accent);margin:10px 0}
.dc-plano-preco .cur{font-size:15px;vertical-align:super} .dc-plano-preco .per{font-size:13px;color:var(--muted);font-weight:500}
.dc-plano-slug{color:var(--muted);font-size:12px;font-family:ui-monospace,monospace}

/* Login */
.dc-login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.dc-login-card{width:380px;max-width:92vw;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:32px}
.dc-login-brand{text-align:center;margin-bottom:22px}
.dc-login-brand h1{margin:12px 0 2px;font-size:24px;letter-spacing:-.5px}
.dc-login-brand p{color:var(--muted);font-size:12px;margin:0}
.dc-login-back{text-align:center;margin-top:16px;font-size:12px}

/* Landing */
.dc-landing{max-width:880px;margin:0 auto;padding:80px 24px}
.dc-landing h1{font-size:40px;letter-spacing:-1px;margin:0 0 8px}
.dc-landing h1 span{color:var(--accent)}
.dc-landing .lead{color:var(--txt2);font-size:17px;max-width:620px}
.dc-landing .cta{display:inline-block;margin-top:26px;background:var(--accent);color:#001018;font-weight:700;padding:13px 26px;border-radius:9px}
.dc-soon-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:48px}
.dc-soon-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.dc-soon-item b{display:block} .dc-soon-item small{color:var(--muted)}

/* ── MOBILE-FIRST: sidebar vira drawer off-canvas (hambúrguer) — gabarito mobile todos ERPs ── */
.dc-burger{display:none;background:none;border:1px solid var(--border);color:var(--txt);width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto;font-size:19px;line-height:1}
.dc-burger:hover{border-color:var(--accent);color:var(--accent)}
.dc-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70}
@media(max-width:860px){
  /* 16px evita o zoom automatico do iOS ao focar; 44px e o alvo minimo de toque (secao 5.3). */
  .dc-cell-in{font-size:16px;min-height:44px;padding:8px}
  .dc-row-actions .dc-link{min-height:44px;display:inline-flex;align-items:center}
  /* Hit-area INVISIVEL: inflar o selo para 44px o transformava num bloco quase 2x maior que os
     selos irmaos da mesma tabela — alvo resolvido, coerencia quebrada. Assim o selo mantem os
     21px e o dedo alcanca 44. [portao design] */
  a.dc-pill-link{position:relative}
  a.dc-pill-link::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  /* o `margin-left:auto` jogava o CTA sozinho numa 3a linha, colado a direita */
  .dc-filtros .push{margin-left:0;width:100%}
  /* `minmax(0,1fr)`, nao `1fr`. `1fr` cru e `minmax(auto,1fr)`: o minimo `auto` vale o
     min-content do conteudo, entao uma tabela larga EMPURRA a track e a pagina rola de lado —
     mesmo com `overflow-x:auto` no wrapper dela. O wrapper so contem a rolagem quando o
     ancestral PODE encolher; e isso que o zero habilita. (secao 5.2 do design system) */
  .dc-app{grid-template-columns:minmax(0,1fr)}
  .dc-grid,.dc-cards,.dc-planos{grid-template-columns:minmax(0,1fr)}
  .dc-sidebar{position:fixed;left:0;top:0;height:100dvh;transform:translateX(-100%);transition:transform .22s ease;z-index:80;width:min(84vw,290px);box-shadow:2px 0 26px rgba(0,0,0,.55);overflow-y:auto}
  body.dc-nav-open .dc-sidebar{transform:translateX(0)}
  body.dc-nav-open .dc-backdrop{display:block}
  .dc-burger{display:inline-flex}
  .dc-topbar{padding:12px 14px}
  .dc-content{padding:16px 14px}
  /* qualquer input/select/textarea >=16px evita o zoom automático do iOS */
  input,select,textarea{font-size:16px}
  /* Especificidade CASADA (0,2,1): a linha acima e (0,0,1) e perdia para `.dc-form input`, que
     tem `font:inherit` — media query nao soma especificidade. Sem esta regra, os 16px eram
     decorativos no produto inteiro e todo campo disparava zoom no iOS. */
  .dc-form input,.dc-form select,.dc-form textarea{font-size:16px;min-height:44px}
  /* O item FLEX e o <div> que embrulha label+campo, nao o campo. `min-width:0` no campo nao
     adianta: 100% de um pai ja inflado continua inflado. E o `flex-wrap` deixa a linha quebrar
     em vez de empurrar a pagina. [portao design — medido: docSW 668 -> 405] */
  .dc-form{flex-wrap:wrap}
  .dc-form>div{min-width:0}
  /* Alvos pequenos que sobraram fora de `.dc-row-actions` (medidos entre 11px e 30px). */
  .dc-link{min-height:44px;display:inline-flex;align-items:center}
  .dc-nav-a{min-height:44px}
}