/* =============================================
   Shopping Men Salão — Grade Única
   Hora | Amilcar | Toninho
   ============================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #0f1623;
  color: #e2e8f0;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.header-salao {
  text-align: center;
  padding: 12px;
  background: linear-gradient(135deg, #0a0e1a, #151d2e);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-salao h1 { font-size: 1.15rem; font-weight: 700; }
.token-info {
  font-size: 0.75rem;
  color: #4ade80;
  margin-top: 4px;
}

/* Botões agendar */
.botoes-agendar {
  display: flex;
  gap: 6px;
  padding: 10px 8px;
}
.btn-agendar {
  flex: 1;
  padding: 11px 8px;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-amilcar { background: linear-gradient(135deg, #d4a017, #b8860b); }
.btn-toninho { background: linear-gradient(135deg, #2196F3, #1565C0); }
.btn-amilcar:active { background: #e8b830; }
.btn-toninho:active { background: #42a5f5; }

/* Seletor de data */
.seletor-data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.data-label { font-size: 1rem; font-weight: 600; min-width: 180px; text-align: center; }
.btn-data-nav {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #e2e8f0;
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   GRADE ÚNICA
   ============================================= */
.grade-container {
  overflow-x: auto;
  padding: 0 4px;
}
.grade {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}
.grade th {
  padding: 8px 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f1623;
}
.col-hora {
  width: 50px;
  color: #8892a8;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.col-amilcar {
  color: #e8b830;
  border-bottom-color: #d4a017 !important;
  background: rgba(212,160,23,0.05) !important;
}
.col-toninho {
  color: #42a5f5;
  border-bottom-color: #2196F3 !important;
  background: rgba(33,150,243,0.05) !important;
}

.grade td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  height: 38px;
  vertical-align: middle;
}
.grade tr:active td { background: rgba(255,255,255,0.04); }

/* Célula de hora */
.cel-hora {
  font-weight: 700;
  color: #556;
  font-size: 0.8rem;
  text-align: center;
}

/* Célula livre */
.cel-livre {
  color: rgba(255,255,255,0.12);
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem;
}
.cel-livre:active { background: rgba(255,255,255,0.06); }

/* Célula ocupada */
.cel-ocupado {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.cel-ocupado.cor-amilcar { color: #e8b830; border-left: 3px solid #d4a017; padding-left: 5px; }
.cel-ocupado.cor-toninho { color: #42a5f5; border-left: 3px solid #2196F3; padding-left: 5px; }

/* Célula almoço */
.cel-almoco {
  color: #444;
  font-size: 0.7rem;
  text-align: center;
  font-style: italic;
  background: rgba(255,255,255,0.02);
}

/* Célula folga (não trabalha) */
.cel-folga {
  color: #333;
  text-align: center;
  font-size: 0.7rem;
}

/* Célula passado */
.cel-passado { opacity: 0.25; cursor: default !important; }

/* Serviço inline */
.cel-servico {
  font-size: 0.6rem;
  color: #666;
  margin-left: 4px;
}

/* =============================================
   ADMIN - GERAR LINK
   ============================================= */
.area-admin {
  padding: 16px 8px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 8px;
}
.btn-gerar-link {
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: transparent;
  color: #8892a8;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-gerar-link:active { background: rgba(255,255,255,0.06); }
.link-gerado {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 0.8rem;
  word-break: break-all;
}
.link-gerado a { color: #4ade80; }
.link-gerado .link-tempo { color: #8892a8; font-size: 0.72rem; display: block; margin-top: 4px; }

/* =============================================
   MODAIS
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 12px;
}
.modal-box {
  background: linear-gradient(135deg, #151d2e, #1a2236);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; text-align: center; }
.modal-campo { margin-bottom: 12px; }
.modal-campo label { display: block; font-size: 0.72rem; color: #8892a8; text-transform: uppercase; margin-bottom: 5px; }
.modal-campo input {
  width: 100%;
  padding: 11px 10px;
  font-size: 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #e2e8f0;
  outline: none;
}
.modal-campo input:focus { border-color: #7b2cbf; }

.grid-horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.btn-hora {
  padding: 9px 2px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
}
.btn-hora.selected { border-color: #d4a017; background: rgba(212,160,23,0.2); color: #e8b830; font-weight: 700; }
.btn-hora.selected.toninho-sel { border-color: #2196F3; background: rgba(33,150,243,0.2); color: #42a5f5; }
.btn-hora.ocupado { opacity: 0.2; cursor: not-allowed; text-decoration: line-through; }

.servico-opcoes { display: flex; gap: 5px; }
.btn-servico {
  flex: 1;
  padding: 9px 4px;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn-servico.selected { border-color: #d4a017; background: rgba(212,160,23,0.12); color: #e8b830; }

.modal-botoes { display: flex; gap: 8px; margin-top: 14px; }
.btn-cancelar-modal {
  flex: 1; padding: 11px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; background: transparent; color: #8892a8; font-size: 0.9rem; cursor: pointer;
}
.btn-confirmar-modal {
  flex: 1; padding: 11px; border: none; border-radius: 8px;
  font-size: 0.9rem; font-weight: 700; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #d4a017, #b8860b);
}
.btn-confirmar-modal.cor-toninho { background: linear-gradient(135deg, #2196F3, #1565C0); }
.btn-excluir-modal {
  flex: 1; padding: 11px; border: none; border-radius: 8px;
  background: #dc2626; color: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}

#detalhe-conteudo { line-height: 2; font-size: 0.9rem; }
#detalhe-conteudo strong { color: #e8b830; }

.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile: grid 3 cols no modal */
@media (max-width: 360px) {
  .grid-horarios { grid-template-columns: repeat(3, 1fr); }
}