/* ===========================================================================
   Gestão de Salas — Anhanguera
   Tema preto com degradê laranja da marca.

   O sistema tem quatro seções que se encadeiam: catálogo (o que existe),
   reservas (quem usa o quê), grade (a divisão do dia) e avaliações (como
   estava). A identidade visual segue esse encadeamento — o laranja marca o
   caminho ativo, o preto sustenta a leitura longa de tabelas e checklists.
   =========================================================================== */
:root {
  --laranja-0: #ffb066;
  --laranja-1: #ff8a3d;
  --laranja-2: #f6600f;
  --laranja-3: #d94505;
  --grad-laranja: linear-gradient(135deg, #ff9d4d 0%, #f6600f 45%, #d63e05 100%);
  --grad-laranja-suave: linear-gradient(135deg, rgba(255,138,61,.16), rgba(214,62,5,.10));
  --grad-laranja-linha: linear-gradient(90deg, #ff9d4d, #f6600f 55%, #d63e05);

  --bg-0: #08080b;
  --bg-1: #121216;
  --bg-2: #1b1b22;
  --bg-3: #23232c;
  --card: #141419;
  --card-borda: #26262f;
  --card-borda-hover: #3a3a45;

  --txt-1: #f4f4f6;
  --txt-2: #b8b8c2;
  --txt-3: #7c7c88;

  --ok: #34d399;
  --erro: #f87171;
  --aviso: #fbbf24;
  --info: #60a5fa;

  /* Escala tipográfica (rem sobre base 16px) — hierarquia previsível. */
  --fs-xs:   .75rem;    /* 12px — labels, badges, metadados */
  --fs-sm:   .8125rem;  /* 13px — texto de apoio */
  --fs-base: .9375rem;  /* 15px — corpo padrão */
  --fs-md:   1rem;      /* 16px — corpo em campos (evita zoom no iOS) */
  --fs-lg:   1.125rem;  /* 18px — subtítulos */
  --fs-xl:   1.375rem;  /* 22px — títulos de card/login */
  --fs-2xl:  1.625rem;  /* 26px — título de página */
  --fs-3xl:  2rem;      /* 32px — números de destaque */

  /* Espaçamento em ritmo de 4px — usado em gaps e paddings novos. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --raio: 16px;
  --raio-sm: 10px;
  --raio-xs: 8px;
  --raio-pill: 999px;

  /* Escala de elevação consistente (sombras) — do card ao popover. */
  --elev-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --elev-2: 0 10px 40px rgba(0,0,0,.45);
  --elev-3: 0 20px 48px -16px rgba(0,0,0,.7), 0 6px 16px -8px rgba(0,0,0,.5);
  --sombra: var(--elev-2);           /* compat: valor histórico preservado */
  --sombra-laranja: 0 8px 30px rgba(246,96,15,.28);

  /* Anel de foco acessível (WCAG) — mesmo look em toda a interface. */
  --anel-foco: 0 0 0 3px rgba(246,96,15,.45);
  --anel-foco-escuro: 0 0 0 3px rgba(246,96,15,.18);

  /* Camadas (z-index) — escala única para toda a interface. */
  --z-base: 1;  --z-sticky: 50;  --z-drawer: 90;  --z-pop: 120;  --z-modal: 1000;

  --transicao: .18s ease;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte);
  color: var(--txt-1);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(246,96,15,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(214,62,5,.10), transparent 55%),
    var(--bg-0);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;   /* mobile: desconta as barras do navegador */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

a { color: var(--laranja-1); text-decoration: none; }
a:hover { color: var(--laranja-2); }

/* ---------- Acessibilidade global ----------
   Foco visível e uniforme em TODO elemento interativo (WCAG 2.4.7). O padrão
   do navegador some ao clicar com o mouse (:focus-visible), mas volta forte
   para quem navega por teclado — sem poluir o clique. */
:where(a, button, [role="button"], [role="menuitem"], input, select, textarea,
       summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: var(--raio-xs);
}
/* Campos já têm borda laranja no foco: some o anel padrão duplicado. */
input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius: var(--raio-sm); }

/* Texto só para leitores de tela (rótulos de ícones, skip-link). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Pular para o conteúdo — primeiro Tab da página. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-modal);
  transform: translateY(-160%); transition: transform .18s ease;
  background: var(--card); color: var(--txt-1); border: 1px solid var(--card-borda);
  padding: 10px 16px; border-radius: var(--raio-sm); font-weight: 600; box-shadow: var(--elev-2);
}
.skip-link:focus { transform: translateY(0); color: var(--txt-1); }

/* Respeita quem pediu menos movimento no sistema (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  background: rgba(18,18,23,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-borda);
}
.topbar .marca { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .3px; }
/* O símbolo da Anhanguera já tem cor e fundo transparente: sem caixa laranja. */
.topbar .marca img.logo {
  width: 40px; height: 40px; display: block; object-fit: contain;
}
.topbar .marca small { display: block; color: var(--txt-3); font-weight: 500; font-size: 12px; }
.topbar .nav { display: flex; align-items: center; gap: 8px; }
.topbar .nav a { color: var(--txt-2); padding: 8px 14px; border-radius: 999px; font-size: 14px; transition: var(--transicao); }
.topbar .nav a:hover, .topbar .nav a.ativo { color: #fff; background: var(--bg-2); }

/* ---------- Ícones animados dos botões da navegação ----------
   Cada botão principal ganha um ícone à esquerda que casa com o nome; ao passar
   o mouse (ou focar), ele faz uma micro-animação própria. */
.topbar .nav .nav-btn { display: inline-flex; align-items: center; gap: 7px; }
/* Tamanho fixo com !important: se o SW servir CSS antigo por um instante, os
   width/height do próprio <svg> seguram; se servir o CSS novo, ainda impede
   qualquer regra descendente de crescer o ícone. */
.nav-ic { flex: none; width: 16px !important; height: 16px !important; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.nav-ic svg { width: 16px !important; height: 16px !important; display: block; transform-origin: center; }
.nav-drop-btn.nav-btn { gap: 7px; }

@keyframes ic-bob    { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(0); } }
@keyframes ic-swing  { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-13deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-4deg); } }
@keyframes ic-pop    { 0%,100% { transform: scale(1); } 45% { transform: scale(1.22); } }
@keyframes ic-search { 0%,100% { transform: translate(0,0); } 25% { transform: translate(1.5px,-1.5px); } 50% { transform: translate(1.5px,1.5px); } 75% { transform: translate(-1.5px,1px); } }
@keyframes ic-book   { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-7deg) scale(1.06); } }
@keyframes ic-wrench { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-20deg); } 60% { transform: rotate(7deg); } }
@keyframes ic-spin   { to { transform: rotate(180deg); } }

.nav-btn:hover .nav-ic--calendario svg,  .nav-btn:focus-visible .nav-ic--calendario svg  { animation: ic-bob .55s ease; }
.nav-btn:hover .nav-ic--reservas svg,    .nav-btn:focus-visible .nav-ic--reservas svg    { animation: ic-swing .6s ease; }
.nav-btn:hover .nav-ic--uso svg,         .nav-btn:focus-visible .nav-ic--uso svg         { animation: ic-pop .45s ease; }
.nav-btn:hover .nav-ic--vistorias svg,   .nav-btn:focus-visible .nav-ic--vistorias svg   { animation: ic-search .6s ease; }
.nav-btn:hover .nav-ic--catalogo svg,    .nav-btn:focus-visible .nav-ic--catalogo svg    { animation: ic-book .5s ease; }
.nav-btn:hover .nav-ic--ocorrencias svg, .nav-btn:focus-visible .nav-ic--ocorrencias svg { animation: ic-wrench .55s ease; }
.nav-btn:hover .nav-ic--tickets svg,     .nav-btn:focus-visible .nav-ic--tickets svg     { animation: ic-pop .45s ease; }
.nav-btn:hover .nav-ic--gestao svg,      .nav-btn:focus-visible .nav-ic--gestao svg      { animation: ic-spin .5s ease; }

/* Quem prefere menos movimento não recebe as animações. */
@media (prefers-reduced-motion: reduce) {
  .nav-ic svg { animation: none !important; }
}
/* Menu suspenso da Gestão */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--txt-2); padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-family: inherit; border: none; background: transparent;
  cursor: pointer; transition: var(--transicao);
}
.nav-drop-btn:hover { color: #fff; background: var(--bg-2); }
.nav-drop-btn.ativo { color: #fff; background: var(--grad-laranja-suave); box-shadow: inset 0 0 0 1px rgba(246,96,15,.3); }
/* Aberto: realce sutil, continua pílula (nada de canto reto). */
.nav-drop-btn.aberto { color: #fff; background: var(--bg-2); }
.nav-drop-seta { font-size: 9px; opacity: .7; transition: transform .18s ease; }
.nav-drop-btn.aberto .nav-drop-seta { transform: rotate(180deg); }

/* Painel contextual (popover): elemento flutuante independente, com folga
   entre o botão e o card. Nada de aparência de menu suspenso nativo. */
.nav-pop {
  position: fixed; z-index: 120; box-sizing: border-box; white-space: nowrap;
  /* JS define min-width = largura do botão; cresce só o necessário p/ o texto. */
  max-width: min(340px, calc(100vw - 16px));
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 20px 48px -16px rgba(0,0,0,.7), 0 6px 16px -8px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 4px;
  transform-origin: top left;
  animation: nav-pop-in .17s cubic-bezier(.16,1,.3,1);
}
@keyframes nav-pop-in {
  from { opacity: 0; transform: scale(.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* O display:flex acima venceria o atributo [hidden] (UA). Esta regra devolve o
   esconde-por-padrão: o painel só aparece quando o JS tira o hidden. */
.nav-pop[hidden] { display: none; }

/* Cada ação é um list item tipo card: ícone à esquerda + título, compacto. */
.nav-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; color: var(--txt-1);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-align: left; text-decoration: none;
  transition: background var(--transicao), box-shadow var(--transicao);
}
.nav-pop-item:hover, .nav-pop-item:focus-visible {
  background: var(--bg-2); color: var(--txt-1); outline: none;
  box-shadow: inset 0 0 0 1px var(--card-borda-hover);
}
.nav-pop-item.ativo {
  background: var(--grad-laranja-suave);
  box-shadow: inset 0 0 0 1px rgba(246,96,15,.3);
}
/* Ícone num chip suave. */
.nav-pop-ic {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--card-borda);
}
.nav-pop-item.ativo .nav-pop-ic { background: rgba(246,96,15,.14); box-shadow: inset 0 0 0 1px rgba(246,96,15,.3); }
.nav-pop-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.nav-pop-form { margin: 0; }

.topbar .usuario { display: flex; align-items: center; gap: 10px; padding-left: 14px; margin-left: 6px; border-left: 1px solid var(--card-borda); }
.topbar .usuario-info { font-size: 13px; line-height: 1.2; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-laranja); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  flex: none;
}

/* ---------- Menu mobile: gatilho (hambúrguer) + scrim ----------
   Escondidos no desktop; ativados no media query mobile mais abaixo. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--bg-2); border: 1px solid var(--card-borda);
  border-radius: var(--raio-sm); cursor: pointer; color: var(--txt-1);
  transition: background var(--transicao), border-color var(--transicao);
}
.nav-toggle:hover { background: var(--bg-3); border-color: var(--card-borda-hover); }
.nav-toggle-barras { position: relative; width: 20px; height: 14px; }
.nav-toggle-barras span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.nav-toggle-barras span:nth-child(1) { top: 0; }
.nav-toggle-barras span:nth-child(2) { top: 6px; }
.nav-toggle-barras span:nth-child(3) { top: 12px; }
/* Aberto → vira "X". */
body.nav-aberta .nav-toggle-barras span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-aberta .nav-toggle-barras span:nth-child(2) { opacity: 0; }
body.nav-aberta .nav-toggle-barras span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  animation: scrim-in .2s ease;
}
.nav-scrim[hidden] { display: none; }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Todas as seções aproveitam a largura da tela; os formulários (nova reserva,
   login) continuam estreitos para a leitura não cansar. */
.container { max-width: min(1720px, 96vw); margin: 0 auto; padding: 34px 26px 80px; }
.container.estreito { max-width: 720px; }
.container.largo { max-width: min(1720px, 96vw); }

/* ---------- Cabeçalho de página ---------- */
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.page-head p { color: var(--txt-2); margin-top: 6px; }
.page-head .barra { height: 4px; width: 64px; border-radius: 4px; background: var(--grad-laranja); margin-top: 14px; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--card-borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--elev-1);   /* superfície discreta; a borda já separa do fundo */
}
.card + .card { margin-top: 18px; }
/* Card clicável (link/botão): sobe de leve e acende a borda. */
.card.interativo { cursor: pointer; transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); }
.card.interativo:hover { border-color: var(--card-borda-hover); transform: translateY(-2px); box-shadow: var(--elev-2); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--card-borda);
  background: var(--bg-2); color: var(--txt-1);
  padding: 11px 20px; border-radius: var(--raio-pill);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              filter var(--transicao), transform .08s ease;
  font-family: inherit; touch-action: manipulation;   /* corta o atraso de 300ms no toque */
}
.btn:hover { border-color: var(--card-borda-hover); background: var(--bg-3); }
/* Feedback tátil: afunda de leve ao pressionar (também no toque). */
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn-primario {
  background: var(--grad-laranja); border: none; color: #fff;
  box-shadow: var(--sombra-laranja);
}
.btn-primario:hover { filter: brightness(1.06); color: #fff; }
.btn-fantasma { background: transparent; }
.btn-perigo { color: var(--erro); border-color: rgba(248,113,113,.35); }
.btn-perigo:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.55); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* Botão em carregamento: mostra progresso e bloqueia novo clique. */
.btn.carregando { pointer-events: none; opacity: .8; }
.btn.carregando::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Formulários ---------- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--txt-2); margin-bottom: 8px; }
.campo .req { color: var(--laranja-1); }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], select, textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--txt-1);
  background: var(--bg-1); border: 1px solid var(--card-borda);
  border-radius: var(--raio-sm); padding: 12px 14px; transition: var(--transicao);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--laranja-2);
  box-shadow: 0 0 0 3px rgba(246,96,15,.18);
}
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8b8c2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
::placeholder { color: var(--txt-3); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

/* Texto de apoio persistente sob o campo (não é placeholder). */
.campo .ajuda { display: block; font-size: var(--fs-sm); color: var(--txt-3); margin-top: 6px; }

/* Estado de erro — borda vermelha, anel suave e mensagem abaixo do campo. */
.campo.erro input, .campo.erro select, .campo.erro textarea,
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: rgba(248,113,113,.65);
}
.campo.erro input:focus, .campo.erro select:focus, .campo.erro textarea:focus,
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(248,113,113,.20);
}
.campo .erro-msg {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 500; color: #fca5a5; margin-top: 7px;
}
.campo .erro-msg::before { content: "⚠"; font-size: 13px; }
.campo.ok input, .campo.ok select, .campo.ok textarea { border-color: rgba(52,211,153,.5); }

/* ---------- Flash ---------- */
.flash-area { max-width: min(1720px, 96vw); margin: 16px auto 0; padding: 0 26px; }
.flash {
  padding: 13px 18px; border-radius: var(--raio-sm); margin-bottom: 10px;
  font-size: 14px; font-weight: 500; border: 1px solid;
  display: flex; align-items: center; gap: 10px;
}
/* Ícone semântico à esquerda (não depende só de cor — acessibilidade). */
.flash::before { font-size: 15px; line-height: 1; flex: none; }
.flash.ok { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.35); color: #6ee7b7; }
.flash.ok::before { content: "✓"; }
.flash.error { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.35); color: #fca5a5; }
.flash.error::before { content: "✕"; }
.flash.aviso { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.35); color: #fcd34d; }
.flash.aviso::before { content: "⚠"; }
.flash.info { background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.35); color: #93c5fd; }
.flash.info::before { content: "ℹ"; }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
}
.badge.rascunho { background: rgba(251,191,36,.14); color: var(--aviso); }
.badge.concluida { background: rgba(52,211,153,.14); color: var(--ok); }
.badge.papel { background: var(--grad-laranja-suave); color: var(--laranja-1); border: 1px solid rgba(246,96,15,.25); }
.badge.inativo { background: rgba(124,124,136,.16); color: var(--txt-3); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 420px; background: var(--card);
  border: 1px solid var(--card-borda); border-radius: 22px;
  padding: 40px 34px; box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-laranja);
}
.login-logo {
  display: grid; place-items: center; margin: 0 auto 18px;
}
.login-logo img { width: 210px; height: auto; max-width: 100%; object-fit: contain; display: block; }
.login-card h1 { text-align: center; font-size: 22px; }
.login-card .sub { text-align: center; color: var(--txt-3); margin: 6px 0 28px; font-size: 14px; }

/* ---------- Grid de estatísticas ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat {
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 20px; position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px;
  background: var(--grad-laranja); opacity: .10; border-radius: 50%; }
.stat .num { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.stat .rot { color: var(--txt-3); font-size: 13px; margin-top: 4px; }

/* ---------- Listas de avaliação ---------- */
.lista { display: flex; flex-direction: column; gap: 12px; }
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 16px 20px; transition: var(--transicao);
}
.item:hover { border-color: var(--card-borda-hover); transform: translateY(-1px); }
.item .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item .info .titulo { font-weight: 700; font-size: 15px; }
.item .info .meta { color: var(--txt-3); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.item .acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.vazio {
  text-align: center; color: var(--txt-3); padding: 54px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.vazio .ic {
  width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; opacity: .9;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--card-borda);
}
.vazio h3, .vazio .titulo { color: var(--txt-1); font-size: var(--fs-lg); font-weight: 700; }
.vazio p { max-width: 44ch; font-size: var(--fs-base); }
.vazio .btn, .vazio a.btn { margin-top: 14px; }

/* ---------- Tabela ---------- */
.tabela-wrap { overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--card-borda); }
table.tabela { width: 100%; border-collapse: collapse; background: var(--card); }
table.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--txt-3); padding: 14px 18px; border-bottom: 1px solid var(--card-borda); font-weight: 700; }
table.tabela td { padding: 14px 18px; border-bottom: 1px solid var(--bg-2); font-size: 14px; }
table.tabela tr:last-child td { border-bottom: none; }
table.tabela tr:hover td { background: var(--bg-1); }
table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Tabela → cards no mobile ---
   O script marca cada célula com data-label (o cabeçalho da coluna) e adiciona
   .tabela-cards. Aí a rolagem horizontal (caça à coluna) vira leitura vertical:
   cada linha é um card com "Rótulo: valor". Só ativa onde há cabeçalho. */
@media (max-width: 820px) {
  .tabela-wrap:has(.tabela-cards) { overflow: visible; border: none; border-radius: 0; }
  table.tabela.tabela-cards { background: transparent; }
  table.tabela.tabela-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tabela.tabela-cards tr {
    display: block; background: var(--card); border: 1px solid var(--card-borda);
    border-radius: var(--raio-sm); padding: 6px 4px; margin-bottom: 10px;
  }
  table.tabela.tabela-cards td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 9px 14px; border-bottom: 1px solid var(--bg-2); font-size: var(--fs-base);
    text-align: right;
  }
  table.tabela.tabela-cards tr td:last-child { border-bottom: none; }
  table.tabela.tabela-cards td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--txt-3);
  }
  /* Célula sem rótulo (ex.: só ações) ocupa a linha inteira, centralizada. */
  table.tabela.tabela-cards td[data-label=""] { justify-content: center; }
  table.tabela.tabela-cards td[data-label=""]::before { display: none; }
}

/* =========================================================================
   WIZARD
   ========================================================================= */
.wizard { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px){ .wizard { grid-template-columns: 1fr; } }

.wz-side {
  position: sticky; top: 84px;
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 18px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.wz-side h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); margin-bottom: 14px; }
.wz-progress { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.wz-progress .fill { height: 100%; width: 0; background: var(--grad-laranja); transition: width .3s ease; }
.wz-steps { display: flex; flex-direction: column; gap: 2px; }
.wz-step {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  cursor: pointer; color: var(--txt-2); font-size: 13.5px; transition: var(--transicao); border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
}
.wz-step:hover { background: var(--bg-2); color: var(--txt-1); }
.wz-step.ativo { background: var(--grad-laranja-suave); color: #fff; }
.wz-step .dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--bg-3); color: var(--txt-3); border: 1px solid var(--card-borda);
}
.wz-step.ativo .dot { background: var(--grad-laranja); color: #fff; border: none; }
.wz-step.preenchido .dot { background: rgba(52,211,153,.18); color: var(--ok); border-color: transparent; }

@media (max-width: 900px){
  .wz-side { position: static; max-height: none; }
  .wz-steps { flex-direction: row; overflow-x: auto; }
  .wz-step { flex-shrink: 0; }
}

.wz-main { min-height: 400px; }
.wz-secao { display: none; animation: fade .25s ease; }
.wz-secao.ativa { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wz-secao .cab { margin-bottom: 20px; }
.wz-secao .cab .rot-secao {
  display: inline-block; padding: 8px 16px; border-radius: 10px 10px 0 0;
  background: var(--grad-laranja); color: #fff; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
}
.wz-secao .cab .caixa {
  background: var(--card); border: 1px solid var(--card-borda); border-top: none;
  border-radius: 0 var(--raio) var(--raio) var(--raio); padding: 24px;
}
.wz-secao h2 { font-size: 19px; }
.wz-secao .pergunta { font-size: 16px; color: var(--txt-1); margin: 4px 0 18px; }

/* Escolha Sim/Não */
.sn { display: flex; gap: 12px; }
.sn label {
  flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 18px; border-radius: var(--raio-sm); border: 2px solid var(--card-borda);
  background: var(--bg-1); font-weight: 600; transition: var(--transicao);
}
.sn label:hover { border-color: var(--card-borda-hover); }
.sn input { display: none; }
.sn .marcador { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--txt-3); flex-shrink: 0; transition: var(--transicao); }
.sn label.sim input:checked ~ .marcador { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.sn label.nao input:checked ~ .marcador { border-color: var(--erro); background: var(--erro); box-shadow: 0 0 0 4px rgba(248,113,113,.18); }
.sn label:has(input:checked) { border-color: var(--card-borda-hover); background: var(--bg-2); }

.obs-box { margin-top: 16px; }
.obs-box.oculto { display: none; }

/* Navegação do wizard */
.wz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 12px; }
.wz-nav .direita { display: flex; gap: 10px; }

/* Indicador de salvamento */
.save-ind {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--card-borda);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; color: var(--txt-2);
  box-shadow: var(--sombra); transition: var(--transicao);
}
.save-ind .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-3); }
.save-ind.salvando .ponto { background: var(--aviso); animation: pulse 1s infinite; }
.save-ind.salvo .ponto { background: var(--ok); }
.save-ind.erro .ponto { background: var(--erro); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* =========================================================================
   MATRIZ DE INFRAESTRUTURA
   ========================================================================= */
.infra-scroll { overflow-x: auto; border: 1px solid var(--card-borda); border-radius: var(--raio); }
table.infra { border-collapse: collapse; width: 100%; min-width: 900px; background: var(--card); }
table.infra th, table.infra td { border-bottom: 1px solid var(--bg-2); }
table.infra thead th {
  position: sticky; top: 0; background: var(--bg-2); z-index: 2;
  padding: 12px 8px; font-size: 11.5px; font-weight: 700; color: var(--txt-2);
  vertical-align: bottom; text-align: center; min-width: 92px; line-height: 1.25;
}
table.infra thead th.amb-col { text-align: left; left: 0; z-index: 3; min-width: 210px; background: var(--bg-3); }
table.infra tbody td.amb-col {
  position: sticky; left: 0; background: var(--card); z-index: 1;
  font-size: 13.5px; font-weight: 600; color: var(--txt-1); padding: 10px 14px; min-width: 210px;
  border-right: 1px solid var(--card-borda);
}
table.infra tbody tr:nth-child(even) td { background: var(--bg-1); }
table.infra tbody tr:nth-child(even) td.amb-col { background: #191920; }
table.infra tbody tr:hover td { background: rgba(246,96,15,.06); }
table.infra tbody td { text-align: center; padding: 8px; }

/* Checkbox custom da matriz */
.chk { position: relative; display: inline-block; width: 22px; height: 22px; cursor: pointer; }
.chk input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.chk .box {
  position: absolute; inset: 0; border-radius: 6px; border: 2px solid var(--card-borda);
  background: var(--bg-0); transition: var(--transicao);
}
.chk input:checked ~ .box { background: var(--grad-laranja); border-color: transparent; }
.chk .box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: var(--transicao);
}
.chk input:checked ~ .box::after { transform: rotate(45deg) scale(1); }
.chk:hover .box { border-color: var(--laranja-2); }
/* Rótulo do problema: só aparece no mobile, onde a matriz vira card. */
.prob-label { display: none; }
.infra-contador { display: none; }

/* Legenda de infra no detalhe */
.tag-problema {
  display: inline-flex; align-items: center; gap: 6px; margin: 3px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(246,96,15,.12); color: var(--laranja-1); border: 1px solid rgba(246,96,15,.28);
}

/* Detalhe */
.detalhe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.dado { background: var(--bg-1); border: 1px solid var(--card-borda); border-radius: var(--raio-sm); padding: 14px 16px; }
.dado .rot { font-size: 12px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; }
.dado .val { font-size: 16px; font-weight: 600; margin-top: 4px; }

.uso-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 10px; }
.uso-item { display: flex; align-items: center; gap: 12px; background: var(--bg-1); border: 1px solid var(--card-borda);
  border-radius: var(--raio-sm); padding: 12px 14px; }
.uso-item .pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.uso-item .pill.sim { background: rgba(52,211,153,.16); color: var(--ok); }
.uso-item .pill.nao { background: rgba(124,124,136,.16); color: var(--txt-3); }
.uso-item .nome { font-weight: 600; font-size: 14px; }
.uso-item .obs { font-size: 12.5px; color: var(--txt-3); }

hr.sep { border: none; border-top: 1px solid var(--card-borda); margin: 26px 0; }

/* =========================================================================
   PAINEL DE MÉTRICAS
   ========================================================================= */
.titulo-card { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

.filtros { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { min-width: 150px; }

/* Barras horizontais */
.barra-item { margin-bottom: 14px; }
.barra-item:last-child { margin-bottom: 0; }
.barra-topo { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; gap: 12px; }
.barra-topo span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.barra-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.barra-fill.erro { background: linear-gradient(90deg, #f87171, #dc2626); }
.barra-fill.aviso { background: var(--grad-laranja); }

/* Alerta de problemas críticos */
.alerta-critico {
  background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.32);
  border-radius: var(--raio); padding: 18px 20px;
}
.alerta-critico strong { color: #fca5a5; font-size: 15px; display: block; margin-bottom: 6px; }
.alerta-critico p { color: var(--txt-2); font-size: 13.5px; margin: 0; }
.critico-linha {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid rgba(248,113,113,.15); font-size: 13px;
}
.critico-linha a { font-weight: 700; }

.badge.critico { background: rgba(248,113,113,.16); color: #fca5a5; }

.tag-problema.critico { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(248,113,113,.32); }
.tag-reincidente {
  display: inline-flex; align-items: center; margin-left: 6px;
  padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  background: rgba(251,191,36,.18); color: var(--aviso); text-transform: uppercase;
}

/* Mapa de calor */
table.infra.heatmap tbody td { padding: 5px; }
.celula-calor {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 6px; font-size: 12px; font-weight: 800; color: #fff;
}
.celula-calor.n1 { background: rgba(246,96,15,.30); }
.celula-calor.n2 { background: rgba(246,96,15,.52); }
.celula-calor.n3 { background: rgba(246,96,15,.74); }
.celula-calor.n4 { background: #d63e05; }
.celula-vazia { color: var(--txt-3); opacity: .35; }

/* Paginação */
.paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: 13.5px; }

canvas { max-width: 100%; }

/* =========================================================================
   MOBILE
   O colaborador preenche a avaliação andando pelo campus, com o celular na
   mão — este é o caso de uso principal, não uma adaptação secundária.
   ========================================================================= */

/* Evita que qualquer elemento largo empurre a página na horizontal. */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }

  /* iOS Safari dá zoom automático ao focar campo com fonte < 16px. */
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=time], select, textarea { font-size: 16px; padding: 13px 14px; }

  /* Alvo de toque confortável (mínimo recomendado: 44px). */
  .btn { min-height: 44px; padding: 12px 18px; }
  .btn-sm { min-height: 38px; padding: 9px 14px; }

  .container { padding: 20px 14px 90px; }
  .page-head h1 { font-size: 21px; }
  .card { padding: 18px 16px; }
  .titulo-card { font-size: 15px; }

  /* --- Topbar: marca + hambúrguer; navegação vira menu lateral (drawer) ---
     Antes a nav rolava na horizontal (caça ao item). Agora o toque abre um
     painel lateral com tudo empilhado — alvo grande, hierarquia clara. */
  .topbar { padding: 10px 14px; gap: 10px; position: sticky; }
  .topbar .marca .logo { width: 34px; height: 34px; }
  .nav-toggle { display: inline-flex; }
  /* Aberto: a barra sobe acima do scrim para o "X" continuar clicável. */
  body.nav-aberta .topbar { z-index: calc(var(--z-drawer) + 2); }

  /* Painel lateral off-canvas — desce por baixo da topbar (padding-top). */
  .topbar .nav {
    position: fixed; top: 0; right: 0; z-index: calc(var(--z-drawer) + 1);
    height: 100dvh; width: min(86vw, 340px);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 74px 14px calc(18px + env(safe-area-inset-bottom));
    background: var(--bg-1); border-left: 1px solid var(--card-borda);
    box-shadow: -24px 0 60px -20px rgba(0,0,0,.7);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    overscroll-behavior: contain;
  }
  body.nav-aberta .topbar .nav { transform: translateX(0); }
  body.nav-aberta { overflow: hidden; }   /* trava o scroll do fundo */

  /* Links de topo: largura cheia, alvo confortável.
     Ícone + rótulo ficam colados à esquerda; contador (se houver) vai pro
     canto direito. Nada de space-between — isso separaria o ícone do texto. */
  .topbar .nav > a {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; padding: 13px 14px; border-radius: var(--raio-sm);
    font-size: 15px; min-height: 48px;
  }
  .topbar .nav > a .pill-contador { margin-left: auto; }

  /* Grupos (Uso pós-aula, Vistorias, Gestão): gatilho full-width + acordeão.
     Mesma regra: ícone + texto à esquerda; pill e seta empurrados pra direita. */
  .nav-drop { display: block; width: 100%; }
  .nav-drop-btn {
    width: 100%; justify-content: flex-start; padding: 13px 14px;
    border-radius: var(--raio-sm); font-size: 15px; min-height: 48px;
  }
  .nav-drop-btn .pill-contador { margin-left: auto; }
  .nav-drop-btn .nav-drop-seta { margin-left: auto; }
  /* Se houver pill, ela já empurra pra direita; a seta cola nela com folguinha. */
  .nav-drop-btn .pill-contador + .nav-drop-seta { margin-left: 8px; }

  /* Painel do grupo abre INLINE (não flutua) dentro do drawer. */
  .nav-drop .nav-pop {
    position: static; width: auto !important; min-width: 0 !important;
    max-width: none; box-shadow: none; background: transparent;
    border: none; padding: 2px 0 6px 8px; margin-left: 6px;
    border-left: 2px solid var(--card-borda); border-radius: 0;
    animation: acordeao-in .2s ease;
  }
  @keyframes acordeao-in { from { opacity: 0; } to { opacity: 1; } }
  .nav-pop-item { padding: 11px 12px; min-height: 44px; }

  /* Bloco do usuário fixo no rodapé do drawer; "Sair" separado e visível. */
  .topbar .usuario {
    order: 5; margin-top: auto; padding: 14px 6px 6px; margin-left: 0;
    border-left: none; border-top: 1px solid var(--card-borda); gap: 12px;
  }
  .topbar .usuario-info { display: block; font-size: 14px; }
  .topbar .usuario .btn { margin-left: auto !important; }

  /* --- Wizard --- */
  .wz-side { padding: 14px; }
  .wz-secao .cab .caixa { padding: 16px; }
  .wz-secao .pergunta { font-size: 15px; }
  .wz-secao .cab .rot-secao { font-size: 11.5px; padding: 7px 12px; }

  /* Sim/Não: botões grandes, fáceis de acertar com o polegar. */
  .sn label { padding: 16px; font-size: 16px; }
  .sn .marcador { width: 22px; height: 22px; }

  /* Navegação do wizard fixa e cheia, sem caça ao botão. */
  .wz-nav { flex-direction: column-reverse; gap: 8px; }
  .wz-nav .direita { width: 100%; flex-direction: column; gap: 8px; }
  .wz-nav .btn, .wz-nav .direita .btn, .wz-nav form { width: 100%; }
  .wz-nav form .btn { width: 100%; }

  .save-ind { bottom: 10px; right: 10px; padding: 7px 12px; font-size: 12px; }

  /* --- Listas e tabelas --- */
  .item { flex-direction: column; align-items: stretch; gap: 12px; }
  .item .acoes { justify-content: flex-end; flex-wrap: wrap; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros .campo { min-width: 0; }
  .filtros > div { width: 100%; }
  .filtros .btn { flex: 1; }
  .paginacao { flex-wrap: wrap; gap: 10px; }
}

/* =========================================================================
   INFRAESTRUTURA EM ACORDEÃO (desktop e mobile)
   Cada ambiente é uma lista suspensa: clica no nome, abre e mostra os
   problemas de cima para baixo para marcar; clica de novo e colapsa. Ao
   concluir um ambiente é só fechar e passar ao próximo — em vez da matriz
   larga com dezenas de colunas. O DOM é o mesmo (só muda a apresentação),
   então o autosave continua lendo os checkboxes normalmente.
   O mapa de calor (.heatmap, só leitura, no detalhe) fica de fora: é uma
   tabela comum e não recebe estas regras (só a #tabela-infra editável).
   ========================================================================= */
.infra-editavel { overflow: visible; border: none; border-radius: 0; }

#tabela-infra { min-width: 0; width: 100%; background: transparent; }
#tabela-infra thead { display: none; }
#tabela-infra,
#tabela-infra tbody,
#tabela-infra tr,
#tabela-infra td { display: block; }

/* Cada ambiente é um card. */
#tabela-infra tbody tr {
  border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  margin-bottom: 10px; background: var(--card); overflow: hidden;
}
#tabela-infra tbody tr:nth-child(even) td { background: transparent; }
#tabela-infra tbody tr:hover td { background: transparent; }
#tabela-infra tbody tr.marcado { border-color: rgba(246,96,15,.45); }

/* Cabeçalho do card = nome do ambiente + contador. Clica para abrir. */
#tabela-infra tbody td.amb-col {
  position: static; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 52px; padding: 12px 16px; cursor: pointer;
  border-right: none; border-bottom: none; background: var(--bg-1);
  font-size: 14.5px; transition: background var(--transicao);
  -webkit-tap-highlight-color: transparent;
}
#tabela-infra tbody td.amb-col:hover { background: var(--bg-2); }
#tabela-infra tbody tr.aberto td.amb-col { background: var(--bg-2); }
/* Seta desenhada com borda (em vez de um glyph, que baixa/desalinha conforme a
   fonte do dispositivo): quadradinho com duas bordas girado 45°. */
#tabela-infra tbody td.amb-col::after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 2px;
  position: relative; top: -2px;   /* seta p/ baixo pesa embaixo: sobe p/ centrar */
  border-right: 2px solid var(--txt-3); border-bottom: 2px solid var(--txt-3);
  transform: rotate(45deg); transition: transform var(--transicao), border-color var(--transicao);
}
#tabela-infra tbody tr.aberto td.amb-col::after {
  transform: rotate(225deg); top: 2px; border-color: var(--laranja-1);
}

.infra-contador {
  display: inline-block; margin-left: auto; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; background: var(--bg-3); color: var(--txt-3);
  line-height: 1.4;
}
/* Sem problemas marcados não mostra a pílula (senão fica um traço solto). */
.infra-contador:empty { display: none; }
.infra-contador.tem { background: var(--grad-laranja); color: #fff; }

/* Problemas: escondidos até abrir o card. */
#tabela-infra tbody tr td:not(.amb-col) { display: none; }
#tabela-infra tbody tr.aberto td:not(.amb-col) {
  display: block; padding: 0; text-align: left; border-top: 1px solid var(--bg-2);
}

/* Cada problema vira uma linha inteira clicável. */
#tabela-infra .chk {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: auto; min-height: 46px; padding: 8px 16px; cursor: pointer;
  transition: background var(--transicao);
  -webkit-tap-highlight-color: transparent;
}
#tabela-infra .chk:hover { background: rgba(246,96,15,.06); }
#tabela-infra .chk .box {
  position: relative; inset: auto; width: 22px; height: 22px; flex-shrink: 0;
}
#tabela-infra .prob-label {
  display: block; font-size: 14px; color: var(--txt-2); line-height: 1.3;
}
#tabela-infra .chk input:checked ~ .prob-label { color: var(--txt-1); font-weight: 600; }

/* =========================================================================
   OCORRÊNCIAS
   ========================================================================= */
/* Pendência crítica: a linha inteira sinaliza, não só o badge. */
tr.linha-critica td { background: rgba(248,113,113,.05); }
tr.linha-critica td:first-child { box-shadow: inset 3px 0 0 var(--erro); }

.chk-inline {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--txt-2); cursor: pointer; padding-bottom: 10px; white-space: nowrap;
}
.chk-inline input { width: auto; }

.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.linha-tempo::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
  width: 2px; background: var(--card-borda);
}
.linha-tempo li {
  position: relative; padding: 0 0 16px 14px; font-size: 14px; color: var(--txt-2);
}
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before {
  content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg-3); border: 2px solid var(--card-borda);
}
.linha-tempo li.marco::before { background: var(--laranja-2); border-color: var(--laranja-2); }
.linha-tempo li.marco.ok::before { background: var(--ok); border-color: var(--ok); }
.linha-tempo .quando {
  display: block; font-size: 12px; color: var(--txt-3); text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 2px;
}
.linha-tempo .obs {
  margin-top: 6px; padding: 8px 10px; background: var(--bg-2);
  border-radius: var(--raio-sm); font-size: 13px; color: var(--txt-2);
  white-space: pre-wrap;
}

/* =========================================================================
   CAMPO COM AÇÃO AO LADO (select do colaborador + botão de cadastro)
   ========================================================================= */
.campo-com-acao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-acao select { flex: 1; min-width: 0; }
.btn-acao {
  flex-shrink: 0; background: var(--bg-3); color: var(--txt-1);
  border: 1px solid var(--card-borda-hover); border-radius: var(--raio-sm);
  padding: 0 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  white-space: nowrap; transition: var(--transicao);
}
.btn-acao:hover { background: var(--laranja-2); border-color: var(--laranja-2); color: #fff; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.modal.oculto { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(2px); }
.modal-caixa {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 26px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-caixa h2 { font-size: 19px; margin-bottom: 4px; }
.modal-sub { color: var(--txt-3); font-size: 13.5px; margin-bottom: 20px; }
.modal-erro {
  color: var(--erro); font-size: 13.5px; margin-bottom: 14px;
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--raio-sm); padding: 10px 12px;
}
.modal-erro.oculto { display: none; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; }
/* No celular o modal ocupa a base da tela — polegar alcança os botões. */
@media (max-width: 620px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-caixa { max-width: none; border-radius: var(--raio) var(--raio) 0 0; }
  .modal-acoes .btn { flex: 1; justify-content: center; }
}

.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.text-muted { color: var(--txt-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px){ .grid-2 { grid-template-columns: 1fr; } }


/* =========================================================================
   NAVEGAÇÃO POR SEÇÕES
   O sistema cresceu de "uma avaliação" para quatro áreas. Uma fileira única
   de links viraria uma sopa de 10 itens; aqui a topbar agrupa por seção e o
   grupo ativo se destaca em laranja.
   ========================================================================= */
.topbar .nav a.ativo { background: var(--grad-laranja-suave); color: #fff; box-shadow: inset 0 0 0 1px rgba(246,96,15,.3); }

.secao-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 4px; margin-bottom: 22px;
  background: var(--bg-1); border: 1px solid var(--card-borda); border-radius: 999px;
}
.secao-nav a {
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--txt-2); transition: var(--transicao); white-space: nowrap;
}
.secao-nav a:hover { color: var(--txt-1); background: var(--bg-2); }
.secao-nav a.ativo { background: var(--grad-laranja); color: #fff; box-shadow: var(--sombra-laranja); }
@media (max-width: 820px) {
  .secao-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: var(--raio-sm); }
  .secao-nav::-webkit-scrollbar { display: none; }
  .secao-nav a { flex-shrink: 0; }
}

/* Contador de pendências dentro de um link de navegação. */
.pill-contador {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 7px; border-radius: 999px;
  background: var(--erro); color: #fff; font-size: 11px; font-weight: 800;
}

/* Escolha de permissão: cartões de rádio, um por papel, com o que cada um
   libera à vista — decidir num select escondia justamente essa informação. */
.papel-opcoes { display: flex; flex-direction: column; gap: 8px; }
.papel-opcao {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  background: var(--bg-2); transition: var(--transicao);
}
.papel-opcao:hover { border-color: var(--card-borda-hover); }
.papel-opcao input { width: auto; margin-top: 3px; accent-color: var(--laranja-2); flex: none; }
.papel-opcao:has(input:checked) {
  border-color: var(--laranja-2); background: var(--grad-laranja-suave);
}
.papel-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.papel-nome { font-size: 14.5px; font-weight: 700; color: var(--txt-1); }
.papel-desc { font-size: 12.5px; line-height: 1.5; color: var(--txt-3); }

/* Equipamentos/materiais: linhas de descrição + quantidade no form de reserva */
.equip-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.equip-item { display: grid; grid-template-columns: 1fr 96px 40px; gap: 8px; align-items: center; }
.equip-item .equip-desc, .equip-item .equip-qtd { width: 100%; }
.equip-rem {
  width: 40px; height: 40px; border: 1px solid var(--card-borda);
  background: var(--bg-2); color: var(--txt-2); border-radius: var(--raio-sm);
  cursor: pointer; font-size: 13px; transition: var(--transicao);
}
.equip-rem:hover { border-color: var(--erro); color: var(--erro); background: rgba(248,113,113,.1); }
/* Leitura: um item por linha (numa <div> o HTML colapsaria os \n num texto só) */
.equip-leitura { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.equip-leitura li { display: flex; align-items: baseline; gap: 8px; }
.equip-leitura .qtd {
  flex: none; min-width: 40px; text-align: center; padding: 2px 7px;
  border-radius: 5px; background: var(--bg-2); border: 1px solid var(--card-borda);
  font-size: 12.5px; font-weight: 800; color: var(--laranja-1);
}

/* Aviso vermelho de reservas pendentes (topo da página de reservas) */
.aviso-pendentes {
  display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
  padding: 13px 16px; border-radius: var(--raio-sm);
  background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.4);
  color: var(--txt-1); font-size: 14px; transition: var(--transicao);
}
.aviso-pendentes:hover { background: rgba(248,113,113,.22); border-color: var(--erro); }
.aviso-pendentes .ic { font-size: 20px; }
.aviso-pendentes strong { color: #ff8f8f; font-size: 16px; }

/* =========================================================================
   CARDS DE ATALHO (índice do catálogo, home)
   ========================================================================= */
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.atalho {
  display: block; background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 22px; color: inherit;
  position: relative; overflow: hidden; transition: var(--transicao);
}
.atalho:hover { border-color: rgba(246,96,15,.45); transform: translateY(-2px); color: inherit; }
.atalho::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-laranja-linha); opacity: 0; transition: var(--transicao);
}
.atalho:hover::before { opacity: 1; }
.atalho .ic { font-size: 26px; margin-bottom: 12px; display: block; }
.atalho .tit { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.atalho .desc { font-size: 13px; color: var(--txt-3); line-height: 1.45; }
.atalho .num-grande {
  position: absolute; right: 18px; top: 16px;
  font-size: 30px; font-weight: 800; color: var(--laranja-2); opacity: .28;
}

/* =========================================================================
   GRADE — a divisão de salas por dia da semana
   É a versão viva da planilha que a coordenação afixa: um bloco por dia,
   uma linha por sala ocupada.
   ========================================================================= */
.grade-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.grade-semana { font-size: 15px; font-weight: 700; }
.grade-semana small { display: block; color: var(--txt-3); font-weight: 500; font-size: 12.5px; }
.grade-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.dia-bloco { margin-bottom: 22px; }
.dia-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-radius: var(--raio) var(--raio) 0 0;
  background: var(--grad-laranja); color: #fff; flex-wrap: wrap;
}
.dia-cab .nome { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.dia-cab .resumo { font-size: 12.5px; font-weight: 600; opacity: .92; }
.dia-bloco.hoje .dia-cab { box-shadow: 0 0 0 2px var(--laranja-0), var(--sombra-laranja); }
.dia-bloco .tabela-wrap { border-radius: 0 0 var(--raio) var(--raio); border-top: none; }

/* Dia sem nenhuma sala ocupada. */
.dia-vazio {
  padding: 22px; text-align: center; color: var(--txt-3); font-size: 13.5px;
  background: var(--card); border: 1px solid var(--card-borda); border-top: none;
  border-radius: 0 0 var(--raio) var(--raio);
}

.sala-nome { font-weight: 700; }
.carteiras {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--bg-3); color: var(--txt-2);
}

/* =========================================================================
   STATUS DE RESERVA
   ========================================================================= */
.badge.pendente   { background: rgba(251,191,36,.14); color: var(--aviso); }
.badge.aprovada   { background: rgba(52,211,153,.14); color: var(--ok); }
.badge.recusada   { background: rgba(248,113,113,.14); color: var(--erro); }
.badge.cancelada  { background: rgba(124,124,136,.16); color: var(--txt-3); }
.badge.avaliada   { background: rgba(96,165,250,.14); color: var(--info); }

/* =========================================================================
   RESERVAS — calendário de dias da recorrência
   Cada data é um chip clicável: desmarcar libera a sala só naquele dia.
   ========================================================================= */
.dias-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dia-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 88px; padding: 10px 12px; border-radius: var(--raio-sm);
  border: 1px solid var(--card-borda); background: var(--bg-1);
  font-size: 13px; transition: var(--transicao); cursor: pointer;
  font-family: inherit; color: var(--txt-1);
}
.dia-chip:hover { border-color: var(--card-borda-hover); }
.dia-chip .data { font-weight: 700; }
.dia-chip .rot { font-size: 11px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .4px; }

.dia-chip.ativo { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.07); }
.dia-chip.ativo .rot { color: var(--ok); }
/* Desmarcado: a data continua visível, mas riscada — o tutor precisa saber
   que aquele dia existia e foi liberado, não que sumiu. */
.dia-chip.cancelado { opacity: .55; border-style: dashed; }
.dia-chip.cancelado .data { text-decoration: line-through; }
.dia-chip.passado { opacity: .7; }
.dia-chip.avaliado { border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.07); }
.dia-chip.avaliado .rot { color: var(--info); }
.dia-chip.hoje { box-shadow: 0 0 0 2px rgba(246,96,15,.45); }

.dias-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px;
  font-size: 12.5px; color: var(--txt-3);
}
.dias-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.dias-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Bloco de decisão do administrador. */
.decisao {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 20px; border-radius: var(--raio);
  background: var(--grad-laranja-suave); border: 1px solid rgba(246,96,15,.28);
}
@media (max-width: 700px) { .decisao { grid-template-columns: 1fr; } }
.decisao .campo { grid-column: 1 / -1; margin-bottom: 0; }

/* Parecer registrado (aprovação ou recusa). */
.parecer {
  border-left: 3px solid var(--card-borda-hover); padding: 10px 0 10px 16px;
  color: var(--txt-2); font-size: 14px; font-style: italic;
}
.parecer.recusa { border-left-color: var(--erro); }
.parecer.aprovacao { border-left-color: var(--ok); }

/* =========================================================================
   AVALIAÇÃO DE USO — o retorno do tutor depois da aula
   ========================================================================= */
/* Pergunta em formato de cartão: o tutor responde no celular, saindo da sala. */
.uso-pergunta {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: var(--raio-sm);
  border: 2px solid var(--card-borda); background: var(--bg-1);
  cursor: pointer; transition: var(--transicao); margin-bottom: 12px;
}
.uso-pergunta:hover { border-color: var(--card-borda-hover); }
.uso-pergunta:has(input:checked) { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.06); }
.uso-pergunta input { width: auto; margin-top: 3px; flex-shrink: 0; }
.uso-pergunta .txt { flex: 1; }
.uso-pergunta .tit { font-weight: 700; font-size: 15px; }
.uso-pergunta .sub { font-size: 13px; color: var(--txt-3); margin-top: 3px; line-height: 1.45; }

/* Lista de problemas que só aparece quando o tutor marca "infra com problema". */
.condicional { display: none; margin: 4px 0 16px 34px; }
.condicional.visivel { display: block; animation: fade .2s ease; }
.problemas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.problema-opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--raio-sm); border: 1px solid var(--card-borda);
  background: var(--bg-1); font-size: 13.5px; cursor: pointer; transition: var(--transicao);
}
.problema-opt:hover { border-color: var(--card-borda-hover); }
.problema-opt:has(input:checked) { border-color: rgba(246,96,15,.5); background: rgba(246,96,15,.08); }
.problema-opt input { width: auto; flex-shrink: 0; }

/* Cartão de aula aguardando retorno. */
.aula-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: var(--raio);
  background: var(--card); border: 1px solid var(--card-borda);
  border-left: 3px solid var(--laranja-2); transition: var(--transicao);
}
.aula-card:hover { border-color: var(--card-borda-hover); border-left-color: var(--laranja-1); }
.aula-card.ok { border-left-color: var(--ok); }
.aula-card.problema { border-left-color: var(--erro); }
.aula-card .quando { font-size: 12.5px; color: var(--txt-3); }
.aula-card .onde { font-weight: 700; font-size: 15px; margin: 3px 0; }
.aula-card .quem { font-size: 13px; color: var(--txt-2); }
/* Ações do card: botão principal + excluir (admin), lado a lado. */
.aula-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 820px) {
  .aula-card { flex-direction: column; align-items: stretch; }
  .aula-card .btn { width: 100%; }
  .aula-acoes { flex-direction: column; align-items: stretch; }
  .aula-excluir { width: 100%; }
}

/* Selo de resultado de uma aula já avaliada. */
.selo-uso { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.selo-uso.ok { color: var(--ok); }
.selo-uso.problema { color: var(--erro); }

/* =========================================================================
   CATÁLOGO — cadastros inline (linha vira formulário)
   ========================================================================= */
/* Formulário de novo item no topo da listagem, sem mudar de página. */
.form-inline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto;
  gap: 12px; align-items: end;
}
.form-inline .campo { margin-bottom: 0; }
@media (max-width: 820px) {
  .form-inline { grid-template-columns: 1fr; }
  .form-inline .btn { width: 100%; }
}

/* Edição direta na linha da tabela. */
.linha-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-form input, .linha-form select { padding: 8px 11px; font-size: 13.5px; }
.linha-form input.curto { width: 90px; }
.tabela .acoes-linha { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* Tabela com edição inline: um campo por coluna, alinhado ao cabeçalho.
   Os inputs preenchem a célula (form ligado pelo atributo form=), então as
   colunas ficam sob os rótulos certos. */
.tabela-edit td { padding: 9px 14px; vertical-align: middle; }
.tabela-edit th { padding: 12px 14px; }
.tabela-edit .cel-inp { width: 100%; min-width: 0; padding: 8px 10px; font-size: 13.5px; }
.tabela-edit .col-estreita { width: 1%; }        /* encolhe ao conteúdo */
.tabela-edit td.nowrap, .tabela-edit .col-estreita { white-space: nowrap; }

tr.inativa td { opacity: .5; }

/* Aviso de vínculo de conta no cadastro de tutor. */
.dica {
  display: flex; gap: 10px; padding: 13px 16px; border-radius: var(--raio-sm);
  background: rgba(96,165,250,.07); border: 1px solid rgba(96,165,250,.22);
  color: var(--txt-2); font-size: 13.5px; line-height: 1.5;
}
.dica .ic { flex-shrink: 0; }

/* =========================================================================
   UTILITÁRIOS
   ========================================================================= */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.text-muted { color: var(--txt-3); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }


/* =========================================================================
   FOLHA — a grade no formato do documento impresso
   O coordenador conhece a divisão de salas como a folha afixada na parede:
   coluna de dia à esquerda, linhas coloridas por dia, tudo numa tabela só e
   compacta. Esta é a versão digital dessa folha — por isso troca o fundo
   escuro do app por papel claro, e pode ser impressa para substituir de fato
   o papel.
   ========================================================================= */
.folha-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--raio) var(--raio) 0 0;
  background: var(--grad-laranja); color: #fff;
}
.folha-titulo strong { font-size: 16px; font-weight: 800; letter-spacing: .6px; }
.folha-titulo span { font-size: 13px; font-weight: 600; opacity: .95; }

.folha {
  background: #fbfaf6;
  border: 1px solid #d7d3c9;
  border-top: none;
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.folha-scroll { overflow-x: auto; }

.folha-tabela {
  width: 100%; border-collapse: collapse;
  color: #23231f; font-size: 13px; line-height: 1.25; min-width: 720px;
}
/* Cabeçalho de colunas — repetido no início de cada dia (linha .pl-cab). */
.folha-tabela tr.pl-cab th {
  background: #e07a52;  /* salmão do cabeçalho da planilha */
  color: #fff; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 7px 14px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.folha-tabela tr.pl-cab th:last-child { border-right: none; }

.folha-tabela tbody td {
  padding: 3px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.05);
  vertical-align: middle;
}
.folha-tabela tbody td:last-child { border-right: none; }
.folha-tabela tbody a { color: #1c1c19; font-weight: 600; }
.folha-tabela tbody a:hover { color: var(--laranja-3); text-decoration: underline; }
.folha-tabela .turma { color: #6a675d; font-weight: 600; }

/* Título do dia — a barra que abre cada bloco (SEGUNDA · 13/07/2026). */
.folha-tabela tr.pl-grupo td {
  padding: 9px 14px; border-right: none;
  border-top: 3px solid rgba(0,0,0,.28);
}
.folha-tabela tbody tr.pl-grupo:first-child td { border-top: none; }
.pl-grupo-dia {
  font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 14px;
}
.pl-grupo-data {
  font-weight: 600; font-size: 12px; color: #6a675d; margin-left: 8px;
  text-transform: none; letter-spacing: 0;
}
/* A coluna da sala encolhe ao conteúdo (width:1%): sem sobra à direita, o botão
   "ver reserva" fica colado ao divisor com o tutor. */
.folha-tabela .col-sala { font-weight: 800; white-space: nowrap; width: 1%; }
.folha-tabela .col-sala a { font-weight: 800; }
/* Sala + "ver reserva" na mesma célula, inline lado a lado (o botão junto do
   nome). O select usa a largura do conteúdo (não 100%) para o botão caber ao lado. */
.folha-tabela td.col-sala .cel-edit {
  display: inline-block; vertical-align: middle; width: auto; min-width: 84px;
}
.folha-tabela .col-cart { text-align: center; font-weight: 700; white-space: nowrap; }

/* Cor de fundo por dia, como as faixas coloridas do documento. */
.folha-tabela tr.d0 td { background: #f6efd0; }  /* segunda — creme  */
.folha-tabela tr.d1 td { background: #dcebd2; }  /* terça  — verde   */
.folha-tabela tr.d2 td { background: #d6e6f3; }  /* quarta — azul    */
.folha-tabela tr.d3 td { background: #e6dcf1; }  /* quinta — lilás   */
.folha-tabela tr.d4 td { background: #fce2cd; }  /* sexta  — pêssego */
.folha-tabela tr.d5 td { background: #f6d9e0; }  /* sábado — rosa    */
.folha-tabela tr.d6 td { background: #efeae2; }  /* domingo — neutro */

.folha-tabela tbody tr[data-reserva]:hover td { filter: brightness(.96); }

/* O dia de hoje ganha uma marca na barra do título. */
.folha-tabela tr.pl-grupo.hoje td { box-shadow: inset 4px 0 0 var(--laranja-2); }

/* "ver reserva": na célula da sala, ao lado do select, pequeno (só admin) */
.pl-ver {
  border: 1px solid rgba(0,0,0,.28); background: rgba(255,255,255,.55);
  color: #23231f; border-radius: 5px; cursor: pointer;
  font-size: 9px; font-weight: 700; line-height: 1; padding: 3px 6px;
  margin-left: 6px; vertical-align: middle; white-space: nowrap;
  text-transform: none; letter-spacing: 0; transition: var(--transicao);
}
.pl-ver:hover { background: #fff; border-color: var(--laranja-2); color: var(--laranja-1); }

/* Linha final de cada dia: "+ Adicionar reserva" ocupando a linha inteira */
.folha-tabela tr.pl-add-linha td { padding: 0; border-top: 1px solid rgba(0,0,0,.12); }
.pl-add-dia {
  display: block; width: 100%; padding: 8px 12px; text-align: left;
  border: none; background: transparent; cursor: pointer;
  color: var(--laranja-1); font-size: 12px; font-weight: 800;
  text-transform: none; letter-spacing: 0; transition: var(--transicao);
}
.pl-add-dia:hover { background: rgba(246,96,15,.12); color: #b8480a; }

/* Linha de criação rápida */
.folha-tabela tr.pl-nova td { background: #fffdf6; border-top: 2px dashed var(--laranja-2); }
.pl-nova-dia { display: block; font-weight: 800; font-size: 11px; color: var(--laranja-1);
  text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.pl-nova-obs { display: block; font-size: 10px; font-weight: 600; color: var(--laranja-1);
  text-transform: none; letter-spacing: 0; margin-top: 2px; }
.pl-nova-acoes { white-space: nowrap; }
.pl-nova-horas { display: inline-flex; gap: 4px; margin-right: 8px; }
.pl-nova-horas input { width: 82px; padding: 4px 6px; font-size: 12px;
  border: 1px solid rgba(0,0,0,.22); border-radius: 6px; background: #fff; color: #23231f; }

.folha-livres {
  margin-top: 14px; font-size: 13px; color: var(--txt-3);
}

/* No celular a planilha continua em formato de tabela (igual ao computador),
   com rolagem lateral pelo .folha-scroll — só reduz um pouco o texto/padding. */
@media (max-width: 820px) {
  .folha-tabela { font-size: 13px; }
  .folha-tabela tr.pl-cab th, .folha-tabela tbody td { padding: 8px 12px; }
}

/* Impressão: some com o app, sobra a folha — para substituir mesmo o papel. */
@media print {
  .topbar, .no-print, .flash-area { display: none !important; }
  body { background: #fff !important; }
  body::before, body::after { display: none !important; }
  .container { max-width: none; padding: 0; }
  .folha { box-shadow: none; }
  .folha-titulo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .folha-tabela tr.pl-cab th,
  .folha-tabela tbody td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Selects e campos da planilha editável imprimem como texto simples. */
  .folha-tabela select.cel-edit,
  .folha-tabela input.cel-edit {
    border: none !important; background: transparent !important;
    appearance: none; -webkit-appearance: none; padding: 0;
  }
}


/* =========================================================================
   BUSCA + FILTROS (uso pós-aula)
   Com a semana inteira numa lista só, achar uma aula específica exige um
   caminho rápido: campo de busca livre em cima, filtros por atributo embaixo.
   ========================================================================= */
.busca-filtros { margin-bottom: 18px; }
.busca-linha { display: flex; gap: 10px; margin-bottom: 14px; }
.busca-linha input[type=search] { flex: 1; }
.busca-linha .btn { flex-shrink: 0; }

.busca-filtros .filtros { align-items: flex-end; }
.busca-filtros .filtros .campo { margin-bottom: 0; min-width: 160px; flex: 1; }
.busca-filtros .filtros .btn { flex-shrink: 0; }

@media (max-width: 820px) {
  .busca-linha { flex-direction: column; }
  .busca-linha .btn { width: 100%; }
  .busca-filtros .filtros .campo { min-width: 0; }
}


/* =========================================================================
   MENU DE EXPORTAR (grade → PNG ou PDF)
   O botão não exporta direto: abre a escolha do formato, porque o uso muda o
   arquivo — imagem para o WhatsApp, PDF para imprimir.
   ========================================================================= */
.exportar-menu { position: relative; display: inline-block; }
.exportar-opcoes {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 240px; padding: 6px;
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio-sm); box-shadow: var(--sombra);
}
.exportar-opcoes a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--txt-1); font-size: 14px; font-weight: 600;
}
.exportar-opcoes a small { color: var(--txt-3); font-size: 12px; font-weight: 500; }
.exportar-opcoes a:hover { background: var(--bg-2); color: var(--txt-1); }


/* =========================================================================
   CALENDÁRIO — modos de visualização, planilha editável e visão por espaço
   ========================================================================= */

/* Alternador Planilha | Calendário */
.view-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--card-borda); border-radius: 999px; }
.view-toggle a {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--txt-2); transition: var(--transicao);
}
.view-toggle a:hover { color: var(--txt-1); }
.view-toggle a.ativo { background: var(--grad-laranja); color: #fff; box-shadow: var(--sombra-laranja); }

/* Aviso da planilha editável */
.planilha-aviso {
  font-size: 13px; color: var(--txt-2); margin-bottom: 12px;
  padding: 10px 14px; border-radius: var(--raio-sm);
  background: var(--grad-laranja-suave); border: 1px solid rgba(246,96,15,.22);
}
.planilha-aviso a { color: var(--laranja-1); font-weight: 700; }

/* Células editáveis na folha (linhas claras → selects de texto escuro) */
.folha.editavel .folha-tabela tbody td { padding: 2px 8px; }
.folha-tabela select.cel-edit,
.folha-tabela input.cel-edit {
  width: 100%; min-width: 92px; max-width: 220px;
  padding: 4px 6px; font-size: 12.5px; font-weight: 600;
  color: #23231f; background: rgba(255,255,255,.55);
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; transition: var(--transicao);
  appearance: auto;
}
.folha-tabela select.cel-edit:hover, .folha-tabela input.cel-edit:hover { border-color: rgba(0,0,0,.22); background: #fff; }
.folha-tabela select.cel-edit:focus, .folha-tabela input.cel-edit:focus { outline: none; border-color: var(--laranja-2); background: #fff; }
.folha-tabela select.cel-edit.salvando, .folha-tabela input.cel-edit.salvando { opacity: .6; }
.folha-tabela select.cel-edit.ok, .folha-tabela input.cel-edit.ok { border-color: var(--ok); background: rgba(52,211,153,.14); }
.folha-tabela select.cel-edit.erro, .folha-tabela input.cel-edit.erro { border-color: var(--erro); background: rgba(248,113,113,.16); }
.folha-tabela input.cel-carteiras { cursor: text; text-align: center; min-width: 0; }

/* Toast de feedback (planilha e calendário) */
.cel-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; padding: 11px 20px; border-radius: 999px;
  background: var(--ok); color: #05271b; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--sombra);
}
.cel-toast.erro { background: var(--erro); color: #2a0808; }

/* ---- Layout do calendário ---- */
/* Sidebar enxuta e gap menor: o espaço economizado vai para os cards dos dias,
   que ganham largura para caber "SALA · tutor" sem cortar tão cedo. */
.cal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; }

.cal-side {
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 16px;
  position: sticky; top: 16px;
}
/* Escopo do calendário: Todos · Salas · Laboratórios (visão geral).
   Três colunas iguais (1fr) davam ~57px a cada botão na sidebar estreita e
   "Laboratórios" vazava para fora da pílula. Em flex, cada botão recebe a
   largura do próprio texto e só o excedente é dividido. */
.cal-escopo {
  display: flex; gap: 2px; width: 100%; overflow: hidden;
  padding: 4px; background: var(--bg-2); border: 1px solid var(--card-borda);
  border-radius: 999px;
}
.cal-escopo-btn {
  flex: 1 1 auto; min-width: 0;
  padding: 7px 4px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--txt-2);
  font-size: 11px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: var(--transicao);
}
.cal-escopo-btn:hover { color: var(--txt-1); }
.cal-escopo-btn.ativo { background: var(--grad-laranja); color: #fff; box-shadow: var(--sombra-laranja); }
.cal-escopo-dica { font-size: 11.5px; margin: 8px 2px 16px; line-height: 1.4; }

/* Escopo da planilha (mesma pílula, botões são links) */
.escopo-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--card-borda); border-radius: 999px; }
.escopo-toggle a {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: var(--txt-2); transition: var(--transicao);
}
.escopo-toggle a:hover { color: var(--txt-1); }
.escopo-toggle a.ativo { background: var(--grad-laranja); color: #fff; box-shadow: var(--sombra-laranja); }

.cal-side-grupo { margin-bottom: 14px; }
.cal-side-rot { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px; }
.cal-sel-espaco { width: 100%; }
.cal-side-dica { font-size: 12px; line-height: 1.5; margin-top: 6px; }
.cal-side-dica a { color: var(--laranja-1); font-weight: 600; }

.cal-main {
  background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 16px 12px; min-height: 420px;
}
.cal-topo { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-espaco-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-espaco-atual { font-size: 18px; font-weight: 800; }
.cal-filtros { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Badge de capacidade (carteiras) do espaço selecionado — clicável só para admin */
.cal-cart-badge {
  font-size: 12.5px; font-weight: 700; color: var(--laranja-1);
  background: var(--grad-laranja-suave); border: 1px solid rgba(246,96,15,.3);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.cal-cart-badge:not(:disabled) { cursor: pointer; transition: var(--transicao); }
.cal-cart-badge:not(:disabled):hover { border-color: var(--laranja-2); color: #fff; background: var(--laranja-2); }
.cal-cart-badge:disabled { cursor: default; }
.cal-cart-badge.vazio { color: var(--txt-3); }
.cal-cart-input {
  width: 128px; padding: 4px 10px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--laranja-2); border-radius: 999px;
  background: var(--bg-1); color: var(--txt-1);
}
.cal-cart-input:focus { outline: none; }

.cal-modo { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2);
  border: 1px solid var(--card-borda); border-radius: 999px; }
.cal-modo button {
  padding: 6px 14px; border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--txt-2); border-radius: 999px;
  transition: var(--transicao);
}
.cal-modo button:hover { color: var(--txt-1); }
.cal-modo button.ativo { background: var(--grad-laranja); color: #fff; }

.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav button {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--card-borda); background: var(--bg-2);
  color: var(--txt-1); border-radius: var(--raio-sm); cursor: pointer;
  font-size: 15px; font-weight: 700; transition: var(--transicao);
}
.cal-nav button:hover { border-color: var(--card-borda-hover); background: var(--bg-3); }
#cal-periodo-label { min-width: 150px; text-align: center; font-weight: 700; font-size: 14px; }

.cal-vazio, .cal-carregando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 20px; text-align: center; color: var(--txt-3);
}
.cal-vazio .ic { font-size: 40px; }

/* ---- Grade de dias ---- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--txt-3); text-align: center; padding: 4px 0; }

/* Layout único das três visões: número fixo no topo, reservas rolando no meio
   e o "+ reserva" fixo no rodapé. Quando a própria célula rolava, o botão
   descia junto com a lista e sumia justamente nos dias cheios. */
/* Altura padrão (mês): dimensionada para caber ~6 reservas antes de precisar
   rolar por dentro. Todas as células do mês ficam com o mesmo tamanho. */
.cal-cel {
  height: 245px; padding: 7px 8px; border: 1px solid var(--card-borda);
  border-radius: 10px; background: var(--bg-1); position: relative;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.cal-num { flex: none; }
.cal-marcas { display: flex; flex-direction: column; gap: 3px; min-width: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Todas as células têm a MESMA altura; o dia com muitas reservas rola por
   dentro, sem esticar a linha nem cortar informação. */
.cal-grid { align-items: stretch; }
.cal-cel.fora { opacity: .38; }
.cal-cel.hoje { border-color: var(--laranja-2); box-shadow: inset 0 0 0 1px var(--laranja-2); }
.cal-cel.ocupado { cursor: pointer; background: var(--grad-laranja-suave); border-color: rgba(246,96,15,.3); }
.cal-cel.ocupado:hover { border-color: var(--laranja-2); }
.cal-num { font-size: 12.5px; font-weight: 700; color: var(--txt-2); }
.cal-cel.hoje .cal-num { color: var(--laranja-1); }

.cal-chip {
  display: block; font-size: 11px; font-weight: 600; line-height: 1.35;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(246,96,15,.2); color: var(--laranja-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  /* Sem isto o flex column espreme os chips quando o dia tem muitas reservas:
     o texto fica cortado na vertical e a lista nunca rola. */
  flex: none;
}
.cal-chip { cursor: pointer; }
.cal-chip:hover { filter: brightness(1.15); }
.cal-chip .h { font-weight: 800; color: #ffd7b3; }   /* horário em destaque */
.cal-chip .sl { font-weight: 800; }                   /* sala (na visão geral) */
.cal-chip .tut { font-weight: 600; opacity: .82; }    /* tutor após a sala (mês/semana) */
.cal-chip.avaliado { background: rgba(96,165,250,.18); color: #9cc4fb; }

/* Semana: cada card cresce conforme a quantidade de reservas — mostra TODAS de
   uma vez, sem rolar por dentro. `align-items: start` deixa cada dia com sua
   própria altura (mais reservas = card mais alto). */
.cal-grid.semana { align-items: start; }
.cal-grid.semana .cal-cel { height: auto; min-height: 138px; overflow: visible; }
.cal-grid.semana .cal-marcas { overflow: visible; max-height: none; }

/* Semestre: mini-meses lado a lado. As células rolam para caber tudo sem
   esticar o mini-mês inteiro. */
/* Mini-meses mais largos → cada dia tem largura para o texto caber legível
   (antes 360px deixava a célula com ~40px e "SALA 05" quebrava letra a letra). */
/* 1 mês por linha (células bem largas) na grande maioria das telas; só monitores
   muito grandes (≥2100px) ganham 2 meses lado a lado. Evita o aperto das 2
   colunas em telas normais. */
.cal-semestre { display: grid; grid-template-columns: 1fr; gap: 20px 26px; }
@media (min-width: 2100px) { .cal-semestre { grid-template-columns: 1fr 1fr; } }
.cal-mes-cab { font-size: 14px; font-weight: 800; margin-bottom: 8px; text-transform: capitalize; }
/* Todas as células têm a MESMA altura; o dia com muitas reservas ROLA por dentro
   (não estica a grade). Layout em coluna: número no topo, reservas roláveis no
   meio, botão "+ reserva" fixo no rodapé. */
.cal-semestre .cal-cel { height: 245px; padding: 6px 7px; }
/* Chip em uma linha (mini-mês é largo): cabem ~6 reservas antes de rolar. */
.cal-semestre .cal-chip { font-size: 11px; padding: 3px 6px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Drawer da reserva ---- */
.cal-drawer { position: fixed; inset: 0; z-index: 150; }
.cal-drawer-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.cal-drawer-corpo {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--bg-1); border-left: 1px solid var(--card-borda);
  box-shadow: var(--sombra); padding: 22px; overflow-y: auto;
  animation: cal-drawer-in .18s ease;
}
@keyframes cal-drawer-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.cal-drawer-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: 1px solid var(--card-borda); background: var(--bg-2); color: var(--txt-1);
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
.cal-drawer-x:hover { background: var(--bg-3); }
.cal-drawer-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 34px; }
.cal-drawer-cab h2 { font-size: 20px; font-weight: 800; }

.cal-res-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
  font-size: 14px; }
.cal-res-meta .rot { display: inline-block; min-width: 74px; color: var(--txt-3);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.cal-res-motivo { font-size: 13.5px; color: var(--txt-2); background: var(--bg-2);
  padding: 10px 12px; border-radius: var(--raio-sm); margin-bottom: 14px; }
.cal-res-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* Formulário de edição dentro do popup do calendário */
.cal-form .campo { margin-bottom: 12px; }
.cal-form .campo label { display: block; font-size: 12px; font-weight: 700; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.cal-form select, .cal-form input, .cal-form textarea { width: 100%; }
.cal-form textarea { min-height: 62px; resize: vertical; }
.cal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cal-form-aviso { font-size: 12px; color: var(--txt-3); margin: 4px 0 14px; }

/* Botão "+ reserva": no fluxo, no rodapé da célula, em todas as visões e tenha
   o dia aula ou não. Discreto em repouso para não competir com as reservas,
   sólido no hover. */
.cal-add-dia {
  flex: none; width: 100%; margin-top: 2px;
  padding: 4px 6px; border: 1px dashed rgba(246,96,15,.5); border-radius: 7px;
  background: var(--grad-laranja-suave); color: var(--laranja-1);
  font-size: 10.5px; font-weight: 800; cursor: pointer; opacity: .72;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: var(--transicao);
}
.cal-cel:hover .cal-add-dia { opacity: 1; }
.cal-add-dia:hover { border-style: solid; border-color: var(--laranja-2); color: #fff; background: var(--laranja-2); }
.cal-grid.semana .cal-add-dia { font-size: 11px; padding: 5px 6px; }
@media (hover: none) { .cal-add-dia { opacity: .85; } }   /* toque: sem hover */

/* Botão "Ver Reservas": no topo do card, abaixo do número do dia, abre o popup
   com a lista completa. É o que resolve o card estreito. */
.cal-ver-dia {
  flex: none; width: 100%; padding: 3px 6px; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(246,96,15,.28); border-radius: 6px;
  background: rgba(246,96,15,.1); color: var(--laranja-1);
  font-size: 10.5px; font-weight: 800; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: var(--transicao);
}
/* A contagem vira um selo antes do rótulo — informa quantas sem alongar o
   texto, que antes truncava em "1 reserva — ver t…". */
.cal-ver-dia .n {
  flex: none; min-width: 15px; padding: 0 4px; border-radius: 999px;
  background: rgba(246,96,15,.28); font-size: 10px; line-height: 15px;
}
.cal-ver-dia .txt { overflow: hidden; text-overflow: ellipsis; }
.cal-ver-dia:hover { background: var(--laranja-2); color: #fff; border-color: var(--laranja-2); }
.cal-ver-dia:hover .n { background: rgba(0,0,0,.22); }

/* Tabela do popup: uma reserva por linha, com todas as informações. */
.cal-dia-tabela-wrap { overflow-x: auto; margin: 14px 0 4px; }
.cal-dia-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal-dia-tabela th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--txt-3); padding: 6px 9px;
  border-bottom: 1px solid var(--card-borda); white-space: nowrap;
}
.cal-dia-tabela td { padding: 8px 9px; border-bottom: 1px solid var(--card-borda); vertical-align: middle; }
.cal-dia-tabela tbody tr { cursor: pointer; transition: background var(--transicao); }
.cal-dia-tabela tbody tr:hover { background: var(--bg-2); }
.cal-dia-tabela .cal-dia-sala { white-space: nowrap; }
.cal-dia-tabela .cal-dia-sala .badge { margin-left: 5px; }
.cal-dia-tabela .cal-dia-acao { text-align: right; white-space: nowrap; }

.cal-res-dia-info { font-size: 13.5px; font-weight: 700; color: var(--txt-2); margin: -6px 0 12px; }

/* Recorrência no popup (criar/editar) */
.cal-rec { border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  padding: 10px 12px; margin-bottom: 12px; background: var(--bg-2); }
.cal-rec-tog { display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 700; color: var(--txt-1); cursor: pointer; }
.cal-rec-tog input { width: auto; }
.cal-rec-fim { margin: 10px 0 0; }

/* Escolha de escopo na edição (só neste dia × toda a recorrência). */
.cal-escopo-ed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cal-escopo-ed > label:first-child {
  font-size: 12px; font-weight: 700; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
}
.cal-radio {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--card-borda);
  border-radius: var(--raio-sm); background: var(--bg-2);
  font-size: 13.5px; color: var(--txt-1); transition: border-color var(--transicao), background var(--transicao);
}
.cal-radio:hover { border-color: var(--card-borda-hover); }
.cal-radio input { width: auto; flex: none; accent-color: var(--laranja-2); }
.cal-radio b { color: var(--laranja-1); font-weight: 800; }
/* Realça a opção marcada. */
.cal-radio:has(input:checked) { border-color: rgba(246,96,15,.5); background: var(--grad-laranja-suave); }

/* Lista de conflitos de horário */
.cal-conflito-msg { font-size: 13px; color: var(--txt-2); margin-bottom: 14px;
  padding: 10px 12px; border-radius: var(--raio-sm);
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); }
.cal-conflitos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cal-conflito-item { border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  padding: 12px; background: var(--bg-1); }
.cal-conflito-tit { font-size: 13.5px; margin-bottom: 3px; }
.cal-conflito-acoes { display: flex; gap: 8px; margin-top: 10px; }

/* Rótulo com botão "+" para criar curso/período/turma/tutor na hora */
.cal-form .campo-lbl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-add {
  border: 1px solid rgba(246,96,15,.4); background: var(--grad-laranja-suave);
  color: var(--laranja-1); border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 8px;
  text-transform: none; letter-spacing: 0; transition: var(--transicao);
}
.cal-add:hover { border-color: var(--laranja-2); color: #fff; background: var(--laranja-2); }

/* Mini popup de criação — sobre o popup de edição */
.cal-mini { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.cal-mini-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.cal-mini-caixa {
  position: relative; width: min(380px, 94vw);
  background: var(--bg-1); border: 1px solid var(--card-borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px;
  animation: cal-drawer-in .16s ease;
}
.cal-mini-caixa h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.cal-mini-caixa label { display: block; font-size: 12px; font-weight: 700; color: var(--txt-3);
  text-transform: uppercase; letter-spacing: .3px; margin: 8px 0 5px; }
.cal-mini-caixa input { width: 100%; }
.cal-mini-acoes { display: flex; gap: 8px; margin-top: 16px; }

.cal-res-dias { border-top: 1px solid var(--card-borda); padding-top: 14px; }
.cal-res-dias .flex-between { margin-bottom: 10px; }
.cal-res-dias strong { font-size: 14px; }
.lnk { background: none; border: none; color: var(--laranja-1); cursor: pointer;
  font-size: 12.5px; font-weight: 700; }
.cal-dias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px; margin-bottom: 12px; }
.cal-dia-card {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px; border: 1px solid var(--card-borda); border-radius: 9px;
  background: var(--bg-2); cursor: pointer; position: relative;
}
.cal-dia-card input { position: absolute; top: 5px; left: 5px; }
.cal-dia-card .dd { font-size: 12.5px; font-weight: 800; }
.cal-dia-card .ee { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--txt-3); }
.cal-dia-card.ativo { border-color: rgba(52,211,153,.4); }
.cal-dia-card.ativo .ee { color: var(--ok); }
.cal-dia-card.cancelado { opacity: .5; border-style: dashed; }
.cal-dia-card.avaliado { border-color: rgba(96,165,250,.4); }
.cal-dia-card.avaliado .ee { color: var(--info); }
.cal-dia-card.trava { cursor: not-allowed; }
.cal-lote-acoes { display: flex; gap: 8px; }

.cal-escolha { display: flex; flex-direction: column; gap: 8px; }
.cal-escolha-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  background: var(--bg-2); color: var(--txt-1); cursor: pointer; transition: var(--transicao);
}
.cal-escolha-item:hover { border-color: var(--laranja-2); background: var(--bg-3); }
.cal-escolha-item span { font-size: 12.5px; color: var(--txt-3); }

body.sem-scroll { overflow: hidden; }

@media (max-width: 820px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-side { position: static; }
}


/* =========================================================================
   PERGUNTAS POR SALA (wizard) — vindas do formulário de acompanhamento.
   Aparecem dentro de .obs-box quando o espaço está em uso.
   ========================================================================= */
.sala-extra {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--card-borda);
  display: flex; flex-direction: column; gap: 14px;
}
.sala-grupo > label {
  display: block; font-weight: 700; font-size: 13.5px;
  color: var(--txt-2); margin-bottom: 7px;
}
.sala-extra .sn.compacto { gap: 10px; }
.chk-lista { display: flex; flex-direction: column; gap: 8px; }
.sala-chk {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--txt-1); line-height: 1.4; cursor: pointer;
}
.sala-chk input { width: auto; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--laranja-2); }
.sala-chk:hover { color: var(--laranja-1); }

/* Respostas ricas por sala no detalhe da avaliação */
.uso-detalhes { display: flex; flex-direction: column; gap: 3px; margin-top: 6px;
  font-size: 13px; color: var(--txt-2); }
.uso-detalhes .ud b { color: var(--txt-1); font-weight: 700; }

/* =========================================================================
   ALERTA DE RESERVA no wizard — avisa se há reserva para o ambiente no dia.
   ========================================================================= */
.reserva-alerta {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 14px; border-radius: var(--raio-sm);
  font-size: 13.5px; line-height: 1.4;
}
.reserva-alerta .ic { font-size: 17px; line-height: 1; flex-shrink: 0; }
.reserva-alerta.encontrada {
  background: var(--grad-laranja-suave);
  border: 1px solid rgba(246,96,15,.35);
  color: var(--txt-1);
}
.reserva-alerta.encontrada strong { color: var(--laranja-1); display: block; margin-bottom: 3px; }
.reserva-alerta.encontrada .res { color: var(--txt-2); }
.reserva-alerta.encontrada .res b { color: var(--txt-1); font-weight: 700; }
.reserva-alerta.vazio {
  background: rgba(124,124,136,.10);
  border: 1px dashed var(--card-borda);
  color: var(--txt-3);
}

/* Selects de catálogo (tutor/curso/período/turma) no passo sem reserva */
.sala-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sala-cat-grid select { width: 100%; }
@media (max-width: 560px) { .sala-cat-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   POPUP "Ver salas disponíveis" — modal centralizado com escolha de dias.
   ========================================================================= */
.cal-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; }
.cal-modal[hidden] { display: none; }
.cal-modal-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); animation: scrim-in .18s ease; }
.cal-modal-corpo {
  position: relative; width: 100%; max-width: 560px; max-height: min(86vh, 720px);
  overflow-y: auto; background: var(--card); border: 1px solid var(--card-borda);
  border-radius: var(--raio); padding: 24px; box-shadow: var(--elev-3);
  animation: nav-pop-in .18s cubic-bezier(.16,1,.3,1);
}
.cal-modal-corpo h2 { font-size: var(--fs-xl); font-weight: 800; }
/* O popup do dia lista uma reserva por linha — precisa de bem mais largura. */
.cal-modal-corpo.cal-modal-largo { max-width: min(1100px, 94vw); }
.cal-modal-x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--raio-sm);
  background: var(--bg-2); border: 1px solid var(--card-borda); color: var(--txt-2); cursor: pointer;
}
.cal-modal-x:hover { background: var(--bg-3); color: var(--txt-1); }

.cal-disp-dias { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.cal-disp-dia {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 13px; border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
  background: var(--bg-2); font-size: var(--fs-sm); transition: border-color var(--transicao), background var(--transicao);
}
.cal-disp-dia:hover { border-color: var(--card-borda-hover); }
.cal-disp-dia input { width: auto; accent-color: var(--laranja-2); }
.cal-disp-dia b { color: var(--txt-1); font-weight: 700; }
.cal-disp-dia:has(input:checked) { border-color: rgba(246,96,15,.5); background: var(--grad-laranja-suave); }

.cal-disp-acoes { display: flex; gap: 8px; margin-bottom: 6px; }
.cal-disp-aviso { color: var(--txt-3); font-size: var(--fs-sm); margin-top: 10px; }
.cal-disp-resultado { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.cal-disp-bloco { border-top: 1px solid var(--card-borda); padding-top: 12px; }
.cal-disp-bloco h3 { font-size: var(--fs-base); font-weight: 800; text-transform: capitalize; margin-bottom: 10px; }
.cal-disp-grupo { margin-bottom: 10px; }
.cal-disp-rot { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px; }
.cal-disp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-disp-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: var(--raio-pill); font-size: var(--fs-sm); font-weight: 600;
  background: rgba(52,211,153,.12); color: #6ee7b7; border: 1px solid rgba(52,211,153,.25);
}
.cal-disp-chip small { color: var(--txt-3); font-weight: 500; font-size: 11px; }
.cal-disp-nenhum { color: var(--txt-3); font-size: var(--fs-sm); font-style: italic; }


/* =========================================================================
   CELULAR — a partir daqui, o que muda de forma no toque.

   O princípio: nada fica escondido atrás de scroll horizontal onde caiba uma
   lista vertical. O calendário é o caso extremo — sete colunas num aparelho de
   375px dariam ~45px por dia, ilegível — então cada visão vira o formato que
   funciona no polegar, e o popup "ver todas" carrega o detalhe.
   ========================================================================= */
@media (max-width: 640px) {

  /* ---- Calendário: semana vira lista de dias, um abaixo do outro ---- */
  .cal-grid.semana { grid-template-columns: 1fr; gap: 8px; }
  .cal-grid.semana .cal-dow { display: none; }        /* o dia vai no próprio card */
  /* Cada card cresce com suas reservas — mostra todas sem rolar por dentro. */
  .cal-grid.semana .cal-cel { height: auto; min-height: 96px; max-height: none; }
  .cal-grid.semana .cal-marcas { max-height: none; overflow: visible; }
  .cal-grid.semana .cal-num { font-size: 14px; }
  .cal-grid.semana .cal-chip { font-size: 12px; padding: 5px 9px; }
  .cal-grid.semana .cal-add-dia { font-size: 12px; padding: 8px 6px; }

  /* ---- Mês: mantém a malha de 7 colunas (é o que faz um mês ser um mês),
     mas a célula reduz ao essencial — número + quantas reservas. O toque abre
     o popup do dia, que mostra tudo com folga. ---- */
  .cal-grid:not(.semana) .cal-cel { height: 74px; padding: 4px 3px; gap: 2px; }
  .cal-grid:not(.semana) .cal-marcas { display: none; }
  .cal-grid:not(.semana) .cal-num { font-size: 12px; text-align: center; }
  .cal-grid:not(.semana) .cal-dow { font-size: 9px; padding: 2px 0; }
  .cal-grid:not(.semana) .cal-ver-dia {
    flex: 1; padding: 0; margin: 0;
    background: transparent; border: none; color: var(--laranja-1);
  }
  /* Só o número cabe em ~45px; o rótulo inteiro segue no title/aria-label. */
  .cal-grid:not(.semana) .cal-ver-dia .txt { display: none; }
  .cal-grid:not(.semana) .cal-ver-dia .n {
    background: transparent; font-size: 15px; font-weight: 800;
    line-height: 1.2; padding: 0; min-width: 0;
  }
  .cal-grid:not(.semana) .cal-ver-dia:hover { background: transparent; color: var(--laranja-2); }
  .cal-grid:not(.semana) .cal-ver-dia:hover .n { background: transparent; }
  /* O "+ reserva" viraria ruído em 45px de largura: no mês some, e criar
     passa pelo popup do dia (que tem o botão em tamanho de toque). */
  .cal-grid:not(.semana) .cal-add-dia { display: none; }

  /* ---- Semestre: um mês por vez, células mais baixas ---- */
  .cal-semestre .cal-cel { height: 104px; }
  .cal-semestre .cal-chip { font-size: 10px; }

  /* Topo do calendário empilhado: os filtros ganham a linha inteira. */
  .cal-topo { flex-direction: column; align-items: stretch; gap: 10px; }
  .cal-filtros { justify-content: space-between; gap: 8px; }
  .cal-modo { flex: 1; }
  .cal-modo button { flex: 1; }
  .cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* Popup do dia ocupa a tela: é onde o detalhe é lido no celular. */
  .cal-modal { padding: 0; place-items: stretch; }
  .cal-modal-corpo, .cal-modal-corpo.cal-modal-largo {
    max-width: none; max-height: 100vh; height: 100%;
    border-radius: 0; border: none; padding: 20px 16px 24px;
  }

  /* Tabela do popup vira cartões: uma reserva por bloco, rótulo ao lado do
     valor. Nove colunas não cabem em 375px de jeito nenhum. */
  .cal-dia-tabela thead { display: none; }
  .cal-dia-tabela, .cal-dia-tabela tbody, .cal-dia-tabela tr, .cal-dia-tabela td { display: block; }
  .cal-dia-tabela tbody tr {
    border: 1px solid var(--card-borda); border-radius: var(--raio-sm);
    margin-bottom: 10px; padding: 4px 0; background: var(--bg-2);
  }
  .cal-dia-tabela td { border: none; padding: 5px 12px; display: flex; gap: 10px; }
  .cal-dia-tabela td::before {
    content: attr(data-rot); flex: none; min-width: 76px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; color: var(--txt-3); padding-top: 2px;
  }
  .cal-dia-tabela .cal-dia-sala { padding-top: 10px; font-size: 15px; }
  .cal-dia-tabela .cal-dia-acao { padding-bottom: 10px; }
  .cal-dia-tabela .cal-dia-acao .btn { width: 100%; }

  /* ---- Planilha: rola na horizontal, mas com pista visível de que rola ---- */
  .folha-scroll { -webkit-overflow-scrolling: touch; }
  .folha-tabela { font-size: 12.5px; }
  .folha-tabela thead th, .folha-tabela tbody td { padding: 7px 9px; }
  .folha-tabela select.cel-edit, .folha-tabela input.cel-edit { min-width: 84px; font-size: 12px; }
  .view-toggle, .escopo-toggle { width: 100%; }
  .view-toggle a, .escopo-toggle a { flex: 1; text-align: center; }
  .grade-topo { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Ações da planilha: esconde Exportar/Imprimir; os 3 botões de semana ficam
     menores e numa única linha. */
  .grade-acoes { flex-wrap: nowrap; gap: 6px; }
  .grade-acoes .so-desktop { display: none; }
  .grade-acoes .grade-nav {
    flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 12px;
    text-align: center; white-space: nowrap;
  }
  .grade-nav-full { display: none; }

  /* ---- Alvos de toque: 44px é o mínimo confortável ---- */
  .btn, .btn-sm { min-height: 40px; }
  .papel-opcao { padding: 14px; }

  /* Formulários não podem disparar o zoom automático do iOS: abaixo de 16px
     o Safari amplia a página ao focar o campo e o layout "pula". */
  input, select, textarea { font-size: 16px; }
  .cel-edit, .cel-inp { font-size: 16px; }
}

/* Telas bem estreitas (≤380px): o mês encolhe mais um degrau. */
@media (max-width: 380px) {
  .cal-grid { gap: 2px; }
  .cal-grid:not(.semana) .cal-cel { height: 62px; }
  .container { padding: 16px 10px 90px; }
}