* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* ══════════════════════════════
   CORES HINOTRACK
   Primary:   #0d3b8e (azul)
   Secondary: #5c1db5 (roxo)
   Dark:      #1a237e (azul escuro)
   Gradient:  linear-gradient(135deg, #0d3b8e, #5c1db5)
══════════════════════════════ */

body {
  background: linear-gradient(135deg, #0d3b8e, #5c1db5);
  min-height: 100vh;
}

.topo {
  background: none;
  padding: 16px;
  text-align: center;
}

.logo-container {
  width: 90px; height: 90px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,0.3);
}

.logo-icon { font-size: 44px; }
.logo-img { width: 70px; height: 70px; object-fit: contain; }

.brand-wrap { text-align: center; margin-bottom: 16px; }

.topo-slogan {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px;
}
.slogan-linha { color: #90caf9; font-weight: bold; }
.slogan-texto { color: white; font-weight: 500; letter-spacing: 0.5px; }

.container {
  width: 100%;
  min-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center;
  padding: 0 20px 30px; box-sizing: border-box;
}

/* ══ CARD BASE ══ */
.card {
  background: white;
  border-radius: 16px;
  width: 340px;
  box-shadow: 0 12px 32px rgba(13,59,142,0.25);
  box-sizing: border-box;
  overflow: hidden;
}

/* ══ CARD HEADER ══ */
.card-header {
  background: linear-gradient(90deg, #0d3b8e, #5c1db5);
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  border-radius: 12px 12px 0 0;
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.btn-voltar-header, .btn-add-header, .btn-salvar-header, .btn-refresh {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; color: white; font-weight: 300;
  user-select: none;
}
.btn-add-header { font-size: 24px; }
.btn-salvar-header { font-size: 18px; }
.btn-refresh { font-size: 17px; }
.btn-upload-header {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: white;
}
#btnUploadCaderno { display: none; } /* shown via JS for admin */

/* ══ INPUTS ══ */
input, select, textarea {
  width: 100%; padding: 10px 12px; margin: 8px 0;
  border: 1.5px solid #c5cae9; border-radius: 10px;
  font-size: 14px; outline: none; transition: border-color 0.2s;
  color: #1a237e;
}
input:focus, select:focus, textarea:focus { border-color: #5c1db5; }

/* ══ BUTTONS ══ */
button {
  width: 100%; padding: 11px; margin-top: 10px;
  border: none; border-radius: 10px;
  background: linear-gradient(90deg, #0d3b8e, #5c1db5);
  color: white; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: opacity 0.2s, transform 0.1s;
}
button:hover { opacity: 0.9; }
button:active { transform: scale(0.98); }

.btnLogout {
  margin-top: 18px; background: #c62828;
}
.btnLogout:hover { background: #b71c1c; }

/* ══ MENU ══ */
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu button { padding: 14px; font-size: 15px; }

/* ══ TOPO USER ══ */
.topo-user { text-align: right; font-size: 12px; margin-bottom: 10px; color: #7986cb; font-style: italic; }

/* ══ GRUPO CAMPO ══ */
.grupo-campo { display: flex; flex-direction: column; margin-bottom: 12px; }
.grupo-campo label { margin-bottom: 4px; font-weight: bold; font-size: 13px; color: #1a237e; }
.grupo-campo input, .grupo-campo select { margin: 0; }

/* ══ MENSAGENS ══ */
.mensagem { display: none; margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.mensagem.ativa { display: block; }
.mensagem.erro { background: #e8eaf6; color: #c62828; border: 1px solid #ef9a9a; }
.mensagem.sucesso { background: #e8eaf6; color: #1a237e; border: 1px solid #9fa8da; }

/* ══ LISTA CARDS ══ */
.lista-tarefas { display: flex; flex-direction: column; gap: 8px; }

.card-tarefa {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  background: #f3f4ff; border: 1px solid #c5cae9; min-height: 60px;
  cursor: pointer; transition: background 0.15s;
}
.card-tarefa:hover { background: #e8eaf6; }

.card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-id { font-size: 11px; color: #7986cb; }
.card-nome { font-size: 14px; font-weight: bold; color: #1a237e; }
.card-detalhes { font-size: 12px; color: #5c6bc0; }

.card-acoes { display: flex; gap: 6px; margin-left: 8px; }
.btn-acao { border:none; background:none; cursor:pointer; font-size:16px; padding:3px; width:auto; margin-top:0; }

/* ══ BADGE STATUS ══ */
.badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
}
.badge-ok { background: #e8f5e9; color: #2e7d32; }
.badge-warn { background: #fff8e1; color: #e65100; }
.badge-danger { background: #fce4ec; color: #c62828; }
.badge-info { background: #e8eaf6; color: #3949ab; }

/* ══ DASHBOARD ══ */
.dash-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.dash-kpi {
  background: #f3f4ff; border-radius: 12px; padding: 14px 10px;
  text-align: center; border-left: 4px solid #5c1db5;
}
.dash-kpi.verde { border-left-color: #2e7d32; }
.dash-kpi.laranja { border-left-color: #e65100; }
.dash-kpi-valor { font-size: 28px; font-weight: 800; color: #1a237e; }
.dash-kpi-label { font-size: 11px; color: #7986cb; margin-top: 2px; }

.dash-section { margin-bottom: 18px; }
.dash-section-title {
  font-size: 13px; font-weight: 700; color: #1a237e;
  margin-bottom: 10px; border-bottom: 1.5px solid #c5cae9; padding-bottom: 6px;
}
.dash-hino-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: #f3f4ff; border-radius: 8px; margin-bottom: 6px;
  border-left: 3px solid #5c1db5;
}
.dash-hino-nome { font-size: 13px; font-weight: 600; color: #1a237e; }
.dash-hino-info { font-size: 11px; color: #7986cb; }

/* ══ FORM ADICIONAR HINO AO CULTO ══ */
.form-adicionar {
  background: #f3f4ff; border-radius: 12px;
  padding: 14px; border: 1px solid #c5cae9;
}

/* ══ CONTAINER SCROLL ══ */
.container-lista {
  width: 100%; max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.container-lista::-webkit-scrollbar { width: 5px; }
.container-lista::-webkit-scrollbar-thumb { background: #9fa8da; border-radius: 10px; }

.loading-txt { text-align: center; color: #9fa8da; padding: 20px 0; font-size: 14px; }
.vazio-txt { text-align: center; color: #9fa8da; padding: 30px 0; font-size: 14px; }

/* ══ FOOTER ══ */
.footer-text { margin-top: 14px; font-size: 12px; color: #9fa8da; text-align: center; }