/* ds-screens.css — GERADO por scripts/gen-ds-screens.py. Nao editar a mao.

   Cada mockup do ui-kit traz um <style> proprio depois do <link> do app.css.
   Esse delta esta reproduzido abaixo, escopado na classe que header.tpl coloca
   no <body> (`ds-<slug>`), porque as telas discordam entre si: o `.panel` de
   faturas nao tem padding e o de perfil tem. Sem o escopo, a ultima regra
   carregada venceria em todas as telas.

   Regras identicas ao ds-app.css foram omitidas. O seletor `main` dos mockups
   virou `.ds-main` (ver o comentario em ds-shell.css).

   Carregado depois de ds-app.css e antes de ds-shell.css, como no mockup. */

/* ── dashboard (de ui-kit/index.html) ────────────────────────── */
body.ds-dashboard .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-dashboard h1.greet{font-size:1.9rem;margin:0}
body.ds-dashboard h1.greet .accent{color:var(--accent)}
body.ds-dashboard .lead{margin:6px 0 0;font-size:14.5px}
body.ds-dashboard .promo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px 20px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
body.ds-dashboard .promo-text{font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:8px}
body.ds-dashboard .promo-text svg{width:15px;height:15px;color:var(--accent)}
body.ds-dashboard .promo-link{font-size:13px;font-weight:600;color:var(--accent-on-light);display:flex;align-items:center;gap:4px}
body.ds-dashboard .promo-link:hover{text-decoration:none;gap:6px}
body.ds-dashboard .promo-link svg{width:14px;height:14px;transition:transform var(--duration-fast) var(--ease-out)}
body.ds-dashboard .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:760px){
  body.ds-dashboard .stat-grid{grid-template-columns:repeat(2,1fr)}
}
body.ds-dashboard .stat-card{background:var(--card);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);display:flex;flex-direction:column;gap:10px}
body.ds-dashboard .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
body.ds-dashboard .stat-top{display:flex;align-items:center;justify-content:space-between}
body.ds-dashboard .stat-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0}
body.ds-dashboard .stat-icon{width:28px;height:28px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--deep);color:var(--text-3)}
body.ds-dashboard .stat-icon svg{width:15px;height:15px}
body.ds-dashboard .stat-card.featured .stat-icon{background:var(--accent-soft);color:var(--accent)}
body.ds-dashboard .stat-value{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--text-1);margin:0}
body.ds-dashboard .stat-card.featured .stat-value{color:var(--accent)}
body.ds-dashboard .stat-cta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-3)}
body.ds-dashboard .stat-card.featured .stat-cta{color:var(--accent-on-light)}
body.ds-dashboard .stat-cta svg{width:12px;height:12px}
/* Card inteiro clicável: o ::after do único link do card cobre a caixa toda
   (stretched link). A marcação não muda e o leitor de tela continua ouvindo
   um link só, com o texto do CTA. O foco do teclado aparece no card. */
body.ds-dashboard .stat-card{position:relative;cursor:pointer}
body.ds-dashboard .stat-cta::after{content:"";position:absolute;inset:0;border-radius:inherit}
@supports selector(:has(a)){
  body.ds-dashboard .stat-cta:focus-visible{outline:none}
  body.ds-dashboard .stat-card:has(.stat-cta:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
}
body.ds-dashboard .stat-card:hover .stat-cta{color:var(--text-1)}
body.ds-dashboard .stat-card.featured:hover .stat-cta{color:var(--accent-on-light)}
body.ds-dashboard .alert-card{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--alert-danger-bg);border:1px solid var(--accent-border);border-radius:var(--radius-lg)}
body.ds-dashboard .alert-icon{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--accent);color:#fff}
body.ds-dashboard .alert-icon svg{width:18px;height:18px}
body.ds-dashboard .alert-title{font-size:14px;font-weight:700;color:var(--text-1);margin:0 0 2px}
body.ds-dashboard .alert-body p{margin:0;font-size:13px;color:var(--alert-danger-fg)}
body.ds-dashboard .alert-actions{margin-left:auto;flex-shrink:0}
body.ds-dashboard .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:1100px){
  body.ds-dashboard .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body.ds-dashboard .service-grid{grid-template-columns:1fr}
}
/* Card compacto (pedido do dono): padding e gap menores, e a renovação divide
   a linha com o "Gerenciar" (.service-foot) — o card perde uma fileira. */
body.ds-dashboard .service-card{background:var(--card);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
body.ds-dashboard .service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
body.ds-dashboard .service-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
body.ds-dashboard .service-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 2px}
body.ds-dashboard .service-name{font-size:14px;font-weight:600;color:var(--text-1);margin:0;line-height:1.3}
body.ds-dashboard .service-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.ds-dashboard .service-meta{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11px;color:var(--text-3);white-space:nowrap}
body.ds-dashboard .service-meta strong{color:var(--text-1);font-weight:500;font-size:12.5px}
body.ds-dashboard .service-foot .nt-btn{flex-shrink:0}
body.ds-dashboard .badge-unpaid{color:var(--status-warn-fg);background:rgba(255,193,7,.16)}
body.ds-dashboard table{width:100%;border-collapse:collapse;font-size:13.5px}
body.ds-dashboard thead th{text-align:left;font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);padding:14px 20px;border-bottom:1px solid var(--border)}
body.ds-dashboard tbody td{padding:14px 20px;border-bottom:1px solid var(--border);color:var(--text-2)}
body.ds-dashboard tbody tr:last-child td{border-bottom:none}
body.ds-dashboard tbody tr:hover{background:var(--card-hover)}
body.ds-dashboard .mono-id{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
body.ds-dashboard .row-link{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:3px}
body.ds-dashboard .row-link svg{width:12px;height:12px}
body.ds-dashboard .row-link:hover{text-decoration:none}
/* Card do bloco de addons (Contratos): mesma superfície do .panel. */
body.ds-dashboard .nt-addon-widget{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 22px;overflow-x:auto}
body.ds-dashboard .nt-addon-widget + .nt-addon-widget{margin-top:18px}
/* Mesmo stretched link dos cards de stats, agora em "Seus serviços" (o
   "Gerenciar" cobre o card) e em "Faturas recentes" (o "Abrir" cobre a linha).
   <tr> com position:relative vale como bloco de contenção nos navegadores
   atuais; cada linha e cada card têm um link só. */
body.ds-dashboard .service-card{position:relative;cursor:pointer}
body.ds-dashboard .service-foot .nt-btn::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
body.ds-dashboard .panel tbody tr{position:relative;cursor:pointer;transition:background var(--duration-base) var(--ease-out)}
body.ds-dashboard .panel tbody tr:hover{background:var(--deep)}
body.ds-dashboard .row-link::after{content:"";position:absolute;inset:0}
@supports selector(:has(a)){
  body.ds-dashboard .service-foot .nt-btn:focus-visible,body.ds-dashboard .row-link:focus-visible{outline:none}
  body.ds-dashboard .service-card:has(.nt-btn:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
  body.ds-dashboard .panel tbody tr:has(.row-link:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
}
body.ds-dashboard td.num{font-weight:600;color:var(--text-1)}
body.ds-dashboard .ticket-list{display:flex;flex-direction:column}
body.ds-dashboard .ticket-row{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border)}
body.ds-dashboard .ticket-row:hover{background:var(--card-hover)}
body.ds-dashboard .ticket-id{font-family:var(--font-mono);font-size:11px;color:var(--text-3);flex-shrink:0;width:64px}
@media (max-width:860px){
  body.ds-dashboard .alert-card{flex-wrap:wrap}
  body.ds-dashboard .alert-actions{margin-left:0;width:100%}
  body.ds-dashboard .alert-actions .nt-btn{width:100%;justify-content:center}
}
@media (max-width:600px){
  body.ds-dashboard h1.greet{font-size:1.6rem}
  body.ds-dashboard .panel{overflow-x:auto}
  body.ds-dashboard table{min-width:520px}
  body.ds-dashboard .promo{flex-direction:column;align-items:flex-start;gap:8px}
  body.ds-dashboard .ticket-row{flex-wrap:wrap;gap:8px 12px}
  body.ds-dashboard .ticket-subject{flex-basis:100%;order:3}
}

/* ── kb-artigo (de ui-kit/kb-artigo.html) ────────────────────────── */
body.ds-kb-artigo .kb-grid.reverse{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:900px){
  body.ds-kb-artigo .kb-grid.reverse{grid-template-columns:1fr}
}
body.ds-kb-artigo .kb-hero.left{text-align:left;align-items:flex-start;padding:44px 0 28px}

/* ── parceiros (de ui-kit/parceiros.html) ────────────────────────── */
body.ds-parceiros .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-parceiros h1.greet{font-size:1.9rem;margin:0}
body.ds-parceiros .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-parceiros .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px}
body.ds-parceiros .panel-title{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
body.ds-parceiros .panel.compact{padding:14px 16px;max-width:340px;min-width:220px;flex:1}
body.ds-parceiros .panel.compact .panel-title{font-size:9.5px;margin:0 0 8px;padding-bottom:8px;border-bottom:none}
body.ds-parceiros .stat-grid{display:grid;grid-template-columns:minmax(0,1fr) 253px;gap:18px}
@media (max-width:760px){
  body.ds-parceiros .stat-grid{grid-template-columns:1fr}
}
body.ds-parceiros .stat-card.multi{flex-direction:column;gap:14px}
body.ds-parceiros .stat-mini-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
body.ds-parceiros .stat-mini{min-width:74px}
body.ds-parceiros .stat-card.multi .panel{background:transparent;box-shadow:none;padding:0;border-top:1px solid var(--border);padding-top:14px;border-radius:0}
body.ds-parceiros .stat-card.multi .panel.compact{border-top:none;padding-top:0}
body.ds-parceiros .stat-card.multi .panel-title{margin:0 0 12px;border-bottom:none;padding-bottom:0}
body.ds-parceiros .stat-mini{display:flex;flex-direction:column;gap:4px}
body.ds-parceiros .stat-mini-top{display:flex;align-items:center;gap:6px}
body.ds-parceiros .stat-mini .stat-icon{width:16px;height:16px}
body.ds-parceiros .stat-mini .stat-icon svg{width:9px;height:9px}
body.ds-parceiros .stat-mini .stat-label{font-size:8.5px}
body.ds-parceiros .stat-mini .stat-value{font-size:1rem}
body.ds-parceiros .stat-card{background:var(--card);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
body.ds-parceiros .stat-top{display:flex;align-items:center;justify-content:space-between}
body.ds-parceiros .stat-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0}
body.ds-parceiros .stat-icon{width:20px;height:20px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
body.ds-parceiros .stat-icon svg{width:11px;height:11px}
body.ds-parceiros .stat-value{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text-1);margin:0}
body.ds-parceiros .stat-subcard{margin-top:4px;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
body.ds-parceiros .stat-subcard span{font-size:10.5px;color:var(--text-3);line-height:1.35}
body.ds-parceiros .commission-list{display:flex;flex-direction:column}
body.ds-parceiros .commission-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:13px;color:var(--text-2)}
body.ds-parceiros .commission-row strong{font-size:1rem;font-weight:700;color:var(--text-1)}
body.ds-parceiros table{width:100%;border-collapse:collapse;font-size:13.5px}
body.ds-parceiros thead th{text-align:left;font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);padding:12px 0;border-bottom:1px solid var(--border)}

/* ── meus-dados (de ui-kit/meus-dados.html) ────────────────────────── */
body.ds-meus-dados .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-meus-dados h1.greet{font-size:1.9rem;margin:0}
body.ds-meus-dados .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-meus-dados .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px}
body.ds-meus-dados .panel-title{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* ── gerenciamento-usuario (de ui-kit/gerenciamento-usuario.html) ────────────────────────── */
body.ds-gerenciamento-usuario .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-gerenciamento-usuario h1.greet{font-size:1.9rem;margin:0}
body.ds-gerenciamento-usuario .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-gerenciamento-usuario .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── contatos (de ui-kit/contatos.html) ────────────────────────── */
body.ds-contatos .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-contatos h1.greet{font-size:1.9rem;margin:0}
body.ds-contatos .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-contatos .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Formulários de Usuários e Contatos: o .panel de ds-app.css não tem padding
   (é o das listas, onde .user-row/.contact-row trazem o seu), então a lista de
   permissões, os toggles e o botão encostavam na borda do card. Os painéis de
   formulário ganham o mesmo 22px 24px de Perfil e Meus Dados; os de lista
   seguem sem padding e só o título dos Convites Pendentes ganha recuo.
   Diálogos de confirmação ficam de fora: o <dialog> já tem padding próprio. */
body.ds-gerenciamento-usuario #ds-invite-user,
body.ds-contatos .panel:has(> .panel-title):not(dialog .panel){padding:22px 24px}
body.ds-gerenciamento-usuario .panel-title:not(dialog .panel-title),
body.ds-contatos .panel-title:not(dialog .panel-title){max-width:none;font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
body.ds-gerenciamento-usuario .panel:has(> .user-row) > .panel-title{margin:0;padding:18px 22px 14px}

/* ── emails-enviados (de ui-kit/emails-enviados.html) ────────────────────────── */
body.ds-emails-enviados .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-emails-enviados h1.greet{font-size:1.9rem;margin:0}
body.ds-emails-enviados .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-emails-enviados .row-link{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:3px}
body.ds-emails-enviados .row-link svg{width:12px;height:12px}
body.ds-emails-enviados .row-link:hover{text-decoration:none}
/* Ver e-mail (viewemail.tpl, sem mockup): mesma casca, card com metadados e o
   corpo em iframe. Sem altura explícita o iframe cai no padrão de 150px. */
body.ds-emails-enviados .eyebrow a{color:inherit}
body.ds-emails-enviados .eyebrow a:hover{color:var(--accent)}
body.ds-emails-enviados .email-view{padding:20px 22px}
body.ds-emails-enviados .email-meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
body.ds-emails-enviados .email-meta dt{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 4px}
body.ds-emails-enviados .email-meta dd{margin:0;font-size:14px;color:var(--text-1);display:flex;flex-wrap:wrap;gap:6px}
body.ds-emails-enviados .email-frame{display:block;width:100%;height:clamp(480px,70vh,1100px);border:1px solid var(--border);border-radius:var(--radius-md);background:#fff}
body.ds-emails-enviados .email-actions .nt-btn svg{width:14px;height:14px}

/* ── perfil (de ui-kit/perfil.html) ────────────────────────── */
body.ds-perfil .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-perfil h1.greet{font-size:1.9rem;margin:0}
body.ds-perfil .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-perfil .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px}
body.ds-perfil .panel-title{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* ── alterar-senha (de ui-kit/alterar-senha.html) ────────────────────────── */
body.ds-alterar-senha .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-alterar-senha h1.greet{font-size:1.9rem;margin:0}
body.ds-alterar-senha .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-alterar-senha .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px;max-width:480px}
body.ds-alterar-senha .panel-title{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* ── seguranca (de ui-kit/seguranca.html) ────────────────────────── */
body.ds-seguranca .ds-main{display:flex;flex-direction:column;gap:32px;min-width:0}
body.ds-seguranca h1.greet{font-size:1.9rem;margin:0}
body.ds-seguranca .lead{margin:6px 0 0;font-size:14.5px;color:var(--text-2)}
body.ds-seguranca .panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 24px}
body.ds-seguranca .panel-title{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* ── aparencia (Conta → Aparência) ─────────────────────────────────── */
body.ds-aparencia .nt-appearance__status{min-height:1.5em;font-size:14px;color:var(--accent);margin:0 0 var(--space-4)}
body.ds-aparencia .nt-appearance{display:flex;flex-direction:column;gap:var(--space-6)}
body.ds-aparencia .nt-appearance__fieldset{border:none;margin:0;padding:0}
body.ds-aparencia .nt-appearance__legend{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 var(--space-4);padding:0}
body.ds-aparencia .nt-appearance__options,
body.ds-aparencia .nt-appearance__fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:720px){body.ds-aparencia .nt-appearance__fieldset{grid-template-columns:1fr}}
body.ds-aparencia .nt-appearance__option{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;min-height:44px;transition:border-color .15s}
body.ds-aparencia .nt-appearance__option:focus-within{outline:2px solid var(--accent);outline-offset:2px}
body.ds-aparencia .nt-appearance__option input[type=radio]{position:absolute;opacity:0;width:0;height:0}
body.ds-aparencia .nt-appearance__option:has(input:checked){border-color:var(--accent)}
body.ds-aparencia .nt-appearance__preview{display:flex;border-radius:var(--radius-md);overflow:hidden;height:80px;border:1px solid var(--border)}
/* Preview cores fixas independentes do tema ativo */
body.ds-aparencia .nt-appearance__preview--light .nt-appearance__preview-sidebar{width:32%;background:#f1f3f5}
body.ds-aparencia .nt-appearance__preview--light .nt-appearance__preview-content{flex:1;padding:8px;background:#ffffff;display:flex;flex-direction:column;gap:5px}
body.ds-aparencia .nt-appearance__preview--light .nt-appearance__preview-line{height:8px;border-radius:3px;background:#dee2e6}
body.ds-aparencia .nt-appearance__preview--light .nt-appearance__preview-line--short{width:60%}
body.ds-aparencia .nt-appearance__preview--dark .nt-appearance__preview-sidebar{width:32%;background:#1e1e1e}
body.ds-aparencia .nt-appearance__preview--dark .nt-appearance__preview-content{flex:1;padding:8px;background:#0d0d0d;display:flex;flex-direction:column;gap:5px}
body.ds-aparencia .nt-appearance__preview--dark .nt-appearance__preview-line{height:8px;border-radius:3px;background:#3a3a3a}
body.ds-aparencia .nt-appearance__preview--dark .nt-appearance__preview-line--short{width:60%}
body.ds-aparencia .nt-appearance__preview--auto{background:linear-gradient(135deg,#ffffff 50%,#0d0d0d 50%)}
body.ds-aparencia .nt-appearance__preview--auto .nt-appearance__preview-sidebar{width:32%;background:linear-gradient(135deg,#f1f3f5 50%,#1e1e1e 50%)}
body.ds-aparencia .nt-appearance__preview--auto .nt-appearance__preview-content{flex:1;padding:8px;display:flex;flex-direction:column;gap:5px;background:transparent}
body.ds-aparencia .nt-appearance__preview--auto .nt-appearance__preview-line{height:8px;border-radius:3px;background:linear-gradient(135deg,#dee2e6 50%,#3a3a3a 50%)}
body.ds-aparencia .nt-appearance__preview--auto .nt-appearance__preview-line--short{width:60%}
body.ds-aparencia .nt-appearance__option-title{font-size:14px;font-weight:600;color:var(--text-1)}
body.ds-aparencia .nt-appearance__option-hint{font-size:12.5px;color:var(--text-2)}
body.ds-aparencia .nt-appearance__scope{font-size:13px;color:var(--text-3);margin:0}
body.ds-aparencia .nt-appearance__save{align-self:flex-start}

/* Contratos (addon nt_contrato, m=nt_contrato): o template do addon é Bootstrap 4 puro (.card, .table, .badge-*,
   .alert-*, .row/.col-*) e o tema não carrega bootstrap.min.css. Até 2026-09-30 só existia o escuro (theme-dark.css,
   seção 16) e no claro a lista saía solta sobre o fundo ilustrado. Aqui fica o layout e o claro, só com tokens; as
   regras do escuro são mais específicas (html[data-nt-theme]) e continuam valendo por cima. */
body.ds-contratos .nt-contrato-page .container-fluid{padding:0}
body.ds-contratos .nt-contrato-page h1{margin:0 0 var(--space-2)}
body.ds-contratos .nt-contrato-page .text-muted{color:var(--text-2)}
body.ds-contratos .nt-contrato-page .text-warning{color:var(--status-warn-fg)}
body.ds-contratos .nt-contrato-page .small{font-size:13px}
body.ds-contratos .nt-contrato-page .mb-0{margin-bottom:0}
body.ds-contratos .nt-contrato-page .mb-1{margin-bottom:4px}
body.ds-contratos .nt-contrato-page .mb-2{margin-bottom:8px}
body.ds-contratos .nt-contrato-page .mb-3{margin-bottom:16px}
body.ds-contratos .nt-contrato-page .mt-3{margin-top:16px}
body.ds-contratos .nt-contrato-page .mt-4{margin-top:24px}
body.ds-contratos .nt-contrato-page .row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:576px){body.ds-contratos .nt-contrato-page .row:has(>.col-sm-6){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){body.ds-contratos .nt-contrato-page .row:has(>.col-md-6){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){body.ds-contratos .nt-contrato-page .row:has(>.col-lg-8){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
/* Lista rótulo/valor do detalhe (dl.row com dt/dd col-sm-6): rótulo na largura do texto, valor com o resto; o selo
   de status quebra linha em vez de estourar o cartão estreito da coluna lateral. */
body.ds-contratos .nt-contrato-page dl.row:has(>dt){grid-template-columns:max-content minmax(0,1fr);gap:10px 16px;margin:0}
body.ds-contratos .nt-contrato-page dl.row dt{color:var(--text-2);font-weight:500}
body.ds-contratos .nt-contrato-page dl.row dd{margin:0;overflow-wrap:anywhere}
body.ds-contratos .nt-contrato-page .badge{white-space:normal;max-width:100%}
body.ds-contratos .nt-contrato-page .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
body.ds-contratos .nt-contrato-page .card.border-left-warning{border-left:4px solid var(--status-warn-fg)}
body.ds-contratos .nt-contrato-page .card.border-left-success{border-left:4px solid var(--status-ok-fg)}
body.ds-contratos .nt-contrato-page .card.border-left-secondary{border-left:4px solid var(--border-bright)}
body.ds-contratos .nt-contrato-page .card-header{background:var(--surface);border-bottom:1px solid var(--border);color:var(--text-1);padding:14px 20px}
body.ds-contratos .nt-contrato-page .card-title{margin:0;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
body.ds-contratos .nt-contrato-page .card-body{color:var(--text-1);padding:20px}
body.ds-contratos .nt-contrato-page hr{border:0;border-top:1px solid var(--border);margin:16px 0}
body.ds-contratos .nt-contrato-page .table-responsive{overflow-x:auto}
body.ds-contratos .nt-contrato-page .table{width:100%;margin:0;border-collapse:collapse;color:var(--text-1)}
body.ds-contratos .nt-contrato-page .table th,body.ds-contratos .nt-contrato-page .table td{padding:12px 16px;text-align:left;vertical-align:middle;border-top:1px solid var(--border)}
body.ds-contratos .nt-contrato-page .table thead th{border-top:0}
body.ds-contratos .nt-contrato-page .table-light th{background:var(--surface);color:var(--text-2);font-size:13px;font-weight:600;border-bottom:1px solid var(--border)}
body.ds-contratos .nt-contrato-page .table-hover tbody tr:hover{background:var(--card-hover)}
body.ds-contratos .nt-contrato-page .table td:last-child,body.ds-contratos .nt-contrato-page .table th:last-child{text-align:right}
/* Celular: a tabela de 4 colunas não cabe no cartão (o "Ver" sumia na rolagem lateral). Cada linha vira um bloco:
   tipo, data e selo à esquerda, botão à direita. `html … .table.table` (0,4,4) vence o border-top dos td do theme-dark.css (0,4,3). */
@media(max-width:600px){body.ds-contratos .nt-contrato-page .table,body.ds-contratos .nt-contrato-page .table tbody{display:block}body.ds-contratos .nt-contrato-page .table thead{display:none}body.ds-contratos .nt-contrato-page .table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;padding:14px 16px;border-top:1px solid var(--border)}body.ds-contratos .nt-contrato-page .table tbody tr:first-child{border-top:0}html body.ds-contratos .nt-contrato-page .table.table tbody td{display:block;grid-column:1;padding:0;border-top:0;text-align:left}body.ds-contratos .nt-contrato-page .table tbody td:first-child{font-weight:600}body.ds-contratos .nt-contrato-page .table tbody td:nth-child(2){color:var(--text-2);font-size:13px}html body.ds-contratos .nt-contrato-page .table.table tbody td:last-child{grid-column:2;grid-row:1/span 3;align-self:center;text-align:right}}
body.ds-contratos .nt-contrato-page .badge-warning{color:var(--status-warn-fg);background:rgba(255,193,7,.16)}
body.ds-contratos .nt-contrato-page .badge-success{color:var(--status-ok-fg);background:rgba(40,167,69,.12)}
body.ds-contratos .nt-contrato-page .badge-danger{color:var(--status-danger-fg);background:rgba(220,53,69,.16)}
body.ds-contratos .nt-contrato-page .badge-secondary{color:var(--text-3);background:var(--deep)}
body.ds-contratos .nt-contrato-page .alert{border-radius:var(--radius-md);padding:12px 20px}
body.ds-contratos .nt-contrato-page .alert-warning{background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.35);color:var(--status-warn-fg)}
body.ds-contratos .nt-contrato-page .alert-info{background:rgba(85,211,227,.12);border:1px solid rgba(85,211,227,.35);color:var(--status-info-fg)}
body.ds-contratos .nt-contrato-page .btn-secondary{background:var(--card);color:var(--text-1);box-shadow:0 0 0 1px var(--border) inset}
body.ds-contratos .nt-contrato-page .btn-secondary:hover{box-shadow:0 0 0 1px var(--border-bright) inset}