/* Folha única do console. Antes cada tela tinha sua cópia num <style>
   inline, e foi assim que o token --soft divergiu entre elas. */
/* Valores lidos de Appsell-storage-40/app/styles.css. A referência NÃO carrega
     webfont: cai em system-ui, e os pesos 650/750 só resolvem porque a fonte do
     sistema é variável. Carregar Inter aqui poria duas fontes diferentes lado a
     lado na mesma máquina — por isso não há <link> de fonte nesta tela. */
  :root {
    color-scheme: light;
    --canvas:#f4f6fb; --surface:#ffffff; --ink:#0f172a; --text:#475569;
    --soft:#64748b; --blue-ink:#00367d; --blue:#1e3a8a; --bright:#2563b8;
    --bright-atmosphere:#3b82f6; --sky:#54b3f1; --orange:#e64f18;
    --success:#087a4b; --warning:#9a6700;
    --border:rgba(100,116,139,.22);
    --sidebar:#0b1e3f; --sidebar-deep:#07162e;
    --shadow-sm:0 10px 28px rgba(15,23,42,.07);
    --shadow-md:0 28px 70px rgba(15,23,42,.13);
    --radius-sm:12px; --radius-md:20px; --radius-lg:30px;
  }
  * { box-sizing:border-box; }
  html { overflow-x:clip; scroll-behavior:smooth; }
  body { width:100%; min-width:0; max-width:100%; min-height:100dvh; margin:0;
    overflow-x:clip;
    background:
      radial-gradient(circle at 7% 8%, rgba(84,179,241,.2), transparent 28%),
      radial-gradient(circle at 88% 3%, rgba(59,130,246,.16), transparent 31%),
      radial-gradient(circle at 72% 74%, rgba(191,219,254,.28), transparent 36%),
      linear-gradient(145deg, #f8faff 0%, #f4f6fb 52%, #edf5ff 100%);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased; }
  button, input, select, textarea { font:inherit; }
  a { color:inherit; text-decoration:none; }
  a, button { touch-action:manipulation; -webkit-tap-highlight-color:rgba(59,130,246,.16); }
  h1, h2, h3, p { margin-top:0; }
  /* Medido em sell.autonomia.site: os títulos são Space Grotesk, o resto é
     Inter. Usar Inter em tudo foi o que deixou a tela com "cara" diferente
     mesmo com todos os tamanhos e pesos batendo. */
  h1, h2, h3 { font-family:"Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif; }
  h1, h2, h3 { letter-spacing:-.035em; line-height:1.08; text-wrap:balance; }
  a:focus-visible, button:focus-visible { outline:3px solid rgba(59,130,246,.55);
    outline-offset:3px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  .skip-link { position:fixed; top:8px; left:8px; z-index:100; min-height:44px;
    display:flex; align-items:center; padding:0 16px; border-radius:12px;
    background:#fff; box-shadow:var(--shadow-sm); transform:translateY(-150%); }
  .skip-link:focus { transform:translateY(0); }

  .app-shell { min-height:100dvh; }
  .app-sidebar { display:none; }
  .app-content { min-width:0; padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .app-main { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:34px 0 52px; }

  .mobile-topbar { min-height:calc(68px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 16px 0; display:flex; align-items:center;
    justify-content:space-between; gap:12px; border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.88); backdrop-filter:blur(18px); }
  .mobile-brand { display:inline-flex; min-height:48px; align-items:center; gap:10px; }
  .mobile-logout { min-width:48px; min-height:44px; padding:0 14px;
    border:1px solid var(--border); border-radius:12px; background:#fff;
    color:var(--blue); font-weight:750; cursor:pointer; }

  .bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:20;
    min-height:calc(70px + env(safe-area-inset-bottom));
    padding:6px 8px env(safe-area-inset-bottom); display:grid;
    grid-template-columns:repeat(2,1fr); border-top:1px solid var(--border);
    background:rgba(255,255,255,.94); backdrop-filter:blur(18px); }
  .bottom-link { min-width:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; min-height:56px; padding:5px 4px;
    border-radius:12px; color:var(--soft); font-size:.62rem; font-weight:700;
    text-align:center; }
  .bottom-link[aria-current="page"] { color:var(--blue); background:rgba(59,130,246,.1); }
  .bottom-nav svg { width:21px; height:21px; }

  .brand-mark { width:44px; height:44px; flex:0 0 auto; display:block; }
  .brand strong, .brand small { display:block; }
  .brand strong { font-size:15px; font-weight:600; letter-spacing:-.15px; color:#fff; }
  .brand strong span, .mobile-brand strong span { color:var(--orange); }
  .brand small { margin-top:1px; color:rgba(255,255,255,.55); font-size:11px;
    font-weight:500; letter-spacing:.66px; text-transform:uppercase; }

  @media (min-width:1025px) {
    .app-shell { display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px;
      padding:20px; }
    .mobile-topbar, .bottom-nav { display:none; }
    .app-content { padding-bottom:0; }
    .app-sidebar { position:sticky; top:20px; height:calc(100dvh - 40px);
      padding:22px 14px; display:flex; flex-direction:column; overflow-y:auto;
      border-radius:28px; color:#fff;
      background:
        radial-gradient(circle at 35% 8%, rgba(37,99,184,.34), transparent 27%),
        linear-gradient(180deg, var(--sidebar), var(--sidebar-deep));
      box-shadow:0 26px 60px rgba(7,30,68,.24),
                 inset 0 1px 0 rgba(255,255,255,.08); }
    .brand { min-height:66px; padding:6px 7px 18px; display:flex; align-items:center;
      gap:11px; border-bottom:1px solid rgba(255,255,255,.09); }
    .nav-eyebrow { margin:28px 10px 9px; color:rgba(255,255,255,.36); font-size:.63rem;
      font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .nav-link { min-height:50px; margin-bottom:4px; padding:0 12px; display:flex;
      align-items:center; gap:12px; border:1px solid transparent; border-radius:14px;
      color:rgba(255,255,255,.7); font-size:.86rem; font-weight:650; }
    .nav-link svg { width:19px; height:19px; flex:0 0 auto; }
    .nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
    .nav-link.active { border-color:rgba(255,255,255,.13); color:#fff;
      background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(59,130,246,.18)); }
    .sidebar-footer { margin-top:auto; padding:15px 8px 5px; display:flex;
      align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.09);
      min-width:0; }
    .sidebar-footer strong, .sidebar-footer small { display:block; overflow:hidden;
      text-overflow:ellipsis; white-space:nowrap; }
    .sidebar-footer strong { font-size:.72rem; }
    .sidebar-footer small { margin-top:3px; color:rgba(255,255,255,.4); font-size:.59rem; }
    .avatar { display:grid; width:36px; height:36px; place-items:center; flex:0 0 auto;
      border-radius:12px; background:rgba(255,255,255,.1); font-size:.72rem;
      font-weight:800; }
    .logout-button { width:100%; min-height:44px; margin-top:8px; padding:0 12px;
      border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.62);
      font-weight:650; cursor:pointer; text-align:left; }
    .logout-button:hover { background:rgba(255,255,255,.07); }
    .app-main { width:min(1120px, calc(100% - 64px)); padding:56px 0 72px; }
  }


  .page-header { display:flex; flex-direction:column; align-items:flex-start;
    gap:18px; margin-bottom:14px; padding:24px 28px;
    border-radius:24px; background:rgba(255,255,255,.74);
    box-shadow:0 18px 48px rgba(29,61,105,.1), inset 0 1px 0 rgba(255,255,255,.82); }
  .page-header h1 { margin:0 0 6px; font-size:clamp(1.9rem, 3.4vw, 44px);
    font-weight:700; letter-spacing:-.045em; }
  .page-header .sub { margin:0; color:var(--text); font-size:1rem; }
  .eyebrow { margin-bottom:8px; color:var(--blue); font-size:.72rem; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase; }

  @media (min-width:680px) {
    .page-header { flex-direction:row; align-items:center; justify-content:space-between;
      gap:24px; flex-wrap:nowrap; }
    .page-header > div { min-width:0; }
    .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }

  .metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
    margin-bottom:36px; }
  .metric-grid article { min-width:0; padding:28px 26px;
    border:1px solid rgba(77,96,126,.14); border-radius:24px; background:#fff;
    box-shadow:0 12px 34px rgba(29,61,105,.08); }
  .metric-grid span { color:var(--soft); font-size:.8rem; font-weight:600; }
  .metric-grid strong { display:block; margin:12px 0 8px; font-size:41.6px;
    font-weight:700; color:#061c45; font-variant-numeric:tabular-nums; }
  .metric-grid strong.warn { color:var(--warning); }
  .metric-grid strong.bad { color:var(--orange); }
  .metric-grid small { display:block; color:var(--soft); font-size:.68rem;
    line-height:1.4; }
  @media (min-width:960px) {
    .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  }
  .list .row, .empty { border-radius:24px; border-color:rgba(77,96,126,.14);
    background:#fff; box-shadow:0 12px 34px rgba(29,61,105,.08); }

  .section-head { display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; margin-bottom:14px; }
  .section-head h2 { margin:0; font-size:clamp(1.5rem,3vw,2rem); font-weight:700; }
  .section-head a { display:inline-flex; align-items:center; min-height:44px;
    color:var(--blue); font-weight:700; font-size:.9rem; white-space:nowrap; }
  .section-head a:hover { text-decoration:underline; }

  .list { display:flex; flex-direction:column; gap:12px; margin-bottom:42px; }
  .row { padding:20px 22px; border:1px solid var(--border);
    border-radius:var(--radius-md); background:rgba(255,255,255,.82);
    box-shadow:var(--shadow-sm); display:flex; align-items:center;
    justify-content:space-between; gap:18px; }
  .row .what { font-size:1.02rem; font-weight:700; letter-spacing:-.02em; }
  .row .why { margin-top:4px; font-size:.86rem; color:var(--soft); }
  .empty { padding:28px 22px; border:1px solid var(--border);
    border-radius:var(--radius-md); background:rgba(255,255,255,.82);
    box-shadow:var(--shadow-sm); text-align:center; color:var(--soft); }

  .status { display:inline-flex; align-items:center; flex:0 0 auto; padding:5px 8px;
    border-radius:99px; font-size:.61rem; font-weight:800; }
  .status-ok { background:#e6f7ef; color:var(--success); }
  .status-warn { background:#fff4d6; color:#744900; }
  .status-bad { background:#fdecea; color:#9f241b; }
  .status-none { background:#eef2f6; color:var(--soft); }

  .primary-button { display:inline-flex; min-width:0; max-width:100%; min-height:48px;
    align-items:center; justify-content:center; gap:12px; padding:0 20px; border:0;
    border-radius:15px; flex:0 0 auto; white-space:nowrap; text-align:center;
    background:linear-gradient(135deg,var(--blue),var(--bright));
    box-shadow:0 12px 24px rgba(30,58,138,.22); color:#fff; font-weight:750;
    cursor:pointer; transition:transform 180ms ease, box-shadow 180ms ease; }
  .primary-button:hover { transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(30,58,138,.27); }
  .secondary-button { display:inline-flex; min-width:0; max-width:100%; min-height:48px;
    align-items:center; justify-content:center; white-space:nowrap; padding:0 20px;
    border:1px solid var(--border);
    border-radius:15px; background:#fff; color:var(--blue); font-weight:750;
    cursor:pointer; }
  .secondary-button:hover { border-color:rgba(30,58,138,.4); background:#f8fbff; }

  .skel { display:inline-block; width:2.4ch; height:.72em; border-radius:10px;
    background:#e7edf5; animation:skeleton-pulse 900ms ease-in-out infinite alternate; }
  @keyframes skeleton-pulse { to { opacity:.48; } }
  .alerta { display:flex; gap:14px; align-items:flex-start; padding:18px 20px;
    border-radius:var(--radius-md); background:#fff8df;
    border:1px solid rgba(198,138,18,.22); color:#6b4d00; }
  .alerta .bang { display:grid; width:30px; height:30px; place-items:center;
    flex:0 0 auto; border-radius:10px; background:rgba(198,138,18,.16); font-weight:800; }
  .alerta b { display:block; margin-bottom:3px; }
  .alerta p { margin:0; font-size:.88rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.001ms !important;
      animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

/* ---- fila de processos ---------------------------------------------- */
.filtros { display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:18px; }
.busca { flex:1 1 220px; min-width:0; min-height:48px; padding:0 16px;
  border:1px solid var(--border); border-radius:15px; background:#fff;
  color:var(--ink); }
.busca::placeholder { color:var(--soft); }
.recortes { display:inline-flex; gap:4px; padding:4px; border-radius:15px;
  background:rgba(100,116,139,.09); }
.recorte { min-height:40px; padding:0 14px; border:0; border-radius:11px;
  background:transparent; color:var(--soft); font-weight:650; font-size:.86rem;
  cursor:pointer; }
.recorte[aria-pressed="true"] { background:#fff; color:var(--blue);
  box-shadow:0 2px 8px rgba(15,23,42,.08); }

.processo { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 22px; border:1px solid rgba(77,96,126,.14);
  border-radius:24px; background:#fff; box-shadow:0 12px 34px rgba(29,61,105,.08); }
.processo .num { font-size:1rem; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.processo .quem { margin-top:3px; font-size:.84rem; color:var(--soft); }
.processo .lado { display:flex; align-items:center; gap:12px; flex:0 0 auto; }

.paginacao { display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:20px; }
.paginacao .conta { font-size:.86rem; color:var(--soft); }
.paginacao .botoes { display:flex; gap:8px; }
.pagina-btn { min-height:44px; min-width:44px; padding:0 16px;
  border:1px solid var(--border); border-radius:12px; background:#fff;
  color:var(--blue); font-weight:650; cursor:pointer; }
.pagina-btn[disabled] { opacity:.45; cursor:not-allowed; color:var(--soft); }

/* o link para a SUSEP não pode competir com o selo de situação */
.processo .lado .pagina-btn { min-height:40px; padding:0 14px; font-size:.84rem;
  text-decoration:none; display:inline-flex; align-items:center; }

/* ---- entrada -------------------------------------------------------- */
/* A tela de entrar herda o mesmo fundo, a mesma marca e o mesmo
   .primary-button das telas de dentro. O que não pode acontecer é o login
   parecer de outro produto — foi o que aconteceu com o verde antigo. */
.login-shell { min-height:100dvh; display:grid; place-items:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
.login-card { width:min(30rem,100%); padding:32px 30px 28px;
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.86); backdrop-filter:blur(20px);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9); }

.login-plate { display:inline-flex; align-items:center; gap:11px;
  margin-bottom:26px; padding:11px 18px 11px 13px; border-radius:18px;
  background:
    radial-gradient(circle at 30% 10%, rgba(37,99,184,.4), transparent 60%),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-deep));
  box-shadow:0 14px 30px rgba(7,30,68,.26), inset 0 1px 0 rgba(255,255,255,.09); }
.login-plate strong, .login-plate small { display:block; }
.login-plate strong { font-size:15px; font-weight:600; letter-spacing:-.15px; color:#fff; }
.login-plate strong span { color:var(--orange); }
.login-plate small { margin-top:1px; color:rgba(255,255,255,.55); font-size:11px;
  font-weight:500; letter-spacing:.66px; text-transform:uppercase; }

.login-card h1 { margin:0 0 8px; font-size:clamp(1.7rem,5vw,2.1rem); font-weight:700; }
.login-sub { margin:0 0 26px; color:var(--text); font-size:.95rem; line-height:1.55; }

.login-label { display:block; margin-bottom:8px; color:var(--ink);
  font-size:.82rem; font-weight:700; }
.login-campo { width:100%; min-height:52px; padding:0 16px; border-radius:15px;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  letter-spacing:.12em; }
.login-campo:focus-visible { outline:3px solid rgba(59,130,246,.55); outline-offset:3px;
  border-color:transparent; }
.login-entrar { width:100%; margin-top:16px; }
.login-entrar[disabled] { opacity:.6; cursor:progress; transform:none; }

.login-erro { display:flex; gap:10px; margin:16px 0 0; padding:12px 14px;
  border:1px solid rgba(230,79,24,.24); border-radius:14px; background:#fdecea;
  color:#9f241b; font-size:.88rem; }
.login-nota { margin:22px 0 0; padding-top:18px; color:var(--soft);
  font-size:.78rem; line-height:1.5; border-top:1px solid var(--border); }
/* `display:flex` vence o atributo [hidden] — sem esta linha a caixa de erro
   fica ocupando espaço vazia na primeira renderização. */
.login-erro[hidden] { display:none; }
.login-erro { margin:12px 0 0; }