/* =====================================================================
   HybridUs Portal do Funcionário — estilos base partilhados
   Paleta: cinzento, laranja e branco (com modo claro/escuro)
   ===================================================================== */

:root{
  --branco:#ffffff;
  --cinza-50:#f4f4f3;
  --cinza-100:#e7e6e3;
  --cinza-300:#c7c5c0;
  --cinza-500:#8b8983;
  --cinza-800:#2b2a27;
  --laranja:#e2711d;
  --laranja-escuro:#b85a12;

  --fundo:var(--cinza-50);
  --cartao:var(--branco);
  --linha:var(--cinza-100);
  --texto:var(--cinza-800);
  --texto-suave:var(--cinza-500);
  --accent:var(--laranja);
  --accent-escuro:var(--laranja-escuro);
  --atencao:var(--laranja-escuro);
  --radius:10px;
}
html[data-tema="escuro"]{
  --fundo:#201f1d;
  --cartao:#2a2926;
  --linha:#3c3a36;
  --texto:var(--branco);
  --texto-suave:#b3b0aa;
  --accent:var(--laranja);
  --accent-escuro:#f08a3c;
  --atencao:#f08a3c;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--fundo);
  color:var(--texto);
  font-size:16px;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .2s ease, color .2s ease;
}

/* --- Cabeçalho comum --- */
header.cabecalho-site{
  padding:16px 16px;
  border-bottom:1px solid var(--linha);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:var(--fundo);
  z-index:10;
}
header.cabecalho-site h1{
  font-size:1.1rem;
  font-weight:600;
  margin:0;
}
@media (min-width:700px){
  header.cabecalho-site{padding:20px 28px;}
}

/* --- Interruptor claro/escuro --- */
.interruptor-tema{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.interruptor-tema .trilho{
  width:46px;
  height:26px;
  border-radius:999px;
  background:var(--cinza-300);
  position:relative;
  transition:background .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .trilho{background:var(--accent);}
.interruptor-tema .bola{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--branco);
  transition:transform .2s ease;
}
html[data-tema="escuro"] .interruptor-tema .bola{transform:translateX(20px);}
.interruptor-tema .rotulo{
  font-size:.82rem;
  color:var(--texto-suave);
}

/* --- Cartões --- */
.card{
  background:var(--cartao);
  border:1px solid var(--linha);
  border-radius:var(--radius);
  padding:18px;
}
@media (min-width:700px){
  .card{padding:22px;}
}
.card h2{
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--texto-suave);
  margin:0 0 14px;
}

/* --- Botões --- */
button, .botao{
  font:inherit;
  cursor:pointer;
  border-radius:8px;
  border:1px solid transparent;
  padding:12px 18px;
  font-weight:600;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary{background:var(--accent); color:var(--branco);}
.btn-primary:hover{background:var(--accent-escuro);}
.btn-secondary{background:transparent; border-color:var(--linha); color:var(--texto);}
.btn-secondary:disabled, .btn-primary:disabled{opacity:.5; cursor:not-allowed;}

/* --- Campos de formulário --- */
form label{
  display:block;
  font-size:.82rem;
  color:var(--texto-suave);
  margin:16px 0 5px;
}
form label:first-of-type{margin-top:0;}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=file], select, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--linha);
  border-radius:7px;
  font:inherit;
  font-size:16px; /* evita zoom automático no iOS ao focar */
  color:var(--texto);
  background:var(--cartao);
  min-height:44px;
}
textarea{
  resize:vertical;
  font-family:inherit; /* o browser usa monospace por omissão, se não se disser nada */
}
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b8983'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
}
input[type=file]{padding:9px 10px;}

.linha-dupla{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:480px){
  .linha-dupla{grid-template-columns:1fr 1fr;}
}

.origem-badge{
  display:inline-block;
  font-size:.75rem;
  padding:2px 9px;
  border-radius:999px;
  background:var(--fundo);
  border:1px solid var(--linha);
  color:var(--accent-escuro);
  margin-left:8px;
  vertical-align:middle;
}

.aviso{
  font-size:.82rem;
  color:var(--texto-suave);
  margin-top:6px;
}
.erro-texto{
  font-size:.85rem;
  color:var(--atencao);
  font-weight:600;
  margin-top:10px;
}
.mensagem-sucesso{
  background:var(--fundo);
  border:1px solid var(--linha);
  border-left:3px solid var(--accent);
  padding:10px 14px;
  border-radius:6px;
  font-size:.88rem;
  margin-bottom:16px;
}

/* --- Navegação por separadores (usada no topo das páginas autenticadas) --- */
nav.abas{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin-bottom:18px;
  border-bottom:1px solid var(--linha);
}
nav.abas a{
  display:inline-block;
  padding:10px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--texto-suave);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
nav.abas a.ativa{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* --- Menu agrupado, com dropdown por toque/clique --- */
nav.abas-grupo{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--linha);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.menu-dropdown{
  position:relative;
}
.menu-dropdown summary{
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--texto-suave);
  user-select:none;
  border-bottom:2px solid transparent;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:4px;
}
.menu-dropdown summary::-webkit-details-marker{
  display:none;
}
.menu-dropdown summary::after{
  content:"▾";
  font-size:.7rem;
  color:var(--texto-suave);
}
.menu-dropdown summary.ativo,
.menu-dropdown[open] summary{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.menu-dropdown[open] summary::after{
  content:"▴";
}
.painel-dropdown{
  position:absolute;
  top:100%;
  left:0;
  background:var(--cartao);
  border:1px solid var(--linha);
  border-radius:8px;
  min-width:230px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:50;
  padding:6px;
  margin-top:4px;
}
.painel-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  font-size:.85rem;
  color:var(--texto);
  text-decoration:none;
  white-space:nowrap;
}
.painel-dropdown a:hover{
  background:var(--fundo);
}
.painel-dropdown a.ativa{
  color:var(--accent);
  font-weight:600;
}

/* --- Etiquetas de estado das férias --- */
.etiqueta-aprovado{
  border-color:var(--accent);
  color:var(--accent);
}
.etiqueta-gozado{
  background:var(--texto-suave);
  border-color:var(--texto-suave);
  color:var(--branco);
}
.etiqueta-rejeitado{
  border-color:var(--atencao);
  color:var(--atencao);
}
.etiqueta-nao-conformidade{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--branco);
  font-weight:600;
}
.etiqueta-remarcacao{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--branco);
  font-weight:600;
}

/* --- Marca do site: logótipo HybridUs + nome do produto --- */
.marca-site{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}
.logotipo-hybridus{
  font-weight:700;
  font-size:1.08rem;
  color:var(--texto);
  text-decoration:none;
  white-space:nowrap;
}
.logotipo-hybridus .ponto-logo{
  color:var(--accent);
}
.letra-destaque{
  color:var(--accent);
}
.nome-produto{
  font-size:.88rem;
  font-weight:600;
  color:var(--texto-suave);
  padding-left:10px;
  border-left:1px solid var(--linha);
  white-space:nowrap;
}