/* ============ tokens ============ */
    :root {
      --graphite: #23221F;
      /* menu lateral: azul-marinho da marca com texto claro */
      --side-bg: #0f1c2f;
      /* cor única dos botões preenchidos do portal */
      --btn-bg: #0f1c2f;
      --btn-bg-hover: #1d3350;
      --side-ink: #E3ECEF;
      --graphite-2: #34322E;
      --graphite-3: #4A4842;
      --concrete: #EDEDEA;
      --card: #FFFFFF;
      --line: #DFDEDA;
      --ink: #1B1A18;
      --muted: #6E6C67;
      --jade: #24594B;
      --jade-soft: #E7EFEC;
      --amber: #A9762A;
      --amber-soft: #F6EFE2;
      --brick: #9E3B3B;
      --brick-soft: #F5E8E8;
      --radius: 14px;
      --radius-sm: 9px;
      --shadow: 0 1px 2px rgba(35, 34, 31, .05), 0 8px 24px -14px rgba(35, 34, 31, .22);
      --display: 'Archivo', system-ui, sans-serif;
      --body: 'Inter', system-ui, sans-serif;
      --mono: 'Roboto Mono', ui-monospace, monospace;
      --brand: 'Poppins', system-ui, sans-serif;
    }

    * {
      box-sizing: border-box
    }

    html, body {
      margin: 0;
      padding: 0
    }

    body {
      font-family: var(--body);
      background: var(--concrete);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      font-size: 15px;
      line-height: 1.5;
    }

    button, input, select, textarea {
      font: inherit;
      color: inherit
    }

    a {
      color: inherit
    }

    :focus-visible {
      outline: 2px solid var(--jade);
      outline-offset: 2px;
      border-radius: 4px
    }

    @media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
      }

    }

    /* ============ marca ============ */
    .mark {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .mark-wave {
      width: 64px;
      height: 46px;
      flex: none;
      overflow: hidden;
      border-radius: 3px
    }

    .mark-name {
      font-family: var(--brand);
      font-weight: 600;
      line-height: 1.02;
      letter-spacing: -.01em
    }

    .mark-name span {
      display: block
    }

    .mark-sub {
      font-family: var(--body);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: .44em;
      text-transform: uppercase;
      opacity: .72;
      margin-top: 5px
    }

    /* ============ login ============ */
    .gate {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.05fr .95fr
    }

    .gate-art {
      position: relative;
      background: var(--graphite);
      color: #fff;
      padding: 44px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden
    }

    .gate-art .field {
      position: absolute;
      inset: 0;
      opacity: .5
    }

    .gate-art>* {
      position: relative;
      z-index: 1
    }

    .gate-art .gate-slides {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden
    }

    .gate-slides .track {
      display: flex;
      height: 100%;
      transition: transform .9s cubic-bezier(.65, 0, .35, 1)
    }

    .gate-slides .slide {
      flex: 0 0 100%;
      height: 100%;
      background-size: cover;
      background-position: center
    }

    .gate-slides::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(35, 34, 31, .62) 0%, rgba(35, 34, 31, .28) 38%, rgba(35, 34, 31, .88) 100%)
    }

    .gate-art.has-slides>.field {
      display: none
    }

    .gate-dots {
      position: absolute;
      top: 44px;
      right: 44px;
      display: flex;
      gap: 7px
    }

    .gate-dots button {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .4);
      cursor: pointer;
      transition: background .2s, width .2s
    }

    .gate-dots button.on {
      background: #fff;
      width: 22px;
      border-radius: 4px
    }

    .gate-logo {
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      padding: 10px 16px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .18)
    }

    .gate-logo[hidden], .mark[hidden] {
      display: none
    }

    .side-logo {
      padding: 8px 12px;
      border-radius: 8px;
      box-shadow: none
    }

    .side-logo img {
      height: 34px
    }

    .gate-logo img {
      display: block;
      height: 44px;
      width: auto
    }

    .gate-claim {
      max-width: 26ch;
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(26px, 3.1vw, 40px);
      line-height: 1.12;
      letter-spacing: -.025em
    }

    .gate-claim em {
      font-style: normal;
      opacity: .55
    }

    .gate-form {
      background: var(--concrete);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 32px
    }

    .gate-box {
      width: 100%;
      max-width: 372px
    }

    .gate-eyebrow {
      font-size: 11px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600
    }

    .gate-title {
      font-family: var(--display);
      font-size: 27px;
      font-weight: 600;
      letter-spacing: -.025em;
      margin: 10px 0 4px
    }

    .gate-lead {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 26px
    }

    .field-row {
      margin-bottom: 15px
    }

    label {
      display: block;
      font-size: 12.5px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--graphite-2)
    }

    .input {
      width: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px 13px;
      transition: border-color .15s, box-shadow .15s
    }

    .input::placeholder {
      color: #A8A5A0
    }

    .input:focus {
      outline: none;
      border-color: var(--graphite);
      box-shadow: 0 0 0 3px rgba(35, 34, 31, .08)
    }

    .input.mono {
      font-family: var(--mono);
      letter-spacing: .02em
    }

    .pw {
      position: relative
    }

    .pw .peek {
      position: absolute;
      right: 6px;
      top: 6px;
      bottom: 6px;
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 0 9px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600
    }

    .pw .peek:hover {
      background: var(--concrete)
    }

    .gate-aux {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 4px 0 22px;
      font-size: 13px
    }

    .checkline {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      cursor: pointer
    }

    .linkish {
      color: var(--jade);
      text-decoration: none;
      font-weight: 600
    }

    .linkish:hover {
      text-decoration: underline
    }

    .btn {
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      padding: 12px 18px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background .15s, color .15s, border-color .15s
    }

    .btn-primary {
      background: var(--btn-bg);
      color: #fff
    }

    .btn-primary:hover {
      background: var(--btn-bg-hover)
    }

    .btn-ghost {
      background: #fff;
      border-color: var(--line);
      color: var(--graphite-2)
    }

    .btn-ghost:hover {
      border-color: var(--graphite-3)
    }

    .btn-jade {
      background: var(--btn-bg);
      color: #fff
    }

    .btn-jade:hover {
      background: var(--btn-bg-hover)
    }

    .btn-navy {
      background: var(--btn-bg);
      color: #fff
    }

    .btn-navy:hover {
      background: var(--btn-bg-hover)
    }

    .btn-block {
      width: 100%
    }

    .btn-sm {
      padding: 8px 12px;
      font-size: 13px
    }

    .gate-hint {
      margin-top: 18px;
      border: 1px dashed var(--line);
      border-radius: var(--radius-sm);
      padding: 11px 13px;
      font-size: 12.5px;
      color: var(--muted);
      background: #fff
    }

    .gate-hint b {
      font-family: var(--mono);
      color: var(--graphite-2);
      font-weight: 500
    }

    .err {
      color: var(--brick);
      font-size: 12.5px;
      margin-top: 9px;
      display: none
    }

    .err.on {
      display: block
    }

    .gate-foot {
      margin-top: 26px;
      font-size: 11.5px;
      color: #8B8882;
      line-height: 1.6
    }

    @media (max-width:900px) {
    .gate {
        grid-template-columns: 1fr
      }

    .gate-art {
        padding: 26px;
        min-height: 230px;
        gap: 26px
      }

    .gate-dots {
        top: 26px;
        right: 26px
      }

    .gate-logo img {
        height: 34px
      }

    }

    /* ============ shell ============ */
    .app {
      display: none;
      min-height: 100vh
    }

    .app.on {
      display: grid;
      grid-template-columns: 256px 1fr
    }

    .scrim {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(27, 26, 24, .45);
      z-index: 55
    }

    .side {
      background: var(--side-bg);
      color: var(--side-ink);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden
    }

    .side-top {
      padding: 22px 20px 16px;
      color: var(--side-ink)
    }

    .nav {
      padding: 6px 12px;
      flex: 1;
      overflow-y: auto;
      /* barra de rolagem no tom do menu, sem o trilho branco padrão do sistema */
      scrollbar-width: thin;
      scrollbar-color: rgba(227, 236, 239, .28) var(--side-bg)
    }

    .nav::-webkit-scrollbar {
      width: 8px
    }

    .nav::-webkit-scrollbar-track {
      background: var(--side-bg)
    }

    .nav::-webkit-scrollbar-thumb {
      background: rgba(227, 236, 239, .28);
      border-radius: 8px
    }

    .nav::-webkit-scrollbar-thumb:hover {
      background: rgba(227, 236, 239, .45)
    }

    .nav-label {
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(227, 236, 239, .55);
      padding: 16px 10px 7px;
      font-weight: 600
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      background: transparent;
      border: 0;
      color: var(--side-ink);
      text-align: left;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: background .14s, color .14s
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, .08);
      color: #fff
    }

    .nav-item.on {
      background: #fff;
      color: var(--side-bg);
      font-weight: 600
    }

    .nav-item .ic {
      width: 17px;
      height: 17px;
      flex: none;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .nav-item .tag {
      margin-left: auto;
      background: var(--brick);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      border-radius: 99px;
      padding: 1px 6px;
      font-family: var(--mono)
    }

    .nav-item.on .tag {
      background: var(--brick)
    }

    .side-foot {
      position: relative;
      padding: 18px 20px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      font-size: 11.5px;
      color: rgba(227, 236, 239, .62)
    }

    .side-foot .field {
      position: absolute;
      inset: 0;
      opacity: .22;
      pointer-events: none
    }

    .side-foot>* {
      position: relative
    }

    .main {
      min-width: 0;
      display: flex;
      flex-direction: column
    }

    .top {
      background: rgba(237, 237, 234, .86);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
      padding: 14px 30px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 20
    }

    .burger {
      display: none;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      width: 38px;
      height: 38px;
      cursor: pointer
    }

    .top-unit {
      min-width: 0
    }

    .top-unit .k {
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600
    }

    .top-unit .v {
      font-family: var(--display);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: -.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .top-unit select.v {
      display: block;
      max-width: 100%;
      margin: 2px 0 0 -4px;
      padding: 2px 4px;
      color: inherit;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: pointer
    }

    .top-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .icon-btn {
      position: relative;
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      display: grid;
      place-items: center
    }

    .icon-btn:hover {
      border-color: var(--graphite-3)
    }

    .icon-btn svg {
      width: 17px;
      height: 17px;
      stroke: var(--graphite-2);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .who {
      display: flex;
      align-items: center;
      gap: 9px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 5px 13px 5px 5px
    }

    .avatar {
      width: 29px;
      height: 29px;
      border-radius: 99px;
      background: var(--graphite);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 11.5px;
      font-weight: 700;
      font-family: var(--display);
      flex: none
    }

    .who .nm {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.15
    }

    .who .cp {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--mono)
    }

    .view {
      padding: 28px 30px 44px;
      width: 100%
    }

    .view[hidden] {
      display: none
    }

    .app-foot {
      margin-top: auto;
      border-top: 1px solid var(--line);
      padding: 16px 30px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: #8B8882
    }

    .app-foot .sign {
      margin-left: auto;
      letter-spacing: .06em
    }

    .app-foot .sign b {
      color: var(--graphite-2);
      font-weight: 600
    }

    @media (max-width:640px) {
    .app-foot {
        padding: 16px;
        justify-content: center;
        text-align: center
      }

    .app-foot .sign {
        margin-left: 0
      }

    }

    @media (max-width:980px) {
    .app.on {
        grid-template-columns: 1fr
      }

    .side {
        position: fixed;
        z-index: 60;
        width: 262px;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .3)
      }

    .side.open {
        transform: none
      }

    .burger {
        display: grid;
        place-items: center
      }

    .top {
        padding: 12px 16px
      }

    .view {
        padding: 20px 16px 60px
      }

    .who .nm, .who .cp {
        display: none
      }

    .who {
        padding: 5px
      }

    .scrim.on {
        display: block
      }

    }

    /* ============ blocos ============ */
    .page-head {
      margin-bottom: 20px
    }

    .page-eyebrow {
      font-size: 10.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600
    }

    .page-title {
      font-family: var(--display);
      font-size: 26px;
      font-weight: 600;
      letter-spacing: -.03em;
      margin: 6px 0 3px
    }

    .page-lead {
      color: var(--muted);
      font-size: 14px;
      margin: 0;
      max-width: 64ch
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow)
    }

    .card-pad {
      padding: 20px
    }

    .card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line)
    }

    .card-head h3 {
      font-family: var(--display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.015em;
      margin: 0
    }

    .card-head .act {
      margin-left: auto
    }

    .grid {
      display: grid;
      gap: 16px
    }

    .g-2 {
      grid-template-columns: repeat(2, 1fr)
    }

    .g-3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .g-4 {
      grid-template-columns: repeat(4, 1fr)
    }

    .g-side {
      grid-template-columns: 1.55fr 1fr;
      align-items: start
    }

    @media (max-width:1000px) {
    .g-side, .g-3, .g-4 {
        grid-template-columns: repeat(2, 1fr)
      }

    }

    @media (max-width:640px) {
    .grid {
        gap: 12px
      }

    .g-2, .g-3, .g-4, .g-side {
        grid-template-columns: 1fr
      }

    }

    .sec {
      margin-top: 22px
    }

    .sec-title {
      font-family: var(--display);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 11px
    }

    .kpi {
      padding: 17px 18px
    }

    .kpi .k {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600
    }

    .kpi .v {
      font-family: var(--mono);
      font-size: 25px;
      font-weight: 500;
      letter-spacing: -.035em;
      margin: 7px 0 2px
    }

    .kpi .s {
      font-size: 12.5px;
      color: var(--muted)
    }

    .kpi .v.sm {
      font-size: 20px
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 99px;
      white-space: nowrap
    }

    .pill-ok {
      background: var(--jade-soft);
      color: var(--jade)
    }

    .pill-due {
      background: var(--amber-soft);
      color: var(--amber)
    }

    .pill-late {
      background: var(--brick-soft);
      color: var(--brick)
    }

    .pill-neutral {
      background: var(--concrete);
      color: var(--muted)
    }

    .rows {
      display: flex;
      flex-direction: column
    }

    .row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line)
    }

    .row:last-child {
      border-bottom: 0
    }

    .row .grow {
      min-width: 0;
      flex: 1
    }

    .row .t {
      font-weight: 600;
      font-size: 14px
    }

    .row .d {
      font-size: 12.5px;
      color: var(--muted)
    }

    .row .num {
      font-family: var(--mono);
      font-size: 14px;
      letter-spacing: -.02em;
      white-space: nowrap
    }

    .tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px
    }

    .tbl th {
      text-align: left;
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      padding: 11px 20px;
      border-bottom: 1px solid var(--line);
      white-space: nowrap
    }

    .tbl td {
      padding: 12px 20px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle
    }

    .tbl tr:last-child td {
      border-bottom: 0
    }

    .tbl .num {
      font-family: var(--mono);
      letter-spacing: -.02em;
      white-space: nowrap
    }

    .tbl-wrap {
      overflow-x: auto
    }

    .tbl.dense th {
      padding: 6px 14px
    }

    .tbl.dense td {
      padding: 6px 14px
    }

    .opt {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 13px;
      cursor: pointer;
      background: #fff
    }

    .opt:hover {
      border-color: var(--graphite-3)
    }

    .opt.on {
      border-color: var(--graphite);
      box-shadow: 0 0 0 3px rgba(35, 34, 31, .07)
    }

    .opt input {
      margin-top: 3px;
      accent-color: var(--graphite)
    }

    .opt .t {
      font-weight: 600;
      font-size: 13.5px
    }

    .opt .d {
      font-size: 12.5px;
      color: var(--muted)
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px
    }

    @media (max-width:640px) {
    .form-grid {
        grid-template-columns: 1fr
      }

    }

    .span-2 {
      grid-column: 1/-1
    }

    .hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(27, 26, 24, .5);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 80
    }

    .modal.on {
      display: flex
    }

    .modal-box {
      background: #fff;
      border-radius: var(--radius);
      width: 100%;
      max-width: 440px;
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4)
    }

    .modal-head {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line)
    }

    .modal-head h3 {
      margin: 0;
      font-family: var(--display);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -.02em
    }

    .modal-head button {
      margin-left: auto;
      border: 0;
      background: transparent;
      font-size: 20px;
      cursor: pointer;
      color: var(--muted);
      line-height: 1
    }

    .modal-body {
      padding: 20px
    }

    .toast-wrap {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 90;
      display: flex;
      flex-direction: column;
      gap: 9px;
      align-items: flex-end
    }

    .toast {
      background: var(--graphite);
      color: #fff;
      padding: 11px 15px;
      border-radius: 10px;
      font-size: 13.5px;
      box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
      animation: rise .22s ease
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @media (max-width:480px) {
    .gate-form {
        padding: 28px 18px
      }

    .gate-box {
        max-width: none
      }

    .g-4 {
        grid-template-columns: 1fr
      }

    .kpi .v {
        font-size: 22px
      }

    .modal-actions {
        flex-direction: column
      }

    .modal-box {
        max-width: 100%
      }

    .top-unit .v {
        max-width: 52vw
      }

    .who {
        max-width: 120px
      }

    }