@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================================================================
   TUDOFIBRA – PALETA DE CORES
   Primário azul escuro : #0A2364  (rgba 10,35,100)
   Azul médio           : #1455C0
   Azul brilhante       : #2878F2
   Azul claro           : #5094FF
   Verde accent         : #4ADE80  / #1ebe5d
   Laranja destaque     : #FF6E28  / #E85A10
   Fundo claro          : #F4F8FF
   Texto escuro         : #0C1D3A
================================================================ */

:root {
  --tf-dark:    #0A2364;
  --tf-mid:     #1455C0;
  --tf-blue:    #2878F2;
  --tf-light:   #5094FF;
  --tf-green:   #4ADE80;
  --tf-green2:  #1ebe5d;
  --tf-orange:  #FF6E28;
  --tf-orange2: #E85A10;
  --tf-bg:      #F4F8FF;
  --tf-text:    #0C1D3A;
  --tf-border:  #D4E2F5;
}

/* ── BASE RESPONSIVE ── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--tf-bg);
  color: var(--tf-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Touch targets mínimos */
.touch-target { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }

/* ── HEADER ── */
header {
  background: var(--tf-dark) !important;
  box-shadow: 0 2px 16px rgba(10,35,100,.35) !important;
}
header h1, header p { color: #fff !important; }
#header-supervisor { color: #fff !important; }
#header-role { color: var(--tf-green) !important; }

/* Badge do supervisor no header */
header .flex.items-center.gap-2.bg-blue-50 {
  background: rgba(255,255,255,.10) !important;
  border-radius: 9999px;
}
header .w-6.h-6.bg-blue-600,
header .w-5.h-5.bg-blue-600 {
  background: var(--tf-blue) !important;
}

/* Botão logout */
header button[onclick="doLogout()"] {
  color: rgba(255,255,255,.55) !important;
}
header button[onclick="doLogout()"]:hover {
  color: var(--tf-orange) !important;
}

/* ── TABS NAV ── */
.tab-btn {
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  color: rgba(255,255,255,.55) !important;
  font-size: 12px;
}
@media (min-width: 640px) {
  .tab-btn { font-size: 14px; }
}
.tab-btn:hover { color: rgba(255,255,255,.9) !important; }
.tab-active {
  border-bottom-color: var(--tf-green) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Ocultar scrollbar das tabs */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── TELA DE LOGIN ── */
#screen-login {
  background: linear-gradient(135deg, var(--tf-dark) 0%, var(--tf-mid) 60%, var(--tf-blue) 100%) !important;
}

/* ── FUNDO GERAL ── */
main { background: var(--tf-bg); }

/* ── CARDS ── */
.card-hover {
  transition: box-shadow .2s, transform .2s;
  border: 1px solid var(--tf-border);
}
.card-hover:hover {
  box-shadow: 0 8px 28px rgba(20,85,192,.18);
  transform: translateY(-2px);
}

/* ── BADGES DE CLASSIFICAÇÃO ── */
.badge-otimo     { background:#dcfce7; color:#15803d; }
.badge-bom       { background:#dbeafe; color:var(--tf-mid); }
.badge-regular   { background:#fef3c7; color:#b45309; }
.badge-irregular { background:#fee2e2; color:#dc2626; }

/* ── SETOR PILL ── */
.setor-pill-tecnico     { background:#e8f0ff; color:var(--tf-mid); }
.setor-pill-atendimento { background:#dcfce7; color:#15803d; }
.setor-pill-qualidade   { background:#fdf2ff; color:#7e22ce; }

/* ── MODAL OVERLAY ── */
.modal-overlay { background: rgba(10,35,100,.6); }

/* ── MODAL HEADERS (azul escuro) ── */
.bg-blue-600 {
  background: linear-gradient(135deg, var(--tf-dark) 0%, var(--tf-mid) 100%) !important;
}
.bg-blue-600.text-white { color: #fff !important; }

/* ── BOTÕES PRIMÁRIOS ── */
button.bg-blue-600 {
  background: var(--tf-blue) !important;
  transition: background .15s;
}
button.bg-blue-600:hover {
  background: var(--tf-mid) !important;
}

/* Botão verde salvar avaliação */
button.bg-green-600 {
  background: var(--tf-green2) !important;
}
button.bg-green-600:hover, button.hover\:bg-green-700:hover {
  background: #159a49 !important;
}

/* ── FILTROS ATIVOS ── */
.filter-btn { transition: all .15s; }
.filter-active {
  background: var(--tf-blue) !important;
  color: #fff !important;
  border-color: var(--tf-blue) !important;
}

/* ── CAMPOS DE FORMULÁRIO ── */
.field-label { display:block; font-size:12px; font-weight:600; color:var(--tf-text); margin-bottom:4px; }
.field-input {
  width:100%; border:1px solid var(--tf-border); border-radius:8px;
  padding:10px 12px; font-size:14px;
  transition:border-color .15s, box-shadow .15s;
  background: #fff;
  -webkit-appearance: none;
}
.field-input:focus {
  outline:none;
  border-color: var(--tf-blue);
  box-shadow: 0 0 0 3px rgba(40,120,242,.12);
}
select.field-input { appearance: auto; -webkit-appearance: auto; }

/* ── RATING BUTTONS ── */
.rating-btn {
  border: 2px solid var(--tf-border);
  border-radius: 9999px;
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  color: #6b7280; cursor: pointer; transition: all .12s; background: white;
  touch-action: manipulation;
}
.rating-btn:hover { border-color: var(--tf-light); color: var(--tf-blue); }
.rating-btn.sel-otimo     { background: var(--tf-green2);  color:#fff; border-color: var(--tf-green2); }
.rating-btn.sel-bom       { background: var(--tf-blue);    color:#fff; border-color: var(--tf-blue); }
.rating-btn.sel-regular   { background: var(--tf-orange2); color:#fff; border-color: var(--tf-orange2); }
.rating-btn.sel-irregular { background: #dc2626;           color:#fff; border-color: #dc2626; }

/* ── BARRA DE PROGRESSO ── */
.progress-bar { transition: width .6s cubic-bezier(.4,0,.2,1); }

/* Barras de cor por classificação */
.bg-green-500  { background-color: var(--tf-green2) !important; }
.bg-blue-500   { background-color: var(--tf-blue) !important; }
.bg-orange-400 { background-color: var(--tf-orange) !important; }

/* ── BARRA DE PROGRESSO DO FORMULÁRIO ── */
#eval-prog-bar { background: var(--tf-green) !important; }

/* ── CARDS DE STATS ── */
.bg-blue-100   { background: rgba(40,120,242,.10) !important; }
.bg-green-100  { background: rgba(30,190,93,.12) !important; }
.bg-orange-100 { background: rgba(255,110,40,.12) !important; }
.text-blue-600  { color: var(--tf-blue) !important; }
.text-green-600 { color: var(--tf-green2) !important; }
.text-orange-500{ color: var(--tf-orange) !important; }
.text-green-700 { color: var(--tf-green2) !important; }
.text-blue-700  { color: var(--tf-mid) !important; }
.text-orange-700{ color: var(--tf-orange2) !important; }

/* ── SLIDE instrução ── */
#slide-prev, #slide-next {
  background: rgba(20,85,192,.08);
  color: var(--tf-mid);
}
#slide-prev:hover:not(:disabled), #slide-next:hover:not(:disabled) {
  background: var(--tf-blue) !important;
  color: #fff !important;
}
#slide-img {
  max-height: 65vh;
  object-fit: contain;
  border-radius: 12px;
}
@media (min-width: 768px) {
  #slide-img { max-height: 80vh; }
}

/* ── RANKING LEADERBOARD ── */
#ranking-geral [onclick*="openDetail"] {
  transition: transform .2s;
}
#ranking-geral [onclick*="openDetail"]:active {
  transform: scale(0.97) !important;
}

/* ── ANIMAÇÕES ── */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.fade-in { animation: fadeIn .3s ease; }

@keyframes bounce {
  0%   { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-7px) rotate(4deg); }
}

/* ── CHEVRON ── */
.chevron-open { transform: rotate(180deg); }
.chevron-icon { transition: transform .2s; }

/* ── SCROLLBAR PERSONALIZADA ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: var(--tf-bg); }
::-webkit-scrollbar-thumb { background: var(--tf-border); border-radius:9999px; }

/* ── FOCUS NOS INPUTS ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--tf-blue) !important;
  outline: none;
}

/* ── GRID RESPONSIVO COLABORADORES ── */
@media (max-width: 479px) {
  #grid-colaboradores,
  #grid-avaliacao-colab,
  #grid-supervisores {
    grid-template-columns: 1fr !important;
  }
}

/* ── MODAIS MOBILE (bottom sheet) ── */
@media (max-width: 639px) {
  .modal-overlay > div:not(.sm\:rounded-2xl) {
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    max-height: 95vh;
    overflow-y: auto;
  }
  /* Barra de arraste visual nos modais mobile */
  #modal-colab > div::before,
  #modal-stat > div::before,
  #modal-confirm > div::before,
  #modal-sup > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: #D1D5DB;
    border-radius: 2px;
    margin: 8px auto 4px;
  }
}

/* ── TOAST RESPONSIVO ── */
#toast-container {
  max-width: calc(100vw - 24px);
}
#toast-container > div {
  font-size: 13px;
  padding: 10px 16px;
}

/* ── HISTÓRICO – cards mobile ── */
@media (max-width: 639px) {
  #lista-historico > div {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── SLIDE instrução – swipe touch ── */
#slide-img {
  user-select: none;
  -webkit-user-drag: none;
}