:root {
  --laranja:       #8B0000;
  --laranja-esc:   #6B0000;
  --laranja-cl:    #f9e8e8;
  --laranja-med:   #f0c0c0;
  --branco:        #ffffff;
  --cinza-900:     #1a1a1a;
  --cinza-700:     #3d3d3d;
  --cinza-500:     #6b6b6b;
  --cinza-300:     #b0b0b0;
  --cinza-100:     #f5f5f5;
  --verde:         #16a34a;
  --verde-cl:      #dcfce7;
  --vermelho:      #dc2626;
  --vermelho-cl:   #fee2e2;
  --amarelo:       #d97706;
  --amarelo-cl:    #fef3c7;
  --borda:         #e0d8d4;
  --raio:          8px;
  --sombra:        0 1px 4px rgba(232,88,23,.12);
  --fonte:         -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);color:var(--cinza-900);background:#faf6f3;line-height:1.6}
a{color:var(--laranja);text-decoration:none}
a:hover{text-decoration:underline}

/* Navbar */
.navbar{display:flex;align-items:center;gap:1rem;background:var(--laranja);color:#fff;padding:.75rem 1.25rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(139,0,0,.3)}
.navbar-brand{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-.5px}
.brand-tp{color:#fff}.brand-prev{color:rgba(255,255,255,.75)}
.navbar-empresa{flex:1;font-size:.85rem;color:rgba(255,255,255,.8)}
.navbar-user{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:#fff}
.btn-logout{color:rgba(255,255,255,.75);font-size:1.1rem;transition:color .15s}
.btn-logout:hover{color:#fff;text-decoration:none}

/* Hamburger — escondido no desktop, visível em mobile */
.navbar-hamburger{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;padding:.3rem .5rem;line-height:1;flex-shrink:0;touch-action:manipulation}

/* Overlay do sidebar */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500}
.sidebar-overlay.sidebar-overlay-open{display:block}

/* Sidebar */
.sidebar{width:220px;background:var(--branco);border-right:1px solid var(--borda);position:fixed;top:50px;left:0;bottom:0;overflow-y:auto;padding:1rem 0}
.sidebar-menu{list-style:none}
.sidebar-link{display:block;padding:.6rem 1.25rem;color:var(--cinza-700);border-left:3px solid transparent;transition:background .12s,color .12s}
.sidebar-link:hover{background:var(--laranja-cl);color:var(--laranja-esc);text-decoration:none}
.sidebar-link.active{border-left-color:var(--laranja);color:var(--laranja);background:var(--laranja-cl);font-weight:500}

/* Main */
.main-content{margin-left:220px;padding:1.5rem;min-height:calc(100vh - 100px);padding-bottom:3rem}
.page-title{font-size:1.4rem;font-weight:700;margin-bottom:1.25rem;color:var(--cinza-900)}

/* Botoes */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--raio);font-size:.9rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:opacity .15s,background .15s;text-decoration:none}
.btn:hover{opacity:.88;text-decoration:none}
.btn-primario{background:var(--laranja);color:#fff}
.btn-primario:hover{background:var(--laranja-esc);opacity:1}
.btn-secundario{background:var(--branco);color:var(--cinza-700);border-color:var(--borda)}
.btn-perigo{background:var(--vermelho);color:#fff}
.btn-block{display:block;width:100%;justify-content:center}
.btn-grande{padding:.9rem 1.5rem;font-size:1.05rem}

/* Formularios */
.formulario{max-width:520px}
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.85rem;font-weight:500;color:var(--cinza-700);margin-bottom:.3rem}
.campo input,.campo select,.campo textarea{width:100%;padding:.55rem .8rem;border:1px solid var(--borda);border-radius:var(--raio);font-size:.95rem;font-family:var(--fonte);background:var(--branco);color:var(--cinza-900);transition:border-color .15s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(139,0,0,.12)}
.campo small{font-size:.8rem;color:var(--cinza-300);margin-top:.25rem;display:block}
.campo-grupo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo-acoes{display:flex;gap:.75rem;margin-top:1.25rem}

/* Alertas */
.alerta{padding:.75rem 1rem;border-radius:var(--raio);margin-bottom:1rem;font-size:.9rem}
.alerta-ok    {background:var(--verde-cl);  color:#14532d;border-left:3px solid var(--verde)}
.alerta-erro  {background:var(--vermelho-cl);color:#7f1d1d;border-left:3px solid var(--vermelho)}
.alerta-aviso {background:var(--amarelo-cl);color:#78350f;border-left:3px solid var(--amarelo)}
.alerta-perigo{background:var(--vermelho-cl);color:#7f1d1d;border-left:3px solid var(--vermelho);font-weight:600}

/* Tabela */
.tabela{width:100%;border-collapse:collapse;background:var(--branco);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.tabela th{background:var(--laranja);color:#fff;font-weight:600;font-size:.85rem;padding:.65rem .9rem;text-align:left}
.tabela td{padding:.65rem .9rem;border-top:1px solid var(--borda);font-size:.9rem}
.tabela tr:hover td{background:var(--laranja-cl)}

/* Badges */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.78rem;font-weight:600}
.badge-laranja {background:var(--laranja-cl); color:var(--laranja-esc)}
.badge-verde   {background:var(--verde-cl);   color:#14532d}
.badge-cinza   {background:var(--cinza-100);  color:var(--cinza-700)}
.badge-amarelo {background:var(--amarelo-cl); color:#78350f}
.badge-azul    {background:#eff6ff;           color:#1e40af}

/* Dashboard stats */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--branco);border-radius:var(--raio);padding:1.1rem;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.25rem;border-top:3px solid var(--laranja-med)}
.stat-conducao{border-top-color:var(--laranja)}
.stat-repouso {border-top-color:var(--verde)}
.stat-pausa   {border-top-color:var(--cinza-300)}
.stat-label{font-size:.78rem;color:var(--cinza-500);text-transform:uppercase;letter-spacing:.03em}
.stat-valor{font-size:1.9rem;font-weight:700;color:var(--laranja-esc);line-height:1}
.stat-conducao .stat-valor{color:var(--laranja)}
.stat-repouso  .stat-valor{color:var(--verde)}
.stat-pausa    .stat-valor{color:var(--cinza-700)}
.stat-limite{font-size:.8rem;color:var(--cinza-300)}
.alerta-num{color:var(--vermelho)!important}
.acoes-rapidas{margin-top:1.5rem}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--laranja) 0%,var(--laranja-esc) 100%)}
.login-card{background:var(--branco);border-radius:16px;padding:2.25rem;width:100%;max-width:380px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.login-logo{text-align:center;margin-bottom:1.75rem}
.login-logo .brand-tp  {font-size:2.2rem;font-weight:800;color:var(--laranja-esc)}
.login-logo .brand-prev{font-size:2.2rem;font-weight:800;color:var(--laranja)}
.login-logo small{display:block;font-size:.8rem;color:var(--cinza-300);margin-top:.3rem}
.login-rodape{text-align:center;margin-top:1rem;font-size:.85rem;color:var(--cinza-300)}

/* Misc */
.secao{margin-top:2rem}
.secao h2{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}
.filtros{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.filtros-form{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.texto-center{text-align:center}
.texto-muted{color:var(--cinza-300)}
.painel-adicionar{margin-bottom:1.25rem}
.painel-adicionar>summary{list-style:none;cursor:pointer}
.relatorios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.relatorio-card{background:var(--branco);border-radius:var(--raio);padding:1.25rem;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--borda);border-left:3px solid var(--laranja);transition:box-shadow .15s}
.relatorio-card:hover{box-shadow:0 4px 12px rgba(232,88,23,.2);text-decoration:none}
.relatorio-titulo{font-weight:600;color:var(--laranja-esc)}
.relatorio-desc{font-size:.85rem;color:var(--cinza-500)}
.exportar-bloco{margin-top:1.5rem}
.exportar-bloco h2{font-size:1rem;margin-bottom:.75rem}
.rodape{text-align:center;font-size:.8rem;color:var(--cinza-300);padding:.75rem;border-top:1px solid var(--borda);background:var(--branco);position:fixed;bottom:0;left:0;right:0;z-index:50}

/* ── Responsivo (640px) ─────────────────────────────────── */
@media(max-width:640px){
  .main-content{margin-left:0;padding:1rem}
  .campo-grupo{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:1fr 1fr}
}

/* ── Responsivo mobile (768px) — sidebar como gaveta ────── */
@media(max-width:768px){
  /* Mostrar hamburger */
  .navbar-hamburger{display:block}

  /* Sidebar: esconder fora do ecrã (esquerda), pronto para deslizar */
  .sidebar{
    left:-280px;
    width:260px;
    transition:left .28s ease;
    box-shadow:none;
    top:0;
    z-index:9999;
  }
  /* Quando aberta: desliza para dentro */
  .sidebar.sidebar-open{
    left:0;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
  }

  /* Conteúdo sem margem lateral */
  .main-content{
    margin-left:0 !important;
    padding-bottom:5rem !important;
  }
  .rodape{display:none}
}

/* ── Iniciar / Terminar actividade ───────────────────────── */
.em-curso-card {
  background: var(--branco);
  border-radius: var(--raio);
  border: 2px solid var(--laranja);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.em-curso-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.em-curso-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--laranja);
}
.em-curso-inicio {
  font-size: .9rem;
  color: var(--cinza-700);
  margin-bottom: .5rem;
}
.em-curso-timer {
  font-size: 3rem;
  font-weight: 700;
  color: var(--laranja-esc);
  letter-spacing: .05em;
  line-height: 1;
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.iniciar-card {
  background: var(--branco);
  border-radius: var(--raio);
  border: 0.5px solid var(--borda);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.iniciar-instrucao {
  font-size: .9rem;
  color: var(--cinza-700);
  margin-bottom: 1rem;
}
.em-curso-pill {
  display: inline-block;
  background: var(--laranja-cl);
  color: var(--laranja-esc);
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 20px;
}

/* ── Logo ────────────────────────────────────────────────── */
.navbar-logo {
  height: 48px;
  width: auto;
  display: block;
}
.login-logo-img {
  height: 130px;
  width: auto;
  display: block;
  margin: 0 auto 8px;
}

/* ── Viatura card ────────────────────────────────────────── */
.viatura-card {
  background: var(--branco);
  border-radius: var(--raio);
  border: 0.5px solid var(--borda);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.viatura-header {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.viatura-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cinza-500);
}

/* ── Botão sair empresa ──────────────────────────────────── */
.btn-sair-empresa {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--raio);
  padding: .3rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.btn-sair-empresa:hover {
  background: rgba(255,255,255,.35);
  text-decoration: none;
  color: #fff;
}

/* ── Botões tacógrafo ────────────────────────────────────── */
.taco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .75rem;
}
.taco-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .65rem .5rem;
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  color: var(--cinza-600);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}
.taco-btn svg {
  width: 32px;
  height: 32px;
}
.taco-btn:hover {
  border-color: var(--laranja);
  color: var(--laranja);
  background: var(--laranja-claro, #fff5f0);
}
.taco-btn-activo {
  border-color: var(--laranja) !important;
  background: var(--laranja) !important;
  color: #fff !important;
}
@media (max-width: 480px) {
  .taco-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Turno card ──────────────────────────────────────────── */
.turno-card {
  background: var(--branco);
  border-radius: var(--raio);
  border: 0.5px solid var(--borda);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.turno-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.turno-data {
  font-size: .85rem;
  font-weight: 600;
  color: var(--cinza-700);
}

/* ── Estado do turno ─────────────────────────────────────── */
.turno-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--raio);
  margin-bottom: 1rem;
  border: 1px solid var(--borda);
}
.turno-status-info {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.turno-status-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.turno-status-info div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.turno-status-info strong {
  font-size: .9rem;
  color: var(--cinza-900);
}
.turno-status-info span {
  font-size: .8rem;
  color: var(--cinza-500);
}
.turno-status-fechado {
  background: #fffbeb;
  border-color: #f59e0b;
}
.turno-status-aberto {
  background: #f0fdf4;
  border-color: #22c55e;
}
.turno-status-ok {
  background: #f0fdf4;
  border-color: #22c55e;
}

/* ── Navegação mobile (motorista) ────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--branco);
  border-top: 1px solid var(--borda);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem 0;
  color: var(--cinza-500);
  text-decoration: none;
  font-size: .7rem;
  font-weight: 500;
  flex: 1;
}
.mobile-nav-item svg {
  width: 22px;
  height: 22px;
}
.mobile-nav-item:hover, .mobile-nav-item.activo {
  color: var(--laranja);
}
@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
}