:root {
  --azul: #0F1B3D;
  --azul-claro: #4F46E5;
  --destaque: #F7194B;
  --verde: #25d366;
  --fundo: #F8F9FC;
  --borda: #E2E5EC;
  --texto-suave: #697386;
  --primary: #4F46E5;
  --primary-dark: #3730A3;
  --sidebar-bg: #0F1B3D;
  --surface: #FFFFFF;
  --shadow-soft: 0 4px 24px rgba(15, 27, 61, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fundo);
  color: var(--azul);
}

.topo {
  background: var(--azul);
  color: white;
  padding: 28px 16px;
  text-align: center;
  position: relative;
}
.topo h1 { margin: 0 0 6px; font-size: 1.6rem; }
.topo p { margin: 0; color: #c7c9d9; font-size: 0.95rem; }
.nav-topo { margin-top: 10px; }
.nav-topo a {
  color: #c7c9d9;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid #44456a;
  padding: 6px 12px;
  border-radius: 20px;
}
.nav-topo a:hover { color: white; border-color: white; }

.nav-abas {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.nav-abas .aba {
  color: #c7c9d9;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #44456a;
  padding: 8px 16px;
  border-radius: 20px;
}
.nav-abas .aba:hover { color: white; border-color: white; }
.nav-abas .aba.ativa {
  background: white;
  color: var(--azul);
  border-color: white;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.layout-admin {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 60px;
  gap: 20px;
  align-items: flex-start;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}
.sidebar-item {
  text-align: left;
  background: white;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
}
.sidebar-item:hover { border-color: var(--azul-claro); }
.sidebar-item.ativo {
  background: var(--azul);
  color: white;
  border-color: var(--azul);
}
.conteudo-admin { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .layout-admin { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; position: static; }
  .sidebar-item { flex: 1; text-align: center; }
}

.editavel {
  border: none;
  border-bottom: 1px dashed var(--borda);
  background: transparent;
  padding: 4px 2px;
  font-size: 0.85rem;
  width: 100%;
}
.editavel:focus { outline: none; border-bottom-color: var(--azul-claro); }
select.editavel { border: 1px solid var(--borda); border-radius: 6px; padding: 4px 6px; }

.cartao {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.cartao h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--azul-claro);
}

label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }

select, input[type="text"], input[type="tel"], input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  font-size: 1rem;
  background: white;
}

.lista-epis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.epi-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}
.epi-item:hover { border-color: var(--azul-claro); }
.epi-item small { color: var(--texto-suave); }

.tabela-itens-epi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.linha-item-epi {
  display: grid;
  grid-template-columns: 2fr 1fr 80px 32px;
  gap: 8px;
  align-items: center;
}
.linha-item-epi.cabecalho {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 0 2px;
}
.linha-item-epi input[type="text"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  font-size: 0.95rem;
}
.linha-item-epi input[type="checkbox"] {
  width: 18px;
  height: 18px;
  justify-self: center;
}
.btn-remover-item {
  background: none;
  border: none;
  color: var(--destaque);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

.ajuda { color: var(--texto-suave); font-size: 0.88rem; margin-top: 8px; }

#signature-pad {
  width: 100%;
  height: 180px;
  border: 2px dashed var(--borda);
  border-radius: 10px;
  touch-action: none;
  background: #fbfbfd;
}

.acoes-assinatura {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.status-geo { font-size: 0.85rem; color: var(--texto-suave); }

.botao {
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.botao.primario {
  width: 100%;
  background: var(--destaque);
  color: white;
  padding: 15px;
  font-size: 1.05rem;
}
.botao.primario:disabled { opacity: 0.6; cursor: not-allowed; }
.botao.secundario {
  background: white;
  border: 1px solid var(--borda);
  color: var(--azul);
}
.botao.whatsapp {
  width: 100%;
  background: var(--verde);
  color: white;
  padding: 14px;
  margin-top: 10px;
}
.botao.cancelar {
  width: 100%;
  background: white;
  border: 1px solid var(--destaque);
  color: var(--destaque);
  margin-top: 10px;
}
.botao.cancelar:hover { background: #fef2f4; }
.botao-pequeno {
  width: auto !important;
  font-size: 0.78rem !important;
  padding: 5px 10px !important;
  margin-top: 8px !important;
}

.resultado {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.resultado:not(:empty) {
  background: #e9f9ef;
  border: 1px solid #b7ecc8;
}
.resultado code {
  word-break: break-all;
  font-size: 0.78rem;
}

.resultado-link { border-color: #b7ecc8; background: #f4fbf6; }
.campo-link {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.campo-link input {
  flex: 1;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* Etapas da página de assinatura */
.etapa {
  opacity: 0.4;
  pointer-events: none;
}
.etapa.ativa {
  opacity: 1;
  pointer-events: auto;
}
.etapa.concluida {
  opacity: 0.7;
}
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.pendente { background: #fff3cd; color: #856404; }
.badge.assinada { background: #d4edda; color: #155724; }
.badge.ok { background: #d4edda; color: #155724; }
.badge.cancelada { background: #f8d7da; color: #721c24; }

.link-nome {
  background: none;
  border: none;
  color: var(--azul-claro);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.link-nome:hover { color: var(--destaque); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal-conteudo {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
}

/* Área administrativa */
.tabela-funcionarios { width: 100%; border-collapse: collapse; }
.tabela-funcionarios th, .tabela-funcionarios td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--borda);
  font-size: 0.9rem;
}
.linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.linha-acoes button {
  font-size: 0.8rem;
  padding: 6px 10px;
}
.filtros-historico {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.filtros-historico label {
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.filtros-historico input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  font-size: 0.88rem;
}
@media (max-width: 480px) {
  .filtros-historico { grid-template-columns: 1fr; }
}
.historico-item {
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.88rem;
}
.historico-item a { color: var(--azul-claro); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.texto-termo {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #333;
  max-height: 260px;
  overflow-y: auto;
  padding: 12px;
  background: #fafafa;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.texto-termo p { margin: 0 0 10px; }

.badge.termo { background: #e0e7ff; color: #3730a3; }
.badge.entrega { background: #dbeafe; color: #1e40af; }

.identificadores {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda);
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.identificadores div { margin-bottom: 2px; }

.aceite-termo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}
.aceite-termo input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.aceite-termo input[type="checkbox"]:disabled + span {
  color: var(--texto-suave);
  font-weight: 400;
}

.rodape {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.8rem;
  padding: 20px;
}

/* ============================================================
   NOVO SHELL — Sidebar + Topbar + Tabs + Card em 2 colunas
   Usado por index.html e admin.html (não afeta assinar.html)
   ============================================================ */

* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* ---- Sidebar ---- */
.sidebar-nova {
  width: 270px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: #c7c9d9;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 0 8px;
}
.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.brand-icon svg { width: 20px; height: 20px; }
.brand-name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.brand-name strong { color: #8b93ff; }

.sidebar-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7492;
  margin: 18px 8px 8px;
  font-weight: 700;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #c7c9d9;
  text-decoration: none;
  padding: 12px 12px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 2px;
  font-family: inherit;
}
.sidebar-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar-link.ativo { background: var(--primary); color: #fff; font-weight: 600; }
.sidebar-link svg { width: 19px; height: 19px; flex-shrink: 0; }

.sidebar-footer-card {
  margin-top: auto;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px;
}
.sidebar-footer-card svg { color: #8b93ff; width: 20px; height: 20px; margin-bottom: 8px; }
.sidebar-footer-card strong { display: block; color: #fff; font-size: 0.92rem; margin-bottom: 6px; }
.sidebar-footer-card p { font-size: 0.84rem; color: #9aa1c2; margin: 0; line-height: 1.45; }

/* ---- Área principal ---- */
.main-area {
  flex: 1;
  min-width: 0;
  padding: 28px 36px 60px;
  box-sizing: border-box;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}
.topbar-title { display: flex; align-items: center; gap: 14px; }
.title-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eceafd;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.title-icon svg { width: 24px; height: 24px; }
.topbar h1 { margin: 0; font-size: 1.85rem; font-weight: 700; color: var(--text, var(--azul)); }
.topbar p { margin: 2px 0 0; color: var(--texto-suave); font-size: 1rem; }

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--azul);
  flex-shrink: 0;
}
.user-menu svg { width: 17px; height: 17px; }

.tabs-nav { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.tab-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border: 1px solid var(--borda);
  background: var(--surface);
  color: var(--azul);
}
.tab-link svg { width: 17px; height: 17px; }
.tab-link.ativa { background: var(--primary); border-color: var(--primary); color: #fff; }
.tab-link:not(.ativa):hover { border-color: var(--primary); }

/* ---- Card principal (2 colunas) ---- */
.card-principal {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--borda);
  display: flex;
  overflow: hidden;
  margin-bottom: 20px;
}
.card-info-lateral {
  width: 250px;
  flex-shrink: 0;
  background: #fafbff;
  border-right: 1px solid var(--borda);
  padding: 36px 26px;
}
.card-info-lateral .icone-grande {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #eceafd;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card-info-lateral .icone-grande svg { width: 24px; height: 24px; }
.card-info-lateral h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--azul); }
.card-info-lateral p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; line-height: 1.55; }

.card-conteudo { flex: 1; padding: 36px 40px; min-width: 0; box-sizing: border-box; }
.card-conteudo > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin: 0 0 26px;
  color: var(--azul);
}
.card-conteudo > h2 svg { width: 22px; height: 22px; color: var(--primary); }

@media (max-width: 900px) {
  .card-principal { flex-direction: column; }
  .card-info-lateral { width: 100%; border-right: none; border-bottom: 1px solid var(--borda); padding: 24px; }
  .card-conteudo { padding: 24px; }
}

/* ---- Inputs com ícone ---- */
.campo-icone { position: relative; }
.campo-icone svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.campo-icone input { padding-left: 42px !important; }

.main-area label { font-size: 0.95rem; }

.main-area input[type="text"],
.main-area input[type="email"],
.main-area input[type="tel"],
.main-area input[type="date"],
.main-area select {
  height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--borda);
  padding: 0 16px;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.main-area input:focus,
.main-area select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.main-area .botao.primario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
}
.main-area .botao.primario svg { width: 19px; height: 19px; }
.main-area .ajuda { font-size: 0.94rem; }

.rodape-app {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.8rem;
  padding: 24px;
}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar-nova {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
  }
  .sidebar-brand { margin-bottom: 0; margin-right: auto; }
  .sidebar-label { display: none; }
  .sidebar-link { width: auto; padding: 8px 12px; }
  .sidebar-footer-card { display: none; }
  .main-area { padding: 20px 16px 50px; }
}