/* As áreas do professor (/professor/), do aluno (/estudos/) e da conta (/conta/) — por cima do Tabler 1.6.1.
   Primeiro o celular (dedos: alvos de 44px), depois o computador. */
:root { --escuro: #182433; --destaque: #ffb020; }
html, body { min-height: 100%; }
body { background: var(--tblr-bg-surface-secondary); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.marca { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.marca small { font-weight: 500; opacity: .6; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.marca-x { background: var(--destaque); color: var(--escuro); border-radius: 6px; padding: 0 .35rem; font-size: .85rem; }
.marca-grande { font-size: 1.5rem; justify-content: center; }

/* ---------- entrar / trocar a senha ---------- */
.porta { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.porta-cartao { width: 100%; max-width: 420px; }

/* ---------- topo e abas ---------- */
.topo {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .5rem;
  padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem; background: var(--escuro); color: #fff;
}
.topo .marca { color: #fff; }
.topo-quem { margin-left: auto; font-size: .8rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.topo .btn { min-height: 38px; }
.abas-topo { display: flex; gap: .25rem; padding: .5rem .75rem 0; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); overflow-x: auto; }
.abas-topo a {
  padding: .6rem .9rem; border-bottom: 3px solid transparent; color: var(--tblr-secondary); text-decoration: none;
  font-weight: 600; white-space: nowrap; min-height: 44px; display: flex; align-items: center; gap: .4rem;
}
.abas-topo a.ativo { color: var(--tblr-primary); border-bottom-color: var(--tblr-primary); }
.pagina { padding-top: 1rem; padding-bottom: 5rem; outline: none; }

/* ---------- listas ---------- */
.linha { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--tblr-border-color); min-height: 56px; }
.linha:last-child { border-bottom: 0; }
button.linha, a.linha { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; color: inherit; text-decoration: none; }
button.linha:hover, a.linha:hover { background: var(--tblr-bg-surface-secondary); }
.linha-texto { flex: 1; min-width: 0; }
.linha-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.linha-sub { font-size: .8rem; color: var(--tblr-secondary); overflow: hidden; text-overflow: ellipsis; }
.linha-fim { text-align: right; font-size: .8rem; color: var(--tblr-secondary); flex: none; }
.avatar-letra { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; background: var(--tblr-primary-lt); color: var(--tblr-primary); }

.barra-fundo { height: 8px; background: var(--tblr-bg-surface-secondary); border-radius: 4px; overflow: hidden; }
.barra-cheia { height: 100%; background: var(--tblr-primary); border-radius: 4px; transition: width .3s; }
.barra-cheia.completa { background: var(--tblr-success); }

/* ---------- os dias de estudo (barras simples, sem biblioteca) ---------- */
.dias { display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: .5rem 0; }
.dias > div { flex: 1; background: var(--tblr-primary); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.dias > div.zero { background: var(--tblr-border-color); }
.dias-legenda { display: flex; justify-content: space-between; font-size: .72rem; color: var(--tblr-secondary); }

/* ---------- itens do estudo ---------- */
.item { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--tblr-border-color); align-items: flex-start; }
.item:last-child { border-bottom: 0; }
.item-icone { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.15rem; background: var(--tblr-primary-lt); }
.item.cumprido .item-icone { background: var(--tblr-success-lt); }
.item-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.item-acoes .btn { min-height: 38px; }
.feito { display: flex; align-items: center; gap: .4rem; flex: none; min-height: 44px; cursor: pointer; font-size: .85rem; }
.feito input { width: 1.5rem; height: 1.5rem; margin: 0; }
.texto-material { white-space: pre-wrap; font-size: 1rem; line-height: 1.55; }
.material-img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- o construtor do estudo ---------- */
.construtor-item { border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: .75rem; margin-bottom: .6rem; background: var(--tblr-bg-surface); }
.resultados { max-height: 260px; overflow-y: auto; border: 1px solid var(--tblr-border-color); border-radius: 8px; }
.resultados:empty { display: none; }
.ordem-botoes .btn { min-width: 38px; min-height: 38px; padding: 0; }

/* ---------- janela por cima ---------- */
.folha { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; }
.folha-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.folha-caixa { position: relative; width: 100%; max-height: 94vh; overflow-y: auto; margin: 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 768px) { .folha { align-items: center; } .folha-caixa { max-width: 640px; border-radius: 12px; } }
.folha .card-header { position: sticky; top: 0; background: var(--tblr-bg-surface); z-index: 1; }

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1070;
  background: var(--escuro); color: #fff; padding: .6rem 1rem; border-radius: 8px; font-size: .9rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.3); max-width: min(calc(100% - 2rem), 560px);
}
.carregando { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: 3rem 1rem; color: var(--tblr-secondary); }
.carregando .spinner-border { width: 1.4rem; height: 1.4rem; }
.vazio { color: var(--tblr-secondary); padding: 2rem 1rem; text-align: center; }

/* ---------- PALCO (visual único do RetroX1, 12/10/2026): conta, estudos e professor no escuro, com as cores da página
   inicial — botão principal âmbar com volume, cartões em camadas. O admin fica no claro (é ferramenta de trabalho). ---------- */
[data-bs-theme=dark] {
  --tblr-body-bg: #0c0a12; --tblr-bg-surface: #15121d; --tblr-bg-surface-secondary: #0c0a12; --tblr-bg-surface-tertiary: #1e1a28;
  --tblr-body-color: #f5f1ea; --tblr-secondary: #bdb4c7; --tblr-muted: #8f869c; --tblr-border-color: rgba(255,255,255,.09);
  --tblr-border-color-translucent: rgba(255,255,255,.09); --tblr-primary: #f5a524; --tblr-primary-rgb: 245,165,36; --tblr-primary-fg: #1a1206;
  --tblr-link-color: #ffc556; --tblr-link-color-rgb: 255,197,86; --tblr-link-hover-color: #ffd98a;
  --escuro: #0c0a12; --destaque: #f5a524;
}
[data-bs-theme=dark] body { background: radial-gradient(120% 50% at 50% -10%, #1d1630 0%, #0c0a12 60%) fixed, #0c0a12; font-family: 'Segoe UI', system-ui, sans-serif; }
[data-bs-theme=dark] .topo { background: rgba(12,10,18,.92); border-bottom: 1px solid rgba(255,255,255,.085); box-shadow: 0 10px 30px -18px #000; }
[data-bs-theme=dark] .abas-topo { background: transparent; }
[data-bs-theme=dark] .card { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), #15121d; border: 1px solid rgba(255,255,255,.085);
  border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 40px -24px rgba(0,0,0,.95); }
[data-bs-theme=dark] .card-header, [data-bs-theme=dark] .card-footer { background: transparent; border-color: rgba(255,255,255,.085); }
[data-bs-theme=dark] .btn { border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 0 #0b0910; transition: transform .08s, box-shadow .08s; }
[data-bs-theme=dark] .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 #0b0910; }
[data-bs-theme=dark] .btn-primary { background: linear-gradient(180deg, #ffc556 0%, #f5a524 55%, #e8901a 100%); color: #1a1206; border: 0; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 #a8620c, 0 12px 20px -10px rgba(245,165,36,.6); }
[data-bs-theme=dark] .btn-primary:hover, [data-bs-theme=dark] .btn-primary:focus { color: #1a1206; filter: brightness(1.05); background: linear-gradient(180deg, #ffc556 0%, #f5a524 55%, #e8901a 100%); }
[data-bs-theme=dark] .btn-primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #a8620c; }
[data-bs-theme=dark] .btn-link, [data-bs-theme=dark] .btn-ghost-secondary, [data-bs-theme=dark] .btn-close { box-shadow: none; }
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { background-color: #100d17; border-color: rgba(255,255,255,.13); border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { border-color: #f5a524; box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 0 0 3px rgba(245,165,36,.25); }
[data-bs-theme=dark] .modal-content { background: #15121d; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
[data-bs-theme=dark] .marca-x { color: #1a1206; }