/* ============================================================================
   31-portal-skin.css — o skin Aurora do Portal do Cidadao.

   MORAVA EM views/portal.html, NUM <style> DENTRO DO BODY (28/08/2026), pelo mesmo
   motivo e com o mesmo efeito do Admin: o server monta as views dentro do
   index.html em tempo de request, entao ele vinha depois de todos os <link> do
   <head> e vencia por posicao.

   AQUI SO A POSICAO FOI CORRIGIDA. Os !important continuam, ao contrario do que se
   fez no Admin: tentei desarma-los e a comparacao acusou diferenca em 15
   propriedades (.pp-ic-round, .pp-rail, .pp-textarea e os SVGs dentro deles).
   Removendo tambem os desta folha, uma terceira camada assumiu. O Portal tem mais
   de duas camadas disputando os mesmos elementos e precisa ser desarmado com o
   painel aberto, um componente por vez.
   ============================================================================ */
/* ===== Portal do Paciente — Aurora skin (escopo total: #view-portal) ===== */
#view-portal{
  --brand:#394820;--brand2:#5c6f3a;--olive-light:#8faf57;--acc:#4e5f2f;
  --ink:#1d2215;--ink-soft:#5b6250;--line:rgba(57,72,32,.14);
  --glass:#fff;--glass-brd:var(--border);
  --shadow:0 18px 50px -22px rgba(46,59,23,.45);
  --p0:#e23a6d;--p1:#e8863a;--p2:#c68a2c;--p3:#4a9d6a;
  /* tokens acrescentados para a tokenizacao do portal-reskin.js. Os valores
     CLAROS sao exatamente os hex que ja estavam no JS — o tema claro nao muda. */
  --card:#fff;--err:#c22f49;--ok:#1f8a5b;--warn:#c4881a;/* --info: era #2f6fd0, o segundo valor concorrente; herda o :root */
  --txt:#4d5343;--txt-soft:#7a816e;
  --brand-soft:#eef1e8;--ok-soft:#e7f6ee;--warn-soft:#fdf6ec;--info-soft:#eef4fd;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  position:relative;min-height:100vh;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:#e3ead8;
}
#view-portal, #view-portal *{font-family:var(--font);box-sizing:border-box}
#view-portal[data-theme="dark"], body.theme-dark #view-portal{
  --brand:#8fb057;--brand2:#a5c66c;--olive-light:#b4cb8d;--acc:#95be4e;
  --ink:#e7f0d9;--ink-soft:#adba96;--line:rgba(157,190,99,.18);
  --glass:#232818;--glass-brd:var(--surface-outline);
  --shadow:0 22px 55px -20px rgba(0,0,0,.55);
  --p0:#ff6a92;--p1:#ffab5e;--p2:#e8c04f;--p3:#66d69a;
  --card:#1c1f16;--err:#ff6a92;--ok:#66d69a;--warn:#e8c04f;--info:#7aa5f0;
  --txt:#cad2bb;--txt-soft:#95a082;
  --brand-soft:rgba(147,185,80,.12);--ok-soft:rgba(102,214,154,.13);
  --warn-soft:rgba(232,192,79,.13);--info-soft:rgba(122,165,240,.13);
  background: var(--canvas); /* eram 2 brilhos radiais sobre esta cor */
}
/* Aurora blobs */
@keyframes ppPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ppIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Shell */
#view-portal .pp-shell{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:22px 22px 40px;display:flex;gap:16px;align-items:flex-start}

/* Rail de vidro (icon rail) */
#view-portal .pp-rail{width:74px;flex-shrink:0;position:sticky;top:22px;height:calc(100vh - 44px);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:26px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.5)}
#view-portal .pp-rail-logo{width:48px;height:48px;border-radius:16px;background:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
#view-portal .pp-rail-item{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;transition:.16s}
#view-portal .pp-rail-item:hover{background:rgba(92,111,58,.12);color:var(--ink)}
#view-portal .pp-rail-item.is-active{background:var(--brand);color:#fff;}
#view-portal .pp-rail-spacer{flex:1;min-height:12px}
#view-portal .pp-rail-avatar{width:42px;height:42px;border-radius:13px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;cursor:pointer}
#view-portal .pp-rail-avatar.is-active{box-shadow:0 0 0 2px var(--glass-brd)}
#view-portal .pp-rail-exit{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;transition:.16s}
#view-portal .pp-rail-exit:hover{background:rgba(92,111,58,.12);color:var(--ink)}

/* Main */
#view-portal .pp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;position:relative}

/* Header de vidro */
#view-portal .pp-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 20px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;}
#view-portal .pp-header-left{display:flex;align-items:center;gap:14px;min-width:0}
#view-portal .pp-header-badge{width:44px;height:44px;flex-shrink:0;border-radius:13px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;}
#view-portal .pp-header-kicker{font-size:9px;letter-spacing:1.8px;font-weight:800;color:var(--brand2);text-transform:uppercase}
#view-portal .pp-header-title{font-size:18px;font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-portal .pp-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
#view-portal .pp-user-chip{display:flex;align-items:center;gap:8px;background:rgba(92,111,58,.10);border:1px solid var(--line);border-radius:13px;padding:6px 12px 6px 8px;cursor:pointer}
#view-portal[data-theme="dark"] .pp-user-chip, body.theme-dark #view-portal .pp-user-chip{background:rgba(147,185,80,.14)}
#view-portal .pp-user-chip:hover{border-color:rgba(92,111,58,.4)}
#view-portal .pp-user-ini{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
#view-portal .pp-user-role{font-size:8px;letter-spacing:.9px;color:var(--ink-soft);font-weight:700}
#view-portal .pp-user-name{font-size:12px;font-weight:700;color:var(--ink)}
#view-portal .pp-clock-chip{display:flex;align-items:center;gap:8px;background:rgba(92,111,58,.10);border:1px solid var(--line);border-radius:13px;padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#view-portal[data-theme="dark"] .pp-clock-chip, body.theme-dark #view-portal .pp-clock-chip{background:rgba(147,185,80,.14)}
#view-portal .pp-clock-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#3f9d6a;animation:ppPulse 1.6s ease-in-out infinite}
#view-portal .pp-theme-btn{width:38px;height:38px;flex-shrink:0;border-radius:11px;border:1px solid var(--line);background:rgba(92,111,58,.10);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.18s}
#view-portal[data-theme="dark"] .pp-theme-btn, body.theme-dark #view-portal .pp-theme-btn{background:rgba(147,185,80,.14)}
#view-portal .pp-theme-btn:hover{color:var(--brand2);border-color:rgba(92,111,58,.4)}
#view-portal .pp-theme-btn .i-moon{display:none}
#view-portal[data-theme="dark"] .pp-theme-btn .i-sun, body.theme-dark #view-portal .pp-theme-btn .i-sun{display:none}
#view-portal[data-theme="dark"] .pp-theme-btn .i-moon, body.theme-dark #view-portal .pp-theme-btn .i-moon{display:block}

/* Botões */
#view-portal .pp-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--brand);border:none;color:#fff;font-weight:700;font-size:12.5px;padding:9px 15px;border-radius:12px;cursor:pointer;}
#view-portal .pp-btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
#view-portal .pp-btn-primary.pp-btn-lg{font-size:13.5px;padding:12px 22px}
#view-portal .pp-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(92,111,58,.12);border:1px solid rgba(92,111,58,.22);color:var(--brand);font-weight:700;font-size:12.5px;padding:9px 15px;border-radius:12px;cursor:pointer}
#view-portal[data-theme="dark"] .pp-btn-ghost, body.theme-dark #view-portal .pp-btn-ghost{color:var(--brand2);background:rgba(147,185,80,.14)}
#view-portal .pp-btn-ghost:hover{transform:translateY(-1px)}
#view-portal .pp-btn-ghost.pp-btn-lg{padding:10px 18px}
#view-portal .hidden{display:none!important}

/* Seções */
#view-portal .pp-sections{display:flex;flex-direction:column}
#view-portal .pp-view{animation:ppIn .34s cubic-bezier(.22,.7,.3,1) both}

/* Card de vidro genérico (Início) */
#view-portal .pp-card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;padding:18px 20px;}
#view-portal .pp-eyebrow{font-size:11px;letter-spacing:1px;font-weight:800;color:var(--ink-soft)}
#view-portal .pp-card-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#view-portal .pp-link{font-size:12px;font-weight:700;color:var(--brand2);cursor:pointer}
#view-portal .pp-muted{color:var(--ink-soft);font-size:12.5px}

/* KPIs (agenda ring / vacinas spark / exames bar) */
#view-portal .pp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#view-portal .pp-stat{position:relative;overflow:hidden;min-height:132px;display:flex;flex-direction:column;gap:8px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;padding:16px 16px 15px;}
#view-portal .pp-stat .k-top{display:flex;align-items:center;justify-content:space-between}
#view-portal .pp-stat-ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--brand)}
#view-portal .k-agenda .pp-stat-ic{background:#51b37c}
#view-portal .k-vac .pp-stat-ic{background:#5a88e4}
#view-portal .k-exam .pp-stat-ic{background:#d6a63e}
#view-portal .k-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);background:rgba(92,111,58,.1);padding:3px 8px;border-radius:20px}
#view-portal[data-theme="dark"] .k-tag, body.theme-dark #view-portal .k-tag{background:rgba(147,185,80,.14)}
#view-portal .pp-stat-num{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
#view-portal .pp-stat-lbl{font-size:12px;color:var(--ink-soft);font-weight:600}
#view-portal .pp-stat .ring{--sz:46px;--p:66;position:absolute;right:14px;bottom:12px;width:var(--sz);height:var(--sz);border-radius:50%;background:conic-gradient(#3f9d6a calc(var(--p)*1%),rgba(77,90,54,.14) 0);display:grid;place-items:center}
#view-portal .pp-stat .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--glass)}
#view-portal[data-theme="dark"] .pp-stat .ring, body.theme-dark #view-portal .pp-stat .ring{background:conic-gradient(var(--ok) calc(var(--p)*1%),rgba(157,190,99,.16) 0)}
#view-portal .pp-stat .spark{margin-top:auto;color:var(--brand2);height:26px}
#view-portal .pp-stat .spark svg{width:100%;height:100%}
#view-portal .pp-stat .k-bar{height:6px;border-radius:6px;background:rgba(77,90,54,.12);overflow:hidden;margin-top:auto}
#view-portal .pp-stat .k-bar i{display:block;height:100%;width:var(--w,40%);border-radius:6px;background:#d6a63e}

/* Início grid + acesso rápido */
#view-portal .pp-inicio-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
#view-portal .pp-quick{display:flex;flex-direction:column;gap:8px}
#view-portal .pp-quick-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
#view-portal .pp-quick-item:hover{background:rgba(92,111,58,.10)}
#view-portal .pp-quick-ic{width:32px;height:32px;border-radius:10px;background:rgba(92,111,58,.12);color:var(--brand2);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Próximo agendamento (render JS) */
#view-portal .pp-next-card{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;padding:15px 16px;background:rgba(92,111,58,.06)}
#view-portal[data-theme="dark"] .pp-next-card, body.theme-dark #view-portal .pp-next-card{background:rgba(147,185,80,.08)}
#view-portal .pp-next-date{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:var(--brand);border:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
#view-portal .pp-next-date b{font-size:19px;font-weight:800}
#view-portal .pp-next-date small{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
#view-portal .pp-next-note{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-soft);margin-top:11px;line-height:1.45}

/* Painéis de vidro (agendar/agendamentos/historico/transporte/ouvidoria/atendimento/perfil) */
#view-portal .pp-panel{background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;overflow:hidden}
#view-portal .pp-panel-head{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--brand);color:#fff}
#view-portal .pp-panel-ic{width:46px;height:46px;flex-shrink:0;border-radius:14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff}
#view-portal .pp-panel-title{font-size:18px;font-weight:800}
#view-portal .pp-panel-sub{font-size:12px;color:#dde4d2;opacity:.94;margin-top:2px}
#view-portal .pp-panel-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:12.5px;padding:9px 16px;border-radius:12px;cursor:pointer}
#view-portal .pp-panel-body{padding:22px;display:flex;flex-direction:column;gap:12px}

/* Agendar / calendário */
#view-portal .pp-agendar-grid{padding:22px;display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
#view-portal .pp-cal-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#view-portal .pp-cal-title{font-size:16px;font-weight:800;color:var(--ink);text-transform:capitalize}
#view-portal .pp-cal-nav{display:flex;gap:8px}
#view-portal .pp-cal-arrow{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.4);color:var(--brand2);display:flex;align-items:center;justify-content:center;cursor:pointer}
#view-portal[data-theme="dark"] .pp-cal-arrow, body.theme-dark #view-portal .pp-cal-arrow{background:rgba(255,255,255,.05)}
#view-portal .pp-cal-arrow svg{stroke:currentColor}
#view-portal .pp-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
#view-portal .pp-cal-week div{text-align:center;font-size:10.5px;font-weight:800;color:var(--ink-soft);letter-spacing:.5px}
#view-portal #portal-calendar.pp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:0}
#view-portal .pp-day{position:relative;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:var(--ink)}
#view-portal .pp-day.is-empty,#view-portal .pp-day.is-past{background:rgba(77,90,54,.05);color:var(--ink-soft);opacity:.55}
#view-portal .pp-day.is-avail{background:rgba(63,157,106,.12);border:1px solid rgba(63,157,106,.25);color:#2f8659;cursor:pointer}
#view-portal[data-theme="dark"] .pp-day.is-avail, body.theme-dark #view-portal .pp-day.is-avail{color:var(--au-ok)}
#view-portal .pp-day.is-avail:hover{background:rgba(63,157,106,.2)}
#view-portal .pp-day.is-selected{background:var(--brand);color:#fff;}
#view-portal .pp-day.is-mine{background:rgba(92,111,58,.14);color:var(--brand2);border:1.5px solid var(--olive-light)}
#view-portal .pp-day .dot{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%}
#view-portal .pp-cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:11px;color:var(--ink-soft);font-weight:600}
#view-portal .pp-cal-legend span{display:flex;align-items:center;gap:4px}
#view-portal .pp-cal-legend .d{width:9px;height:9px;border-radius:50%}
#view-portal .pp-slots-panel{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.35);min-height:340px}
#view-portal[data-theme="dark"] .pp-slots-panel, body.theme-dark #view-portal .pp-slots-panel{background:rgba(255,255,255,.04)}
#view-portal .pp-slots-title{font-size:13px;font-weight:800;color:var(--ink)}
#view-portal .pp-slots-empty{text-align:center;padding:40px 10px;color:var(--ink-soft)}
#view-portal .pp-slots-empty-ic{width:56px;height:56px;border-radius:17px;background:rgba(92,111,58,.12);color:var(--brand2);display:inline-flex;align-items:center;justify-content:center}
#view-portal .pp-slots-empty div{font-size:12.5px;margin-top:12px;line-height:1.5}
#view-portal .pp-slot-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
#view-portal .pp-slots-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:16px}
#view-portal .pp-slot{text-align:center;border-radius:12px;padding:11px 4px;background:rgba(255,255,255,.5);border:1.5px solid var(--line);color:var(--ink);cursor:pointer}
#view-portal[data-theme="dark"] .pp-slot, body.theme-dark #view-portal .pp-slot{background:rgba(255,255,255,.06)}
#view-portal .pp-slot:hover{border-color:var(--olive-light)}
#view-portal .pp-slot.is-full{background:rgba(77,90,54,.08);border:1px solid var(--line);color:var(--ink-soft);cursor:not-allowed}
#view-portal .pp-slot b{font-size:13.5px;font-weight:800}
#view-portal .pp-slot small{font-size:10px;font-weight:600;display:block;margin-top:1px}
#view-portal .pp-inline-alert{display:flex;align-items:flex-start;gap:8px;background:rgba(226,58,109,.12);border:1px solid rgba(226,58,109,.3);border-radius:13px;padding:13px 14px;margin-top:16px;font-size:12px;color:#d02f5c;line-height:1.5;font-weight:600}
#view-portal .pp-inline-warn{background:rgba(232,134,58,.12);border-color:rgba(232,134,58,.3);color:#c26f22}

/* Linhas (appts/vac/exam/atend/transporte) */
#view-portal .pp-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:16px;padding:15px 17px;background:rgba(255,255,255,.35)}
#view-portal[data-theme="dark"] .pp-row, body.theme-dark #view-portal .pp-row{background:rgba(255,255,255,.04)}
#view-portal .pp-row.is-off{opacity:.9}
#view-portal .pp-datebox{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:rgba(92,111,58,.12);color:var(--brand2);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
#view-portal .pp-datebox.is-off{background:rgba(77,90,54,.1);color:var(--ink-soft)}
#view-portal .pp-datebox b{font-size:19px;font-weight:800}
#view-portal .pp-datebox small{font-size:9px;font-weight:700;letter-spacing:.5px}
#view-portal .pp-row-main{flex:1;min-width:0}
#view-portal .pp-row-title{font-size:14.5px;font-weight:800;color:var(--ink)}
#view-portal .pp-row-sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
#view-portal .pp-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
#view-portal .pp-badge{font-size:10.5px;font-weight:700;padding:4px 12px;border-radius:11px}
#view-portal .pp-badge.b-blue{color:#2f6fd0;background:rgba(47,111,208,.12)}
#view-portal .pp-badge.b-green{color:#2f8659;background:rgba(63,157,106,.14)}
#view-portal .pp-badge.b-red{color:#d23a55;background:rgba(226,58,109,.14)}
#view-portal .pp-badge.b-amber{color:#c07d10;background:rgba(232,134,58,.16)}
#view-portal .pp-badge.b-gray{color:var(--ink-soft);background:rgba(77,90,54,.1)}
#view-portal[data-theme="dark"] .pp-badge.b-blue, body.theme-dark #view-portal .pp-badge.b-blue{color:#8fb4f5}
#view-portal[data-theme="dark"] .pp-badge.b-green, body.theme-dark #view-portal .pp-badge.b-green{color:var(--au-ok)}
#view-portal[data-theme="dark"] .pp-badge.b-red, body.theme-dark #view-portal .pp-badge.b-red{color:var(--err)}
#view-portal[data-theme="dark"] .pp-badge.b-amber, body.theme-dark #view-portal .pp-badge.b-amber{color:var(--warn)}
#view-portal .pp-mini-cancel{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.4);border:1px solid rgba(226,58,109,.3);color:#d02f5c;font-weight:700;font-size:11.5px;padding:6px 12px;border-radius:10px;cursor:pointer}
#view-portal .pp-mini-qr{display:flex;align-items:center;gap:4px;background:var(--brand);border:none;color:#fff;font-weight:700;font-size:11.5px;padding:7px 13px;border-radius:10px;cursor:pointer;}
#view-portal .pp-mini-dl{display:flex;align-items:center;gap:4px;background:rgba(92,111,58,.12);border:1px solid var(--line);color:var(--brand);font-weight:700;font-size:11.5px;padding:7px 13px;border-radius:10px;cursor:pointer}
#view-portal .pp-just{display:flex;align-items:flex-start;gap:8px;background:rgba(232,134,58,.1);border:1px solid rgba(232,134,58,.28);border-radius:12px;padding:10px 12px;margin-top:12px;font-size:11.5px;color:#c26f22;line-height:1.5}
#view-portal[data-theme="dark"] .pp-just, body.theme-dark #view-portal .pp-just{color:var(--warn)}
#view-portal .pp-ic-round{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center}
#view-portal .pp-empty{text-align:center;padding:30px 16px;color:var(--ink-soft);font-size:12.5px}

/* Tabs (histórico) + perfil */
#view-portal .pp-tabs{padding:6px 22px 0;border-bottom:1px solid var(--line);display:flex;gap:4px}
#view-portal .pp-tab{padding:13px 16px;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
#view-portal .pp-tab.is-active{color:var(--brand2);border-bottom-color:var(--brand2)}
#view-portal .pp-perf-summary{display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
#view-portal .pp-perf-ava{width:48px;height:48px;flex-shrink:0;border-radius:14px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}

/* Formulários (ouvidoria/perfil) */
#view-portal .pp-field-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
#view-portal .pp-field-grid3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
#view-portal .pp-flabel{font-size:10px;letter-spacing:.5px;color:var(--ink-soft);font-weight:700;margin-bottom:5px}
#view-portal .pp-readonly{background:rgba(77,90,54,.06);border:1px dashed var(--line);border-radius:11px;padding:11px 13px;font-size:13px;color:var(--ink);font-weight:600}
#view-portal .pp-chips{display:flex;flex-wrap:wrap;gap:8px}
#view-portal .pp-chip{font-size:12px;font-weight:700;padding:8px 15px;border-radius:11px;cursor:pointer;background:rgba(92,111,58,.1);color:var(--ink-soft);border:1px solid var(--line)}
#view-portal .pp-chip.is-active{background:var(--brand);color:#fff;border-color:transparent}
#view-portal .pp-textarea{width:100%;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:12px;padding:13px;font-size:13px;color:var(--ink);min-height:120px;resize:vertical;outline:none}
#view-portal[data-theme="dark"] .pp-textarea, body.theme-dark #view-portal .pp-textarea{background:rgba(255,255,255,.06)}
#view-portal .pp-textarea:focus{border-color:var(--brand2)}
#view-portal .pp-input{width:100%;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13px;color:var(--ink);outline:none}
#view-portal[data-theme="dark"] .pp-input, body.theme-dark #view-portal .pp-input{background:rgba(255,255,255,.06)}
#view-portal .pp-input:focus{border-color:var(--brand2)}
#view-portal .pp-input-focus{background:rgba(255,255,255,.6);border:1.5px solid var(--olive-light);font-weight:600}
#view-portal .pp-sec-title{font-size:15px;font-weight:800;color:var(--ink)}
#view-portal .pp-sec-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
#view-portal .pp-divider{height:1px;background:var(--line);margin:22px 0}
#view-portal .pp-err{font-size:11.5px;color:#d02f5c;font-weight:600;margin-top:9px}

/* Chat (deixa o vidro do painel aparecer) */
#view-portal #portal-chat-list{background:transparent!important}

/* WhatsApp */
#view-portal .pp-wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;background:#188842;color:#fff;font-weight:800;font-size:13.5px;padding:12px 20px;border-radius:13px;text-decoration:none;}
#view-portal .pp-wa-btn:hover{filter:brightness(1.05);color:#fff}
#view-portal .pp-wa-fab{position:fixed;right:26px;bottom:26px;z-index:70;width:56px;height:56px;border-radius:50%;background:#188842;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.5);text-decoration:none}

/* Foco */
#view-portal button:focus-visible,#view-portal input:focus-visible,#view-portal textarea:focus-visible,#view-portal select:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}

/* Responsivo */
@media (max-width:1000px){
  #view-portal .pp-shell{flex-direction:column}
  #view-portal .pp-rail{width:100%;height:auto;position:relative;top:0;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px;border-radius:20px;display:flex!important}
  #view-portal .pp-rail-spacer{display:none}
  #view-portal .pp-inicio-grid,#view-portal .pp-agendar-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  #view-portal .pp-stats{grid-template-columns:1fr}
  #view-portal .pp-field-grid2,#view-portal .pp-field-grid3{grid-template-columns:1fr}
}

/* ===== SPEC refino P0 — reforço rail de vidro (independe da ordem de cascata) ===== */
#view-portal .pp-shell .pp-rail{background:var(--glass);border:1px solid var(--glass-brd);}
/* FORÇA: rail de vidro vence qualquer gradiente escuro remanescente (background-image incluso) */
#view-portal .pp-rail{background:var(--glass) !important;background-image:none !important;border:1px solid var(--glass-brd) !important;}
#view-portal .pp-rail-item,#view-portal .pp-rail-exit,#view-portal .pp-rail-item svg,#view-portal .pp-rail-exit svg{color:var(--ink-soft) !important;}
#view-portal .pp-rail-item:hover{background:rgba(92,111,58,.12) !important;color:var(--ink) !important;}
#view-portal .pp-rail-item.is-active{background:var(--brand) !important;}
#view-portal .pp-rail-item.is-active,#view-portal .pp-rail-item.is-active svg{color:#fff !important;}
body.theme-dark #view-portal .pp-rail-item,body.theme-dark #view-portal .pp-rail-exit,body.theme-dark #view-portal .pp-rail-item svg{color:var(--ink-soft) !important;}
#view-portal .pp-shell .pp-rail-item,#view-portal .pp-shell .pp-rail-exit{color:var(--ink-soft);}
#view-portal .pp-shell .pp-rail-item:hover,#view-portal .pp-shell .pp-rail-exit:hover{background:rgba(92,111,58,.12);color:var(--ink);}
#view-portal .pp-shell .pp-rail-item.is-active{background:var(--brand);color:#fff;}
#view-portal .pp-shell .pp-rail-avatar{color:#fff;}
/* iniciais do avatar: fundo roxo inverte c/ o tema (var(--brand)); texto acompanha */
body.theme-dark #view-portal .pp-shell .pp-rail-avatar{color:#1d2215;}

/* ===== SPEC refino P1.1 — faixa do topo dos painéis (.pp-panel-head) em vidro claro ===== */
#view-portal .pp-panel-head{background:#f0f2ea !important;color:var(--ink) !important;border-bottom:1px solid var(--glass-brd);}
#view-portal .pp-panel-sub{color:var(--ink-soft) !important;opacity:1;}
#view-portal .pp-panel-ic{background:var(--brand) !important;border-color:transparent !important;color:#fff !important;}
#view-portal .pp-panel-btn{background:rgba(92,111,58,.12) !important;border:1px solid var(--line) !important;color:var(--brand) !important;}
body.theme-dark #view-portal .pp-panel-head{color:var(--ink) !important;}

/* ===== SPEC refino P1.2 — borda-brilho dos cartões de vidro (fora dos que têm overflow:hidden) ===== */
#view-portal .pp-card,#view-portal .pp-panel,#view-portal .pp-stat,#view-portal .pp-header,#view-portal .pp-rail{position:relative;}


/* ===== SPEC refino P2 — contraste de subtítulos + microinterações ===== */
#view-portal .pp-panel-sub,#view-portal .pp-muted,#view-portal .pp-row-sub{color:#4b5140;}
body.theme-dark #view-portal .pp-panel-sub,body.theme-dark #view-portal .pp-muted,body.theme-dark #view-portal .pp-row-sub{color:var(--ink-soft);}
#view-portal .pp-mini-item,#view-portal .pp-panel-btn,#view-portal .pp-chip,#view-portal .pp-quick-item{transition: transform .16s, background .16s;}
#view-portal .pp-mini-item:hover,#view-portal .pp-quick-item:hover{transform:translateY(-1px);}

/* ── Ficha de detalhe (vacina, exame, atendimento) ──────────────────────────
   Anexada ao body, por isso fora do escopo #view-portal. Mesmas cores do portal. */
.pp-ficha-ovl{position:fixed;inset:0;z-index:120;background:rgba(18,26,12,.42);display:grid;place-items:center;padding:18px}
.pp-ficha{width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--card,#fff);
  border:1px solid var(--line,#e6e9e0);border-radius:18px;}
.pp-ficha > header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line,#e6e9e0);position:sticky;top:0;
  background:var(--card,#fff);border-radius:18px 18px 0 0}
.pp-ficha > header strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.pp-ficha-x{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;
  color:var(--ink-soft,#7a836c);padding:2px 6px;border-radius:8px}
.pp-ficha-x:hover{background:rgba(92,111,58,.12)}
.pp-ficha-corpo{padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.pp-ficha > footer{padding:14px 20px;border-top:1px solid var(--line,#e6e9e0);
  display:flex;
  flex-wrap: wrap;align-items:center;justify-content:flex-end;gap:8px}

.pp-ficha-linha{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line,#eef1e9)}
.pp-ficha-linha:last-child{border-bottom:0}
.pp-ficha-linha span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft,#7a836c);flex-shrink:0}
.pp-ficha-linha strong{font-size:13.5px;font-weight:650;text-align:right}

.pp-ficha-bloco{padding:11px 0;border-bottom:1px solid var(--line,#eef1e9)}
.pp-ficha-bloco:last-child{border-bottom:0}
.pp-ficha-bloco span{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft,#7a836c);margin-bottom:5px}
.pp-ficha-bloco p{margin:0;font-size:13.5px;line-height:1.6;white-space:pre-wrap}

.pp-ficha-itens{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.pp-ficha-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;border:1px solid var(--line,#e6e9e0);border-radius:12px;background:rgba(92,111,58,.04)}
.pp-ficha-res{font-size:12.5px;color:var(--ink-soft,#7a836c);margin-top:3px}
.pp-ficha-nota{font-size:12px;color:var(--ink-soft,#7a836c)}

.pp-btn-primary{border:0;border-radius:11px;padding:10px 18px;font-size:13px;font-weight:700;
  color:#fff;cursor:pointer;background:var(--brand,#5c6f3a)}
.pp-btn-primary:hover{filter:brightness(1.06)}

/* linha que abre detalhe: some o convite ao clique sem poluir */
#view-portal .pp-row-click{cursor:pointer;transition:background .15s,transform .15s}
#view-portal .pp-row-click:hover{background:rgba(92,111,58,.06);transform:translateY(-1px)}
#view-portal .pp-sub{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft,#7a836c);margin:16px 0 8px}
#view-portal .pp-sub:first-child{margin-top:0}

/* Andamento da senha: fio vertical com um ponto por etapa cumprida. */
.pp-ficha-etapa{display:flex;gap:8px;align-items:flex-start;padding:5px 0;position:relative}
.pp-ficha-etapa i{width:9px;height:9px;border-radius:50%;background:var(--brand,#5c6f3a);
  margin-top:5px;flex-shrink:0;box-shadow:0 0 0 3px rgba(92,111,58,.15)}
.pp-ficha-etapa:not(:last-child)::before{content:'';position:absolute;left:4px;top:16px;bottom:-3px;
  width:1px;background:var(--line,#e6e9e0)}
.pp-ficha-etapa b{display:block;font-size:13px;font-weight:650}
.pp-ficha-etapa small{font-size:11.5px;color:var(--ink-soft,#7a836c)}
