/* =====================================================================
   EDAA Ipanema — identidade da Escola de Dança Alice Arja
   Vinho #360C0C, bordô #AC3B39, creme e rosa claro.
   Títulos em serifa didone (o site usa The Devine; Didot é a mais
   próxima disponível no sistema), corpo em sans geométrica (Gotham →
   Futura / Avenir).
   ===================================================================== */
:root {
  --wine-900: #360C0C;
  --wine-700: #7E2B2A;
  --wine-600: #AC3B39;
  --wine-300: #D07271;
  --blush: #FFC1C0;
  --blush-soft: #FEE8E8;
  --cream: #EFEAD3;
  --sand: #9B9789;
  --paper: #FFFBFB;
  --ink: #2A1616;
  --ink-soft: #6E5A5A;
  --linha: #F6ECEC;
  --serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Futura", "Avenir Next", "Avenir", "Gill Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 20px;
  --sombra: 0 1px 2px rgba(54,12,12,.04), 0 12px 32px -14px rgba(54,12,12,.18);
}

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

body {
  font-family: var(--sans);
  background: linear-gradient(160deg, #F3EDE8 0%, #EAE0DA 100%);
  color: var(--ink);
  padding: 22px;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}

.frame {
  max-width: 1480px; margin: 0 auto; background: var(--paper);
  border-radius: 28px; box-shadow: 0 30px 70px -34px rgba(54,12,12,.45);
  display: grid; grid-template-columns: 232px 1fr;
  overflow: hidden; min-height: calc(100vh - 44px);
}

/* ---------------- sidebar ---------------- */
.side {
  background: var(--wine-900); color: #F6E9E9;
  padding: 24px 16px; display: flex; flex-direction: column; gap: 22px;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.logo .mark { font-family: var(--serif); font-size: 28px; letter-spacing: -1px; line-height: 1; color: #fff; }
.logo .sub {
  border-left: 1px solid rgba(255,255,255,.35); padding-left: 9px;
  font-size: 7.5px; letter-spacing: 1.5px; line-height: 1.6; color: #E7C9C9;
}
.logo .sub b { color: #fff; }

.quem-sou {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border-radius: 12px; padding: 9px 11px;
}
.quem-sou .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--blush), var(--wine-600));
  display: grid; place-items: center; font-family: var(--serif);
  font-size: 14px; color: #fff;
}
.quem-sou b { display: block; font-size: 11.5px; color: #fff; line-height: 1.3; }
.quem-sou span { font-size: 9.5px; color: #C9A5A5; letter-spacing: .3px; }

nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 11px; color: #DDBFBF; text-decoration: none; font-size: 12.5px;
}
.nav-item svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.nav-item.on { background: var(--wine-600); color: #fff; font-weight: 600; }
.nav-item:not(.on):hover { background: rgba(255,255,255,.07); color: #fff; }
.pill {
  margin-left: auto; background: var(--blush); color: var(--wine-900);
  font-size: 9.5px; font-weight: 700; border-radius: 20px; padding: 2px 7px;
}

.side-pe { margin-top: auto; }
.modo-demo {
  background: rgba(255,255,255,.07); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.modo-demo b { font-size: 11px; color: #fff; }
.modo-demo span { font-size: 10px; color: #C9A5A5; line-height: 1.5; }
.modo-demo .btn { margin-top: 5px; }

/* ---------------- main ---------------- */
main { padding: 20px 26px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 4px;
}
.marca-topo { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sand); }
select.competencia {
  background: var(--wine-900); color: #fff; border: 0; border-radius: 30px;
  padding: 9px 16px; font-size: 11.5px; font-family: var(--sans); cursor: pointer;
}

.pagina { display: flex; flex-direction: column; gap: 18px; }
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagina-topo h2 { font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: -.3px; }
.pagina-topo p { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------- cartões ---------------- */
.card { background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding: 18px 20px; min-width: 0; }
.card-head { margin-bottom: 14px; }
.card h3 { font-size: 13px; font-weight: 700; }
.hint { font-size: 10.5px; color: var(--sand); font-weight: 400; margin-top: 2px; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 18px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 14px; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi { border-radius: var(--r); padding: 15px 17px; box-shadow: var(--sombra); position: relative; }
.kpi .lbl { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; }
.kpi .val { font-family: var(--serif); font-size: 30px; line-height: 1.15; margin-top: 8px; letter-spacing: -.5px; }
.kpi .foot { font-size: 10.5px; margin-top: 5px; opacity: .75; }
.kpi .tag {
  position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 700;
  border-radius: 20px; padding: 3px 8px; background: #fff; color: var(--wine-600);
}
.k1 { background: var(--blush-soft); }
.k2 { background: var(--cream); }
.k3 { background: #F1E7E7; }
.k-neg { background: #F7D9D9; }
.kcta {
  background: linear-gradient(150deg, var(--wine-600), var(--wine-900));
  color: #fff; display: flex; flex-direction: column; gap: 5px;
}
.kcta b { font-family: var(--serif); font-size: 15px; font-weight: 400; }
.kcta .val-cta { font-family: var(--serif); font-size: 25px; letter-spacing: -.5px; }
.kcta span { font-size: 10px; color: #F0CFCF; line-height: 1.5; }
.kcta .btn { margin-top: auto; align-self: flex-start; }

/* ---------------- botões ---------------- */
.btn {
  border: 0; border-radius: 20px; padding: 8px 15px; font-size: 11.5px;
  font-weight: 600; font-family: var(--sans); cursor: pointer; white-space: nowrap;
}
.btn-primario { background: var(--wine-600); color: #fff; }
.btn-primario:hover { background: var(--wine-700); }
.btn-neutro { background: #F4EBEB; color: var(--wine-700); }
.btn-neutro:hover { background: var(--blush-soft); }
.btn-claro { background: #fff; color: var(--wine-900); }
.btn-perigo { background: transparent; color: var(--wine-600); text-decoration: underline; padding: 8px 6px; }
.linha-acoes { display: flex; gap: 4px; justify-content: flex-end; }

select, input, textarea {
  font-family: var(--sans); font-size: 12px; color: var(--ink);
  border: 1px solid #EFE1E1; border-radius: 10px; padding: 8px 11px; background: #fff;
}
select { cursor: pointer; }
.acoes select { border-radius: 20px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blush); outline-offset: 1px; }
.entrada-inline { width: 76px; text-align: right; padding: 6px 9px; }

/* ---------------- tabelas ---------------- */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--sand); font-weight: 600; padding: 0 10px 9px 0; white-space: nowrap;
}
td { padding: 9px 10px 9px 0; font-size: 11.5px; border-top: 1px solid var(--linha); vertical-align: middle; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.forte { font-weight: 700; }
.col-acoes { text-align: right; width: 1%; white-space: nowrap; }
.cel-turma b { display: block; font-size: 12px; }
.cel-turma span { font-size: 9.5px; color: var(--sand); }
.vazio { font-size: 11.5px; color: var(--sand); padding: 8px 0; }

.badge { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 20px; padding: 3px 9px; }
.b-ok { background: #E9F0E7; color: #4B6A46; }
.b-aviso { background: var(--blush-soft); color: var(--wine-600); }
.b-atencao { background: #FDF3DE; color: #8A6A21; }
.b-neutro { background: #F2E9E9; color: #7A5C5C; }

.meter { display: inline-block; height: 6px; border-radius: 6px; background: #F3E7E7; overflow: hidden; width: 76px; vertical-align: middle; }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--wine-600); }

.linha-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--linha); margin-top: 10px; padding-top: 10px; font-size: 12px;
}
.linha-total b { font-family: var(--serif); font-size: 17px; }

.alerta {
  background: var(--blush-soft); color: var(--wine-700); border-radius: 12px;
  padding: 10px 14px; font-size: 11.5px; margin-top: 10px;
}
.conc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; padding: 5px 0; border-bottom: 1px solid var(--linha); }
.conc:last-child { border-bottom: 0; }

/* ---------------- gráficos ---------------- */
.bars { width: 100%; height: 236px; display: block; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 10.5px; color: var(--ink-soft); margin-top: 8px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.rosca-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rosca-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 170px; }
.rl { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.rl i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rl small { color: #B9A9A9; }
.rl b { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11.5px; }

/* ---------------- lista de professoras ---------------- */
.prow { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.prow:last-child { border-bottom: 0; }
.pav {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; flex: none; font-family: var(--serif);
  background: var(--wine-600);
}
.pinfo b { display: block; font-size: 12px; }
.pinfo span { font-size: 9.5px; color: var(--sand); }
.pval { margin-left: auto; text-align: right; }
.pval b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pval span { display: block; font-size: 9.5px; color: var(--sand); }

/* ---------------- fechamento ---------------- */
.turmas-fech { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.turma-bloco { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.tb-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tb-topo b { font-size: 12px; }
.tb-topo span { font-size: 11px; color: var(--wine-600); font-weight: 700; }
.tb-sub { font-size: 9.5px; color: var(--sand); margin-top: 2px; }
.tb-lista { margin: 8px 0 0 16px; font-size: 11px; line-height: 1.7; color: var(--ink-soft); }
.tb-lista li.pendente { color: #C09A9A; font-style: italic; }
.tb-vazia { margin-top: 8px; font-size: 11px; color: #C09A9A; font-style: italic; }
.tb-lista small { color: var(--sand); }

/* ---------------- modal ---------------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(54,12,12,.42); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  background: #fff; border-radius: 22px; width: min(560px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -20px rgba(54,12,12,.5);
}
.modal-estreito { width: min(420px, 100%); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 10px; }
.modal-topo h3 { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.fechar { background: none; border: 0; font-size: 24px; color: var(--sand); cursor: pointer; line-height: 1; }
.modal-corpo {
  padding: 6px 22px 12px; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.modal-corpo p { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.6; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo:has(textarea) { grid-column: 1 / -1; }
.campo > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
.campo small { font-size: 10px; color: var(--sand); }
.modal-pe { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }
.erro { color: var(--wine-600); font-size: 11.5px; padding: 0 22px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--wine-900); color: #fff; padding: 11px 20px; border-radius: 26px;
  font-size: 12px; z-index: 60; box-shadow: 0 14px 30px -12px rgba(54,12,12,.7);
  transition: opacity .4s;
}
.toast.sai { opacity: 0; }

/* ---------------- login ---------------- */
.login { display: grid; place-items: center; min-height: 80vh; }
.login-caixa {
  background: #fff; border-radius: 24px; padding: 34px 32px; width: min(380px, 100%);
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 12px; text-align: center;
}
.login-caixa .mark { font-family: var(--serif); font-size: 34px; color: var(--wine-600); }
.login-caixa h1 { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.login-caixa p { font-size: 11px; color: var(--sand); margin-bottom: 6px; }
.login-caixa label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }

/* ---------------- gaveta do menu ---------------- */
.hamburguer { display: none; }
.menu-fundo { display: none; }
.graf-rolagem { overflow-x: auto; max-width: 100%; }

/* Filho de flex e de grid não encolhe abaixo do conteúdo a menos que se
   diga explicitamente. Sem isto, o gráfico de 620px estica os cartões e
   a página inteira passa da largura da tela. */
.pagina > *, .grid-2 > *, .coluna > * { min-width: 0; }
.rosca-lista { min-width: 0; }

/* ---------------- responsivo ---------------- */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  body { padding: 0; -webkit-text-size-adjust: 100%; }
  .frame {
    grid-template-columns: 1fr; border-radius: 0;
    min-height: 100vh; box-shadow: none; position: relative;
  }

  /* A barra lateral vira gaveta: sai da tela e volta pelo hambúrguer. */
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 268px;
    transform: translateX(-100%); transition: transform .24s ease;
    z-index: 40; overflow-y: auto; padding-top: 20px;
    box-shadow: 12px 0 40px -18px rgba(0,0,0,.7);
  }
  body.menu-aberto .side { transform: none; }
  /* Com a gaveta aberta, a página atrás não rola junto. */
  body.menu-aberto { overflow: hidden; }

  body.menu-aberto .menu-fundo {
    display: block; position: fixed; inset: 0;
    background: rgba(54,12,12,.5); z-index: 35;
  }

  .hamburguer {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; flex: none; padding: 0 10px;
    background: #fff; border: 1px solid #EFE1E1; border-radius: 12px; cursor: pointer;
  }
  .hamburguer span { display: block; height: 2px; border-radius: 2px; background: var(--wine-700); }

  main { padding: 12px 14px 26px; overflow-x: hidden; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .barra { gap: 10px; }
  .marca-topo {
    font-size: 9px; letter-spacing: 1px; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  select.competencia { padding: 10px 12px; font-size: 11px; flex: none; max-width: 46%; }

  .pagina-topo { align-items: stretch; flex-direction: column; gap: 12px; }
  .pagina-topo h2 { font-size: 21px; }
  .acoes { width: 100%; }
  .acoes > * { flex: 1 1 auto; }

  .kpis, .kpis-3 { grid-template-columns: 1fr; gap: 10px; }
  .kpi .val { font-size: 27px; }
  .card { padding: 15px 15px; border-radius: 16px; }

  /* Dedo precisa de alvo maior que cursor. */
  .btn { padding: 11px 16px; font-size: 12.5px; min-height: 42px; }
  select, input, textarea { font-size: 16px; padding: 10px 12px; } /* 16px evita o zoom do iOS */
  .entrada-inline { width: 88px; font-size: 16px; }

  /* Gráfico de barras rola em vez de espremer. */
  .graf-rolagem .bars { min-width: 620px; }
  .rosca-wrap { justify-content: center; }

  /* ----- tabela vira lista de cartões ----- */
  .tabela-wrap { overflow-x: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr {
    border: 1px solid var(--linha); border-radius: 14px;
    padding: 10px 12px; margin-bottom: 10px; background: #fff;
  }
  td {
    border-top: 0; padding: 5px 0; font-size: 12.5px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  td::before {
    content: attr(data-rotulo);
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--sand); flex: none;
  }
  td[data-rotulo=""]::before { content: none; }
  td.n { text-align: right; }
  /* A primeira célula é o título do cartão. */
  td:first-child { padding-bottom: 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
  td:first-child::before { content: none; }
  td:first-child .cel-turma b { font-size: 13.5px; }
  .col-acoes { width: 100%; text-align: left; padding-top: 8px; }
  .linha-acoes { justify-content: flex-start; }
  .meter { width: 100%; max-width: 140px; }

  .turmas-fech { grid-template-columns: 1fr; }
  .modal-corpo { grid-template-columns: 1fr; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; }
  .modal-fundo { align-items: flex-end; padding: 0; }
  .linha-total b { font-size: 15px; }
}

@media (max-width: 420px) {
  .pagina-topo h2 { font-size: 19px; }
  .acoes { flex-direction: column; }
  .acoes > * { width: 100%; }
}

/* ---------------- impressão do fechamento ---------------- */
@media print {
  body { background: #fff; padding: 0; font-size: 11px; }
  .side, .barra, .acoes, .col-acoes, .toast { display: none !important; }
  .frame { grid-template-columns: 1fr; box-shadow: none; border-radius: 0; }
  .card { box-shadow: none; border: 1px solid #E8DCDC; break-inside: avoid; }
  .turma-bloco { break-inside: avoid; }
}