/* 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:#fdecec;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:#3a2020}
body.ds-dashboard .alert-actions{margin-left:auto;flex-shrink:0}
body.ds-dashboard .btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-family:var(--font-body);font-weight:600;font-size:13.5px;border-radius:var(--radius-md);border:none;cursor:pointer;text-decoration:none;transition:filter var(--duration-fast) var(--ease-out)}
body.ds-dashboard .btn-outline{background:var(--card);color:var(--text-1);box-shadow:0 0 0 1px var(--border) inset;width:100%;justify-content:center}
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 .btn-outline é width:100% (botões de largura cheia do
   mockup); aqui o botão divide a linha com a data e volta ao tamanho do texto. */
body.ds-dashboard .service-foot .btn{width:auto;padding:7px 14px;font-size:12.5px;flex-shrink:0}
body.ds-dashboard .badge-unpaid{color:#a06800;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 .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 .btn:focus-visible,body.ds-dashboard .row-link:focus-visible{outline:none}
  body.ds-dashboard .service-card:has(.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 .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 .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)}
