:root {
  --navy-dark: #071c36;
  --navy: #12467f;
  --navy-light: #1a5694;
  --orange: #f2701d;
  --orange-light: #fdede2;
  --orange-dark: #d95f10;
  --gray-bg: #f4f7fb;
  --text-dark: #0a1f3c;
  --text-muted: #64748b;
  --green: #1b6b43;
  --green-bg: #e7f5ec;
  --yellow: #8a6d00;
  --yellow-bg: #fdf3cf;
  --yellow-dark: #6b5400;
  --border: #e2e8f0;
  --white: #ffffff;
}

* { box-sizing: border-box; }

/* Trava o "elástico" horizontal do navegador mobile (puxar a tela pros
   lados faz o conteúdo deslizar e cortar a 1ª letra de cada linha) e
   impede qualquer scroll horizontal acidental na página inteira. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--gray-bg);
  color: var(--text-dark);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; }

.hub-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 40px rgba(7, 28, 54, 0.08);
}

@media (min-width: 900px) {
  .hub-shell {
    max-width: 1100px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
    box-shadow: 0 0 60px rgba(7, 28, 54, 0.12);
  }
  .hub-sidebar { display: flex !important; }
  .hub-bottomnav { display: none !important; }
  .hub-main-col { display: flex; flex-direction: column; min-height: 100vh; }
}

.hub-sidebar {
  display: none;
  flex-direction: column;
  background: var(--navy-dark);
  color: white;
  padding: 28px 20px;
}
.hub-sidebar .brand {
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--orange);
  margin-bottom: 28px;
}
.hub-sidebar nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  cursor: pointer;
}
.hub-sidebar nav a.active {
  background: var(--navy);
  color: white;
}
.hub-sidebar nav a:hover { color: white; }

/* Header */
.hub-header {
  background: var(--navy);
  color: white;
  padding: 20px 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hub-header .greeting { font-size: 18px; font-weight: 700; }
.hub-header .subtitle { font-size: 13px; color: #bcd3ee; margin-top: 2px; }
.hub-header .bell {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; position: relative;
  flex-shrink: 0;
}
.hub-header .bell .dot {
  position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--navy);
}
/* Pulso leve para chamar atenção quando há notificação não lida */
.hub-header .bell.has-unread {
  animation: bell-pulse 1.8s ease-in-out infinite;
}
@keyframes bell-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.hub-header.with-back { flex-direction: column; align-items: flex-start; gap: 4px; }
.hub-header .back-link { font-size: 13px; color: #bcd3ee; cursor: pointer; margin-bottom: 6px; }
.hub-header .header-top-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hub-header .page-title { font-size: 20px; font-weight: 800; }

.hub-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(24px + 70px + env(safe-area-inset-bottom));
  background: var(--gray-bg);
}
@media (min-width: 900px) {
  .hub-content { padding: 16px 16px 24px; }
}

/* Cards */
.card {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
}
.card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* Countdown ao vivo no card "Próximo Compromisso" (tela Início) */
.compromisso-countdown {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange-dark);
  margin-top: 6px;
}
.compromisso-countdown.em-andamento { color: var(--green); }
.compromisso-countdown:empty { display: none; }

.card-highlight {
  background: var(--orange-light);
  border: 1px solid #fbd8b8;
  border-left: 4px solid var(--orange);
}
.card-highlight .card-label { color: var(--orange-dark); }

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.pill-orange { background: var(--orange-light); color: var(--orange-dark); }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-gray { background: #eef1f5; color: var(--text-muted); }
.pill-red { background: #fce8e6; color: #b3261e; }

/* ---- Tags de Modalidade (aula) — cores fixas por modalidade, usadas tanto
   na Agenda do admin quanto na Agenda/Início do professor. ---- */
.tag-modalidade {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.tag-modalidade-natacao { background: #dbeafe; color: #1d4ed8; } /* azul */
.tag-modalidade-funcional { background: #ede9fe; color: #6d28d9; } /* lilás */
.tag-modalidade-musculacao { background: var(--orange-light); color: var(--orange-dark); } /* laranja */
.tag-modalidade-personal-soccer { background: #dcfce7; color: #15803d; } /* verde */
.tag-modalidade-personal-bike { background: #fef9c3; color: #a16207; } /* amarelo */
.tag-modalidade-hidroginastica { background: #cffafe; color: #0e7490; } /* ciano */

/* Tag do Tipo de Recreação (ex: Aniversário, Chá revelação...) — mesmo
   estilo das tags de Modalidade, em rosa fixo (mesmo tom do card de
   Recreação: #be185d), usada no lugar do nome da criança nos títulos. */
.tag-tipo-recreacao {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  background: #fce7f3;
  color: #be185d;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn-primary { background: var(--orange); color: white; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline { background: white; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: #f0f5fb; }
.btn-sm { padding: 9px 12px; font-size: 13px; width: auto; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.row-item:last-child { border-bottom: none; }
.row-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #eef4fb; display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* Bottom nav — sempre fixo no rodapé do viewport, respeitando a largura do hub-shell centralizado */
.hub-bottomnav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 60;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  border-top: 1px solid var(--border);
  background: white;
  padding: 8px 2px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(7, 28, 54, 0.06);
}
.hub-bottomnav .nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
}
.hub-bottomnav .nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hub-bottomnav .nav-item.active { color: var(--navy); }
.hub-bottomnav .nav-item .icon-box {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 12px;
}
.hub-bottomnav .nav-item .icon-box svg { width: 20px; height: 20px; stroke-width: 2.1; }
.hub-bottomnav .nav-item.active .icon-box svg { stroke: var(--navy); }

/* Em telas largas (desktop / sidebar visível) o bottomnav é escondido — não precisa ser fixo ali. */
@media (min-width: 900px) {
  .hub-bottomnav { position: static; transform: none; max-width: none; }
}

/* ---------------- Visualizador de PDF (overlay fullscreen) ---------------- */
.pdf-viewer-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: #1b2733;
  display: flex;
  flex-direction: column;
}
.pdf-viewer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top));
  background: var(--navy-dark);
  color: white;
  flex-shrink: 0;
}
.pdf-viewer-title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.pdf-viewer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.pdf-viewer-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.pdf-viewer-download:hover { background: var(--orange-dark); }
.pdf-viewer-close {
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: white;
  padding: 4px 6px;
}
.pdf-viewer-body {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  background: #525659;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pdf-viewer-page {
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  background: white;
  flex-shrink: 0;
}
.pdf-viewer-canvas {
  display: block;
}
/* A camada de texto (.textLayer) vem do pdf_viewer.min.css do PDF.js — aqui só garantimos
   que ela fique posicionada exatamente sobre o canvas para permitir seleção/cópia do texto. */
.pdf-viewer-page .textLayer {
  position: absolute;
  top: 0;
  left: 0;
}
.pdf-viewer-loading,
.pdf-viewer-error {
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: auto;
  padding: 24px;
}

/* Modules grid (Início / menu extra) */
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.module-card {
  background: white; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; cursor: pointer;
}
.module-card .emoji { font-size: 22px; margin-bottom: 8px; display: block; }
.module-card .title { font-weight: 700; font-size: 14px; }
.module-card .desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.module-card.accent { background: var(--navy-dark); color: white; }
.module-card.accent .desc { color: #bcd3ee; }
.module-card.orange { background: var(--orange); color: white; }
.module-card.orange .desc { color: #ffe3cc; }

/* progress bar */
.progress-track { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--orange); border-radius: 999px; transition: width .3s; }
.progress-fill.green { background: var(--green); }

/* checkbox item */
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: none; }
.check-circle {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; cursor: pointer;
}
.check-circle.done { background: var(--navy); border-color: var(--navy); color: white; }
.check-item.done .check-title { text-decoration: line-through; color: var(--text-muted); }

/* Login screen */
.login-screen {
  min-height: 100vh;
  background: var(--navy-dark);
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: white;
  border-radius: 18px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
}
.login-brand { color: var(--orange); font-weight: 800; letter-spacing: 2px; font-size: 12px; margin-bottom: 8px; }
.login-title { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.field { margin-bottom: 14px; min-width: 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dark); }
.field input {
  width: 100%; max-width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); font-size: 14px; box-sizing: border-box;
}
.field input:focus { outline: none; border-color: var(--navy); }
/* Proteção contra overflow do input nativo type="date" (renderização variável
   por navegador/idioma, ex.: "2 de set. de 2026" em pt-BR) dentro de qualquer
   container flex — sem isso, o flexbox usa min-width:auto e respeita a largura
   intrínseca do conteúdo, empurrando elementos vizinhos para fora da tela. */
.field input[type="date"] { min-width: 0; }

/* Campo de senha com botão "olho" para exibir/ocultar o valor digitado */
.password-input-wrapper { position: relative; }
.password-input-wrapper input { padding-right: 44px; width: 100%; box-sizing: border-box; }
.toggle-password {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  cursor: pointer; font-size: 17px; line-height: 1; user-select: none;
  color: var(--text-muted); background: none; border: none; padding: 4px;
}
.toggle-password:hover { color: var(--text-dark); }
.field-select, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); font-size: 14px;
  background: white; color: var(--text-dark); font-family: inherit;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a8c2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer;
}
.field-select:focus, .field select:focus { outline: none; border-color: var(--navy); }
table.data-table .field-select { padding: 8px 30px 8px 10px; font-size: 13px; }
.error-box { background: #fdecea; color: #c0392b; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }

.skeleton { background: linear-gradient(90deg,#e2e8f0 25%,#eef1f5 37%,#e2e8f0 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 6px; }
@keyframes sk { 0% {background-position: 100% 50%;} 100% {background-position: 0 50%;} }

.money-value { font-size: 26px; font-weight: 800; color: var(--navy); }
.money-value.masked { color: #b9c6d8; letter-spacing: 1px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty-state .emoji { font-size: 40px; margin-bottom: 10px; }

.guia-vencimento { font-weight: 800; font-size: 20px; color: var(--navy); line-height: 1.1; }
.guia-tipo { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 3px; }

a { color: inherit; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--navy-dark); color: white; padding: 12px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 600; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ---------------- Relatório de Presença (Aulas) — modais ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(7,28,54,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; padding: 16px;
  overflow: hidden;
}
.modal-box {
  background: white; border-radius: 16px; padding: 24px;
  width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  overflow-x: hidden;
}
.modal-box h3 { margin-top: 0; font-size: 17px; font-weight: 800; }
.modal-close { float: right; cursor: pointer; font-size: 20px; color: var(--text-muted); line-height: 1; }
.modal-subtitle { font-size: 13px; color: var(--text-muted); margin-top: -8px; margin-bottom: 16px; }

.presenca-turma-info { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.7; }
.presenca-turma-info strong { color: var(--text-dark); }

.presenca-aluno-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.presenca-aluno-row:last-child { border-bottom: none; }
.presenca-aluno-nome { font-weight: 600; font-size: 14px; flex: 1; }
.presenca-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); flex-shrink: 0; }
.presenca-toggle button {
  border: none; background: white; padding: 7px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; color: var(--text-muted); font-family: inherit;
}
.presenca-toggle button.ativo-presente { background: var(--green-bg); color: var(--green); }
.presenca-toggle button.ativo-faltou { background: #fce8e6; color: #b3261e; }

.presenca-obs-textarea, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 70px;
}
.presenca-obs-textarea:focus, .field textarea:focus { outline: none; border-color: var(--navy); }

.presenca-empty-alunos { text-align: center; padding: 24px 10px; color: var(--text-muted); font-size: 13px; }

.modalidade-opcao-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.modalidade-opcao {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid var(--border); cursor: pointer; font-size: 14px; font-weight: 600;
}
.modalidade-opcao.selecionada { border-color: var(--navy); background: #eef4fb; }
.modalidade-opcao input { margin: 0; accent-color: var(--navy); }

.relatorio-status-pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.relatorio-status-dado { background: var(--green-bg); color: var(--green); }
.relatorio-status-nao-dado { background: #fce8e6; color: #b3261e; }
/* Novos status do fluxo "Não vou dar aula" -> Remarcar/Feriado/Substituto */
.relatorio-status-remarcado-pendente { background: #fff4e0; color: #b25c00; }
.relatorio-status-remarcado { background: #eef4fb; color: var(--navy); }
.relatorio-status-feriado { background: #fdf1f6; color: #be185d; }
.relatorio-status-substituicao { background: #fff4e0; color: #b25c00; }
.relatorio-status-substituicao-aprovada { background: var(--green-bg); color: var(--green); }

/* ---------------- Recreação: card na "Minha Agenda" ---------------- */
/* Cor rosa/pink distinta das aulas (azul) e compromissos (verde) — mesmo
   tom usado no card/pill da Agenda do admin (#be185d), para reforçar a
   identificação visual em todo o sistema. O card é inteiramente clicável
   (abre o modal de detalhe completo) e usa sombra + seta ">" para deixar
   essa affordance óbvia mesmo para quem não está acostumado a "cards
   clicáveis" — feedback do próprio usuário. */
.recreacao-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fdf1f6;
  border: 1px solid #f7d1e3;
  border-left: 4px solid #be185d;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 1px 3px rgba(190, 24, 93, 0.08);
}
.recreacao-card:hover,
.recreacao-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(190, 24, 93, 0.18);
}
.recreacao-card-body { flex: 1; min-width: 0; }
.recreacao-card-hora { font-size: 13px; font-weight: 800; color: #be185d; }
.recreacao-card-titulo { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.recreacao-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
/* Seta ">" fixa à direita — mesmo padrão visual de "abrir tela"/"ver mais"
   usado em outras partes do Hub (ex: "Checklist relacionado ›"), garantindo
   que o card seja reconhecido como clicável de forma consistente. */
.recreacao-card-chevron {
  flex-shrink: 0; align-self: center; font-size: 20px; font-weight: 800;
  color: #be185d; opacity: .55; margin-left: 2px;
}

/* ---------------- Recreação: modal de detalhe completo ---------------- */
.recreacao-detalhe-linha {
  display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.recreacao-detalhe-linha:last-child { border-bottom: none; }
.recreacao-detalhe-linha .label { color: var(--text-muted); font-weight: 600; flex-shrink: 0; width: 128px; }
.recreacao-detalhe-linha .valor { color: var(--text-dark); font-weight: 600; flex: 1; min-width: 0; word-break: break-word; }

/* ---------------- Aula Experimental: card na "Minha Agenda" ---------------- */
/* Verde (tom #15803d/#dcfce7 — mesmo escolhido no painel do admin) para
   diferenciar visualmente das demais, conforme solicitado. Mesmo
   layout/affordance do card de Recreação (clicável, sombra, seta). */
.aula-experimental-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #dcfce7;
  border: 1px solid #b8ecc8;
  border-left: 4px solid #15803d;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 1px 3px rgba(21, 128, 61, 0.08);
}
.aula-experimental-card:hover,
.aula-experimental-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.18);
}
.aula-experimental-card-body { flex: 1; min-width: 0; }
.aula-experimental-card-hora { font-size: 13px; font-weight: 800; color: #15803d; }
.aula-experimental-card-titulo { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.aula-experimental-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.aula-experimental-card-chevron {
  flex-shrink: 0; align-self: center; font-size: 20px; font-weight: 800;
  color: #15803d; opacity: .55; margin-left: 2px;
}

.section-title { font-weight: 800; font-size: 14px; margin: 18px 0 8px; color: var(--text-dark); }

.doc-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 8px; background: #f8fafc;
}
.doc-item-icone { font-size: 20px; flex-shrink: 0; }
.doc-item-info { flex: 1; min-width: 0; }
.doc-item-nome { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item-tipo { font-size: 11px; color: var(--text-muted); }
.doc-item-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.mini-btn {
  padding: 6px 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border);
  background: white; cursor: pointer; font-weight: 600; color: var(--navy); font-family: inherit;
}
.mini-btn:hover { background: #f0f5fb; }

/* ================== Agenda do Professor: toggle Lista/Dia/Semana ==================
   Novas views (Dia/Semana) adicionadas sobre a Agenda existente — usa a mesma
   paleta navy/orange do restante do Hub (ver :root no topo deste arquivo) em
   vez de reaproveitar admin.css (não carregado nesta página). */
.agenda-prof-controls {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.agenda-prof-view-toggle {
  display: flex; border: 1.5px solid var(--navy); border-radius: 10px; overflow: hidden; align-self: flex-start;
}
.agenda-prof-toggle-btn {
  padding: 7px 16px; font-size: 13px; font-weight: 700; background: white; color: var(--navy);
  border: none; cursor: pointer; font-family: inherit;
}
.agenda-prof-toggle-btn.active { background: var(--navy); color: white; }
.agenda-prof-toggle-btn:hover:not(.active) { background: #eef4fb; }

.agenda-prof-nav {
  display: flex; align-items: center; gap: 10px;
}
.agenda-prof-nav-label { font-weight: 800; font-size: 13.5px; color: var(--navy); flex: 1; text-align: center; }
.agenda-prof-nav .mini-btn { flex-shrink: 0; }

/* ---- Visão "Dia": lista vertical compacta ---- */
.agenda-prof-dia-lista { display: flex; flex-direction: column; gap: 8px; }

/* ---- Visão "Semana": grade de 7 colunas, empilha em telas estreitas ---- */
.agenda-prof-semana-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.agenda-prof-dia-col {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px;
  min-height: 160px; display: flex; flex-direction: column; overflow: hidden;
}
.agenda-prof-dia-col.agenda-prof-dia-hoje { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.agenda-prof-dia-header {
  background: white; padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border);
}
.agenda-prof-dia-nome { display: block; font-size: 11px; font-weight: 800; color: var(--navy); letter-spacing: .5px; }
.agenda-prof-dia-data { display: block; font-size: 12px; color: var(--text-muted); }
.agenda-prof-dia-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.agenda-prof-dia-vazio { font-size: 11px; color: var(--text-muted); text-align: center; padding: 14px 4px; }

/* Card compacto genérico (aula/evento/compromisso legado) dentro das views
   Dia/Semana — Recreação e Aula Experimental continuam usando seus próprios
   cards coloridos (.recreacao-card / .aula-experimental-card, já existentes). */
.agenda-prof-card {
  border-radius: 8px; padding: 8px 10px; border-left: 4px solid var(--navy);
  background: #eef4fb;
}
.agenda-prof-card-hora { font-size: 11px; font-weight: 800; color: var(--navy); }
.agenda-prof-card-titulo { font-size: 12px; font-weight: 700; color: var(--text-dark); margin-top: 2px; line-height: 1.25; }
.agenda-prof-card-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 700px) {
  .agenda-prof-semana-grid { grid-template-columns: 1fr; }
  .agenda-prof-dia-col { min-height: 0; }
}