/* Conjoin · versão "uberizada"
   Carregado por último: re-mapeia os tokens para a linguagem dos apps de mobilidade
   (botões retos, cartões planos, folhas inferiores) com as cores do manual da marca:
   o Azul Conjoin como cor de ação e estrutura, variações de azul onde antes havia ouro,
   e cinzas frios. O mapa saiu das telas de entrada; fica só no detalhe do convite e no
   acompanhamento. Ver docs/conceito-uber.md. */

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Marca: o Azul do manual e a família de cinzas frios (Bruma, Névoa, Maré, Costa, Porto, Noite) */
  --azul: #033159;
  --azul-escuro: #02284A;
  --azul-900: #021F3A;
  --azul-600: #0B4A80;
  --azul-500: #1F65A6;
  --azul-400: #4F8FD0;
  --azul-300: #8FB8E3;
  --azul-200: #C5DAEE;
  --azul-150: #D9E4EE;
  --azul-100: #E6EDF4;
  --azul-veu: #E6EDF4;
  --noite: #101C26;
  --porto: #243746;
  --costa: #657786;
  --costa-tinta: #56687A;
  --mare: #ADB8C1;
  --mare-funda: #7F8E9B;
  --nevoa: #E3E8EB;
  --nevoa-funda: #D5DDE3;
  --nevoa-clara: #EAEFF2;
  --bruma: #F4F6F7;
  --alva: #FFFFFF;

  /* Onde o tema antigo usava ouro, entram variações de azul. O ouro do manual (--ouro-marca) fica só no logotipo. */
  --ouro: var(--azul-500);
  --ouro-escuro: var(--azul-600);
  --ouro-tinta: var(--azul-600);
  --ouro-veu: var(--azul-100);

  /* Água: online, conexão e compatibilidade */
  --agua: #00A6A9;
  --agua-tinta: #007376;
  --agua-veu: #E0F4F4;

  /* Papéis */
  --bg: #FFFFFF;
  --surface: var(--bruma);
  --surface-sunken: var(--nevoa-clara);
  --line: var(--nevoa);
  --line-strong: var(--nevoa-funda);
  --field-line: var(--nevoa);
  --action: var(--azul);
  --action-hover: var(--azul-escuro);
  --on-action: #FFFFFF;
  --focus: var(--azul);
  --shadow-whisper: none;
  --shadow-float: 0 -1px 0 var(--nevoa), 0 8px 24px rgba(3, 49, 89, 0.10);
  --ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--azul);

  /* Cantos mais retos */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --tabbar-h: 64px;
}

body { background: #DCE3E8; letter-spacing: -0.005em; }
::selection { background: var(--azul); color: #fff; }
.t-headline, .tab-header h1, .hh h1, .home-head h1 { letter-spacing: -0.03em; font-weight: 800; color: var(--azul); }
.question-head h2, .hero-state h1, .hero-state h2, .detail-title, .invite-title, .sheet-head h2, .card-title, .proc-head .proc-title, .invite-card-title, .co-brand h2, .co-card h2, .prof-hero h2, .iv-hero h2, .next-block h2 { color: var(--azul); letter-spacing: -0.02em; }

/* Palco (desktop): sem as formas da marca, fundo neutro */
@media (min-width: 521px) and (min-height: 641px) {
  body { background: #DCE3E8; }
  .stage::before, .stage::after { display: none; }
  .device { box-shadow: 0 0 0 10px var(--noite), 0 0 0 11px var(--porto), 0 40px 90px rgba(16, 28, 38, 0.28); }
}

/* ===== Botões: retos, pretos, sem sombra ===== */
.btn { border-radius: var(--r-md); font-weight: 700; letter-spacing: -0.01em; }
.btn-primary { background: var(--azul); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--azul-escuro); transform: none; box-shadow: none; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.is-loading::after { border-color: #fff transparent #fff transparent; }
.btn-secondary { background: var(--azul); color: #fff; }
.btn-secondary:hover { background: var(--azul-escuro); }
.btn-outline { background: var(--azul-100); color: var(--azul); border-color: transparent; }
.btn-outline:hover { background: var(--azul-150); }
.btn-outline[aria-disabled="true"] { background: var(--nevoa-clara); }
.btn-text { color: var(--azul); text-decoration: none; font-weight: 700; }
.btn-text:hover { background: var(--nevoa-clara); }
.btn-on-dark { background: #fff; color: var(--azul); border-color: #fff; }
.btn-on-dark:hover { background: var(--nevoa); }
.btn-light { background: #fff; color: var(--azul); }
.btn-danger { background: #B91C1C; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--nevoa); color: var(--mare-funda); }
.link-btn { color: var(--azul); }
.icon-btn { color: var(--azul); }
.icon-btn:hover { background: var(--nevoa-clara); }
.icon-btn.is-raised { background: #fff; box-shadow: 0 2px 8px rgba(3, 49, 89, 0.16); border: 0; }
.icon-btn .dot { background: var(--azul); }
.hh .icon-btn, .hh .icon-btn .ic { color: var(--azul); }
.skip-link { background: var(--azul); }

/* ===== Campos: preenchidos em cinza, sem borda ===== */
.input, .select, .textarea { background: var(--nevoa-clara); border-color: transparent; border-radius: var(--r-md); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--nevoa-funda); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--azul); background: #fff; box-shadow: none; }
.input:disabled, .input[readonly] { background: var(--bruma); }
.input-group .input-prefix { background: var(--nevoa-clara); border-color: transparent; }
.otp input { background: var(--nevoa-clara); border-color: transparent; border-radius: var(--r-md); box-shadow: none; }
.otp input:focus-visible { border-color: var(--azul); background: #fff; box-shadow: none; }
.field-label { font-weight: 600; }

/* Opções grandes */
.choice { background: var(--bruma); border-color: transparent; box-shadow: none; border-radius: var(--r-lg); }
.choice:hover { border-color: var(--nevoa-funda); }
.choice .choice-icon { background: #fff; color: var(--azul); border-radius: var(--r-md); }
.choice:has(input:checked), .choice[aria-checked="true"], .choice[aria-pressed="true"] { background: #fff; border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); animation: none; }
.choice:has(input:checked) .choice-icon { background: var(--azul); color: #fff; }
.choice:has(input:checked) .choice-mark, .choice[aria-checked="true"] .choice-mark, .choice[aria-pressed="true"] .choice-mark { background: var(--azul); border-color: var(--azul); color: #fff; }
.check input { border-radius: 6px; border-color: var(--mare-funda); }
.check input:checked { background-color: var(--azul); border-color: var(--azul); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.switch { background: var(--mare); }
.switch:checked { background: var(--azul); }
.range { accent-color: var(--azul); }
.stepper .icon-btn { border-color: var(--azul); color: var(--azul); background: #fff; }
.stepper .icon-btn:hover { background: var(--nevoa-clara); }
.photo-drop { border-color: var(--mare-funda); background: var(--bruma); color: var(--azul); }
.authz { background: var(--bruma); }
.authz .check input:checked { background-color: var(--azul); }

/* ===== Chips, segmentos, tags ===== */
.chip { background: var(--nevoa-clara); border-color: transparent; color: var(--azul); font-weight: 600; }
.chip:hover { background: var(--nevoa-funda); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; animation: none; }
.segmented { background: var(--nevoa-clara); }
.segmented .seg { color: var(--azul); }
.segmented .seg[aria-selected="true"] { background: var(--azul); color: #fff; box-shadow: none; }
.tag { border-radius: 6px; font-weight: 700; }
.tag-neutro { background: var(--nevoa-clara); color: var(--azul); }
.tag-azul { background: var(--azul); color: #fff; }
.tag-outline { border-color: var(--nevoa-funda); color: var(--azul); }
.ochip { border-color: var(--nevoa-funda); border-radius: 8px; }
.ochip .ic { color: var(--azul); }
.pill { background: var(--bruma); color: var(--azul); border-radius: 8px; }
.pill .ic { color: var(--azul); }
.pill-count { background: var(--azul); }

/* ===== Cartões e listas: planos, cinza sobre branco ===== */
.card, .tile, .list, .invite-row, .invite-card, .proc-card, .job-summary, .co-card, .iv-hero, .iv-guide, .presence-row, .timeline-card, .summary, .exam-q, .course-card, .cert, .qr-card, .code-box, .set-list, .ntf, .onb-intro-item, .atyp-points .point, .term-box, .map-card, .mapcard, .agenda-done { border: 0; background: var(--bruma); box-shadow: none; }
.card-sunken { background: var(--nevoa-clara); }
a.card:hover, button.card:hover, .invite-row:hover, .tile:hover, .stat:hover, .quick-item:hover { box-shadow: none; transform: none; background: var(--nevoa-clara); border-color: transparent; }
.tile-icon, .stat-icon, .list-row .lr-icon, .set-row .sr-ic, .ntf-row .n-ic, .choice-icon, .wh-float-icon, .wel-float .wf-ic, .agenda-done .ad-ic, .onb-intro-item .lr-icon, .atyp-points .point .pt-ic, .presence-row .pr-ic, .match-job .mj-ic { background: #fff; color: var(--azul); }
.ntf-row.is-read .n-ic { background: #fff; color: var(--costa); }
.set-row:hover, .ntf-row:hover, button.list-row:hover, a.list-row:hover { background: var(--nevoa-clara); }
.set-row + .set-row, .ntf-row + .ntf-row, .list-row + .list-row { border-top-color: var(--nevoa); }
.list-row.is-unread .lr-title::before { background: var(--azul); }
.section-head h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.section-head .section-link { color: var(--azul); }
.stat { background: var(--bruma); box-shadow: none; border-radius: var(--r-lg); }
.stat-value { color: var(--azul); }
.quick-item { border: 0; background: var(--bruma); border-radius: var(--r-lg); }
.quick-item .ic { color: var(--azul); }
.quick-item .q-dot { background: var(--azul); }
.pstrip { background: var(--bruma); border-radius: var(--r-lg); }
.pstrip .ps-ic { background: var(--agua); color: var(--noite); }
.pstrip.is-partial { background: var(--azul-100); }
.pstrip .ps-link { color: var(--azul); }
.status-strip { background: var(--bruma); }
.status-strip .ss-title { color: var(--azul); }
.cover-tag { background: var(--azul); color: #fff; }
.hero-photo .hp-tag { color: var(--azul); }
.date-badge { background: var(--nevoa-clara); color: var(--azul); }
.iv-hero .date-badge { background: var(--azul); color: #fff; }
.rating { background: var(--bruma); color: var(--azul); }
.rating .ic { fill: var(--azul); stroke: var(--azul); }
.rating .rate { background: var(--bruma); border-color: transparent; }
.rating .rate[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.benefit { background: var(--bruma); }
.benefit .ic { color: var(--azul); }
.fact { background: var(--bruma); }
.fact .ic { color: var(--azul); }
.empty-art, .hero-state .empty-art, .state-art, .bio-art { background: var(--bruma); color: var(--azul); box-shadow: none; }
.state-art::before { border-color: var(--azul); opacity: 0.25; }
.bio-btn { background: var(--azul); color: #fff; box-shadow: 0 0 0 10px var(--nevoa-clara); animation: none; }
.ok-hero .ok-ic.is-ouro, .ok-hero .ok-ic.is-azul { background: var(--bruma); color: var(--azul); }
.co-brand .brand, .co-card .brand, .rate-head .brand { box-shadow: 0 0 0 4px #fff; }
.brand { border-radius: 50%; }
.avatar { background: var(--nevoa); color: var(--azul); }
.home-avatar .avatar, .prof-hero .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--nevoa-funda); }

/* ===== Blocos de destaque: pretos ===== */
.navcard, .feature, .next-block, .account-hero { background: var(--azul); color: #fff; box-shadow: none; border-radius: var(--r-xl); }
.navcard-kicker { color: var(--azul-200); }
.navcard-kicker .ic { color: var(--azul-300); }
.navcard-sub, .feature .feature-sub, .next-block p { color: var(--azul-200); }
.navcard-chip { background: rgba(255, 255, 255, 0.14); }
.navcard-cta .btn, .next-block .btn { box-shadow: none; }
.navcard-cta .btn-primary, .next-block .btn-primary, .feature .btn-primary { background: #fff; color: var(--azul); }
.navcard-cta .btn-primary:hover, .next-block .btn-primary:hover, .feature .btn-primary:hover { background: var(--nevoa); }
.feature-agua { background: var(--bruma); color: var(--azul); }
.feature-agua .feature-kicker { color: var(--agua-tinta); }
.feature-agua .feature-sub { color: var(--costa-tinta); }
.feature-ouro { background: var(--azul-100); color: var(--azul); }
.next-block.is-done { background: var(--agua-veu); }
.next-block.is-quiet { background: var(--bruma); }
.next-block.is-quiet .nb-kicker { color: var(--costa-tinta); }
.plus-card { background: var(--bruma); }

/* ===== Compatibilidade e progresso ===== */
.compat { background: var(--bruma); }
.compat-head .compat-badge { background: var(--azul); color: #fff; }
.compat-head h2, .compat-head h3 { color: var(--azul); }
.reason .reason-mark { background: var(--azul); color: #fff; }
.meter-track { background: var(--nevoa); }
.meter-fill { background: var(--azul); }
.meter-value { color: var(--azul); }
.progress-track { background: var(--nevoa); }
.progress-fill { background: var(--azul); }
.navcard .progress-fill, .feature .progress-fill { background: #fff; }
.pstrip .progress-fill { background: var(--azul); }
.topbar-progress .progress-track { height: 4px; }
.steps-num .sn.is-done .sn-dot, .steps-num .sn.is-current .sn-dot { background: var(--azul); color: #fff; }
.steps-num .sn.is-done::before, .steps-num .sn.is-current::before { background: var(--azul); }
.steps-num .sn.is-current { color: var(--azul); }
.steps .step.is-done .step-dot, .steps .step.is-current .step-dot { background: var(--azul); border-color: var(--azul); color: #fff; }
.steps .step.is-done::before, .steps .step.is-current::before { background: var(--azul); }
.mini-steps .ms.is-done .ms-dot { background: var(--azul); border-color: var(--azul); color: #fff; }
.mini-steps .ms.is-done::before, .mini-steps .ms.is-current::before { background: var(--azul); }
.mini-steps .ms.is-current .ms-dot { border-color: var(--azul); box-shadow: 0 0 0 4px var(--nevoa); }
.timeline-card .tl-item.is-done .tl-dot, .tl-item.is-done .tl-dot { background: var(--azul); border-color: var(--azul); color: #fff; }
.timeline-card .tl-item.is-done::before, .tl-item.is-done::before { background: var(--azul); }
.tl-item.is-current .tl-dot { background: var(--azul-500); border-color: var(--azul-500); color: #fff; }
.timeline-card .tl-item.is-current .tl-dot { box-shadow: 0 0 0 4px var(--azul-100); }
.steps-list .sl-n { background: var(--azul); color: #fff; }
.lesson-num, .cert .cert-seal, .badge-chip .bc-ic { background: var(--azul); color: #fff; }
.ms-check { background: var(--azul); color: #fff; }

/* Datas e horários: selecionado em preto */
.date-cell { border-color: transparent; background: var(--bruma); }
.date-cell[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; animation: none; }
.date-cell[aria-pressed="true"] .dc-week, .date-cell[aria-pressed="true"] .dc-month, .date-cell[aria-pressed="true"] .dc-ic { color: #fff; }
.slot { border-color: transparent; background: var(--bruma); }
.slot:hover:not(:disabled) { border-color: var(--azul); }
.slot[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; animation: none; }
.slot[aria-pressed="true"] small { color: var(--azul-200); }
.slot:disabled { background: #fff; border-color: var(--nevoa); }
.days .chip { background: var(--bruma); }

/* ===== Avisos ===== */
.notice { background: var(--bruma); border-radius: var(--r-lg); }
.notice .notice-icon { background: var(--azul); color: #fff; }
.notice-prazo { background: var(--azul-100); }
.notice-prazo .notice-icon { background: var(--azul-500); color: #fff; }
.notice-sucesso, .notice-agua { background: var(--agua-veu); }
.notice-sucesso .notice-icon, .notice-agua .notice-icon { background: var(--agua-tinta); }
.notice-neutro .notice-icon { background: var(--costa-tinta); }
.meta-deadline, .meta-deadline .ic { color: var(--azul); }
.proc-next { background: var(--nevoa-clara); color: var(--azul); }
.proc-next.is-urgent { background: var(--azul-100); color: var(--azul-600); }

/* ===== Barra de abas ===== */
.tabbar { box-shadow: none; border-top: 1px solid var(--nevoa-clara); padding-top: 4px; }
.tab-item { color: var(--costa); font-size: 0.875rem; line-height: 1rem; gap: 0; min-height: 52px; }
.tab-item .tab-icon { background: transparent !important; height: 28px; transition: none; }
.tab-item .tab-icon .ic { width: 24px; height: 24px; }
.tab-item[aria-current="page"] { color: var(--azul); font-weight: 700; }
.tab-item[aria-current="page"] .tab-icon { color: var(--azul); animation: none; }
.tab-item[aria-current="page"] .tab-icon .ic { stroke-width: 2.4; }
.tab-item .tab-badge { background: var(--azul); box-shadow: 0 0 0 2px #fff; }

/* ===== Cabeçalhos e rodapé ===== */
.topbar { background: var(--bg); }
.topbar h1 { font-weight: 700; }
.screen-footer { border-top-color: var(--nevoa-clara); }
.detail-footer .btn-text { text-decoration: none; }

/* ===== Folha inferior e toast ===== */
.sheet { border-radius: 20px 20px 0 0; }
.sheet-grip { background: var(--mare); }
.sheet-backdrop { background: rgba(3, 49, 89, 0.5); }
.sheet-foot { border-top-color: var(--nevoa-clara); }
.toast { background: var(--azul); border-radius: var(--r-lg); }
.toast .ic { color: var(--agua); }

/* ===== Mapa simulado antigo (ainda usado em algumas telas) ===== */
.map-sim { background-color: #E9EEF3; border: 0; }
.map-sim::after { background: #D9E5E8; }
.map-sim .map-pin .ic { fill: var(--azul); stroke: #fff; }
.map-card-link, .mapcard .mc-link { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ===== Tela em preto (momento do convite, boas-vindas) ===== */
.screen[data-tone="azul"] { background: var(--azul); color: #fff; }
.app[data-tone="azul"] .statusbar { background: var(--azul); color: #fff; }
.screen[data-tone="azul"] .topbar, .screen[data-tone="azul"] .screen-footer { background: var(--azul); }
.screen[data-tone="azul"] .icon-btn { color: #fff; }
.screen[data-tone="azul"] .btn-primary { background: #fff; color: var(--azul); box-shadow: none; }
.screen[data-tone="azul"] .btn-primary:hover { background: var(--nevoa); }

/* Movimento: sem flutuações nem brilhos; entradas curtas */
.wel-blob, .wel-float { animation: none !important; }
.screen.is-entering { animation-duration: 220ms; filter: none; }
.screen.is-entering .is-staggered > * { animation-duration: 320ms; }
.btn-primary:hover { box-shadow: none; }
.device { animation: none; }

/* ============================================================
   Componentes próprios da versão uberizada
   ============================================================ */

/* Mapa (só no detalhe do convite e no acompanhamento) */
.umap { position: relative; overflow: hidden; background: #E9EEF3; }
.umap .umap-svg { display: block; width: 100%; height: 100%; }
.umap-pulse { transform-origin: center; animation: umap-pulse 2.2s ease-out infinite; }
@keyframes umap-pulse { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1.9); opacity: 0; } }
.umap-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: umap-drop 420ms var(--ease-out-expo) both; }
@keyframes umap-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ----- Cabeçalho azul (substitui o mapa nas telas de entrada) ----- */
.uhero { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 36px; background: var(--azul); color: #fff; overflow: hidden; }
.uhero > * { position: relative; z-index: 1; }
.uhero .uhero-shapes { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.uhero.is-off { background: var(--porto); }
.uhero-text { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 2px; }
.uhero-kicker { font-size: 0.875rem; line-height: 1.125rem; font-weight: 700; color: var(--azul-200); }
.uhero-title { font-size: 1.5rem; line-height: 1.875rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; max-width: 22ch; }

/* ----- Início do candidato (o "modo motorista") ----- */
.uhome { display: flex; flex-direction: column; min-height: 100%; }
.uhome-hero { flex: none; }
.uhome-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uwho { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px; background: #fff; color: var(--azul); font: inherit; font-weight: 700; box-shadow: 0 2px 10px rgba(3, 49, 89, 0.16); cursor: pointer; }
.uwho .avatar { --av: 36px; }
.uwho small { display: block; font-size: 0.875rem; line-height: 1; font-weight: 600; color: var(--costa-tinta); }
.uwho strong { display: block; font-size: 0.9375rem; line-height: 1.1; }
.ubar { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 10px 10px 10px 16px; border-radius: 14px; background: #fff; color: var(--noite); box-shadow: 0 6px 20px rgba(2, 31, 58, 0.28); }
.ubar .udot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--agua); box-shadow: 0 0 0 4px rgba(0, 166, 169, 0.22); }
.ubar.is-off .udot { background: var(--mare); box-shadow: none; }
.ubar.is-partial .udot { background: var(--azul-400); box-shadow: 0 0 0 4px rgba(79, 143, 208, 0.28); }
.ubar .ubar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ubar .ubar-text strong { font-size: 0.9375rem; line-height: 1.25rem; }
.ubar .ubar-text small { font-size: 0.875rem; line-height: 1.1rem; color: var(--costa-tinta); }
.ubar .btn { --btn-h: 40px; padding-inline: 14px; font-size: 0.875rem; white-space: nowrap; }
.upanel { position: relative; z-index: 3; flex: 1; margin-top: -20px; padding: 6px 16px 32px; border-radius: 20px 20px 0 0; background: #fff; display: flex; flex-direction: column; gap: 20px; }
.upanel::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 8px; border-radius: 999px; background: var(--mare); }
.upanel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upanel-head h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.upanel-head .link-btn { font-size: 0.875rem; }

/* Pedido (convite) — o cartão de "corrida" */
.ureq { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--azul); color: #fff; overflow: hidden; }
.ureq-bar { position: absolute; left: 0; top: 0; height: 4px; background: var(--azul-300); border-radius: 0 2px 2px 0; }
.ureq-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ureq-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--azul-200); }
.ureq-kicker .ic { width: 16px; height: 16px; color: var(--azul-300); }
.ureq-time { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ureq-time .ic { width: 14px; height: 14px; }
.ureq-pay { font-size: 2rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ureq-pay small { font-size: 0.9375rem; font-weight: 600; color: var(--azul-200); letter-spacing: 0; margin-left: 6px; }
.ureq-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; }
.ureq-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.875rem; color: var(--nevoa); }
.ureq-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ureq-meta .ic { width: 16px; height: 16px; }
.uroute { display: flex; flex-direction: column; gap: 0; }
.uroute li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; font-size: 0.9375rem; }
.uroute li + li::before { content: ""; position: absolute; left: 5px; top: -10px; width: 2px; height: 16px; background: rgba(255, 255, 255, 0.4); }
.uroute .ur-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: #fff; }
.uroute li:last-child .ur-dot { border-radius: 2px; background: var(--azul-300); }
.uroute strong { display: block; font-weight: 700; }
.uroute small { display: block; font-size: 0.875rem; color: var(--azul-200); }
.ureq-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.ureq-foot .btn-primary { background: #fff; color: var(--azul); }
.ureq-foot .btn-primary:hover { background: var(--nevoa); }
.ureq-foot .btn-outline { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ureq.is-light { background: var(--bruma); color: var(--azul); }
.ureq.is-light .ureq-kicker, .ureq.is-light .ureq-pay small, .ureq.is-light .ureq-meta, .ureq.is-light .uroute small { color: var(--costa-tinta); }
.ureq.is-light .ureq-time { background: #fff; }
.ureq.is-light .uroute .ur-dot { background: var(--azul); }
.ureq.is-light .uroute li + li::before { background: var(--mare); }
.ureq.is-light .ureq-foot .btn-primary { background: var(--azul); color: #fff; }
.ureq.is-light .ureq-foot .btn-outline { background: #fff; color: var(--azul); }

/* Início da empresa: só o que pede ação hoje; selo de vaga só quando não está publicada */
.ujob .uj-sub { white-space: normal; }
.ujob .uj-end:empty { display: none; }
/* Pendências do dia: carrossel com o próximo cartão aparecendo na borda */
.upend { display: flex; gap: 10px; }
.upend.is-carousel { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.upend.is-carousel::-webkit-scrollbar { display: none; }
.upend-card { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 14px 14px 12px; border: 0; border-radius: 14px; background: var(--bruma); color: var(--noite); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.upend.is-carousel .upend-card { flex: 0 0 min(82%, 300px); }
.upend-card:hover { background: var(--nevoa-clara); }
.upend-card:focus-visible { box-shadow: var(--ring); }
.upend-card .up-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-100); color: var(--azul); margin-bottom: 4px; }
.upend-card .up-ic .ic { width: 22px; height: 22px; }
.upend-card .up-title { font-weight: 700; line-height: 1.3; }
.upend-card .up-sub { font-size: 0.875rem; line-height: 1.15rem; color: var(--costa-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upend-card .up-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 0.875rem; font-weight: 700; color: var(--azul); }
.upend-card .up-go .ic { width: 16px; height: 16px; }

/* Indicadores do candidato: os mesmos blocos do Início da empresa; zero fica apagado */
.upanel .stats { gap: 8px; }
.upanel .stat { padding: 14px 6px 12px; }
.upanel .stat-label { font-size: 0.875rem; line-height: 1rem; }
.stat.is-zero .stat-value { color: var(--costa); }
.stat.is-zero .stat-icon { background: var(--nevoa-clara); color: var(--costa); }
.ubento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ubento .tile { min-height: 96px; }

/* Momento do convite (tela inteira) */
.ureqs { display: flex; flex-direction: column; min-height: 100%; }
.ureqs-hero { flex: none; height: 250px; align-items: center; justify-content: center; padding: 48px 16px 40px; }
.ureqs-visual { position: relative; width: 136px; height: 136px; }
.ureqs-visual .rv-photo { display: block; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: var(--azul-600); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 18px 36px rgba(2, 31, 58, 0.38); transform: rotate(-4deg); }
.ureqs-visual .rv-photo img { width: 100%; height: 100%; object-fit: cover; }
.ureqs-visual .rv-brand { position: absolute; right: -20px; bottom: -14px; }
.ureqs-visual .rv-brand .brand { --br: 56px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(2, 31, 58, 0.3); }
.ureqs-visual .rv-brand .brand.is-confidential { background: var(--azul-100); color: var(--azul); }
.ureqs-sheet { position: relative; z-index: 2; margin-top: -24px; padding: 8px 16px 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--azul); display: flex; flex-direction: column; gap: 14px; animation: sheet-in 420ms var(--ease-out-expo) both; }
.ureqs-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 4px; border-radius: 999px; background: var(--mare); }
.ureqs-head { display: flex; align-items: center; gap: 14px; }
.ureqs-head .uring { color: var(--azul); flex: none; }
.ureqs-head .uh-text { flex: 1; min-width: 0; }
.ureqs-head .uh-text p { font-size: 0.875rem; font-weight: 700; color: var(--costa-tinta); }
.ureqs-head .uh-text h1 { font-size: 1.5rem; line-height: 1.875rem; font-weight: 800; letter-spacing: -0.03em; }
.ureqs-pay { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ureqs-pay .pay { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ureqs-pay .pay small { font-size: 1rem; font-weight: 600; color: var(--costa-tinta); margin-left: 6px; letter-spacing: 0; }
.ureqs-pay .match-pct { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--agua-veu); color: var(--agua-tinta); font-weight: 800; font-variant-numeric: tabular-nums; }
.ureqs-pay .match-pct .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.ureqs .uroute strong { color: var(--azul); }
.ureqs .uroute small { color: var(--costa-tinta); }
.ureqs .uroute .ur-dot { background: var(--azul); }
.ureqs .uroute li + li::before { background: var(--mare); }
.ureqs .uroute li:last-child .ur-dot { background: var(--azul-500); }
.ureqs-why { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bruma); }
.ureqs-why p { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; }
.ureqs-why .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--agua-tinta); stroke-width: 2.6; }
.ureqs-foot { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.ureqs-foot .btn-primary { --btn-h: 60px; font-size: 1.0625rem; }
.ureqs .topbar, .screen[data-tone="alva"] .ureqs .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: transparent; }
.ureqs .topbar .icon-btn { background: #fff; color: var(--azul); box-shadow: 0 2px 8px rgba(3, 49, 89, 0.18); }

/* Detalhe do convite: cabeçalho com mapa e "recibo" */
.udetail-map { position: relative; margin: calc(var(--s-2) * -1) calc(var(--gutter) * -1) 0; height: 220px; }
.udetail-map .umap { position: absolute; inset: 0; }
.udetail-map .hp-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 2; }
.udetail-map .ud-photo { position: absolute; right: 12px; bottom: -28px; width: 88px; height: 88px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(3, 49, 89, 0.18); z-index: 2; background: var(--nevoa); }
.udetail-map .ud-photo img { width: 100%; height: 100%; object-fit: cover; }
.ufare { display: flex; flex-direction: column; border-radius: 12px; background: var(--bruma); padding: 4px 16px; }
.ufare-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nevoa); font-size: 0.9375rem; }
.ufare-row:last-child { border-bottom: 0; }
.ufare-row span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--costa-tinta); }
.ufare-row .ic { width: 18px; height: 18px; color: var(--azul); }
.ufare-row strong { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ufare-row.is-total { font-size: 1.125rem; }
.ufare-row.is-total strong { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.ucompany { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bruma); text-decoration: none; color: var(--azul); width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.ucompany .brand { border-radius: 50%; }
.ucompany .uc-text { flex: 1; min-width: 0; }
.ucompany .uc-text strong { display: block; font-weight: 700; }
.ucompany .uc-text small { display: block; font-size: 0.875rem; color: var(--costa-tinta); }
.ustars { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ustars .ic { width: 16px; height: 16px; fill: var(--azul); stroke: var(--azul); }
.ucompany .uc-actions { display: flex; gap: 8px; }
.ucompany .uc-actions .icon-btn, .ucontact .uc-actions .icon-btn { background: #fff; width: 44px; height: 44px; }

/* Atividade (processos): linha de corrida e rastreio */
.uact { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 8px; border-radius: 12px; background: var(--bruma); color: var(--azul); text-decoration: none; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.uact .ua-photo { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--nevoa); }
.uact .ua-photo img { width: 100%; height: 100%; object-fit: cover; }
.uact .ua-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uact .ua-title { font-weight: 700; }
.uact .ua-sub { font-size: 0.875rem; color: var(--costa-tinta); }
.uact .ua-next { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--azul); margin-top: 2px; }
.uact .ua-next.is-urgent { color: var(--azul-600); }
.uact .ua-next .ic { width: 15px; height: 15px; }
.uact .ua-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.utrack { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--azul); color: #fff; }
.utrack-eta { font-size: 0.875rem; font-weight: 700; color: var(--azul-200); }
.utrack h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.utrack p { font-size: 0.875rem; color: var(--azul-200); }
.utrack-steps { display: flex; gap: 4px; margin-top: 4px; }
.utrack-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.utrack-steps i.is-done { background: #fff; }
.utrack-steps i.is-current { background: var(--azul-300); }
.utrack-steps i.is-error { background: #EF4444; }
.utrack-labels { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--azul-200); }
.utrack .btn { margin-top: 6px; background: #fff; color: var(--azul); }
.utrack .btn:hover { background: var(--nevoa); }
.utrack.is-done { background: var(--agua-veu); color: var(--azul); }
.utrack.is-done .utrack-eta, .utrack.is-done p, .utrack.is-done .utrack-labels { color: var(--agua-tinta); }
.utrack.is-done .utrack-steps i { background: rgba(0, 115, 118, 0.25); }
.utrack.is-done .utrack-steps i.is-done { background: var(--agua-tinta); }
.utrack.is-done .btn { background: var(--azul); color: #fff; }
.utrack.is-quiet { background: var(--bruma); color: var(--azul); }
.utrack.is-quiet .utrack-eta, .utrack.is-quiet p, .utrack.is-quiet .utrack-labels { color: var(--costa-tinta); }
.utrack.is-quiet .utrack-steps i { background: var(--nevoa-funda); }
.utrack.is-quiet .utrack-steps i.is-done { background: var(--azul); }
.utrack.is-quiet .btn { background: var(--azul); color: #fff; }
.ucontact { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bruma); }
.ucontact .brand { border-radius: 50%; --br: 52px; }
.ucontact .uc-text { flex: 1; min-width: 0; }
.ucontact .uc-text strong { display: block; font-weight: 700; }
.ucontact .uc-text small { display: block; font-size: 0.875rem; color: var(--costa-tinta); }
/* Convites como caixa de pedidos: histórico recolhido numa linha; anteriores apagados */
.uinbox-past { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--bruma); color: var(--azul); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.uinbox-past:hover { background: var(--nevoa-clara); }
.uinbox-past span { flex: 1; }
.uinbox-past .ic:first-child { color: var(--costa); }
.uact.is-past .ua-photo { filter: grayscale(1); opacity: 0.7; }
.uact.is-past .ua-title { color: var(--porto); }
.umini-map { height: 140px; border-radius: 12px; overflow: hidden; }
.umini-map .umap { height: 100%; }

/* ----- Início da empresa (o "modo passageiro") ----- */
.ucomp-hero { margin: 0 calc(var(--gutter) * -1); padding-bottom: 48px; }
.usearch { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-top: -32px; padding: 8px 16px 8px 8px; border: 0; border-radius: 14px; background: #fff; color: var(--azul); font: inherit; text-align: left; box-shadow: 0 8px 24px rgba(3, 49, 89, 0.14); cursor: pointer; }
.usearch:hover { background: var(--bruma); }
.usearch:focus-visible { box-shadow: var(--ring); }
.usearch .us-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: #fff; }
.usearch .us-q { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usearch .us-q small { display: block; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--costa-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usearch > .ic { flex: none; color: var(--azul); }
/* Atalho "Repetir vaga": uma fileira só, logo abaixo da barra, que rola de lado se tiver mais funções */
.us-again { display: flex; align-items: center; gap: 8px; margin: calc(var(--s-3) - var(--s-6)) calc(var(--gutter) * -1) 0; padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.us-again::-webkit-scrollbar { display: none; }
.us-again .us-label { flex: none; font-size: 0.8125rem; font-weight: 700; color: var(--costa-tinta); }
.us-again .us-chip { flex: none; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--azul-150); border-radius: 999px; background: #fff; color: var(--azul); font: inherit; font-size: 0.875rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.us-again .us-chip:hover { border-color: var(--azul); }
.us-again .us-chip:focus-visible { box-shadow: var(--ring); }
.uroles { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
.uroles::-webkit-scrollbar { display: none; }
.uroles .chip { background: var(--bruma); }
.ufind { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--azul); color: #fff; }
.ufind-top { display: flex; align-items: center; gap: 12px; }
.ufind-top .uf-photo { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; }
.ufind-top .uf-photo img { width: 100%; height: 100%; object-fit: cover; }
.ufind-top .uf-text { flex: 1; min-width: 0; }
.ufind-top .uf-text strong { display: block; font-weight: 700; }
.ufind-top .uf-text small { display: block; font-size: 0.875rem; color: var(--azul-200); }
.ufind-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.ufind-bar::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 100%; border-radius: 2px; background: var(--azul-300); animation: ufind-scan 1.6s ease-in-out infinite; }
@keyframes ufind-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.ufind-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--azul-200); }
.ufind-row strong { color: #fff; }
.ufind .btn { background: #fff; color: var(--azul); margin-top: 4px; }
.ufind .btn:hover { background: var(--nevoa); }
.ufind.is-done { background: var(--bruma); color: var(--azul); }
.ufind.is-done .uf-text small, .ufind.is-done .ufind-row { color: var(--costa-tinta); }
.ufind.is-done .ufind-row strong { color: var(--azul); }
.ufind.is-done .btn { background: var(--azul); color: #fff; }
.ufind.is-done .ufind-bar { display: none; }
.ujob { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; border-radius: 12px; background: var(--bruma); color: var(--azul); text-decoration: none; width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.ujob .uj-photo { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--nevoa); }
.ujob .uj-photo img { width: 100%; height: 100%; object-fit: cover; }
.ujob .uj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ujob .uj-title { font-weight: 700; }
.ujob .uj-sub { font-size: 0.875rem; color: var(--costa-tinta); }
.ujob .uj-end { display: flex; align-items: center; gap: 6px; color: var(--costa); }
.ufind-top .uf-photo { border-radius: 12px; }
.uf-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--azul-300); vertical-align: 1px; box-shadow: 0 0 0 3px rgba(143, 184, 227, 0.25); }
.uf-dot.is-done { background: var(--agua); box-shadow: 0 0 0 3px rgba(0, 166, 169, 0.22); }
.ufind-cands { display: flex; flex-direction: column; margin-top: 2px; border-top: 1px solid var(--nevoa-funda); }
.ucand { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: none; color: var(--noite); font: inherit; text-align: left; cursor: pointer; }
.ucand + .ucand { border-top: 1px solid var(--nevoa-funda); }
.ucand:hover .uc-text strong { color: var(--azul); }
.ucand:focus-visible { box-shadow: var(--ring); border-radius: 8px; }
.ucand .avatar { --av: 40px; }
.ucand .uc-text { flex: 1; min-width: 0; }
.ucand .uc-text strong { display: block; font-weight: 700; line-height: 1.25; }
.ucand .uc-text small { display: block; font-size: 0.875rem; line-height: 1.1rem; color: var(--costa-tinta); }
.ucand .match-pct { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--agua-veu); color: var(--agua-tinta); font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ucand .match-pct .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.ucand > .ic { color: var(--costa); }
.ufind-more { padding: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--costa-tinta); }

/* Perfil do candidato (empresa): identidade à esquerda, um painel de resumo, ficha compacta */
.uprof-id { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-1); }
.uprof-id .avatar { --av: 56px; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--nevoa-funda); }
.uprof-id-text { min-width: 0; }
.uprof-id h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--azul); }
.uprof-id p { font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.uprof-panel { display: flex; flex-direction: column; padding: 0 var(--s-4); border-radius: var(--r-xl); background: var(--bruma); }
.uprof-panel > * { padding: var(--s-4) 0; }
.uprof-panel > * + * { border-top: 1px solid var(--nevoa-funda); }
.uprof-panel .pj-status { background: none; border-radius: 0; gap: 0; }
.uprof-panel .pj-status .ps-text { gap: var(--s-2); }
.uprof-compat { display: flex; flex-direction: column; gap: var(--s-3); }
.uprof-score { display: flex; align-items: baseline; gap: var(--s-3); }
.uprof-score strong { font-size: 1.75rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--agua-tinta); font-variant-numeric: tabular-nums; }
.uprof-score span { font-weight: 700; color: var(--noite); }
.uprof-compat .meter-track { height: 8px; border-radius: 999px; background: var(--nevoa-funda); overflow: hidden; }
.uprof-compat .meter-fill { height: 100%; border-radius: inherit; background: var(--agua-tinta); }
.uprof-why { font-size: 0.875rem; font-weight: 700; margin-top: var(--s-1); }
.uprof-sheet { margin-top: var(--s-2); }
.uprof-sheet .dl { padding: var(--s-1) var(--s-4); border-radius: var(--r-xl); background: var(--bruma); }
.uprof-sheet .dl-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-3) 0; border-bottom-color: var(--nevoa-funda); }
.uprof-sheet .dl-row dt { font-size: 0.875rem; line-height: 1.125rem; color: var(--costa-tinta); }
.uprof-sheet .dl-row dd { max-width: 100%; text-align: left; font-weight: 600; color: var(--noite); }
.uprof .set-group h2, .uprof .section-head h2 { font-size: 1rem; line-height: 1.5rem; }

/* Linhas de apoio ("Resposta até…") quebram linha em vez de estourar a largura */
.meta { min-width: 0; }
.pj-status { align-items: flex-start; }
.pj-status > .ic { display: none; }
.pj-status .ps-text .meta { display: block; white-space: normal; }
.pj-status .ps-text .meta .ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }

/* Clicável tem seta: cartões-link e blocos de atalho */
.card-link .card-chev { align-self: center; display: inline-flex; color: var(--costa); margin-left: 4px; }
.tile { position: relative; }
.tile .tile-chev { position: absolute; top: 14px; right: 12px; display: inline-flex; color: var(--costa); }
/* Selos dentro de blocos quebram linha em vez de serem cortados numa rolagem lateral */
.chips:has(> .tag) { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
.chips:has(> .tag) > * { white-space: normal; }
.reqs { display: flex; flex-direction: column; gap: 8px; }
.reqs li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.35rem; }
.reqs li .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--agua-tinta); stroke-width: 2.6; }

/* Lista de candidatos (Candidatos da vaga e aba Candidatos): linhas planas num bloco só */
.ucand-list { display: flex; flex-direction: column; padding: 2px 14px; border-radius: 14px; background: var(--bruma); }
.ucand-list .ucand { padding: 12px 0; }
.ucand-list .ucand + .ucand { border-top: 1px solid var(--nevoa-funda); }
a.ucand { text-decoration: none; }
.ucand .uc-tag { display: block; margin-top: 5px; }
.ucand .uc-tag .tag { min-height: 24px; font-size: 0.875rem; padding: 0 8px; }
.ucand .uc-tag .tag .ic { width: 13px; height: 13px; }

/* ----- Boas-vindas ----- */
.uwel { display: flex; flex-direction: column; min-height: 100%; }
.uwel-hero { flex: none; height: 300px; margin: calc(var(--s-2) * -1) calc(var(--gutter) * -1) 0; padding: 20px 16px; border-radius: 0 0 28px 28px; }
.uwel-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.uwel-logo .logo { gap: 8px; }
.uwel-logo .logo-word { font-size: 1.5rem; color: #fff; }
.uhero .uwel-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; color: var(--noite); box-shadow: 0 8px 24px rgba(2, 31, 58, 0.3); font-size: 0.875rem; font-weight: 700; animation: toast-in 500ms var(--ease-out-expo) both; }
.uwel-card .avatar { --av: 32px; }
.uwel-card small { display: block; font-size: 0.875rem; font-weight: 500; color: var(--costa-tinta); }
.uwel-card .tile-icon { width: 32px; height: 32px; background: var(--agua); color: var(--noite); }
.uhero .uwel-card.a { left: 16px; top: 132px; animation-delay: 200ms; }
.uhero .uwel-card.b { right: 16px; top: 196px; animation-delay: 420ms; }
.uwel-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; margin-top: 24px; }
.uwel-text h1 { font-size: 2rem; line-height: 2.375rem; font-weight: 800; letter-spacing: -0.035em; color: var(--azul); }
.uwel-text p { font-size: 1.0625rem; color: var(--costa-tinta); max-width: 30ch; }
.welcome-a11y { position: absolute; top: 20px; right: 16px; z-index: 3; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(3, 49, 89, 0.14); }
.usplash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; color: #fff; }
.usplash .logo-word { font-size: 2.75rem; letter-spacing: -0.04em; }
.usplash .splash-tag { color: var(--azul-200); }
.usplash .splash-loader { background: rgba(255, 255, 255, 0.2); }
.usplash .splash-loader span { background: #fff; }

/* Estrelas (nota da empresa) */
.ustar-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: #fff; font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ustar-pill .ic { width: 14px; height: 14px; fill: var(--azul); stroke: var(--azul); }

@media (max-width: 359px) {
  .ureq-foot { grid-template-columns: 1fr; }
  .ureqs-pay .pay { font-size: 1.75rem; }
  .uwel-hero { height: 270px; }
  .uhero-title { font-size: 1.3125rem; line-height: 1.625rem; }
  .uwel-text h1 { font-size: 1.625rem; line-height: 2rem; }
}

/* Ajustes de posicionamento das composições novas */
.ureqs { position: relative; }
.uwel { position: relative; }
.ucomp-hero { margin-top: calc(var(--s-2) * -1); }
.screen[data-screen="/candidate/match/:id"] .screen-body { padding: 0; }
.umap-pulse { transform-box: fill-box; transform-origin: center; }
.umap-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.ureqs-pay .pay.is-long { font-size: 1.625rem; line-height: 2rem; }
.ureq-pay.is-long { font-size: 1.5rem; line-height: 1.875rem; }
.uact .ua-tag { margin-top: 4px; }
.uact .ua-tag .tag { min-height: 24px; font-size: 0.875rem; padding: 0 8px; }
.uact .ua-end { align-self: center; color: var(--costa); }
.uact .ua-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ureqs-sheet { flex: 1; }
.ureqs-pay .pay small { display: block; margin-left: 0; white-space: nowrap; }
.ureqs-pay { align-items: flex-start; }


/* ============================================================
   Revisão de 22/10: correções liberadas pelo cliente
   ============================================================ */
/* a. Dias da semana selecionados precisam aparecer (a regra .days .chip vencia o estado marcado) */
.days .chip[aria-pressed="true"], .days .chip[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }

/* b. Títulos e subtítulos de linhas quebram em até duas linhas em vez de serem cortados */
.set-row .sr-title, .list-row .lr-title, .n-title, .invite-row-title, .lr-title, .jobrow .jr-title, .navcard-row .grow, .stat-label { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
.set-row .sr-sub, .list-row .lr-sub, .invite-row-sub, .ntf-row .n-body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { white-space: normal; }

/* c. Linhas de apoio em parágrafo (ex.: distância e endereço em Acompanhar) quebram linha */
p.meta { display: block; white-space: normal; }
p.meta .ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.metas .meta { white-space: normal; overflow: visible; }

/* d. Seta em cartões e atalhos clicáveis */
.pj-card, .course-card, .quick-item, .umini-map { position: relative; }
.pj-card .card-chev { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--azul); box-shadow: 0 2px 8px rgba(3, 49, 89, 0.18); }
.quick-item .tile-chev { position: absolute; top: 8px; right: 8px; color: var(--costa); }
.umini-map .umm-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; border-radius: 999px; background: #fff; color: var(--azul); font-size: 0.875rem; font-weight: 700; box-shadow: 0 2px 8px rgba(3, 49, 89, 0.18); }
.umini-map .umm-label .ic:first-child { width: 16px; height: 16px; }

.course-card .card-chev { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-100); color: var(--azul); }
.course-card { padding-bottom: 44px; }
.demo-note, .demo-note .link-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* f. Regra dos 14: rótulos do sistema base que ficavam entre 11 e 13 px */
.tab-item, .quick-item, .stat-label, .ntf-row .n-time, .date-cell .dc-week, .chip .chip-count, .ochip, .pill, .set-row .sr-sub, .navcard-kicker, .navcard-chip, .mini-steps .ms, .steps-num .sn, .slot small, .hh .hh-kicker, .hh-unit, .jobrow .jr-sub, .person .pe-sub, .unit-card .uc-text small, .plan-card .pl-text small, .ledger-row .lg-sub, .invoice .in-sub, .badge-row .bd-text small, .pj-card-code, .iv-guide small, .next-block .nb-kicker, .course-grid .course-card .card-sub, .demo-note, .question .demo-note, .stack-lg .demo-note, .hero-state .demo-note, .pc-protected .pc-kicker, .ep-jobhead .jh-kicker, .rev-step small, .fact2 small, .reg-progress .rp-head, .navcard-body .navcard-steps li, .plus-card small, .wh-float small, .mapcard .mc-text small, .mapcard .mc-link, .days .chip, .ep-proc .mini-steps .ms, .card .mini-steps .ms, .proc-card .mini-steps .ms, .invite-row .pill, .exam-q .eq-n, .pix-code, .demo-panel, .demo-trigger .dt-short { font-size: 0.875rem; }
.tab-item { line-height: 1.125rem; }
.tab-item .tab-badge { min-width: 20px; height: 20px; line-height: 20px; font-size: 0.8125rem; }
.date-cell .ag-dot { font-size: 0.75rem; }

/* k. Faixa de dias da Agenda encaixa na margem */
.ag-strip { scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.ag-strip .date-cell { scroll-snap-align: start; }

/* 2. Convites: atalho para a Atividade com a contagem de processos */
.uinbox-past.is-open .ic:first-child { color: var(--azul); }

/* Endereço: número estreito e complemento largo, para o rótulo "Complemento (opcional)" caber numa linha */
.bento.is-address { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: end; }
.bento.is-address .field-label { white-space: nowrap; }
@media (max-width: 359px) { .bento.is-address { grid-template-columns: 1fr; } }

/* Perguntas agrupadas no cadastro (ex.: disponibilidade): título, controle e erro juntos */
.qgroup { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.qgroup + .qgroup { margin-top: var(--s-3); }
.qgroup .qgroup-title { font-weight: 700; color: var(--noite); padding: 0; margin-bottom: 2px; }
.qgroup .chips .chip { min-height: 48px; padding-inline: 16px; }
.qgroup .field-help { margin-top: -2px; }

/* Salário: valor grande, controle deslizante e o campo de digitar como opção discreta */
.usal { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--bruma); }
.usal .big-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.usal .big-value small { font-size: 1rem; font-weight: 600; color: var(--costa-tinta); letter-spacing: 0; }
.usal .big-sub { text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); min-height: 2.5rem; }
.usal .range { margin-top: var(--s-1); }
.usal .usal-type { align-self: center; gap: 6px; margin-top: var(--s-1); font-weight: 600; color: var(--costa-tinta); }
.usal .usal-type:hover { color: var(--azul); }
.usal .field { margin-top: var(--s-2); }

/* Calendário mensal */
.cal { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-xl); background: var(--bruma); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cal-head strong { font-size: 1rem; font-weight: 700; color: var(--noite); }
.cal-head .icon-btn { background: #fff; }
.cal-head .icon-btn:disabled { opacity: 0.35; cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-week span { text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--costa-tinta); padding: 2px 0; }
.cal-cell { display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--noite); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-cell.is-empty { pointer-events: none; }
.cal-cell:hover:not(:disabled) { background: var(--azul-100); }
.cal-cell:disabled { color: var(--mare); cursor: default; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--azul-300); }
.cal-cell.is-selected, .cal-cell[aria-pressed="true"] { background: var(--azul); color: #fff; box-shadow: none; }
.cal-cell:focus-visible { box-shadow: var(--ring); }
.cal-chosen { font-size: 0.9375rem; color: var(--porto); padding: 0 4px; }

/* Restrições: separador "ou" e grade de cartões com ícone, título e consequência */
.ures-or { display: flex; align-items: center; gap: var(--s-3); font-size: 0.875rem; font-weight: 600; color: var(--costa-tinta); }
.ures-or::before, .ures-or::after { content: ""; flex: 1; height: 1px; background: var(--nevoa-funda); }
.ures-grid { gap: var(--s-2); }
.ures-grid .choice { min-height: 120px; padding: 12px 12px 12px; gap: 8px; }
.ures-grid .choice .choice-icon { width: 40px; height: 40px; }
.ures-grid .choice .choice-title { font-size: 0.9375rem; line-height: 1.25rem; padding-right: 28px; }
.ures-grid .choice .choice-desc { font-size: 0.875rem; line-height: 1.125rem; }
.ures-grid .choice:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; }
.ures-grid .choice:last-child:nth-child(odd) .choice-title { padding-right: 0; }

/* Distância: mapa com raio, valor com tempo estimado e contagem de vagas dentro do raio */
.udist-map { height: 156px; border-radius: var(--r-xl); overflow: hidden; }
.screen[data-screen="/candidate/onboarding/distancia"] .question, .screen[data-screen="/candidate/onboarding/distancia"] .stack-lg { gap: var(--s-3); }
.udist-value .big-value { line-height: 1.1; }
.udist-map .umap-svg { display: block; width: 100%; height: 100%; }
.umap-svg.is-still .umap-pin, .umap-svg.is-still .umap-pulse { animation: none; }
.udist-value { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.udist-trip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--costa-tinta); }
.udist-trip .ic { width: 18px; height: 18px; }
.udist-count { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--azul-100); color: var(--azul); line-height: 1.375rem; }
.udist-count .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.udist-count strong { font-weight: 800; }

/* Público Atípico: "Ouvir esta pergunta" logo abaixo do enunciado */
.atyp-listen { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: var(--s-2); font-weight: 700; color: var(--azul); }
.atyp-listen .ic { width: 18px; height: 18px; }

/* Select: campo fechado no padrão do app e opções numa folha inferior (js/ui/select-sheet.js) */
.select-wrap { position: relative; }
.select-hit { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.select-wrap:hover .select { border-color: var(--nevoa-funda); }
.select { font-weight: 600; color: var(--noite); padding-right: 52px; }
.select, .select:hover, .select:focus, .select:focus-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033159' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; }
.select:has(option:checked[disabled]) { font-weight: 400; color: var(--costa-tinta); }
.selsheet { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-2); }
.selsheet-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-4); border: 1.5px solid transparent; border-radius: var(--r-lg); background: var(--bruma); color: var(--noite); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.selsheet-opt:hover { background: var(--nevoa-clara); }
.selsheet-opt:focus-visible { box-shadow: var(--ring); }
.selsheet-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mare-funda); color: transparent; }
.selsheet-mark .ic { width: 14px; height: 14px; stroke-width: 3; }
.selsheet-opt[aria-checked="true"] { background: #fff; border-color: var(--azul); }
.selsheet-opt[aria-checked="true"] .selsheet-mark { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Público Atípico · O que a empresa pode ver: duas perguntas e o resumo do resultado */
.uvis { gap: var(--s-5); }
.uvis-block { display: flex; flex-direction: column; gap: var(--s-2); }
.uvis-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; color: var(--noite); }
.uvis-told { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.875rem; font-weight: 600; color: var(--costa-tinta); margin-bottom: var(--s-1); }
.uvis-told span { display: inline-flex; align-items: center; gap: 4px; }
.uvis-told .ic { width: 16px; height: 16px; color: var(--agua-tinta); }
.uvis-hint { font-size: 0.875rem; line-height: 1.25rem; margin-top: -2px; }
.uvis-toggle { align-self: flex-start; gap: 6px; font-weight: 700; color: var(--azul); margin-top: var(--s-1); }
.uvis-items { display: flex; flex-direction: column; gap: var(--s-3); }
.uvis-summary { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--azul-100); color: var(--azul); }
.uvis-summary h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.uvis-summary h3 .ic { width: 20px; height: 20px; }
.uvis-summary ul { display: flex; flex-direction: column; gap: 6px; }
.uvis-summary li, .uvis-summary p { font-size: 0.9375rem; line-height: 1.375rem; color: var(--porto); }
.uvis-summary strong { color: var(--azul); }
.uvis-summary .uvis-foot { font-size: 0.875rem; color: var(--costa-tinta); }

/* Escolher horário da entrevista: dias com contagem, horários por período, escolha fixa no rodapé */
.usched-head { display: flex; flex-direction: column; gap: 4px; }
.usched-job { font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; color: var(--azul); }
.usched-head .meta { display: flex; align-items: flex-start; gap: 6px; white-space: normal; }
.usched-head .meta .ic { flex: none; margin-top: 2px; }
.usched-days .date-cell { min-height: 84px; gap: 2px; }
.date-cell .dc-free { font-size: 0.8125rem; font-weight: 600; color: var(--agua-tinta); }
.date-cell[aria-pressed="true"] .dc-free { color: var(--azul-200); }
.date-cell:disabled .dc-free { color: var(--mare-funda); }
.usched-period { display: flex; flex-direction: column; gap: var(--s-2); }
.usched-plabel { font-size: 0.875rem; font-weight: 700; color: var(--costa-tinta); }
.usched-chosen { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; font-size: 0.9375rem; color: var(--porto); }
.usched-chosen .ic { flex: none; width: 22px; height: 22px; color: var(--azul); }
.usched-chosen strong { color: var(--azul); }

/* Data no selo: dia da semana e mês legíveis (a regra antiga usava o tom dourado escuro sobre o azul) */
.date-badge .db-week, .date-badge .db-month { color: var(--azul-500); }
.iv-hero .date-badge .db-week, .iv-hero .date-badge .db-month { color: var(--azul-200); }

/* Card da entrevista agendada: quando (com quanto falta e a hora de término), depois vaga e local em linhas inteiras */
.iv-hero.ivh { flex-direction: column; align-items: stretch; gap: var(--s-3); }
.ivh-top { display: flex; gap: var(--s-3); align-items: center; }
.ivh-rel { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--agua-tinta); }
.ivh h2 { font-size: 1.25rem; line-height: 1.625rem; }
.ivh-end { font-size: 0.9375rem; line-height: 1.375rem; color: var(--costa-tinta); }
.ivh-rows { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--azul-150); display: flex; flex-direction: column; gap: var(--s-3); }
.ivh-rows li { display: flex; gap: 12px; align-items: flex-start; }
.ivh-rows .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--azul-500); }
.ivh-rows strong { display: block; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 700; color: var(--azul); }
.ivh-rows small { display: block; font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }

/* Campo de horário: 24h, abre a grade de horários por período em vez do seletor nativo (que mostra AM/PM) */
.select-time .select { font-variant-numeric: tabular-nums; font-weight: 700; }
.seltime { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-2); }
.seltime-group { display: flex; flex-direction: column; gap: var(--s-2); }
.seltime-label { font-size: 0.875rem; font-weight: 700; color: var(--costa-tinta); }
.seltime-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.seltime-opt { min-height: 48px; border: 1.5px solid transparent; border-radius: var(--r-lg); background: var(--bruma); color: var(--noite); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.seltime-opt:hover { background: var(--nevoa-clara); }
.seltime-opt:focus-visible { box-shadow: var(--ring); }
.seltime-opt[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Vaga · Faixa salarial: dois controles na mesma trilha, com o "de" e o "até" sempre visíveis em cima */
.jsal { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--bruma); }
.jsal-vals { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); }
.jsal-vals p { display: flex; flex-direction: column; gap: 2px; }
.jsal-vals p:last-child { align-items: flex-end; text-align: right; }
.jsal-vals small { font-size: 0.8125rem; font-weight: 700; color: var(--costa-tinta); text-transform: uppercase; letter-spacing: 0.04em; }
.jsal-vals strong { font-size: 1.5rem; line-height: 1.875rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.jsal-vals span { font-size: 0.875rem; color: var(--costa-tinta); }
.jsal-dash { align-self: center; font-size: 0.9375rem; color: var(--costa-tinta); }
.jsal-sub { font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); text-align: center; }
.jsal .usal-type { align-self: center; gap: 6px; font-weight: 600; color: var(--costa-tinta); }
.jsal .usal-type:hover { color: var(--azul); }
.jsal .bento { margin-top: var(--s-2); }
.drange { position: relative; height: 44px; margin-top: var(--s-2); }
.drange::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px;
  background: linear-gradient(to right, var(--azul-150) var(--a), var(--azul) var(--a), var(--azul) var(--b), var(--azul-150) var(--b)); }
.drange-in { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; z-index: 2; accent-color: var(--azul); }
.drange-in.is-top { z-index: 3; }
.drange-in:focus { outline: none; }
.drange-in::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.drange-in::-moz-range-track { height: 44px; background: transparent; border: 0; }
.drange-in::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); box-shadow: 0 1px 4px rgba(3, 49, 89, 0.28); cursor: grab; }
.drange-in::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--azul); box-shadow: 0 1px 4px rgba(3, 49, 89, 0.28); cursor: grab; }
.drange-in:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.drange-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--azul-200); }
.drange-in:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--azul-200); }

/* Vaga · Horários para entrevista: resumo, formato, dia e uma grade em que o toque marca ou desmarca */
.hsum { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-xl); background: var(--azul-100); }
.hsum-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #fff; }
.hsum-ic.is-empty { background: #fff; color: var(--azul); }
.hsum-ic .ic { width: 20px; height: 20px; }
.hsum p { display: flex; flex-direction: column; }
.hsum strong { font-size: 1rem; font-weight: 800; color: var(--azul); }
.hsum small { font-size: 0.875rem; color: var(--porto); }
.hfmt { border: 0; margin: 0; padding: 0; }
.hfmt legend { margin-bottom: var(--s-2); }
.hfmt .seg { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hfmt .seg[aria-checked="true"] { background: var(--azul); color: #fff; }
.hdays .date-cell { min-height: 76px; gap: 2px; }
.hdays .date-cell .dc-free { font-size: 0.75rem; font-weight: 600; color: var(--agua-tinta); white-space: nowrap; }
.hdays .date-cell[aria-pressed="true"] .dc-free { color: var(--azul-200); }
.hslot[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.hslot[aria-pressed="true"] small { color: var(--azul-200); }
.hslot.is-reserved, .hslot.is-reserved:disabled { background: var(--agua-veu); border: 1.5px solid var(--agua); border-style: solid; color: var(--agua-tinta); text-decoration: none; cursor: default; }
.hslot.is-reserved small { color: var(--agua-tinta); font-weight: 700; }
.hcopy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-top: var(--s-1); }
.hcopy .link-btn { gap: 8px; font-weight: 700; color: var(--azul); }
.drange-in:focus-visible { outline: none; box-shadow: none; }
.hdays { grid-auto-columns: 84px; }
.hgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hgrid .slot { min-height: 48px; padding-inline: 2px; }

/* Cartão de convite (navcard): a coluna do texto pode encolher e os chips quebram linha, em vez de
   empurrar a foto para fora do cartão quando ele está num espaço mais estreito (ex.: prévia da vaga) */
.navcard { grid-template-columns: minmax(0, 1fr) 44%; }
.navcard .navcard-body { min-width: 0; }
.navcard .navcard-chips { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }
.navcard .navcard-title { overflow-wrap: anywhere; }

/* Prévia do convite na publicação: os dados da vaga ficam dentro da moldura e quebram linha */
.pj-preview .pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
@media (max-width: 359px) { .navcard { grid-template-columns: minmax(0, 1fr); } }

/* Linha do candidato (empresa): situação em uma linha de texto colorido, sem etiqueta que quebra,
   e a compatibilidade com rótulo ("95% compatível") em vez de um número solto com ícone de corrente */
.ucand-hint { margin: -4px 0 var(--s-2); font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.ucand { align-items: center; }
.ucand .uc-sit { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; }
.ucand .uc-sit .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.uc-sit--espera { color: var(--azul-500); }
.uc-sit--ok { color: var(--agua-tinta); }
.uc-sit--acao { color: #8A5A00; }
.uc-sit--alerta { color: #B42318; }
.uc-sit--fim { color: var(--costa-tinta); font-weight: 600; }
.ucand .uc-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.ucand .uc-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucand .uc-score { flex: none; font-size: 0.8125rem; color: var(--costa-tinta); white-space: nowrap; }
.ucand .uc-score b { font-size: 1rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }

/* Página da empresa: o logo sobe sobre a capa (margem negativa), então precisa ficar à frente dela */
.co-brand { position: relative; z-index: 1; align-items: center; margin-top: calc(var(--s-3) - var(--s-6)); }
.co-brand .brand { flex: none; margin-top: -44px; align-self: flex-start; }

/* Fileiras com rolagem lateral (filtros, chips, pílulas): o encaixe da rolagem respeita o recuo da página,
   senão o primeiro item gruda na borda da tela e fica desalinhado do resto do conteúdo */
.chips, .ochips, .pills, .benefits, .navcard-chips, .co-badges { scroll-padding-inline: var(--gutter); }
.card .chips, .card .ochips, .card .pills, .card .benefits, .feature .chips, .feature .navcard-chips, .sheet-body .chips, .compat .chips, .invite-card .pills, .agenda-done .chips, .co-card .co-badges, .prof-hero .chips { scroll-padding-inline: var(--s-4); }
/* Cartão de vaga: a pílula tinha o mesmo cinza do cartão e parecia texto recuado; em branco, a borda alinha com o título */
.pj-card .pill { background: #fff; }
.pj-card .pills { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }


/* Empresa · Perfil: seções com título e uma frase de para quê; o aviso de revisão entra na ajuda do texto */
.eprof-sec { display: flex; flex-direction: column; }
.eprof-h { font-size: 1.125rem; line-height: 1.5rem; font-weight: 800; color: var(--azul); }
.eprof-hint { margin-top: -4px; font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }

/* Empresa · Segurança: estado em um bloco, "como funciona" e ações protegidas em linhas com ícone */
.sec-status { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-xl); background: var(--agua-veu); }
.sec-status .ss-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--agua-tinta); color: #fff; }
.sec-status h2 { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800; color: var(--azul); }
.sec-status p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.375rem; color: var(--porto); }
.protected { gap: 0; padding: 4px var(--s-4); }
.protected li { gap: var(--s-3); min-height: 52px; font-size: 0.9375rem; line-height: 1.25rem; color: var(--noite); }
.protected li + li { border-top: 1px solid var(--nevoa-funda); }
.protected .pt-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.protected .pt-ic .ic { width: 16px; height: 16px; color: var(--azul); }
.sec-steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 0.9375rem; line-height: 1.375rem; }

/* Empresa · Loja: lista vertical em vez de carrossel com um cartão por vez */
.store-list { display: flex; flex-direction: column; gap: var(--s-2); }
.sprod { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); background: var(--bruma); color: var(--noite); text-decoration: none; }
.sprod:hover { background: var(--nevoa-clara); }
.sprod:focus-visible { box-shadow: var(--ring); }
.sprod > .ic { flex: none; color: var(--costa); }
.sprod .sp-ic { display: grid; place-items: center; flex: none; align-self: flex-start; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--azul); }
.sprod .sp-ic.is-plano { background: var(--azul); color: #fff; }
.sprod .sp-ic.is-creditos { background: var(--agua-veu); color: var(--agua-tinta); }
.sprod .sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sprod .sp-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--costa-tinta); }
.sprod strong { font-size: 1rem; line-height: 1.375rem; font-weight: 800; color: var(--azul); }
.sprod small { font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.sprod .sp-price { margin-top: 4px; font-size: 0.875rem; color: var(--costa-tinta); }
.sprod .sp-price b { font-size: 1.0625rem; font-weight: 800; color: var(--noite); }
.sprod .sp-current { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.8125rem; font-weight: 700; color: var(--agua-tinta); }

/* Empresa · Créditos: número grande com a unidade ao lado, extrato com entrada e uso claros */
.balance .bl-value { display: flex; align-items: baseline; gap: 10px; }
.balance .bl-value .bl-unit { font-size: 1.25rem; font-weight: 700; }
.ledger-row .lg-ic { background: var(--azul-100); color: var(--azul); }
.ledger-row .lg-ic.is-plus { background: var(--agua-veu); color: var(--agua-tinta); }
.ledger-row .lg-val { font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.ledger-row .lg-val.is-plus { color: var(--agua-tinta); }

/* Empresa · Selos: o conquistado em destaque; os próximos com barra de progresso e o que fazer */
.badge-lead { font-size: 0.9375rem; line-height: 1.375rem; color: var(--porto); }
.sbadge { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); background: var(--bruma); color: var(--noite); text-decoration: none; }
a.sbadge:hover { background: var(--nevoa-clara); }
a.sbadge:focus-visible { box-shadow: var(--ring); }
.sbadge > .ic { flex: none; color: var(--costa); }
.sbadge .sb-ic { display: grid; place-items: center; flex: none; align-self: flex-start; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--costa-tinta); }
.sbadge.is-on { background: var(--azul-100); }
.sbadge.is-on .sb-ic { background: var(--azul); color: #fff; }
.sbadge .sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sbadge strong { font-size: 1rem; font-weight: 800; color: var(--azul); }
.sbadge small { font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.sbadge .sb-ok { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: flex-start; font-size: 0.8125rem; font-weight: 800; color: var(--agua-tinta); }
.sbadge .sb-ok .ic { width: 16px; height: 16px; }
.sbadge .sb-meter { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--azul-150); overflow: hidden; }
.sbadge .sb-meter span { display: block; height: 100%; min-width: 6px; border-radius: 3px; background: var(--azul); }
.sbadge .sb-count { font-size: 0.8125rem; line-height: 1.125rem; color: var(--porto); }
.sbadge .sb-count b { color: var(--azul); }

/* Empresa · Suporte: quatro atalhos em grade 2x2, cada um dizendo para que serve */
.sup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.sup-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: var(--s-3) var(--s-3) var(--s-3); border: 0; border-radius: var(--r-xl); background: var(--bruma); color: var(--noite); font: inherit; text-align: left; cursor: pointer; }
.sup-tile:hover { background: var(--nevoa-clara); }
.sup-tile:focus-visible { box-shadow: var(--ring); }
.sup-tile .st-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; background: #fff; color: var(--azul); }
.sup-tile .st-ic .ic { width: 20px; height: 20px; }
.sup-tile strong { font-size: 0.9375rem; font-weight: 800; color: var(--azul); }
.sup-tile small { font-size: 0.8125rem; line-height: 1.125rem; color: var(--costa-tinta); }
.sup-empty { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--bruma); font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.sup-empty .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--costa); }

.balance .bl-value .count-up { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
/* Perfil da empresa: o logo sobe sobre a capa, então fica à frente dela */
.emp-logo-row { position: relative; z-index: 1; }

/* ===== Cor por assunto nos círculos de ícone =====
   Cada assunto tem sempre a mesma cor clara em todo o app: vaga e ações gerais em azul, tempo em âmbar,
   confiança em água, pessoas em lilás, dinheiro em verde, denúncia em coral. A cor ajuda a reconhecer
   o assunto antes de ler; o texto ao lado continua dizendo tudo. Ouro segue só no logo. */
:root {
  --t-azul-bg: #E3ECF6; --t-azul: #1F65A6;
  --t-ambar-bg: #FCEFD8; --t-ambar: #8A5A00;
  --t-agua-bg: #DDF2F1; --t-agua: #007376;
  --t-lilas-bg: #ECE8FA; --t-lilas: #5B3FB5;
  --t-verde-bg: #E2F3E7; --t-verde: #157A3B;
  --t-coral-bg: #FCE7E4; --t-coral: #B23A2E;
}
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]) { --tint-bg: var(--t-azul-bg); --tint: var(--t-azul); background: var(--tint-bg); color: var(--tint); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]) > .ic { color: var(--tint); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]):has(> .ic[data-i="calendar"], > .ic[data-i="calendarCheck"], > .ic[data-i="clock"], > .ic[data-i="history"], > .ic[data-i="alert"], > .ic[data-i="warning"], > .ic[data-i="sun"], > .ic[data-i="sunset"], > .ic[data-i="moon"]) { --tint-bg: var(--t-ambar-bg); --tint: var(--t-ambar); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]):has(> .ic[data-i="check"], > .ic[data-i="checkCircle"], > .ic[data-i="shield"], > .ic[data-i="lock"], > .ic[data-i="key"], > .ic[data-i="fingerprint"], > .ic[data-i="award"], > .ic[data-i="star"], > .ic[data-i="sparkle"], > .ic[data-i="quiet"], > .ic[data-i="ear"], > .ic[data-i="access"], > .ic[data-i="hand"], > .ic[data-i="heart"]) { --tint-bg: var(--t-agua-bg); --tint: var(--t-agua); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]):has(> .ic[data-i="users"], > .ic[data-i="user"], > .ic[data-i="userCheck"], > .ic[data-i="userPlus"], > .ic[data-i="chat"], > .ic[data-i="whatsapp"], > .ic[data-i="headset"], > .ic[data-i="phone"], > .ic[data-i="at"], > .ic[data-i="smartphone"], > .ic[data-i="book"], > .ic[data-i="graduation"], > .ic[data-i="video"], > .ic[data-i="monitor"]) { --tint-bg: var(--t-lilas-bg); --tint: var(--t-lilas); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]):has(> .ic[data-i="money"], > .ic[data-i="coins"], > .ic[data-i="card"], > .ic[data-i="receipt"], > .ic[data-i="pix"], > .ic[data-i="bag"], > .ic[data-i="percent"], > .ic[data-i="barcode"], > .ic[data-i="chart"], > .ic[data-i="target"], > .ic[data-i="gift"]) { --tint-bg: var(--t-verde-bg); --tint: var(--t-verde); }
:is(.tile-icon, .stat:not(.is-zero) .stat-icon, .list-row .lr-icon, .set-row:not(.is-done) .sr-ic, .ntf-row:not(.is-read) .n-ic, .choice-icon, .match-job .mj-ic, .upend-card .up-ic, .faq-row .fq-ic, .sup-tile .st-ic, .protected .pt-ic, .agenda-done .ad-ic, .presence-row .pr-ic, .atyp-points .point .pt-ic):not([class*="is-"]):has(> .ic[data-i="flag"], > .ic[data-i="ban"], > .ic[data-i="trash"], > .ic[data-i="x"], > .ic[data-i="userX"], > .ic[data-i="logout"], > .ic[data-i="power"]) { --tint-bg: var(--t-coral-bg); --tint: var(--t-coral); }

/* Cor por assunto também nos cartões de pendência (fundo claro) e nos números dos resumos */
.upend-card, .stat:not(.is-zero) { --tint-bg: var(--t-azul-bg); --tint: var(--t-azul); }
.upend-card:has(.up-ic > .ic[data-i="calendar"], .up-ic > .ic[data-i="calendarCheck"], .up-ic > .ic[data-i="clock"], .up-ic > .ic[data-i="history"], .up-ic > .ic[data-i="alert"], .up-ic > .ic[data-i="warning"], .up-ic > .ic[data-i="sun"], .up-ic > .ic[data-i="sunset"], .up-ic > .ic[data-i="moon"]), .stat:not(.is-zero):has(.stat-icon > .ic[data-i="calendar"], .stat-icon > .ic[data-i="calendarCheck"], .stat-icon > .ic[data-i="clock"], .stat-icon > .ic[data-i="history"], .stat-icon > .ic[data-i="alert"], .stat-icon > .ic[data-i="warning"], .stat-icon > .ic[data-i="sun"], .stat-icon > .ic[data-i="sunset"], .stat-icon > .ic[data-i="moon"]) { --tint-bg: var(--t-ambar-bg); --tint: var(--t-ambar); }
.upend-card:has(.up-ic > .ic[data-i="check"], .up-ic > .ic[data-i="checkCircle"], .up-ic > .ic[data-i="shield"], .up-ic > .ic[data-i="lock"], .up-ic > .ic[data-i="key"], .up-ic > .ic[data-i="fingerprint"], .up-ic > .ic[data-i="award"], .up-ic > .ic[data-i="star"], .up-ic > .ic[data-i="sparkle"], .up-ic > .ic[data-i="quiet"], .up-ic > .ic[data-i="ear"], .up-ic > .ic[data-i="access"], .up-ic > .ic[data-i="hand"], .up-ic > .ic[data-i="heart"]), .stat:not(.is-zero):has(.stat-icon > .ic[data-i="check"], .stat-icon > .ic[data-i="checkCircle"], .stat-icon > .ic[data-i="shield"], .stat-icon > .ic[data-i="lock"], .stat-icon > .ic[data-i="key"], .stat-icon > .ic[data-i="fingerprint"], .stat-icon > .ic[data-i="award"], .stat-icon > .ic[data-i="star"], .stat-icon > .ic[data-i="sparkle"], .stat-icon > .ic[data-i="quiet"], .stat-icon > .ic[data-i="ear"], .stat-icon > .ic[data-i="access"], .stat-icon > .ic[data-i="hand"], .stat-icon > .ic[data-i="heart"]) { --tint-bg: var(--t-agua-bg); --tint: var(--t-agua); }
.upend-card:has(.up-ic > .ic[data-i="users"], .up-ic > .ic[data-i="user"], .up-ic > .ic[data-i="userCheck"], .up-ic > .ic[data-i="userPlus"], .up-ic > .ic[data-i="chat"], .up-ic > .ic[data-i="whatsapp"], .up-ic > .ic[data-i="headset"], .up-ic > .ic[data-i="phone"], .up-ic > .ic[data-i="at"], .up-ic > .ic[data-i="smartphone"], .up-ic > .ic[data-i="book"], .up-ic > .ic[data-i="graduation"], .up-ic > .ic[data-i="video"], .up-ic > .ic[data-i="monitor"]), .stat:not(.is-zero):has(.stat-icon > .ic[data-i="users"], .stat-icon > .ic[data-i="user"], .stat-icon > .ic[data-i="userCheck"], .stat-icon > .ic[data-i="userPlus"], .stat-icon > .ic[data-i="chat"], .stat-icon > .ic[data-i="whatsapp"], .stat-icon > .ic[data-i="headset"], .stat-icon > .ic[data-i="phone"], .stat-icon > .ic[data-i="at"], .stat-icon > .ic[data-i="smartphone"], .stat-icon > .ic[data-i="book"], .stat-icon > .ic[data-i="graduation"], .stat-icon > .ic[data-i="video"], .stat-icon > .ic[data-i="monitor"]) { --tint-bg: var(--t-lilas-bg); --tint: var(--t-lilas); }
.upend-card:has(.up-ic > .ic[data-i="money"], .up-ic > .ic[data-i="coins"], .up-ic > .ic[data-i="card"], .up-ic > .ic[data-i="receipt"], .up-ic > .ic[data-i="pix"], .up-ic > .ic[data-i="bag"], .up-ic > .ic[data-i="percent"], .up-ic > .ic[data-i="barcode"], .up-ic > .ic[data-i="chart"], .up-ic > .ic[data-i="target"], .up-ic > .ic[data-i="gift"]), .stat:not(.is-zero):has(.stat-icon > .ic[data-i="money"], .stat-icon > .ic[data-i="coins"], .stat-icon > .ic[data-i="card"], .stat-icon > .ic[data-i="receipt"], .stat-icon > .ic[data-i="pix"], .stat-icon > .ic[data-i="bag"], .stat-icon > .ic[data-i="percent"], .stat-icon > .ic[data-i="barcode"], .stat-icon > .ic[data-i="chart"], .stat-icon > .ic[data-i="target"], .stat-icon > .ic[data-i="gift"]) { --tint-bg: var(--t-verde-bg); --tint: var(--t-verde); }
.upend-card:has(.up-ic > .ic[data-i="flag"], .up-ic > .ic[data-i="ban"], .up-ic > .ic[data-i="trash"], .up-ic > .ic[data-i="x"], .up-ic > .ic[data-i="userX"], .up-ic > .ic[data-i="logout"], .up-ic > .ic[data-i="power"]), .stat:not(.is-zero):has(.stat-icon > .ic[data-i="flag"], .stat-icon > .ic[data-i="ban"], .stat-icon > .ic[data-i="trash"], .stat-icon > .ic[data-i="x"], .stat-icon > .ic[data-i="userX"], .stat-icon > .ic[data-i="logout"], .stat-icon > .ic[data-i="power"]) { --tint-bg: var(--t-coral-bg); --tint: var(--t-coral); }
.upend-card { background: var(--tint-bg); }
.upend-card:hover { background: var(--tint-bg); filter: brightness(0.97); }
.upend-card .up-ic:not([class*="is-"]) { background: #fff; }
.upend-card .up-go { color: var(--tint); }
.stat:not(.is-zero) .stat-value { color: var(--tint); }
/* Selo de data nos cartões: âmbar, a cor de tempo; no destaque da entrevista agendada continua azul */
.date-badge { background: var(--t-ambar-bg); color: var(--t-ambar); }
.date-badge .db-week, .date-badge .db-month { color: var(--t-ambar); }
.iv-hero .date-badge { background: var(--azul); color: #fff; }
.iv-hero .date-badge .db-week, .iv-hero .date-badge .db-month { color: var(--azul-200); }

/* Cartões de resumo: alinhados à esquerda. Ícone e número na mesma linha, rótulo embaixo começando no mesmo
   ponto; assim os cartões ficam iguais mesmo quando um rótulo quebra em duas linhas e outro não */
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; column-gap: 8px; row-gap: 8px; padding: 12px; text-align: left; justify-items: start; }
.upanel .stat { padding: 12px; }
.stat .stat-icon { grid-column: 1; grid-row: 1; width: 36px; height: 36px; margin: 0; }
.stat .stat-icon .ic { width: 20px; height: 20px; }
.stat .stat-value { grid-column: 2; grid-row: 1; line-height: 1; }
.stat .stat-label { grid-column: 1 / -1; grid-row: 2; align-self: start; font-size: 0.875rem; line-height: 1.125rem; text-align: left; }
/* Dia selecionado: "Hoje" e o dia da semana ficam claros sobre o azul (antes, o tom de "hoje" deixava o texto escuro) */
.date-cell[aria-pressed="true"] .dc-week, .date-cell.is-today[aria-pressed="true"] .dc-week { color: var(--azul-200); }
.date-cell.is-today:not([aria-pressed="true"]) .dc-week { color: var(--azul-500); font-weight: 800; }

/* Página da vaga: o logo fica metade sobre a foto e metade abaixo; a foto não pode cortar o que passa da borda.
   A imagem já ocupa exatamente a caixa, então tirar o corte não vaza nada; o título desce um pouco para o logo caber. */
.hero-photo:has(.hp-brand) { overflow: visible; }
.hero-photo .hp-brand { z-index: 2; bottom: -28px; }
.hero-photo:has(.hp-brand) + .pj-head { margin-top: 12px; }

/* Prévia do convite na publicação: o cartão real do candidato, travado (só para ver), e notas do que muda */
.pj-preview { gap: var(--s-3); padding: var(--s-3); }
.pj-ureq .ureq { margin: 0; }
.pj-notes { display: flex; flex-direction: column; gap: 6px; }
.pj-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; line-height: 1.25rem; color: var(--costa-tinta); }
.pj-notes .ic { flex: none; margin-top: 2px; color: var(--costa); }


/* ===== Movimento com propósito =====
   Curto (100–260 ms), uma vez só, e sempre ligado a algo que aconteceu: um toque, algo que apareceu,
   um avanço ou uma conquista. Nada em repetição além do ponto "online". "Reduzir movimentos" desliga tudo. */

/* 1. Resposta ao toque: tudo o que é tocável afunda de leve, igual no app inteiro */
.btn, .tile, .stat, .set-row, .list-row, .chip, .slot, .date-cell, .choice, .ucand, .sprod, a.sbadge, .sup-tile, .usearch, .us-chip,
.upend-card, .faq-row, .seltime-opt, .selsheet-opt, .quick-item, .pj-card, .jobrow, .ntf-row, .navcard-row, .uwho, .icon-btn, .photo-btn, .mapcard, .tab-item {
  transition: transform 120ms var(--ease-out), background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 150ms var(--ease-out);
}
.btn:active, .tile:active, .stat:active, .set-row:active, .list-row:active, .chip:active, .slot:active, .date-cell:active, .choice:active, .ucand:active, .sprod:active, a.sbadge:active, .sup-tile:active, .usearch:active, .us-chip:active,
.upend-card:active, .faq-row:active, .seltime-opt:active, .selsheet-opt:active, .quick-item:active, .pj-card:active, .jobrow:active, .ntf-row:active, .navcard-row:active, .uwho:active, .icon-btn:active, .photo-btn:active, .mapcard:active, .btn-primary:active { transform: scale(0.97); }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }

/* 2. Só o que mudou se mexe: o item tocado dá um pulso curto depois do redesenho; o brilho em todos os
   selecionados (que piscava a tela inteira a cada toque) fica desligado */
.choice:has(input:checked), .chip[aria-pressed="true"], .chip[aria-selected="true"], .slot[aria-pressed="true"], .date-cell[aria-pressed="true"], .photo-btn[aria-pressed="true"] { animation: none; }
@keyframes just-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.screen .is-just.is-just { animation: just-pulse 240ms var(--ease-out) 1; }

/* 3. O que acabou de aparecer entra suave: erro, campo revelado, grupo aberto, lista nova */
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.screen .is-appear { animation: appear 220ms var(--ease-out) both; }

/* 4. Barras que avançam: do valor anterior ao novo, em vez de pular */
@keyframes prog-grow { from { width: var(--from, 0%); } }
.screen .progress-fill.is-growing, .screen.is-entering .progress-fill.is-growing { transform: none; animation: prog-grow 480ms var(--ease-out-expo) both; }

/* 5. Cascata de entrada mais curta: no máximo 6 blocos, 30 ms entre eles, para a tela assentar em menos de meio segundo */
.screen.is-entering .is-staggered > * { animation-duration: 320ms; animation-delay: calc(var(--i, 6) * 30ms + 30ms); }

/* 6. Conquistas, uma vez só: o sinal de confirmado se desenha (vaga publicada, entrevista agendada, presença confirmada,
   verificação ativada); o selo de contratação aparece com um leve salto */
@keyframes ic-draw { to { stroke-dashoffset: 0; } }
.toast .ic[data-i="checkCircle"] circle, .toast .ic[data-i="checkCircle"] path,
.screen.is-entering .ok-hero .ok-ic .ic[data-i="check"] path,
.screen.is-entering .hero-state .empty-art .ic[data-i="checkCircle"] circle, .screen.is-entering .hero-state .empty-art .ic[data-i="checkCircle"] path { stroke-dasharray: 72; stroke-dashoffset: 72; animation: ic-draw 460ms var(--ease-out) 80ms forwards; }
.toast .ic[data-i="checkCircle"] path, .screen.is-entering .hero-state .empty-art .ic[data-i="checkCircle"] path { animation-delay: 320ms; animation-duration: 300ms; }
.screen.is-entering .ok-hero .ok-ic .ic[data-i="check"] path { animation-duration: 600ms; animation-delay: 160ms; }
.toast .ic[data-i="award"], .screen.is-entering .ok-hero .ok-ic .ic[data-i="award"] { animation: pop-in 420ms var(--ease-out-expo) both; }

/* 7. Momento do pedido em tela inteira (o "Deu match" da versão uberizada): o salário chega com um leve pulo */
@keyframes pay-pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
.screen.is-entering .ureqs-pay .pay { transform-origin: left center; animation: pay-pop 480ms var(--ease-out-expo) 120ms both; }

/* 8. Estado ao vivo: o ponto "online" pulsa devagar enquanto a pessoa recebe convites; parado quando pausa */
@keyframes udot-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(0, 166, 169, 0.22); } 50% { box-shadow: 0 0 0 9px rgba(0, 166, 169, 0.08); } }
.ubar:not(.is-off):not(.is-partial) .udot { animation: udot-pulse 2.6s ease-in-out infinite; }


/* ===== Textos que dizem o que é e o que fazer, sem ficar gigantes =====
   Rótulo curto em substantivo (uma linha) e, embaixo, o estado ou a ação em poucas palavras. */
.stat { grid-template-rows: auto auto auto; align-content: start; }
.stats .stat .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 0.875rem; line-height: 1.125rem; }
.stats .stat .stat-hint { grid-column: 1 / -1; grid-row: 3; align-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 700; color: var(--tint, var(--azul)); }
.stat.is-zero .stat-hint { color: var(--costa); font-weight: 600; }
.stat:not(button) { cursor: default; }
@media (max-width: 359px) { .stat { padding: 10px 8px; column-gap: 6px; } }

/* Avisos com texto ao lado do ícone */
.icon-btn.is-labeled { width: auto; min-width: 44px; padding: 0 14px 0 12px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font: inherit; font-size: 0.875rem; font-weight: 700; }
.icon-btn.is-labeled .ib-text { white-space: nowrap; }

/* "Você está online" explicado em uma linha */
.ubar .ubar-text small { font-size: 0.8125rem; line-height: 1.1rem; font-weight: 500; color: var(--costa-tinta); }

/* Trilha de etapas: com contagem por etapa e a etapa que pede ação em âmbar */
.mini-steps .ms .ms-count { font-size: 0.75rem; font-weight: 800; line-height: 1; color: var(--azul); font-variant-numeric: tabular-nums; }
.mini-steps .ms.is-act .ms-dot { border-color: var(--t-ambar); box-shadow: 0 0 0 4px var(--t-ambar-bg); }
.mini-steps .ms.is-act { color: var(--t-ambar); font-weight: 800; }
.mini-steps .ms.is-act .ms-count { color: var(--t-ambar); }
.jtrail { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-2) var(--s-3); border-radius: var(--r-xl); background: var(--bruma); }
.jtrail .mini-steps .ms { font-size: 0.75rem; }
.jt-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 var(--s-2); padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 0.9375rem; line-height: 1.3rem; font-weight: 600; color: var(--porto); }
.jt-now .ic { flex: none; width: 20px; height: 20px; }
.jt-now > span { flex: 1; min-width: 0; }
.jt-now.is-acao { background: var(--t-ambar-bg); color: #6B4500; }
.jt-now.is-acao .ic { color: var(--t-ambar); }
.jt-now.is-espera .ic { color: var(--azul-500); }
.jt-now.is-ok .ic { color: var(--agua-tinta); }
.jt-now .link-btn { flex: none; margin-left: auto; font-weight: 800; }

/* Detalhe do convite: etapa e prazo no topo, fatos em grade, requisitos e adaptações em etiquetas */
.ustate { display: flex; flex-direction: column; gap: var(--s-3); }
.ustatus { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--azul-100); color: var(--azul); }
.ustatus.is-urgent { background: var(--t-ambar-bg); color: #6B4500; }
.ustatus > .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.ustatus > span { display: flex; flex-direction: column; }
.ustatus strong { font-size: 1rem; line-height: 1.375rem; font-weight: 800; }
.ustatus small { font-size: 0.875rem; line-height: 1.25rem; color: var(--porto); }
.ufacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uf-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--bruma); }
.uf-tile.is-wide { grid-column: 1 / -1; }
.uf-k { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--costa-tinta); }
.uf-k .ic { width: 16px; height: 16px; color: var(--azul-500); }
.uf-v { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.uf-v.is-big { font-size: 1.75rem; line-height: 2rem; letter-spacing: -0.02em; }
.uf-tile small { font-size: 0.875rem; line-height: 1.125rem; color: var(--costa-tinta); }
.uf-tile.is-compat { background: var(--t-agua-bg); }
.uf-tile.is-compat .uf-v, .uf-tile.is-compat .uf-k .ic { color: var(--t-agua); }
.uf-sub { font-size: 0.8125rem; font-weight: 700; color: var(--costa-tinta); }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reqchips { display: flex; flex-wrap: wrap; gap: 8px; }
.reqchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 18px; background: var(--bruma); font-size: 0.875rem; line-height: 1.2rem; font-weight: 600; color: var(--noite); }
.reqchip .ic { flex: none; width: 16px; height: 16px; color: var(--azul-500); }
.reqchips.is-agua .reqchip { background: var(--t-agua-bg); color: var(--t-agua); }
.reqchips.is-agua .reqchip .ic { color: var(--t-agua); }
@media (max-width: 359px) { .stats .stat .stat-hint { font-size: 0.75rem; } .stats .stat .stat-label { font-size: 0.8125rem; } }
.ubar .ubar-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "O que não usamos": cada item pode ocupar duas linhas; o ícone fica alinhado à primeira */
.notused li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.375rem; color: var(--costa-tinta); white-space: normal; }
.notused li .ic { flex: none; margin-top: 3px; color: var(--t-coral); }

/* Título da barra de topo: se for longo, quebra em até duas linhas em vez de ser cortado com reticências */
.topbar h1 { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* Seletor de unidade e saudação no topo: texto à esquerda, ao lado do logo ou da foto, não centralizado */
.uwho { text-align: left; }
.uwho > span { text-align: left; }
.uwho > span small, .uwho > span strong { text-align: left; }
/* Ponto de aviso: fica no canto do ícone do sino, não em cima do texto "Avisos" */
.icon-btn.is-labeled .dot { top: 9px; right: auto; left: 27px; }

/* Topo do início: o nome da unidade nunca quebra em duas linhas. O sino com texto fica mais enxuto,
   e em tela muito estreita só o ícone aparece, para sobrar espaço ao seletor */
.uhome-top .icon-btn.is-labeled { padding: 0 11px 0 9px; gap: 4px; flex: none; }
.uhome-top .icon-btn.is-labeled .dot { left: 25px; }
.uwho { min-width: 0; flex: 0 1 auto; }
.uwho > span { min-width: 0; }
.uwho > span small, .uwho > span strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .uwho { gap: 8px; padding-right: 10px; } .uwho > span strong { font-size: 0.875rem; } .uwho > span small { font-size: 0.8125rem; } }
@media (max-width: 349px) { .uhome-top .icon-btn.is-labeled .ib-text { display: none; } .uhome-top .icon-btn.is-labeled { padding: 0; width: 44px; } .uhome-top .icon-btn.is-labeled .dot { left: auto; right: 10px; } }


/* ===== Entrada: faixa azul com a folha branca por cima (adaptada de uma referência de login) =====
   O que serve: o título e o passo na faixa, a folha com abas, o código em caixas. O que não serve e ficou de fora:
   senha, "lembrar de mim" e fundo escuro. Aqui o código chega por WhatsApp, SMS ou e-mail. */
.uauth-hero { margin: calc(var(--s-2) * -1) calc(var(--gutter) * -1) 0; padding: 12px 16px 44px; gap: 18px; }
.uauth-top { display: flex; align-items: center; justify-content: space-between; }
.uauth-steps { display: flex; gap: 6px; }
.uauth-steps i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.uauth-steps i.is-on { background: #fff; }
.uauth-hero .uhero-title { max-width: 18ch; }
.uauth-sub { font-size: 0.9375rem; line-height: 1.375rem; color: var(--azul-200); max-width: 34ch; }
.uauth-sub strong { color: #fff; }
.uauth-sheet { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--s-4); margin: -28px calc(var(--gutter) * -1) 0; padding: 22px var(--gutter) 20px; background: #fff; border-radius: 24px 24px 0 0; }
.uauth-h { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800; color: var(--azul); }
.uauth-tabs { align-self: stretch; }
.uauth-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--t-lilas-bg); color: var(--t-lilas); font-size: 0.875rem; font-weight: 700; }
.uauth-chip .ic { width: 18px; height: 18px; }
/* Código: a caixa em foco se destaca e as preenchidas ficam brancas com borda azul clara */
.otp input:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px var(--azul-150); }
.otp input.is-filled { background: #fff; border-color: var(--azul-200); color: var(--azul); font-weight: 800; }
.otp.has-error input { border-color: var(--erro-tinta); background: var(--erro-veu); }


/* ===== Boas-vindas: tela inteira em azul, com um celular que mostra o cartão real do pedido =====
   Adaptada de uma referência: marca no topo, celular com o produto, título forte e uma chamada principal. */
.uwel2 { display: flex; flex-direction: column; gap: 0; min-height: calc(100% + var(--s-2)); margin: calc(var(--s-2) * -1) calc(var(--gutter) * -1) 0; padding: 20px 16px 8px; border-radius: 0; }
.uwel2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uwel2 .welcome-a11y { position: static; flex: none; }
.uwel2-stage { position: relative; flex: 1 1 0; min-height: 140px; max-height: 440px; display: flex; flex-direction: column; margin-top: 14px; }
.uwel2-phone { position: relative; flex: 1 1 auto; min-height: 0; width: 236px; margin: 0 auto; border: 6px solid #12304F; border-bottom: 0; border-radius: 34px 34px 0 0; background: var(--bruma); overflow: hidden; /* o celular some no fundo por máscara, para não deixar uma borda dura sobre as formas */ -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.uwel2-screen { padding: 8px 10px; }
.uwel2-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font-size: 0.6875rem; font-weight: 700; color: var(--noite); }
.uwel2-bar i { width: 28px; height: 8px; border-radius: 4px; background: var(--noite); opacity: 0.8; }
.uwel2-who { display: flex; align-items: center; gap: 8px; margin: 8px 0 8px; font-size: 0.75rem; color: var(--azul); }
.uwel2-who .avatar { --av: 28px; }
.uwel2-who small { display: block; font-size: 0.6875rem; line-height: 1; font-weight: 600; color: var(--costa-tinta); }
.uwel2-who strong { display: block; font-size: 0.8125rem; line-height: 1.1; }
.uwel2-online { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--agua-veu); color: var(--agua-tinta); font-size: 0.6875rem; font-weight: 800; }
.uwel2-online i { width: 6px; height: 6px; border-radius: 50%; background: var(--agua); }
.uwel2-scale { width: 340px; transform: scale(0.62); transform-origin: top left; margin: 0 0 -130px 0; pointer-events: none; }
.uwel2 .uwel-card.b { right: 0; top: auto; bottom: 18px; left: auto; z-index: 3; padding: 6px 14px 6px 6px; font-weight: 700; }
.uwel2-text { flex: none; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 0 4px; }
.uwel2-text h1 { font-size: 2rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; max-width: 14ch; }
.uwel2-text p { font-size: 1rem; line-height: 1.5rem; color: var(--azul-200); max-width: 34ch; }
/* Botões sobre o azul: a chamada principal é branca; a secundária é translúcida; os links são claros */
.screen[data-screen="/welcome"] .screen-footer { background: transparent; }
.screen[data-screen="/welcome"] .btn-primary { background: #fff; color: var(--azul); }
.screen[data-screen="/welcome"] .btn-primary:hover { background: var(--azul-100); }
.screen[data-screen="/welcome"] .btn-outline { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.screen[data-screen="/welcome"] .btn-outline:hover { background: rgba(255, 255, 255, 0.2); }
.screen[data-screen="/welcome"] .link-btn { color: #fff; }
@media (max-height: 760px) { .uwel2-text h1 { font-size: 1.75rem; line-height: 2rem; } .uwel2-text p { font-size: 0.9375rem; line-height: 1.375rem; } }
@media (max-height: 780px) { .uwel2-stage { margin-top: 10px; } }
@media (max-height: 700px) { .uwel2-stage { min-height: 120px; } .uwel2-text p { display: none; } .uwel2 .uwel-card.b { bottom: 6px; } }

/* ===== Telas de estado no celular: o conteúdo fica no meio da área livre, não colado no topo =====
   Estados, avisos e portões (sem conexão, código inválido, "falta sua autorização") têm pouco conteúdo.
   Colados no topo, deixavam mais da metade da tela em branco. Margens automáticas centram sem criar rolagem
   quando o conteúdo é maior que a tela. Só vale quando o estado é o único bloco da tela. */
.screen-body:has(> .hero-state:only-child, > .empty:only-child) { display: flex; flex-direction: column; padding-bottom: calc(var(--s-8) + 6vh); }
.screen-body > .hero-state:only-child, .screen-body > .empty:only-child { margin-block: auto; }