/* =====================================================
   MINC Office :: tema claro
   Mesma linguagem visual do MINC Hub, fundo branco.
   Tipografia preservada: Inter + JetBrains Mono.
   ===================================================== */
:root{
  --of-bg:#f6f7f9; --of-surface:#ffffff; --of-surface-2:#fbfbfc; --of-surface-3:#f1f2f4;
  --of-ink:#111114; --of-ink-2:#4a4d55; --of-ink-3:#7c8089; --of-ink-4:#a9adb5;
  --of-line:#e6e8ec; --of-line-2:#d6d9df; --of-line-3:#c3c7cf;

  --of-orange:#ff5b00; --of-orange-2:#ff7a1f; --of-orange-soft:#fff2e9;
  --of-blue:#1657ff;  --of-blue-soft:#eaf0ff;
  --of-green:#12a150; --of-green-soft:#e8f8ef;
  --of-amber:#b7791f; --of-amber-soft:#fdf5e2;
  --of-red:#d92d20;   --of-red-soft:#fdeceb;
  --of-violet:#6941c6;--of-violet-soft:#f2edfe;
  --of-gray-soft:#f0f1f3;

  --of-display:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --of-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  --of-r-xs:8px; --of-r-sm:12px; --of-r-md:16px; --of-r-lg:22px;
  --of-sb-w:248px;
  --of-ease:cubic-bezier(.2,.8,.2,1);
  --of-shadow:0 1px 2px rgba(16,24,40,.05);
  --of-shadow-md:0 4px 16px -4px rgba(16,24,40,.10);
  --of-shadow-lg:0 12px 34px -12px rgba(16,24,40,.20);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--of-display); background:var(--of-bg); color:var(--of-ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.of-mono{font-family:var(--of-mono);font-size:.86em;letter-spacing:-.01em}

/* ---------- Layout ---------- */
.of-app{display:flex;min-height:100vh}
.of-sidebar{
  width:var(--of-sb-w);flex:0 0 var(--of-sb-w);background:var(--of-surface);
  border-right:1px solid var(--of-line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh
}
.of-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--of-line)}
.of-brand__mark{width:30px;height:30px;border-radius:9px;background:var(--of-orange);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:-.5px}
.of-brand__name{font-weight:700;letter-spacing:-.02em}
.of-brand__name em{font-style:normal;color:var(--of-ink-3);font-weight:500}

.of-nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.of-nav__sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--of-ink-4);
  padding:14px 10px 6px;font-weight:600}
.of-nav__item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--of-r-xs);
  color:var(--of-ink-2);font-weight:500;transition:.15s var(--of-ease)}
.of-nav__item:hover{background:var(--of-surface-3);color:var(--of-ink)}
.of-nav__item.is-active{background:var(--of-orange-soft);color:var(--of-orange);font-weight:600}
.of-nav__icon{width:18px;text-align:center;opacity:.9}
.of-nav__badge{margin-left:auto;background:var(--of-red);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}

.of-user{border-top:1px solid var(--of-line);padding:12px;display:flex;align-items:center;gap:10px}
.of-avatar{width:32px;height:32px;border-radius:50%;background:var(--of-surface-3);color:var(--of-ink-2);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 32px}
.of-user__info{min-width:0;flex:1}
.of-user__name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-user__role{font-size:11px;color:var(--of-ink-3)}

.of-main{flex:1;min-width:0;display:flex;flex-direction:column}
.of-topbar{background:var(--of-surface);border-bottom:1px solid var(--of-line);
  padding:16px 26px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.of-topbar h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.of-topbar__sub{font-size:13px;color:var(--of-ink-3);margin-top:1px}
.of-topbar__acoes{margin-left:auto;display:flex;gap:8px}
.of-content{padding:26px;max-width:1420px;width:100%}

/* ---------- Cartoes ---------- */
.of-card{background:var(--of-surface);border:1px solid var(--of-line);border-radius:var(--of-r-md);
  box-shadow:var(--of-shadow)}
.of-card__head{padding:16px 20px;border-bottom:1px solid var(--of-line);display:flex;align-items:center;gap:12px}
.of-card__title{font-weight:650;letter-spacing:-.01em}
.of-card__body{padding:20px}

.of-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.of-kpi{background:var(--of-surface);border:1px solid var(--of-line);border-radius:var(--of-r-md);padding:18px}
.of-kpi__label{font-size:12px;color:var(--of-ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.of-kpi__valor{font-size:27px;font-weight:750;letter-spacing:-.03em;margin-top:8px;line-height:1.15}
.of-kpi__nota{font-size:12px;color:var(--of-ink-3);margin-top:5px}
.of-kpi.is-alerta{border-color:#f5c6c2;background:var(--of-red-soft)}
.of-kpi.is-alerta .of-kpi__valor{color:var(--of-red)}
.of-kpi.is-atencao{border-color:#f0dcae;background:var(--of-amber-soft)}
.of-kpi.is-atencao .of-kpi__valor{color:var(--of-amber)}
.of-kpi.is-ok{border-color:#bde5cd;background:var(--of-green-soft)}
.of-kpi.is-ok .of-kpi__valor{color:var(--of-green)}

/* ---------- Tabela ---------- */
.of-tabela{width:100%;border-collapse:collapse;font-size:14px}
.of-tabela th{text-align:left;padding:11px 14px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--of-ink-3);font-weight:650;border-bottom:1px solid var(--of-line);
  background:var(--of-surface-2);white-space:nowrap}
.of-tabela td{padding:13px 14px;border-bottom:1px solid var(--of-line);vertical-align:middle}
.of-tabela tbody tr{transition:background .12s}
.of-tabela tbody tr:hover{background:var(--of-surface-2)}
.of-tabela tbody tr:last-child td{border-bottom:0}
.of-tabela .num{text-align:right;font-family:var(--of-mono);white-space:nowrap}

/* ---------- Etiquetas ---------- */
.of-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:12px;font-weight:600;white-space:nowrap;line-height:1.5}
.of-tag--azul{background:var(--of-blue-soft);color:var(--of-blue)}
.of-tag--verde{background:var(--of-green-soft);color:var(--of-green)}
.of-tag--amarelo{background:var(--of-amber-soft);color:var(--of-amber)}
.of-tag--laranja{background:var(--of-orange-soft);color:var(--of-orange)}
.of-tag--vermelho{background:var(--of-red-soft);color:var(--of-red)}
.of-tag--roxo{background:var(--of-violet-soft);color:var(--of-violet)}
.of-tag--cinza{background:var(--of-gray-soft);color:var(--of-ink-2)}

/* ---------- Botoes ---------- */
.of-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;
  border-radius:var(--of-r-xs);border:1px solid var(--of-line-2);background:var(--of-surface);
  color:var(--of-ink);font-weight:600;font-size:14px;cursor:pointer;transition:.15s var(--of-ease)}
.of-btn:hover{background:var(--of-surface-3);border-color:var(--of-line-3)}
.of-btn--primario{background:var(--of-orange);border-color:var(--of-orange);color:#fff}
.of-btn--primario:hover{background:var(--of-orange-2);border-color:var(--of-orange-2)}
.of-btn--verde{background:var(--of-green);border-color:var(--of-green);color:#fff}
.of-btn--verde:hover{filter:brightness(1.06)}
.of-btn--perigo{background:var(--of-surface);border-color:#f0b4ae;color:var(--of-red)}
.of-btn--perigo:hover{background:var(--of-red-soft)}
.of-btn--bloco{width:100%}
.of-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulario ---------- */
.of-form{display:flex;flex-direction:column;gap:20px}
.of-bloco{background:var(--of-surface);border:1px solid var(--of-line);border-radius:var(--of-r-md);overflow:hidden}
.of-bloco__head{padding:14px 20px;background:var(--of-surface-2);border-bottom:1px solid var(--of-line)}
.of-bloco__num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--of-orange);color:#fff;font-size:12px;font-weight:700;margin-right:9px}
.of-bloco__title{font-weight:650;letter-spacing:-.01em}
.of-bloco__body{padding:20px;display:flex;flex-direction:column;gap:18px}

.of-campo{display:flex;flex-direction:column;gap:6px}
.of-campo__label{font-weight:600;font-size:14px}
.of-campo__label .req{color:var(--of-red);margin-left:2px}
.of-campo__ajuda{font-size:12.5px;color:var(--of-ink-3);line-height:1.45}
.of-campo__erro{font-size:12.5px;color:var(--of-red);font-weight:500}
.of-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}

.of-input,.of-select,.of-textarea{
  width:100%;padding:10px 13px;border:1px solid var(--of-line-2);border-radius:var(--of-r-xs);
  background:var(--of-surface);transition:.15s var(--of-ease)}
.of-input:focus,.of-select:focus,.of-textarea:focus{
  outline:none;border-color:var(--of-orange);box-shadow:0 0 0 3px rgba(255,91,0,.12)}
.of-input:disabled,.of-input[readonly]{background:var(--of-surface-3);color:var(--of-ink-3)}
.of-textarea{min-height:96px;resize:vertical;line-height:1.55}
.of-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237c8089' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}

.of-opcoes{display:flex;flex-direction:column;gap:9px}
.of-opcao{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--of-line-2);
  border-radius:var(--of-r-xs);cursor:pointer;transition:.15s var(--of-ease)}
.of-opcao:hover{border-color:var(--of-line-3);background:var(--of-surface-2)}
.of-opcao input{margin-top:3px;accent-color:var(--of-orange);flex:0 0 auto}
.of-opcao__txt strong{display:block;font-weight:600}
.of-opcao__txt span{font-size:12.5px;color:var(--of-ink-3)}
.of-opcao:has(input:checked){border-color:var(--of-orange);background:var(--of-orange-soft)}

/* ---------- Avisos ---------- */
.of-aviso{padding:13px 16px;border-radius:var(--of-r-xs);font-size:14px;display:flex;gap:10px;
  align-items:flex-start;border:1px solid transparent;margin-bottom:18px}
.of-aviso--ok{background:var(--of-green-soft);border-color:#bde5cd;color:#0d6b38}
.of-aviso--erro{background:var(--of-red-soft);border-color:#f5c6c2;color:#9a2018}
.of-aviso--info{background:var(--of-blue-soft);border-color:#c5d6ff;color:#0f3fb8}
.of-aviso--atencao{background:var(--of-amber-soft);border-color:#f0dcae;color:#8a5a10}

/* ---------- Linha do tempo ---------- */
.of-tempo{display:flex;flex-direction:column;gap:0;position:relative}
.of-tempo__item{display:flex;gap:14px;padding-bottom:20px;position:relative}
.of-tempo__item::before{content:'';position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--of-line)}
.of-tempo__item:last-child{padding-bottom:0}
.of-tempo__item:last-child::before{display:none}
.of-tempo__ponto{width:20px;height:20px;border-radius:50%;background:var(--of-surface);
  border:2px solid var(--of-line-3);flex:0 0 20px;z-index:1;display:grid;place-items:center;
  font-size:10px;color:var(--of-ink-3)}
.of-tempo__item.is-feito .of-tempo__ponto{background:var(--of-green);border-color:var(--of-green);color:#fff}
.of-tempo__item.is-atual .of-tempo__ponto{background:var(--of-orange);border-color:var(--of-orange);color:#fff}
.of-tempo__corpo{padding-top:0;min-width:0}
.of-tempo__titulo{font-weight:600;font-size:14px}
.of-tempo__meta{font-size:12.5px;color:var(--of-ink-3);margin-top:2px}

/* ---------- Login ---------- */
.of-login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#fff 0%,var(--of-bg) 100%)}
.of-login__card{width:100%;max-width:392px;background:var(--of-surface);border:1px solid var(--of-line);
  border-radius:var(--of-r-lg);padding:34px;box-shadow:var(--of-shadow-lg)}
.of-login__brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.of-login__mark{width:38px;height:38px;border-radius:11px;background:var(--of-orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.of-login__nome{font-size:19px;font-weight:750;letter-spacing:-.03em}
.of-login__sub{color:var(--of-ink-3);font-size:14px;margin-bottom:26px}
.of-login__rodape{text-align:center;font-size:12.5px;color:var(--of-ink-4);margin-top:22px}

/* ---------- Utilidades ---------- */
.of-vazio{text-align:center;padding:52px 20px;color:var(--of-ink-3)}
.of-vazio__icone{font-size:34px;opacity:.35;margin-bottom:10px}
.of-filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.of-filtros .of-select,.of-filtros .of-input{width:auto;min-width:160px}
.of-flex{display:flex;align-items:center;gap:10px}
.of-entre{display:flex;align-items:center;justify-content:space-between;gap:14px}
.of-mt{margin-top:18px}.of-mb{margin-bottom:18px}
.of-pequeno{font-size:12.5px;color:var(--of-ink-3)}
.of-grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}

@media (max-width:1024px){ .of-grid-2{grid-template-columns:1fr} }
@media (max-width:860px){
  .of-app{flex-direction:column}
  .of-sidebar{width:100%;flex:none;height:auto;position:static;border-right:0;border-bottom:1px solid var(--of-line)}
  .of-nav{flex-direction:row;overflow-x:auto;padding:8px}
  .of-nav__sec,.of-nav__label{display:none}
  .of-nav__item{padding:9px 12px}
  .of-user{display:none}
  .of-content{padding:16px}
  .of-topbar{padding:14px 16px}
}

/* ---------- Splash de entrada ---------- */
.of-splash{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#fff;transition:opacity .45s var(--of-ease), visibility .45s;
}
.of-splash.is-off{opacity:0;visibility:hidden}
.of-splash__logo{
  width:84px;height:84px;border-radius:50%;
  animation:of-pulso 1.5s var(--of-ease) infinite;
}
.of-splash__barra{
  position:absolute;bottom:38%;width:132px;height:3px;border-radius:2px;
  background:var(--of-surface-3);overflow:hidden;
}
.of-splash__barra i{
  display:block;height:100%;width:40%;border-radius:2px;background:var(--of-orange);
  animation:of-corre 1.1s var(--of-ease) infinite;
}
@keyframes of-pulso{
  0%,100%{transform:scale(1);box-shadow:0 8px 26px -10px rgba(255,91,0,.5)}
  50%{transform:scale(1.07);box-shadow:0 12px 34px -8px rgba(255,91,0,.7)}
}
@keyframes of-corre{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@media (prefers-reduced-motion:reduce){
  .of-splash__logo{animation:none}
  .of-splash__barra i{animation:none;width:100%}
}

/* ---------- Identidade MINC: tipografia e formas do site ---------- */
@font-face{font-family:'Paralucent';src:url('/assets/fonts/Paralucent-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Paralucent';src:url('/assets/fonts/Paralucent-Book.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Paralucent';src:url('/assets/fonts/Paralucent-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Paralucent';src:url('/assets/fonts/Paralucent-Bold.otf') format('opentype');font-weight:700;font-display:swap}

:root{
  --of-display:'Paralucent','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --of-r-md:22px;   /* cartoes, como no site */
  --of-r-lg:34px;   /* blocos maiores */
  --of-r-sm:16px;
  --of-r-xs:12px;
}

/* Botoes em pilula, como no site */
.of-btn{border-radius:999px;padding:10px 20px;letter-spacing:-.01em}
.of-tag{border-radius:999px}
.of-nav__item{border-radius:999px}
.of-avatar,.of-brand__mark{border-radius:50%}

/* Titulos com o peso e o aperto do site */
.of-topbar h1,.of-kpi__valor,.of-login__nome{font-weight:700;letter-spacing:-.035em}
.of-card__title,.of-bloco__title{font-weight:500;letter-spacing:-.02em}

/* Numeros e protocolos em mono, igual ao site */
.of-mono,.of-tabela .num{font-family:var(--of-mono)}

/* Etiqueta de secao no estilo do site: caixa alta espacada */
.of-nav__sec,.of-kpi__label,.of-tabela th{letter-spacing:.10em;font-weight:500}

/* Campos com o mesmo arredondamento */
.of-input,.of-select,.of-textarea{border-radius:16px;padding:11px 15px}
.of-opcao{border-radius:16px}
.of-bloco{border-radius:22px}
.of-card{border-radius:22px}
.of-kpi{border-radius:22px}
.of-login__card{border-radius:34px}

/* =====================================================
   Login :: marca d'agua com degrade vivo
   Camadas, de baixo para cima:
   1. foto da generosidade em preto e branco
   2. glow laranja no alto a direita, azul embaixo a esquerda
   3. malha tecnica de linhas finas
   4. veu claro que garante a leitura
   ===================================================== */
.of-login{position:relative;overflow:hidden;background:#fff;isolation:isolate}

/* 1. foto */
.of-login::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('/assets/img/fundo-login.jpg') center/cover no-repeat;
  filter:grayscale(1) contrast(1.12) brightness(1.05);
  opacity:.16;
  mask-image:radial-gradient(120% 100% at 50% 42%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 42%, #000 30%, transparent 78%);
}

/* 2. glows da marca + 3. malha */
.of-login::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* malha tecnica */
    linear-gradient(rgba(17,17,20,.045) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(17,17,20,.045) 1px, transparent 1px) 0 0/64px 64px,
    /* glow laranja, alto a direita */
    radial-gradient(58% 46% at 88% 6%, rgba(255,91,0,.42) 0%, rgba(255,122,31,.16) 38%, transparent 70%),
    /* glow azul, embaixo a esquerda */
    radial-gradient(64% 52% at 6% 96%, rgba(22,87,255,.34) 0%, rgba(77,210,255,.14) 40%, transparent 72%),
    /* respiro claro atras do cartao */
    radial-gradient(78% 62% at 50% 46%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.66) 40%, rgba(255,255,255,.20) 72%, transparent 100%),
    /* base */
    linear-gradient(168deg, #ffffff 0%, #fbfbfd 46%, #f4f6fa 100%);
  animation:of-respira 14s ease-in-out infinite alternate;
}

@keyframes of-respira{
  0%   {filter:saturate(1) hue-rotate(0deg)}
  100% {filter:saturate(1.18) hue-rotate(-6deg)}
}

/* faixa de luz que atravessa devagar */
.of-login .of-brilho{
  position:absolute;inset:-40% -20%;z-index:0;pointer-events:none;
  background:linear-gradient(102deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  animation:of-varre 9s var(--of-ease) infinite;
  opacity:.55;
}
@keyframes of-varre{
  0%   {transform:translateX(-38%)}
  55%  {transform:translateX(38%)}
  100% {transform:translateX(38%)}
}

/* cartao sobre as camadas */
.of-login__card{
  position:relative;z-index:2;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 60px -24px rgba(16,24,40,.28),
    0 2px 10px -4px rgba(255,91,0,.14);
}
.of-login__logo{
  width:56px;height:56px;border-radius:50%;display:block;
  box-shadow:0 10px 26px -10px rgba(255,91,0,.65), 0 0 0 6px rgba(255,91,0,.08);
}
.of-login__nome{background:linear-gradient(96deg,#111114 0%,#3a2a20 58%,var(--of-orange) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* borda viva no topo do cartao */
.of-login__card::before{
  content:'';position:absolute;left:34px;right:34px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--of-orange) 25%, var(--of-blue) 75%, transparent);
  opacity:.75;
}

@media (prefers-reduced-motion:reduce){
  .of-login::after,.of-login .of-brilho{animation:none}
}