/* =====================================================================
   Portal do Colaborador — sistema visual
   Extraido dos paineis de gestao da Two One (painel-two-one-app.html):
   mesma tipografia, mesma paleta, mesmos raios e sombras.

   Duas familias de superficie:
     .escuro  — fundo ink, texto claro. Marca Two One (Central, login)
     .claro   — fundo paper, texto ink. Conteudo de leitura

   O portal do colaborador sobrepoe --primaria/--secundaria com as cores da
   empresa cliente; a Central usa a paleta da Two One inteira.
   ===================================================================== */

:root{
  /* superficies escuras */
  --ink:#0a1118;
  --ink-2:#0e1826;
  --ink-3:#152438;
  --line:#22364e;
  --line-soft:#1a2a3d;
  --txt:#e8eef6;
  --txt-dim:#9fb0c4;

  /* superficies claras */
  --paper:#f2f5f8;
  --paper-2:#ffffff;
  --paper-line:#e2e8f0;
  --ink-txt:#1a2433;
  --ink-muted:#64748b;

  /* acentos */
  --accent:#1f7a68;
  --accent-soft:#e5f2ee;
  --accent-2:#c98a4b;
  --gold:#b8935a;
  --pos:#18815f;
  --neg:#c0392b;
  --neg-soft:#fdecec;

  /* marca Two One (usada como default de tenant) */
  --primaria:#0e1725;
  --secundaria:#5d878b;
  --sobre-primaria:#f4f1ef;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 3px rgba(10,20,35,.06), 0 10px 30px rgba(10,20,35,.06);
  --shadow-alto:0 18px 48px rgba(10,17,24,.28);

  --display:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--texto);
  font-size:15px;
  line-height:1.5;
  color:var(--ink-txt);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}

[hidden]{display:none!important}

/* ---------- superficie escura ---------- */
.escuro{background:var(--ink);color:var(--txt)}
.escuro .fraco{color:var(--txt-dim)}

/* ---------- campos ---------- */
label,.rotulo{
  display:block;font-family:var(--display);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-muted);
  margin:0 0 7px;
}
input,select,textarea{
  width:100%;font-family:var(--texto);font-size:15px;
  padding:11px 13px;border-radius:var(--radius-sm);
  border:1.5px solid var(--paper-line);background:var(--paper-2);color:var(--ink-txt);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#9aa8b8}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(31,122,104,.16);
}
input:disabled{background:#f7f9fb;color:var(--ink-muted);cursor:not-allowed}
.campo{margin-bottom:15px}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ajuda{font-size:12.5px;color:var(--ink-muted);margin:6px 0 0;line-height:1.45}

/* ---------- botoes ---------- */
button,.botao{
  font-family:var(--display);font-size:14px;font-weight:600;
  border:0;border-radius:var(--radius-sm);cursor:pointer;
  padding:11px 18px;transition:opacity .15s, background .15s;
  text-decoration:none;display:inline-block;white-space:nowrap;
}
.primario{background:var(--accent);color:#fff}
.primario:hover{background:#1a6a5a}
.secundario{background:transparent;color:var(--ink-txt);border:1.5px solid var(--paper-line);padding:9.5px 16px}
.secundario:hover{border-color:var(--ink-muted)}
.perigo{background:transparent;color:var(--neg);border:1.5px solid #e8c9c9;
        padding:7px 12px;font-size:13px}
.perigo:hover{background:var(--neg-soft)}
button:disabled{opacity:.5;cursor:default}
.escuro .secundario{color:var(--txt);border-color:var(--line)}
.escuro .secundario:hover{border-color:var(--txt-dim)}

/* ---------- cartoes e avisos ---------- */
.cartao{
  background:var(--paper-2);border:1px solid var(--paper-line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  /* A cor do texto e reafirmada de proposito: um cartao claro dentro de uma
     superficie escura herdaria o texto claro do body e ficaria ilegivel.
     Ja aconteceu com o titulo da tela de identificacao. */
  color:var(--ink-txt);
}
.cartao .suave, .cartao .sub{color:var(--ink-muted)}
.aviso{border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;line-height:1.45;margin:14px 0}
.aviso.erro{background:var(--neg-soft);color:#8d2020}
.aviso.ok{background:var(--accent-soft);color:var(--pos)}
.aviso.atencao{background:#fff8e8;color:#7a5a1e;border:1px solid #f0e0be}

/* ---------- tabela ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  font-family:var(--display);text-align:left;font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);
  padding:0 10px 9px;
}
td{padding:11px 10px;border-top:1px solid var(--paper-line);vertical-align:middle}
tbody tr:hover{background:#fafcfd}
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- etiquetas de papel ---------- */
.etiqueta{
  display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em;
}
.etiqueta.rh{background:var(--accent-soft);color:#1a6152}
.etiqueta.gestor{background:#f7efdf;color:#7a5a24}
.etiqueta.colaborador{background:#eef2f6;color:#4a5768}
.etiqueta.master{background:var(--ink-3);color:var(--txt)}

/* ---------- utilitarios ---------- */
.suave{color:var(--ink-muted)}
.mono{font-family:var(--mono)}
.vazio{text-align:center;color:var(--ink-muted);padding:30px 16px;font-size:14px;line-height:1.55}
.vazio strong{display:block;font-family:var(--display);color:var(--ink-txt);font-size:15px;margin-bottom:5px}

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