:root{
  --navy:#0d1b35; --navy-2:#16264a; --gold:#c9a050; --cream:#f4efe6;
  --papel:#faf7f0; --borda:#e4dac3; --texto:#41506b; --suave:#8a8170;
  --verde:#5f9160; --amarelo:#c9a050; --vermelho:#b9573f;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  /* superfícies do layout */
  --fundo:#f4f5f7; --superficie:#ffffff; --linha:#dfe3e8;
  --menu:#0d1b35; --menu-2:#16264a; --menu-txt:#c2ccdd;
  --rotulo:#5a6b86;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fundo);font-family:var(--sans);color:var(--texto);font-size:13.5px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--navy)}
.oculto{display:none !important}

.eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--suave);font-weight:500}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;margin:0}
h1{font-size:28px} h2{font-size:23px} h3{font-size:18px}
h1 em,h2 em{color:var(--gold);font-style:italic}

/* ---------------- login ---------------- */
#telaLogin{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy)}
.cartao-login{background:var(--papel);padding:44px 38px;border-radius:6px;width:100%;max-width:380px}
.cartao-login .regua{width:28px;height:2px;background:var(--gold);margin-bottom:14px}
.cartao-login h1{margin:4px 0 26px}
.cartao-login label{display:block;margin-bottom:16px}
.cartao-login input{width:100%;margin-top:6px}

/* ---------------- barra superior ---------------- */
.barra{
  position:fixed;top:0;left:0;right:0;height:54px;z-index:20;
  background:var(--superficie);border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:16px;padding:0 18px;
  box-shadow:0 1px 3px rgba(13,27,53,.06);
}
.barra-menu{display:none;background:none;border:none;font-size:19px;cursor:pointer;color:var(--navy)}
.barra-marca{font-family:var(--serif);font-size:19px;color:var(--navy);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.barra-marca em{color:var(--gold);font-style:italic}
.barra-clinica{display:flex;align-items:center;gap:8px;margin-left:18px;
  padding-left:18px;border-left:1px solid var(--linha)}
.barra-clinica select{border:1px solid var(--linha);border-radius:4px;padding:6px 10px;
  background:var(--fundo);min-width:180px;max-width:260px}
.barra-dir{margin-left:auto;display:flex;align-items:center;gap:14px}
.barra-icone{position:relative;background:none;border:none;font-size:16px;cursor:pointer;
  width:36px;height:36px;border-radius:50%}
.barra-icone:hover{background:var(--fundo)}
.barra-icone b{position:absolute;top:2px;right:0;font-size:10px;color:#fff;
  background:var(--vermelho);border-radius:9px;padding:0 5px;line-height:15px}
.barra-icone b:empty{display:none}
.barra-usuario{text-align:right;line-height:1.25}
.barra-usuario b{display:block;color:var(--navy);font-weight:600;font-size:13px}
.barra-usuario span{font-size:11px;color:var(--suave)}
.barra-sair{background:none;border:1px solid var(--linha);color:var(--rotulo);
  padding:6px 14px;border-radius:4px;cursor:pointer}
.barra-sair:hover{border-color:var(--gold);color:var(--navy)}

/* ---------------- estrutura ---------------- */
.corpo{display:flex;padding-top:54px;min-height:100vh}
.lateral{
  width:248px;flex:0 0 248px;background:var(--menu);color:var(--menu-txt);
  position:fixed;top:54px;bottom:0;left:0;overflow-y:auto;padding-bottom:20px;
  display:flex;flex-direction:column;
}
.area{flex:1;margin-left:248px;padding:22px 26px 60px;min-width:0}

.item-inicio{display:block;padding:14px 20px;color:#c2ccdd;cursor:pointer;
  border-bottom:1px solid #21335a;font-weight:500}
.item-inicio:hover{background:var(--menu-2);color:#fff}
.item-inicio.ativo{background:var(--menu-2);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}

.mod{border-bottom:1px solid #1a2b4f}
.mod-rodape{margin-top:auto;border-top:1px solid #21335a;border-bottom:none}
.mod-cabeca{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;
  color:#dbe2ee;padding:13px 20px;cursor:pointer;text-align:left;font-weight:600;font-size:13.5px}
.mod-cabeca:hover{background:var(--menu-2)}
.mod-icone{color:var(--gold);font-size:13px;width:14px}
.mod-seta{margin-left:auto;transition:transform .15s;color:#6f7d99}
.mod.aberto .mod-seta{transform:rotate(90deg)}
.mod-corpo{display:none;padding:0 0 10px}
.mod.aberto .mod-corpo{display:block}

.grupo{padding:6px 0}
.grupo-rotulo{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:#6f7d99;padding:6px 20px 4px;display:flex;align-items:center;gap:6px}
.selo-gh{background:var(--gold);color:var(--navy);border-radius:3px;
  padding:0 5px;font-size:9px;letter-spacing:.5px;font-weight:600}
.lateral .item{display:block;padding:7px 20px 7px 32px;color:#a8b4c8;cursor:pointer;
  font-size:13px;border-left:3px solid transparent}
.lateral .item:hover{background:var(--menu-2);color:#fff}
.lateral .item.ativo{background:var(--menu-2);color:#fff;border-left-color:var(--gold);font-weight:500}

/* ---------------- trilha e título ---------------- */
.trilha{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--suave);margin-bottom:4px}
.trilha i{font-style:normal;color:#b9c2d0}
.trilha b{color:var(--navy);font-weight:500}
.titulo-tela{font-size:25px;margin-bottom:20px;text-transform:uppercase;
  font-family:var(--sans);font-weight:600;letter-spacing:.4px;font-size:19px;color:var(--navy)}

/* ---------------- blocos de formulário ---------------- */
.bloco{background:var(--superficie);border:1px solid var(--linha);border-radius:5px;
  padding:18px 20px 20px;margin-bottom:18px}
.bloco-titulo{font-size:12.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--navy);padding-bottom:9px;margin-bottom:16px;border-bottom:2px solid var(--navy);
  display:flex;align-items:center}
.contador{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:12px;color:var(--suave)}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 20px}
.form label{display:flex;flex-direction:column;gap:5px}
.form label>span{font-size:11.5px;color:var(--rotulo);font-weight:500}
.form label>span i{color:var(--vermelho);font-style:normal}
.form label.largo{grid-column:1/-1}
.form label.duplo{grid-column:span 2}
@media(max-width:760px){.form label.duplo{grid-column:1/-1}}
.form .par{display:flex;align-items:center;gap:8px}
.form .par input{flex:1}
.form .ate{color:var(--suave);font-size:12px}
.form label.opcao{flex-direction:row;align-items:center;gap:8px}
.form label.opcao input{width:auto}
.form label.opcao span{font-size:13px;color:var(--texto)}
input,select,textarea{padding:8px 10px;border:1px solid var(--linha);border-radius:4px;
  background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 2px rgba(13,27,53,.08)}
input:disabled,.calculado{background:#eef0f3;color:var(--rotulo)}
textarea{min-height:80px;resize:vertical}
label.campo{display:block;margin-bottom:14px}
label.campo span{display:block;margin-bottom:5px}

.barra-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--linha)}
.previa{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}

/* ---------------- botões ---------------- */
button.acao{background:var(--navy);color:#fff;border:none;padding:9px 22px;
  border-radius:4px;cursor:pointer;font-weight:500}
button.acao:hover{background:var(--gold);color:var(--navy)}
button.leve{background:#fff;border:1px solid var(--linha);color:var(--rotulo);
  padding:8px 15px;border-radius:4px;cursor:pointer}
button.leve:hover{border-color:var(--navy);color:var(--navy)}
button.risco{border-color:#e4c2b8;color:var(--vermelho)}
button.risco:hover{border-color:var(--vermelho)}

/* ---------------- tabelas ---------------- */
table{width:100%;border-collapse:collapse;background:var(--superficie)}
th{text-align:left;font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--rotulo);font-weight:600;padding:9px 10px;
  background:#eef0f3;border-bottom:1px solid var(--linha)}
td{padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
tbody tr:hover{background:#f7f9fb}
tr.total td{background:#eef0f3;font-weight:600;color:var(--navy);border-top:2px solid var(--navy)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
table.mini th,table.mini td{padding:6px 8px;font-size:12.5px}

/* ---------------- componentes ---------------- */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:5px;
  padding:18px 20px;margin-bottom:16px}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:5px;padding:15px 17px}
.kpi b{display:block;font-family:var(--serif);font-style:italic;font-size:28px;
  color:var(--navy);line-height:1.15}

.capa{background:var(--navy);color:var(--cream);border-radius:6px;padding:34px 36px}
.capa-regua{width:28px;height:2px;background:var(--gold);margin-bottom:12px}
.capa .eyebrow{color:#9aa6bd}
.capa h2{color:var(--cream);margin:6px 0 10px}
.capa p{max-width:720px;color:#c8d2e2;margin:0}
.capa-clinica{margin-top:18px;font-size:13px;color:#9aa6bd}
.capa-clinica b{color:var(--gold)}
.informativo{padding:11px 0;border-bottom:1px solid var(--linha)}
.informativo:last-child{border-bottom:none}
.informativo b{color:var(--navy)}
.informativo div{font-size:13px;color:var(--texto);margin-top:3px}

.pilula{display:inline-block;font-size:10px;letter-spacing:.9px;text-transform:uppercase;
  padding:3px 9px;border-radius:3px;border:1px solid var(--linha);background:var(--fundo);color:var(--rotulo)}
.pilula.verde{color:var(--verde);border-color:#bcd0bc;background:#eef4ee}
.pilula.amarelo{color:#8d6d24;border-color:#e6d5ac;background:#f9f2e0}
.pilula.vermelho{color:var(--vermelho);border-color:#e4c2b8;background:#faeee9}
.pilula.navy{color:var(--navy);border-color:var(--navy);background:transparent}

.aviso{padding:10px 14px;border-radius:4px;margin-bottom:14px;font-size:13px}
.aviso.erro{background:#faeee9;border:1px solid #e4c2b8;color:#8c3f2c}
.aviso.ok{background:#eef4ee;border:1px solid #bcd0bc;color:#3f6440}
.vazio{padding:40px 20px;text-align:center;color:var(--suave)}

.fundo{position:fixed;inset:0;background:rgba(13,27,53,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow-y:auto;z-index:40}
.modal{background:var(--superficie);border-radius:6px;padding:26px;width:100%;max-width:640px}
.modal .cabeca{display:flex;align-items:center;margin-bottom:18px}
.modal .cabeca button{margin-left:auto;background:none;border:none;font-size:22px;
  cursor:pointer;color:var(--suave)}

.barras{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
.barras .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;min-width:34px}
.barras .haste{width:100%;border-radius:2px 2px 0 0;background:var(--navy);min-height:2px}
.barras .haste.acima{background:var(--verde)}
.barras .haste.abaixo{background:var(--vermelho)}
.barras .haste.na_media{background:var(--gold)}
.barras .rot{font-size:10px;color:var(--suave);white-space:nowrap}
.barras .val{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--navy)}

.etiq{background:#fff;border:1px solid var(--linha);color:var(--rotulo);
  font-size:10px;letter-spacing:.9px;text-transform:uppercase;padding:4px 10px;
  border-radius:3px;cursor:pointer}
.etiq:hover{border-color:var(--gold)}
.etiq.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.etiq.verde.on{background:var(--verde);border-color:var(--verde);color:#fff}
.etiq.amarelo.on{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.etiq.vermelho.on{background:var(--vermelho);border-color:var(--vermelho);color:#fff}

/* ---------------- responsivo ---------------- */
@media(max-width:900px){
  .barra-menu{display:block}
  .barra-clinica{margin-left:8px;padding-left:8px}
  .barra-clinica label{display:none}
  .barra-clinica select{min-width:130px}
  .barra-usuario{display:none}
  .lateral{transform:translateX(-100%);transition:transform .18s;z-index:19;width:260px}
  body.menu-aberto .lateral{transform:translateX(0);box-shadow:4px 0 16px rgba(13,27,53,.2)}
  .area{margin-left:0;padding:16px 14px 50px}
  table{font-size:12.5px}
}
@media print{
  .barra,.lateral,.barra-acoes,.trilha{display:none !important}
  .area{margin:0;padding:0}
  .bloco{border:none;page-break-inside:avoid}
}
/* ============================================================
   CRM — linguagem visual do WhatsApp Web
   ============================================================ */
:root{
  --wa-painel:#f0f2f5;      /* barras e cabeçalhos */
  --wa-lista:#ffffff;       /* fundo da lista de conversas */
  --wa-fundo:#efeae2;       /* fundo da conversa */
  --wa-saida:#d9fdd3;       /* balão enviado */
  --wa-entrada:#ffffff;     /* balão recebido */
  --wa-verde:#00a884;       /* acento */
  --wa-verde-escuro:#008069;
  --wa-txt:#111b21;
  --wa-sec:#667781;
  --wa-linha:#e9edef;
  --wa-hover:#f5f6f6;
  --wa-sel:#f0f2f5;
}

.wa{
  position:relative;display:grid;grid-template-columns:340px 1fr;
  height:min(76vh,700px);min-height:460px;
  border:1px solid var(--wa-linha);border-radius:6px;overflow:hidden;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--wa-txt);
  box-shadow:0 1px 3px rgba(11,20,26,.08);
}

/* ---------- cabeçalhos ---------- */
.wa-cabeca{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--wa-painel);border-bottom:1px solid var(--wa-linha);flex:0 0 auto;
}
.wa-nome{font-size:15px;font-weight:600;color:var(--wa-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-sub{font-size:12.5px;color:var(--wa-sec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-acoes{margin-left:auto;display:flex;gap:4px}
.wa-icone{background:none;border:none;color:#54656f;font-size:17px;
  width:36px;height:36px;border-radius:50%;cursor:pointer;line-height:1}
.wa-icone:hover{background:rgba(11,20,26,.06)}

.wa-avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:var(--wa-verde);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:16px;
}
.wa-avatar.grande{width:88px;height:88px;font-size:34px;margin:16px auto 0}

/* ---------- painel esquerdo ---------- */
.wa-lado{display:flex;flex-direction:column;min-height:0;background:var(--wa-lista);
  border-right:1px solid var(--wa-linha)}
.wa-busca{padding:8px 12px;background:var(--wa-lista);border-bottom:1px solid var(--wa-linha);flex:0 0 auto}
.wa-busca input{width:100%;background:var(--wa-painel);border:none;border-radius:8px;
  padding:8px 14px;font-size:14px;color:var(--wa-txt)}
.wa-busca input:focus{outline:1px solid var(--wa-verde)}

.wa-conversas{flex:1 1 0;min-height:0;overflow-y:auto}
.wa-item{display:flex;gap:12px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--wa-linha)}
.wa-item:hover{background:var(--wa-hover)}
.wa-item.sel{background:var(--wa-sel)}
.wa-item-corpo{min-width:0;flex:1}
.wa-item-topo{display:flex;align-items:baseline;gap:8px}
.wa-item-nome{font-size:15px;color:var(--wa-txt);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-item-hora{font-size:11.5px;color:var(--wa-sec);flex:0 0 auto}
.wa-item-previa{font-size:13.5px;color:var(--wa-sec);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-item-marcas{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.wa-etapa{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--wa-verde-escuro);background:#d9fdd3;border-radius:3px;padding:2px 7px}
.wa-sem-conversa{padding:40px 20px;text-align:center;color:var(--wa-sec);font-size:14px}

/* ---------- conversa ---------- */
.wa-chat{display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--wa-fundo);position:relative}
/* textura discreta no lugar do papel de parede */
.wa-chat::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(11,20,26,.05) 1px, transparent 0);
  background-size:22px 22px}

.wa-vazio{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:var(--wa-sec);padding:30px;position:relative}
.wa-vazio-marca{font-family:var(--serif);font-size:30px;color:#54656f;margin-bottom:8px}
.wa-vazio p{font-size:14px;max-width:420px}
.wa-alerta{color:var(--vermelho);font-weight:500}

.wa-conversa{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.wa-cabeca-chat{background:var(--wa-painel)}

.wa-mensagens{flex:1 1 0;min-height:0;overflow-y:auto;padding:18px 7%;
  display:flex;flex-direction:column;gap:3px}
.wa-dia{align-self:center;background:#ffffffdd;color:var(--wa-sec);font-size:12.5px;
  padding:5px 12px;border-radius:8px;margin:12px 0 6px;
  box-shadow:0 1px 0.5px rgba(11,20,26,.13)}

.wa-linha{display:flex;max-width:100%}
.wa-linha.saida{justify-content:flex-end}
.wa-bolha{
  position:relative;max-width:min(65%,560px);padding:6px 9px 8px 10px;
  border-radius:7.5px;font-size:14.2px;line-height:19px;
  white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.wa-linha.entrada .wa-bolha{background:var(--wa-entrada);border-top-left-radius:0}
.wa-linha.saida   .wa-bolha{background:var(--wa-saida);border-top-right-radius:0}
/* bico do balão */
.wa-linha.entrada .wa-bolha::before,
.wa-linha.saida   .wa-bolha::before{
  content:"";position:absolute;top:0;width:8px;height:13px;
}
.wa-linha.entrada .wa-bolha::before{
  left:-8px;background:var(--wa-entrada);
  clip-path:polygon(100% 0, 0 0, 100% 100%);
}
.wa-linha.saida .wa-bolha::before{
  right:-8px;background:var(--wa-saida);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.wa-hora{float:right;font-size:11px;color:var(--wa-sec);
  margin:6px -3px -4px 10px;line-height:1;white-space:nowrap}
.wa-tique{color:#53bdeb;margin-left:3px;letter-spacing:-2px}

.wa-compositor{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:var(--wa-painel);flex:0 0 auto}
.wa-compositor input{flex:1;border:none;border-radius:8px;padding:11px 14px;
  font-size:14.5px;background:#fff;color:var(--wa-txt)}
.wa-compositor input:focus{outline:none}
.wa-compositor input:disabled{background:#e9edef;color:var(--wa-sec)}
.wa-enviar{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--wa-verde);color:#fff;font-size:17px;flex:0 0 auto}
.wa-enviar:hover{background:var(--wa-verde-escuro)}
.wa-enviar:disabled{background:#c4ccd1;cursor:not-allowed}

/* ---------- ficha (gaveta à direita) ---------- */
.wa-ficha{
  position:absolute;top:0;right:0;bottom:0;width:340px;max-width:88%;
  background:var(--wa-lista);border-left:1px solid var(--wa-linha);
  transform:translateX(100%);transition:transform .18s ease;
  display:flex;flex-direction:column;z-index:3;
}
.wa-ficha.aberta{transform:translateX(0);box-shadow:-3px 0 12px rgba(11,20,26,.12)}
.wa-ficha-cabeca{display:flex;align-items:center;gap:14px;padding:14px 16px;
  background:var(--wa-painel);border-bottom:1px solid var(--wa-linha);
  font-size:15px;font-weight:600;flex:0 0 auto}
.wa-ficha-corpo{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 18px 20px}
.wa-ficha-corpo .eyebrow{color:var(--wa-sec)}
.wa-ficha-corpo select,.wa-ficha-corpo textarea{border-color:var(--wa-linha)}

@media(max-width:900px){
  .wa{grid-template-columns:1fr;height:auto}
  .wa-lado{max-height:280px}
  .wa-chat{height:480px}
  .wa-bolha{max-width:82%}
  .wa-mensagens{padding:14px 12px}
}

/* ---------- cartão de clínica ---------- */
.cartao-clinica{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cartao-clinica:hover{border-color:var(--navy);box-shadow:0 2px 8px rgba(13,27,53,.08)}
.cartao-clinica .linhas{display:flex;flex-direction:column;gap:3px;
  font-size:12.5px;color:var(--suave)}

/* ---------- cabeçalho e abas de dentro da clínica ---------- */
.cab-clinica{background:var(--superficie);border:1px solid var(--linha);border-radius:5px;
  padding:14px 18px 0;margin-bottom:18px}
.cab-clinica h3{margin:2px 0 12px}
.abas-clinica{display:flex;gap:2px;flex-wrap:wrap}
.aba-cli{background:none;border:none;border-bottom:2px solid transparent;color:var(--rotulo);
  padding:9px 16px;cursor:pointer;font-size:13px}
.aba-cli:hover{color:var(--navy)}
.aba-cli.ativa{color:var(--navy);border-bottom-color:var(--gold);font-weight:600}

/* ---------- linhas dinâmicas do formulário de relatório ---------- */
.linha-din{display:flex;gap:8px;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--linha)}
.linha-din:last-child{border-bottom:none}
.linha-din input,.linha-din select{flex:1;min-width:0}
.linha-din .calc{font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--navy);min-width:60px;text-align:right}
.linha-din button{flex:0 0 auto;padding:6px 11px;line-height:1}
@media(max-width:720px){.linha-din{flex-wrap:wrap}.linha-din input,.linha-din select{min-width:120px}}