/* ============================================================================
   Shell comum das ferramentas públicas JAV (whats / gas / valor)
   Depende de jav-tokens.css.
   ============================================================================ */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.5;
  display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;gap:20px;
}

/* ---------- cabeçalho ---------- */
.shell{width:min(560px,100%);display:flex;flex-direction:column;gap:18px}
.shell.wide{width:min(760px,100%)}

.brand{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:600}
.brand .mark{
  width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.5px;flex:none
}
.brand a{color:inherit;text-decoration:none}

.page-title{margin:0;font-size:24px;font-weight:700;letter-spacing:-.3px}
.page-sub{margin:4px 0 0;color:var(--muted);font-size:14px}

/* ---------- formulário ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.2px}
.hint{font-size:12px;color:var(--muted);margin:0}

input[type=text],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:15px;outline:none;
  transition:border-color var(--transition),box-shadow var(--transition)
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
textarea{resize:vertical;min-height:76px}
input[type=range]{width:100%;accent-color:var(--accent);padding:0;background:transparent;border:0}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* campo monetário: prefixo "R$" fixo dentro do input */
.money{position:relative;display:flex}
.money::before{
  content:"R$";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;font-weight:600;pointer-events:none
}
.money input{padding-left:40px}

.row{display:flex;gap:10px}
.row > *{flex:1;min-width:0}
.row .grow-2{flex:2}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .jav-btn{flex:1;min-width:150px}
.jav-btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--border);box-shadow:none}
.jav-btn.ghost:hover{background:var(--accent-weak);border-color:var(--accent)}

/* prefixo fixo (ex.: +55) colado ao input */
.prefixed{display:flex;align-items:stretch;gap:0}
.prefixed select{
  width:auto;flex:none;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;
  padding-right:8px;font-weight:600
}
.prefixed input{border-top-left-radius:0;border-bottom-left-radius:0}

/* ---------- abas ---------- */
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:4px}
.tab{flex:1;padding:9px 8px;border:0;border-radius:10px;background:transparent;color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition)}
.tab.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.panel[hidden]{display:none}

/* ---------- resultado ---------- */
.result{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--radius);
  background:var(--accent-weak);border:1px solid transparent}
.result.ok{background:var(--ok-weak)}
.result.warn{background:var(--warn-weak)}
.result.crit{background:var(--crit-weak)}
.result .headline{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.25}
.result.ok .headline{color:var(--ok)}
.result.warn .headline{color:var(--warn)}
.result.crit .headline{color:var(--crit)}
.result .detail{font-size:13.5px;color:var(--text);opacity:.85}

.error{color:var(--crit);font-size:13px;font-weight:600;margin:0}

/* ---------- tabela ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.winner td{background:var(--ok-weak);font-weight:700}

/* ---------- rodapé / detalhes ---------- */
details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:0 14px}
details[open]{padding-bottom:12px}
summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:600;color:var(--accent);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ ";display:inline-block;transition:transform var(--transition)}
details[open] summary::before{content:"▾ "}
details p,details li{font-size:13px;color:var(--muted);line-height:1.6}
details p{margin:0 0 8px}
details ul{margin:0 0 8px;padding-left:18px}

.foot{text-align:center;font-size:12px;color:var(--muted)}
.foot a{color:var(--accent);text-decoration:none}

/* toast de "copiado" */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;
  transition:all var(--transition);z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- mais ferramentas no rodapé ---------- */
.more-tools{margin-top:32px;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--border);padding-top:28px}
.more-tools-head{display:flex;flex-direction:column;gap:6px}
.more-tools-head .eyebrow{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:0}
.more-tools-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.more-tools-head .sub{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
a.tool-card, a.tool-card:link, a.tool-card:visited, a.tool-card:hover, a.tool-card:active{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;text-decoration:none!important;display:flex;flex-direction:column;gap:8px;
  color:inherit;box-sizing:border-box;transition:border-color var(--transition),transform var(--transition);
}
a.tool-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateY(-2px)}
a.tool-card, a.tool-card *{text-decoration:none!important}
a.tool-card .host{font-size:12px;color:var(--accent);letter-spacing:.02em;font-weight:600;display:block}
a.tool-card h3{margin:0;font-size:16.5px;font-weight:700;color:var(--text);line-height:1.3}
a.tool-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

@media (max-width:600px){
  body{padding:16px 12px 32px}
  .page-title{font-size:21px}
  .actions .jav-btn{min-width:100%}
  .tools-grid{grid-template-columns:1fr}
}

/* ---------- banner de privacidade ---------- */
.privacy-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--muted);line-height:1.4}
.privacy-notice strong{color:var(--text)}

/* ---------- grade de seleção de ferramentas (grid avançada) ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:18px}
.adv-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:all var(--transition);text-align:left}
.adv-card .jav-ic{color:var(--brand-color);width:16px;height:16px;flex:none}
.adv-card:hover{border-color:color-mix(in srgb, var(--brand-color) 40%, var(--border));background:var(--surface)}
.adv-card.on{background:var(--surface);border-color:var(--brand-color);box-shadow:var(--shadow);color:var(--text)}

/* ---------- layout split de duas colunas ---------- */
.sub-split{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.sub-form-col{display:flex;flex-direction:column;gap:14px}
.sub-preview-col{display:flex;flex-direction:column;gap:14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px}

@media(max-width:850px){
  .sub-split{grid-template-columns:1fr}
}

/* ---------- seletor de whatsapp web vs app ---------- */
.wa-target-selector{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.wa-btn{border:0;border-radius:8px;padding:6px 12px;background:transparent;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.wa-btn.on{background:var(--surface);color:var(--ok);box-shadow:var(--shadow)}

/* ---------- barra de formatação wysiwyg ---------- */
.fmt-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface-2);
  border:1px solid var(--border);border-bottom:0;border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.fmt-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);
  border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.fmt-btn:hover{background:var(--accent-weak);color:var(--accent);border-color:var(--accent)}
.fmt-area input, .fmt-area textarea{border-top-left-radius:0!important;border-top-right-radius:0!important}

/* ---------- pré-visualização do balão de conversa do whatsapp ---------- */
.chat-preview{background:#0b141a;border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;box-shadow:inset 0 0 12px rgba(0,0,0,.3);min-height:120px;justify-content:center}
.chat-bubble{background:#005c4b;color:#e9edef;padding:10px 14px;border-radius:10px 10px 0 10px;
  font-size:13.5px;line-height:1.45;max-width:85%;word-break:break-word;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.2);width:fit-content}
.chat-time{font-size:10.5px;color:rgba(241,241,242,.63);float:right;margin-left:8px;margin-top:4px;display:inline-flex;align-items:center;gap:3px}
.chat-check{color:#53bdeb;font-size:12px;font-weight:bold}

/* ---------- qr code container ---------- */
.qr-container{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.qr-canvas-wrap{padding:12px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}

/* ---------- templates e histórico ---------- */
.tpl-list, .history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.tpl-item, .history-item{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition)}
.tpl-item:hover, .history-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.tpl-head, .history-head{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;color:var(--text)}
.tpl-body, .history-body{font-size:12.5px;color:var(--muted);line-height:1.45;white-space:pre-line}

/* ---------- gerador de fontes e roleta ---------- */
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.font-item{padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:13.5px;color:var(--text);transition:all var(--transition)}
.font-item:hover{border-color:var(--accent);background:var(--surface)}

/* ---------- orçamento e parcelamento itens ---------- */
.orc-item-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;position:relative}
.orc-item-box .btn-remove{position:absolute;top:10px;right:10px;background:transparent;border:0;color:var(--crit);cursor:pointer;padding:4px}
.total-box{background:var(--accent-weak);color:var(--accent);border:1px solid transparent;border-radius:var(--radius-sm);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700}