/* Obstetrícia EPM — mobile-first, alvo de toque grande (uso em pé, na enfermaria). */
:root{
  --tinta:#12435c; --tinta-clara:#1c6c93; --fundo:#f4f6f8; --carta:#fff;
  --texto:#16232b; --suave:#6b7c85; --borda:#dde4e8;
  --ok:#1f7a4d; --alerta:#b3541e; --erro:#a8262b; --destaque:#fff4d6;
  --raio:14px; --sombra:0 1px 3px rgba(18,67,92,.10);
}
*{box-sizing:border-box}
/* o atributo hidden tem de vencer o display:flex do header e do menu */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--fundo); color:var(--texto);
  -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
}
header{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  background:var(--tinta); color:#fff; padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;
}
header h1{flex:1; margin:0; font-size:17px; font-weight:600; letter-spacing:.2px}
.icone{
  background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:10px;
  width:40px; height:40px; font-size:20px; line-height:1; cursor:pointer;
}
main{padding:12px; max-width:820px; margin:0 auto}
nav#menu{
  position:sticky; bottom:0; display:flex; background:var(--carta);
  border-top:1px solid var(--borda); padding-bottom:env(safe-area-inset-bottom);
}
nav#menu button{
  flex:1; background:none; border:0; padding:10px 4px 12px; font-size:11px;
  color:var(--suave); cursor:pointer;
}
nav#menu button b{display:block; font-size:19px; font-weight:400; line-height:1.3}
nav#menu button.ativo{color:var(--tinta); font-weight:600}

.carta{background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px; margin-bottom:12px; box-shadow:var(--sombra)}
.carta h2{margin:0 0 4px; font-size:16px}
.carta p.sub{margin:0; color:var(--suave); font-size:13px}
.linha{display:flex; align-items:center; gap:10px; justify-content:space-between}
.rotulo{font-size:12px; color:var(--suave); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px}

button.primario{
  background:var(--tinta); color:#fff; border:0; border-radius:12px;
  padding:14px 16px; font-size:16px; width:100%; cursor:pointer; font-weight:600;
}
button.secundario{background:var(--carta); color:var(--tinta); border:1px solid var(--tinta);
  border-radius:12px; padding:12px 14px; font-size:15px; cursor:pointer}
input,select,textarea{
  width:100%; padding:13px; font-size:16px; border:1px solid var(--borda);
  border-radius:12px; background:var(--carta); color:var(--texto);
}
label{display:block; font-size:13px; color:var(--suave); margin:10px 0 4px}

/* -------- caderneta -------- */
.aluno{background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio);
  padding:10px 12px; margin-bottom:10px}
.aluno .nome{font-weight:600; font-size:15px}
.aluno .media{font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinta); font-size:18px}
.aluno .media.vazia{color:var(--borda)}
.slots{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.slots button{
  border:1px solid var(--borda); background:var(--carta); color:var(--suave);
  border-radius:999px; padding:8px 11px; font-size:13px; min-width:56px; cursor:pointer;
}
.slots button.marcado{background:var(--tinta); color:#fff; border-color:var(--tinta)}
.slots button.falta.marcado{background:var(--erro); border-color:var(--erro)}
.grupos{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.grupos button{width:38px; height:38px; border-radius:50%; border:1px solid var(--borda);
  background:var(--carta); font-size:15px; cursor:pointer}
.grupos button.marcado{background:var(--tinta-clara); color:#fff; border-color:var(--tinta-clara)}
.criterio{margin-top:10px}
.criterio .titulo{font-size:13px; display:flex; justify-content:space-between; color:var(--suave)}
.notas{display:flex; gap:3px; margin-top:5px}          /* 9 botões cabem em uma linha no iPhone */
.notas button{flex:1 1 0; min-width:0; padding:10px 0; border:1px solid var(--borda);
  background:var(--carta); border-radius:9px; font-size:14px; cursor:pointer}
.notas button.marcado{background:var(--tinta); color:#fff; border-color:var(--tinta)}

/* -------- avisos -------- */
#aviso{position:fixed; left:12px; right:12px; bottom:74px; z-index:50;
  background:var(--texto); color:#fff; padding:12px 14px; border-radius:12px; font-size:14px}
#aviso.erro{background:var(--erro)}
#aviso.ok{background:var(--ok)}
.pendente{background:var(--destaque); border-left:4px solid var(--alerta); padding:10px 12px;
  border-radius:8px; font-size:13px; margin-bottom:12px}
.tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px;
  background:var(--fundo); border:1px solid var(--borda); color:var(--suave)}
.tag.ok{background:#e8f5ee; color:var(--ok); border-color:#bfe3cd}
.tag.bloq{background:#fdeaea; color:var(--erro); border-color:#f3c7c7}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--borda)}
th{font-size:12px; color:var(--suave); text-transform:uppercase; letter-spacing:.4px}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.vazio{color:var(--suave); text-align:center; padding:26px 10px; font-size:14px}