/* ============================================================
   Painel do Funcionário — /funcionarios
   Feito para o celular primeiro; no computador o conteúdo é
   centralizado e os cartões se espalham em colunas.
   ============================================================ */
:root{
  --azul:#0b3f8f; --azul-claro:#2f7ee8; --navy:#04234f; --navy-2:#072c61;
  --fundo:#eef2f8; --card:#ffffff; --linha:#dde5f0;
  --texto:#152b45; --suave:#67789a;
  --ok:#1c7a3f; --erro:#c0392b; --alerta:#c77c17;
  --raio:16px;
  --topo-h:0px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--navy);color:var(--texto);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}

*{scrollbar-width:thin;scrollbar-color:var(--azul-claro) rgba(255,255,255,.12)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
::-webkit-scrollbar-thumb{background:var(--azul-claro);border-radius:8px}

/* ---------------- Estrutura ---------------- */
.app{min-height:100vh;display:flex;flex-direction:column;background:var(--navy)}

.app__topo{
  background:linear-gradient(160deg,var(--navy),#0a3a7d);color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 18px 22px;
  border-radius:0 0 22px 22px
}
.app__topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app__logo img{width:150px;height:auto;display:block}
.app__sair{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto
}
.app__sair:hover{background:rgba(255,255,255,.22)}
.app__sair svg{width:19px;height:19px}

.app__saudacao{display:flex;align-items:center;gap:13px;margin-top:18px}
.app__avatar{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;color:#fff
}
.app__avatar--foto{object-fit:cover;padding:0}
.app__saudacao strong{display:block;font-size:1.28rem;line-height:1.2}
.app__saudacao small{display:block;color:#b9cdeb;font-size:.8rem;margin-top:2px}

.app__corpo{
  flex:1;background:var(--fundo);margin-top:-10px;
  border-radius:22px 22px 0 0;padding:22px 18px 96px
}

/* ---------------- Abas de baixo ---------------- */
.app__abas{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:#fff;border-top:1px solid var(--linha);
  display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(4,35,79,.08)
}
.app__abas a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--suave);font-size:.7rem;font-weight:600;padding:4px 0
}
.app__abas a svg{width:22px;height:22px}
.app__abas a.is-atual{color:var(--azul)}

/* ---------------- Blocos ---------------- */
.sec-titulo{font-size:1.05rem;color:var(--navy);margin:0 0 13px;font-weight:700}
.sec-titulo--espaco{margin-top:26px}

.menu-lista{display:flex;flex-direction:column;gap:11px}
.menu-item{
  display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--linha);border-radius:var(--raio);padding:15px 16px;
  box-shadow:0 3px 12px rgba(4,35,79,.05);transition:.15s
}
.menu-item:hover{border-color:#b9d2f2;transform:translateY(-1px);box-shadow:0 8px 22px rgba(4,35,79,.1)}
.menu-item__ico{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center
}
.menu-item__ico svg{width:21px;height:21px}
.menu-item__txt{flex:1;min-width:0}
.menu-item__txt strong{display:block;font-size:.98rem;color:var(--navy)}
.menu-item__txt small{display:block;color:var(--suave);font-size:.78rem;margin-top:1px}
.menu-item__seta{color:#a9b8d0;flex:0 0 auto}
.menu-item__seta svg{width:19px;height:19px}
.menu-item__selo{
  background:var(--alerta);color:#fff;border-radius:20px;padding:2px 9px;
  font-size:.7rem;font-weight:800;flex:0 0 auto
}

/* ---------------- Cartões de conteúdo ---------------- */
.cartao{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:16px;margin-bottom:13px;box-shadow:0 3px 12px rgba(4,35,79,.05)
}
.cartao__topo{display:flex;align-items:center;gap:12px}
.cartao__ico{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;background:#e8f0fc;color:var(--azul);
  display:flex;align-items:center;justify-content:center
}
.cartao__ico svg{width:20px;height:20px}
.cartao__corpo{flex:1;min-width:0}
.cartao__corpo strong{display:block;color:var(--navy);font-size:.96rem}
.cartao__corpo small{display:block;color:var(--suave);font-size:.79rem;margin-top:1px}
.cartao__valor{font-size:1.08rem;font-weight:800;color:var(--navy);white-space:nowrap}

.baixar{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;background:#eef4fd;color:var(--azul);
  display:flex;align-items:center;justify-content:center
}
.baixar:hover{background:#dde9fa}
.baixar svg{width:19px;height:19px}

.resumo{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:16px}
.resumo__item{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:13px 15px}
.resumo__item small{display:block;color:var(--suave);font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.resumo__item strong{display:block;font-size:1.18rem;color:var(--navy);margin-top:3px;font-variant-numeric:tabular-nums}
.resumo__item--ok strong{color:var(--ok)}
.resumo__item--alerta strong{color:var(--alerta)}
.resumo__item--erro strong{color:var(--erro)}

.selo{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:800;letter-spacing:.02em}
.selo--ok{background:#e4f7ec;color:var(--ok)}
.selo--pen{background:#fff4de;color:var(--alerta)}
.selo--nao{background:#fdeaea;color:var(--erro)}

.vazio{text-align:center;color:var(--suave);padding:38px 16px;font-size:.88rem}
.vazio svg{width:42px;height:42px;opacity:.35;margin-bottom:8px}

/* ---------------- Formulários ---------------- */
.campo{margin-bottom:13px}
.campo label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 13px;border:1px solid #cfd9e8;border-radius:11px;
  font:inherit;font-size:.92rem;background:#fbfcfe;color:var(--texto)
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(47,126,232,.16);background:#fff
}
.campo textarea{min-height:80px;resize:vertical}
.campo small{display:block;color:var(--suave);font-size:.74rem;margin-top:4px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 18px;border:0;border-radius:12px;font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;transition:.15s
}
.bt svg{width:17px;height:17px}
.bt--azul{background:var(--azul);color:#fff}
.bt--azul:hover{background:#0d4aa8}
.bt--claro{background:#e9eff8;color:var(--navy)}
.bt--claro:hover{background:#dce6f4}
.bt--risco{background:#fdeaea;color:var(--erro)}
.bt--auto{width:auto}

.app-flash{padding:12px 15px;border-radius:12px;margin-bottom:14px;font-size:.87rem;font-weight:600}
.app-flash--success{background:#e4f7ec;color:var(--ok)}
.app-flash--danger{background:#fdeaea;color:var(--erro)}
.app-flash--info{background:#e6f0fd;color:var(--azul)}

/* ---------------- Entrar ---------------- */
.entrar{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(165deg,var(--navy),#0a3a7d)
}
.entrar__caixa{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.entrar__logo{text-align:center;margin-bottom:8px}
.entrar__logo img{width:170px;height:auto}
.entrar h1{font-size:1.16rem;color:var(--navy);text-align:center;margin:14px 0 4px}
.entrar p{text-align:center;color:var(--suave);font-size:.85rem;margin:0 0 20px}
.entrar__erro{background:#fdeaea;color:var(--erro);padding:11px 14px;border-radius:11px;font-size:.85rem;font-weight:600;margin-bottom:14px}
.entrar__voltar{display:block;text-align:center;margin-top:14px;color:var(--suave);font-size:.82rem}

/* ---------------- Computador ---------------- */
@media (min-width:760px){
  body{font-size:15.5px}
  .app{max-width:1000px;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.25)}
  .app__topo{padding:22px 34px 26px;border-radius:0}
  .app__corpo{padding:28px 34px 34px;border-radius:0}
  /* no computador as abas viram uma barra normal no topo do conteúdo */
  .app__abas{
    position:static;border-top:0;border-bottom:1px solid var(--linha);
    padding:0 34px;box-shadow:none;order:-1;background:#fff;gap:6px
  }
  .app__abas a{flex:0 0 auto;flex-direction:row;gap:8px;padding:13px 16px;font-size:.86rem;border-bottom:3px solid transparent}
  .app__abas a.is-atual{border-bottom-color:var(--azul);background:#f6f9fe}
  .app__abas a svg{width:18px;height:18px}
  .app{display:flex;flex-direction:column}
  .app__topo{order:-2}
  .menu-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
  .resumo{grid-template-columns:repeat(4,1fr)}
  .bt{width:auto;min-width:190px}
  .form-largo{max-width:560px}
}
@media (min-width:1100px){
  .menu-lista{grid-template-columns:repeat(3,1fr)}
}