/* Demonstração do portal de aprovação dentro do celular (seção "Aprovar é um clique").
 *
 * ⚠ Este arquivo NÃO segue o DS da DnA de propósito: é a cópia do CSS real do portal
 * (o produto que o cliente usa), tirada do guia "Como usar o portal de aprovação"
 * (Artifact 81JY5ZQWVrB4HzN4ptVeDS, seção 3 "componentes reais do portal"). As cores
 * são as do portal; mostrar outra coisa seria mostrar um portal que não existe.
 * Escopo: tudo sob .lp-celular. A animação mora em portal-demo.js. */

.lp-celular .portal {
  --bg: #f6f7f5; --card: #ffffff; --border: #e4e6e1; --border-strong: #d2d5cd;
  --text: #23241f; --muted: #6b6e64; --accent: #0f6e56; --accent-soft: #e1f5ee;
  --ok: #3b6d11; --ok-soft: #eaf3de; --warn: #854f0b; --warn-soft: #faeeda;
  --pro: #534ab7; --pro-soft: #eeedfe; --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); line-height: 1.5; font-size: 13px;
}
.lp-celular .portal p { margin: 0; }
.lp-celular .portal .btn {
  display: inline-block; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
  border-radius: var(--radius); padding: 7px 12px; white-space: nowrap;
  transition: transform .15s, background .3s, color .3s;
}
.lp-celular .portal .btn-sm { padding: 5px 10px; font-size: 12px; }
.lp-celular .portal .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-celular .portal .btn-ok { border-color: var(--ok); color: var(--ok); }
.lp-celular .portal .btn-warn { border-color: var(--warn); color: var(--warn); }
.lp-celular .portal .bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px; }
.lp-celular .portal .cal-tab { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; }
.lp-celular .portal .banner { border-radius: var(--radius); padding: 9px 12px; font-size: 12px; }
.lp-celular .portal .banner.info { background: var(--accent-soft); color: var(--accent); }
.lp-celular .portal .post { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; transition: background .4s, border-color .4s, opacity .4s; }
.lp-celular .portal .post[data-state="approved"] { border-color: var(--ok); background: var(--ok-soft); }
.lp-celular .portal .post[data-state="adjust"] { border-color: var(--warn); background: var(--warn-soft); }
.lp-celular .portal .post[data-sent="1"] { opacity: .66; }
.lp-celular .portal .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.lp-celular .portal .date { font-weight: 600; font-size: 13px; }
.lp-celular .portal .chip { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.lp-celular .portal .chip-wait { background: #eceef1; color: #5b6675; }
.lp-celular .portal .chip-ok { background: var(--ok-soft); color: var(--ok); }
.lp-celular .portal .chip-adj { background: var(--warn-soft); color: var(--warn); }
.lp-celular .portal .pills { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0; }
.lp-celular .portal .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.lp-celular .portal .pill-pilar { background: var(--pro-soft); color: var(--pro); }
.lp-celular .portal .pill-cat { background: var(--accent-soft); color: var(--accent); }
.lp-celular .portal .pill-fmt { background: #eef0ec; color: var(--muted); }
.lp-celular .portal .hook { font-size: 14px; font-weight: 600; margin: 6px 0; line-height: 1.3; }
.lp-celular .portal .field { font-size: 12px; color: var(--muted); }
.lp-celular .portal .field b { color: var(--text); font-weight: 600; }
.lp-celular .portal .actions { display: flex; gap: 6px; margin-top: 10px; }
.lp-celular .portal .note-shown { margin-top: 8px; font-size: 12px; color: var(--warn); }