/*
 * Pulse Parceiros: what the real site adds to the approved v6 (styles/v6.css). The v6 file is a framed
 * tour; here the panel fills the window, and the states the tour did not need (errors on fields, notices,
 * loading, banners, the login tabs) reuse the v6 tokens and components. No new colour, font or radius.
 * The GPT may restyle this file (docs/FRENTES_PARALELAS_2026-10-28.md, "O visual com o GPT").
 */
html,body{margin:0;min-height:100%;background:#1b0a26}
#pp{max-width:none;min-height:100vh;border:0;border-radius:0;margin:0}
#pp .shell{min-height:100vh}
#pp a.btn{text-decoration:none}
#pp .content:focus{outline:none}
#pp h1:focus{outline:none}
#pp .menu button{min-height:44px}
#pp .btn{min-height:44px}
#pp .icon-btn{min-height:44px}

/* Skip link: visible only with the keyboard. */
.pp-skip{position:absolute;left:-9999px;top:8px;z-index:50;background:#281137;color:#fff;padding:10px 14px;border-radius:8px;border:1px solid #cf5ce0}
.pp-skip:focus{left:8px}
.pp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Notices: what is not there yet, said in the panel's language, with an icon and words. */
#pp .pp-notice .panel-pad{display:flex;gap:12px;align-items:flex-start}
#pp .pp-notice svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;margin-top:2px;color:#dfc4ed}
#pp .pp-notice h2{margin-bottom:4px}

/* Banners: errors from the server or the network, with "Tentar de novo" when it may help. */
#pp .pp-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;border-radius:9px;border:1px solid #9758aa;background:#341747;color:#f7e8ff;font-size:12px}
#pp .pp-banner span{flex:1;min-width:180px}
#pp .pp-banner-error{border-color:#e06a7a;background:#3d1530}
#pp .pp-banner-close{border:0;background:transparent;color:inherit;font-size:20px;line-height:1;min-width:44px;min-height:44px}

/* Forms: the error under its field, linked by aria-describedby. */
#pp .pp-field-error{margin:2px 0 0;color:#ffb3bf;font-size:11px;font-weight:650}
#pp .pp-invalid input{border-color:#e06a7a}
#pp .pp-form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
#pp .pp-place .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
#pp .pp-place .sub{margin-top:6px}
#pp .pp-callout-bad,#pp.dark .pp-callout-bad{border-color:#e06a7a;background:#3d1530;color:#ffd9df}
#pp .pp-ok{color:#a7ffd0}

/* W0: the login card, centred as in the v6 (max 430 px), with the two ways in as tabs. */
#pp .pp-login{max-width:430px;margin:18px auto}
#pp .pp-login-pad{padding:22px;display:grid;gap:12px}
#pp .pp-login-pad h2{font-size:17px}
#pp .pp-login form{display:grid;gap:12px}
#pp .pp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border:1px solid #8756a4;border-radius:10px}
#pp .pp-tabs button{min-height:44px;border:0;border-radius:7px;background:transparent;color:#dfc4ed;font-weight:700;font-size:11px}
#pp .pp-tabs button.current{background:linear-gradient(140deg,#8b31ed,#e020dc);color:#fff}

/* Loading: a quiet spinner; never a result shown while loading (baseline v6, item 5). */
#pp .pp-loading{display:flex;align-items:center;gap:10px;color:#dfc4ed;padding:30px 0}
#pp .pp-spinner{width:18px;height:18px;border-radius:50%;border:2px solid #8756a4;border-top-color:#e020dc;animation:pp-spin 1s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
#pp .content.pp-still>*{animation:none}
#pp.reduce-motion .pp-spinner{animation:none}
@media(prefers-reduced-motion:reduce){#pp .pp-spinner{animation:none}}

/* W2, the products (B1): the v6 classes (product-cell, product-photo, photo-drop, photo-preview, modal) plus the
   few layouts the tour wrote inline, which the CSP does not allow here. */
#pp .pp-metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@container(max-width:510px){#pp .pp-metrics-3{grid-template-columns:1fr}}
#pp .pp-grow{flex:1;max-width:290px}
#pp .pp-row-actions{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#pp .pp-empty{color:var(--muted);text-align:center}
#pp .pp-note{color:#ffb3bf!important}
#pp .pp-required{color:#ffd28a}
#pp .pp-fields-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#pp .pp-fields-2 .pp-span{grid-column:1/-1}
@container(max-width:510px){#pp .pp-fields-2{grid-template-columns:1fr}}
#pp .modal-scrim{position:fixed;overflow-y:auto;align-items:start}
#pp .pp-modal{width:min(560px,100%);margin:6vh auto}
#pp .pp-modal .field input{min-height:44px}
#pp .photo-drop input{min-height:44px}
#pp .mini-link{min-height:44px}
/* Parecer visual do GPT sobre o B0 (05/11): (1) W4 sem aparência de ativo enquanto não há leitura; (3) no
   celular, o menu lateral rola de lado: um esmaecido com seta mostra que há mais páginas. */
#pp .pp-tabs-off button:disabled{background:transparent;color:#b9a6c9;cursor:not-allowed;opacity:1;box-shadow:none}
#pp .pp-soon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:11px;color:#dfc4ed}
#pp .side{position:relative}
#pp .side.pp-more-right::after,#pp .side.pp-more-left::before{content:'›';position:absolute;top:0;bottom:0;width:44px;display:flex;
 align-items:center;justify-content:flex-end;padding-right:8px;font-size:22px;font-weight:800;color:#fff;pointer-events:none;z-index:2}
#pp .side.pp-more-right::after{right:0;background:linear-gradient(90deg,transparent,#1f0a2c 70%)}
#pp .side.pp-more-left::before{content:'‹';left:0;justify-content:flex-start;padding-left:8px;background:linear-gradient(270deg,transparent,#1f0a2c 70%)}
@container(min-width:791px){#pp .side.pp-more-right::after,#pp .side.pp-more-left::before{display:none}}

/* W3 is deliberately not available: communicate its disabled state without a magenta
   CTA, glow or the v6 shimmer. The aria-describedby points to the explanation below. */
#pp .btn.pp-campaigns-disabled,
#pp .btn.pp-campaigns-disabled:disabled{
  background:#2c1937;
  background-image:none;
  border-color:#6e527d;
  color:#dfcde7;
  box-shadow:none;
  filter:none;
  opacity:1;
  cursor:not-allowed;
  text-shadow:none;
  transform:none;
}
#pp .btn.pp-campaigns-disabled::before,
#pp .btn.pp-campaigns-disabled:disabled::before{content:none;animation:none}
#pp .btn.pp-campaigns-disabled:disabled:hover{
  transform:none;
  box-shadow:none;
  border-color:#6e527d;
}

/* W4, the vouchers (B2): the v6 camera block with a real <video>. The scan line of the v6 only moves while the
   camera is really on (baseline v6, item 5: never suggest a camera that is not reading). */
#pp .v5-camera:not(.pp-cam-on)::after{display:none}
#pp .v5-camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#pp .v5-result-hero .tag-status{margin:0;font-size:12px}
#pp .pp-no-photo{width:112px;height:105px;border-radius:12px;border:1px dashed #b9a6c9;display:grid;place-items:center;font-size:11px;color:#6c738b;background:#f6f3fb}
#pp .pp-result-product{margin-top:6px;font-weight:700}
#pp .v5-result-empty .pp-spinner{margin:0 auto}
#pp .v5-manual .field input{text-transform:uppercase}

/* W2 on a phone (issue #285, parecer do GPT sobre o B1): up to 428 px each product is a compact card, with the photo,
   the name, the price on one line, the status and the actions in sight (no hidden sideways scroll); the search and the
   status filter are stacked, full width and at least 44 px tall. The table keeps its roles for screen readers. */
#pp .pp-price{white-space:nowrap}
@container(max-width:460px){
 #pp .pp-filters{flex-direction:column;align-items:stretch}
 #pp .pp-filters .field,#pp .pp-filters .pp-grow{max-width:none;width:100%}
 #pp .pp-filters input,#pp .pp-filters select{max-width:none;width:100%;min-height:44px}
 #pp .pp-card-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #pp .pp-card-table,#pp .pp-card-table tbody{display:block}
 #pp .table-scroll:has(.pp-card-table){overflow-x:visible}
 #pp .pp-card-table tr{display:grid;grid-template-columns:auto 1fr;grid-auto-flow:row dense;align-items:center;gap:10px 12px;padding:13px 15px;border-bottom:1px solid var(--stroke)}
 #pp .pp-card-table tr:last-child{border-bottom:0}
 #pp .pp-card-table td{display:block;padding:0!important;border:0!important}
 #pp .pp-card-table .pp-card-full{grid-column:1/-1;text-align:left}
 #pp .pp-card-table .pp-card-end{justify-self:end}
 #pp .pp-card-table td:empty{display:none}
 #pp .pp-product-table .pp-price{font-weight:750;font-size:12px}
 #pp .pp-card-table .pp-row-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));width:100%}
 #pp .pp-card-table .pp-row-actions .btn{min-height:46px}
 #pp .pp-card-table .product-cell{min-width:0}
 #pp .pp-card-table .pp-team-access{font-size:11px;color:var(--muted)}
 #pp .pp-card-table strong{word-break:break-word}
}

/* The photo input in Portuguese whatever the browser's language: the real <input type=file> stays (keyboard and
   screen readers reach it, its name is "Escolher foto"), drawn as a v6 button with the state beside it. */
#pp .pp-label{margin:0;font-size:10px;color:#5e6b7c;font-weight:680}
#pp.dark .pp-label{color:var(--muted)}
#pp .pp-file{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px;position:relative}
#pp .photo-drop .pp-file-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
#pp .pp-file label.btn{display:inline-flex;align-items:center;cursor:pointer}
#pp .pp-file-input:focus-visible+label{outline:2px solid #cf5ce0;outline-offset:2px}
#pp .pp-file-state{font-size:11px;color:var(--muted)}

/* A photo whose signed address did not load: said in words, never passed off as a photo. */
#pp .pp-photo-broken{display:grid;place-items:center;text-align:center;flex:none;border:1px dashed #e06a7a;border-radius:8px;background:#3d1530;color:#ffd9df;font-size:9px;font-weight:650;line-height:1.2;padding:4px}
#pp .product-cell .pp-photo-broken{width:52px;height:52px}
#pp .photo-preview .pp-photo-broken{width:68px;height:68px}

/* W4 against the visual contract of B2 (CONTRATO_VISUAL_B2_VALIDACAO_QR_2026-11-05.md): the reason a disabled QR tab
   is off, the recoverable errors (neutral, never green), "Registrando entrega…", the two buttons under the camera and
   the photo that did not load. */
#pp .camera-tabs button{min-height:44px}
#pp .camera-tabs button:disabled{opacity:.55;cursor:not-allowed}
#pp .v5-fallback button{min-height:44px}
#pp .pp-w4-reason{margin:8px 0 0;font-size:11px;color:#ffd28a}
#pp .pp-w4-actions{display:flex;gap:8px;flex-wrap:wrap}
#pp .pp-w4-actions .btn{flex:1;min-width:130px}
#pp .pp-result-error{border:1px solid #e0a35a;border-radius:10px;background:#3a2420;color:#ffe3c4;padding:14px;display:grid;gap:4px}
#pp .pp-result-error b{font-size:12px;letter-spacing:.02em}
#pp .pp-result-error h3{margin:0;font-size:15px;color:#fff}
#pp .pp-result-error p{margin:0;font-size:11px}
#pp .v5-result+.pp-result-error{margin-top:12px}
#pp .pp-w4-busy{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:11px;color:#dfc4ed}
#pp .v5-result-hero .pp-w4-photo{width:100%;max-width:120px;height:auto;aspect-ratio:120/115;border-radius:17px;font-size:10px;justify-self:end}
#pp .v5-result-hero img{object-fit:cover;background:#2e1a3d}

/* W5, the team (B3): the invites waiting for this account, on the access screen. */
#pp .pp-invites{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#pp .pp-invite{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid #9758aa;border-radius:10px;background:#2a1338}
#pp .pp-invite small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
#pp .table td small{word-break:break-word}

/* W4, issue #288: the green of ELEGIVEL belongs to ELEGIVEL only. While the hand-over is on its way (neutral) or
   unconfirmed (amber, dominant "não entregar ainda"), the same product data shows without halo, tick or "Elegível". */
#pp .pp-state-busy .v5-result-hero .tag-status,#pp .pp-state-uncertain .v5-result-hero .tag-status{text-shadow:none}
#pp .pp-state-busy .v5-result-hero .tag-status{color:#e9d6f5}
#pp .pp-state-busy .v5-result-hero .tag-status:before{content:'';width:18px;height:18px;border-radius:50%;background:none;border:2px solid #8756a4;border-top-color:#e020dc;box-shadow:none;animation:pp-spin 1s linear infinite}
#pp .v5-result.pp-state-uncertain{border-color:#e0a35a!important}
#pp .pp-state-uncertain .v5-result-hero{background:linear-gradient(115deg,#4a2a14,#2b1420)}
#pp .pp-state-uncertain .v5-result-hero .tag-status{color:#ffd28a;align-items:flex-start}
#pp .pp-state-uncertain .v5-result-hero .tag-status:before{content:'!';flex:none;background:#b8741c;box-shadow:none;animation:none}
#pp .pp-state-chip{font-size:12px;color:#e9d6f5;background:#341747;border:1px solid #8756a4;padding:7px 12px;border-radius:99px}
#pp .pp-state-chip-warn{color:#ffe3c4;background:#4a2a14;border-color:#e0a35a}
#pp .pp-uncertain{margin-top:12px}
#pp .pp-photo-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 16px 0;padding:10px 12px;border:1px solid #e0a35a;border-radius:10px;background:#3a2420;color:#ffe3c4;font-size:12px}
#pp .pp-photo-alert p{margin:0;flex:1;min-width:180px}

/* W6 (B4): the voucher chart and legend of the v6, in the panel's two colours. */
#pp .pp-line-issued{stroke:#d7b4ff}
#pp .pp-line-used{stroke:#7ee0b0}
#pp .legend i.pp-legend-issued{background:#d7b4ff}
#pp .legend i.pp-legend-used{background:#7ee0b0}
#pp .graph text{fill:#c9b3d8}
#pp .graph .gridline{stroke:#80478c88}
@container(max-width:790px){#pp .cols{grid-template-columns:1fr}}
/* Parecer do GPT sobre o B4: with a hand-over on its way or unconfirmed, the reading side is visibly suspended. */
#pp .pp-w4-locked{margin:10px 0 0;padding:9px 11px;border:1px solid #e0a35a;border-radius:9px;background:#3a2420;color:#ffe3c4;font-size:11px;font-weight:650}
#pp .voucher-left .btn:disabled,#pp .voucher-left input:disabled{opacity:.45;filter:saturate(.3);cursor:not-allowed}

/* QA: last in cascade so the later W4 state-specific 11px rules cannot undo legibility. */
#pp .pp-w4-reason,
#pp .pp-w4-busy,
#pp .pp-w4-locked,
#pp .pp-result-error p{font-size:12px;line-height:1.5}