/* iDUFU — réplica PWA das telas do app da UFU
   Medidas tiradas dos screenshots originais (750px @2x = 375 CSS px) */

:root{
  --azul:        #1C4892;   /* azul principal: header, círculos, barras */
  --azul-status: #163971;   /* status bar iOS */
  --cinza-sep:   #E2E2E2;   /* faixas separadoras entre seções */
  --borda:       #D2D2D2;   /* borda dos cards */
  --rodape:      #F5F5F5;
  --txt:         #1A1A1A;
  --txt2:        #222222;
  --azul-claro:  #93AECF;   /* legendas sobre azul (drawer, id digital) */
  --amarelo:     #FEF9C9;
  --verde:       #CEE5CB;
  --ctic:        #5087BF;
  --topo: env(safe-area-inset-top, 0px);
  --base: env(safe-area-inset-bottom, 0px);
  --h-appbar: 42px;
  --h-rodape: 40px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ margin:0; padding:0; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:#fff;
  color:var(--txt);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

/* fundo da status bar quando instalado (black-translucent) */
body::before{
  content:''; position:fixed; top:0; left:0; right:0;
  height:var(--topo); background:var(--azul-status); z-index:120;
}

button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

.ic{ display:block; fill:currentColor; }
.lg{ display:block; height:100%; width:auto; }

/* ─────────── barra superior ─────────── */
.appbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--azul); color:#fff;
  height:calc(var(--h-appbar) + var(--topo));
  padding-top:var(--topo);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:1px; padding-right:1px;
}
.appbar__btn{ display:grid; place-items:center; width:36px; height:40px; }
.appbar__btn--email{ margin-right:6px; }
.appbar__btn .ic{ width:21px; height:21px; }
.appbar__btn--email .ic{ width:22px; height:22px; }
.appbar__logo{ height:21px; display:flex; align-items:center; }
.appbar__logo .lg{ height:21px; }
.appbar__title{ font-size:15.5px; font-weight:700; letter-spacing:.6px; }
.appbar__btn--voltar{ width:auto; gap:5px; display:flex; align-items:center; font-size:17px; padding-left:9px; }
.appbar__btn--voltar .ic{ width:11px; height:19px; }
.appbar__redondo{
  width:26px; height:26px; border-radius:50%; border:1.5px solid #fff;
  display:grid; place-items:center; margin-left:22px;
}
.appbar__redondo .ic{ width:13px; height:13px; }
.appbar__acoes{ display:flex; align-items:center; padding-right:15px; }

/* ─────────── área rolável ─────────── */
.tela{
  padding-top:calc(var(--h-appbar) + var(--topo));
  padding-bottom:calc(var(--h-rodape) + var(--base));
  min-height:100dvh;
}
.tela--sem-rodape{
  padding-bottom:var(--base);
  display:flex; flex-direction:column;
}

/* ─────────── carrossel de notícias ─────────── */
.carrossel{ position:relative; overflow:hidden; background:#000; }
.carrossel__trilho{ display:flex; transition:transform .4s ease; }
.carrossel__slide{ flex:0 0 100%; }
.carrossel__slide img{ display:block; width:100%; height:auto; }

/* ─────────── faixas separadoras ─────────── */
.sep{ height:15px; background:var(--cinza-sep); }

/* ─────────── atalhos ─────────── */
.atalhos{ background:#fff; padding-top:12px; position:relative; }
.atalhos__trilho{
  display:flex; gap:5px; padding:0 5px;
  overflow-x:auto; scrollbar-width:none;
}
.atalhos__trilho::-webkit-scrollbar{ display:none; }
.atalho{ flex:0 0 80px; width:80px; display:flex; flex-direction:column; align-items:center; }
.atalho__circulo{
  width:70px; height:70px; border-radius:50%;
  background:var(--azul); color:#fff;
  display:grid; place-items:center; flex:none;
}
.atalho__circulo .ic{ width:33px; height:33px; }
.atalho__circulo .ic.gira{ transform:rotate(-38deg); }
.atalho__nome{
  margin-top:7px; font-size:12.8px; line-height:1.16;
  color:var(--azul); text-align:center;
}
.atalhos__indicador{
  height:4px; border-radius:2px; background:#B9B9B9;
  margin:2px auto; opacity:0; transition:opacity .35s;
}
.atalhos__indicador.visivel{ opacity:1; }

/* ─────────── título de seção ─────────── */
.secao{ background:#fff; }
.secao__topo{
  display:flex; align-items:center; gap:11px;
  padding:14px 15px 20px; color:var(--azul);
}
.secao__topo .ic{ width:20px; height:20px; flex:none; }
.secao__titulo{ margin:0; font-size:18px; font-weight:700; letter-spacing:-.3px; }
.secao__acao{ margin-left:auto; display:grid; place-items:center; }
.secao__acao .ic{ width:16px; height:16px; }

/* link "Ver ... completa →" */
.ver-mais{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  width:100%; padding:12px 15px 11px; font-size:15px; color:var(--txt2);
}
.ver-mais .ic{ width:11px; height:11px; color:var(--azul); flex:none; }

/* ─────────── aulas de hoje ─────────── */
.aula{ display:flex; align-items:stretch; margin:0 15px 10px; }
.aula__hora{
  flex:0 0 49px; background:var(--azul); color:#fff;
  border-radius:4px 0 0 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.3px;
}
.aula__info{
  flex:1; min-width:0;
  border:1px solid var(--borda); border-left:none; border-radius:0 4px 4px 0;
  padding:8px 6px 7px 15px;
}
.aula__nome{ font-size:14px; line-height:1.15; letter-spacing:-.15px; color:#141414; }
.aula__faltas{
  display:inline-block; margin-top:2px; padding:1px 7px;
  border-radius:3px; font-size:12.5px; font-weight:700; color:#3B3B3B;
}
.aula__faltas--alerta{ background:var(--amarelo); }
.aula__faltas--ok{ background:var(--verde); }

/* ─────────── restaurante universitário ─────────── */
.ru{ padding:0 15px 4px; }
.ru__rotulo{
  display:inline-block; background:#444; color:#fff;
  font-size:12.5px; line-height:1.15; padding:2px 11px 3px;
  border-radius:3px 3px 0 0;
}
.ru__barra{
  background:var(--azul); color:#fff; font-size:15px;
  padding:6px 14px; border-radius:0 4px 4px 4px;
  margin-bottom:9px;
}
.ru__botao{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--azul); color:#fff; font-size:15.5px;
  padding:7px 12px; border-radius:4px;
}
.ru__botao .ic{ width:12px; height:12px; }

/* ─────────── eventos ─────────── */
.eventos{
  display:flex; gap:15px; padding:2px 11px 16px;
  overflow-x:auto; scrollbar-width:none;
}
.eventos::-webkit-scrollbar{ display:none; }
.evento{
  flex:0 0 249px; width:249px;
  border:1px solid var(--borda); border-radius:4px;
  background:#fff; overflow:hidden;
}
.evento img{ display:block; width:100%; height:66px; object-fit:cover; }
.evento__nome{
  padding:9px 11px 4px; font-size:13px; line-height:1.26;
  color:var(--azul); text-align:center;
}
.evento__data{
  padding:0 11px 12px; font-size:12px;
  color:var(--azul); text-align:center;
}

/* ─────────── rodapé ─────────── */
.rodape{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--rodape); border-top:1px solid #E4E4E4;
  height:calc(var(--h-rodape) + var(--base));
  padding:0 14px var(--base);
  display:flex; align-items:center; justify-content:space-between;
}
.rodape__ctic{ display:flex; align-items:center; gap:8px; }
.rodape__ctic .marca{ height:24px; color:var(--ctic); }
.rodape__ctic .texto{ height:23px; color:var(--azul); }
.rodape__fale{
  display:flex; align-items:center; gap:8px;
  color:var(--azul); font-size:13px; font-weight:600;
}
.rodape__fale .ic{ width:17px; height:17px; }

/* ─────────── menu lateral ─────────── */
.veu{
  position:fixed; inset:0; background:rgba(0,0,0,.06);
  opacity:0; pointer-events:none; transition:opacity .28s; z-index:90;
}
.veu.aberto{ opacity:1; pointer-events:auto; }

.menu{
  position:fixed; top:0; bottom:0; left:0; width:275px; max-width:82vw;
  background:var(--azul); color:#fff; z-index:100;
  transform:translateX(-100%); transition:transform .28s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-top:var(--topo); padding-bottom:calc(20px + var(--base));
}
.menu.aberto{ transform:none; box-shadow:0 0 26px rgba(0,0,0,.35); }

.menu__perfil{ display:flex; align-items:center; gap:14px; padding:19px 14px 24px; }
.menu__foto{
  width:80px; height:80px; border-radius:50%; object-fit:cover; flex:none;
  background:#0f2f66;
}
.menu__nome{ font-size:16px; line-height:1.18; }
.menu__papel{ font-size:14.5px; color:var(--azul-claro); margin-top:3px; line-height:1.2; }
.menu__matricula{ font-size:14.5px; color:var(--azul-claro); line-height:1.2; }

.menu__item{
  display:flex; align-items:center; gap:22px;
  width:100%; text-align:left;
  padding:11.5px 15px; font-size:17px;
}
.menu__item .ic{ width:31px; height:28px; flex:none; }
.menu__item .ic.gira{ transform:rotate(-38deg); }
.menu__item:active{ background:rgba(255,255,255,.1); }
.menu__divisor{ height:1px; background:rgba(255,255,255,.28); margin:8px 0; }

/* ─────────── ID digital ─────────── */
.id{ background:#fff; }
.id__topo{
  background:var(--azul); color:#fff;
  width:92%; max-width:345px;
  border-bottom-right-radius:52px;
  padding:16px 0 0 19px; height:108px;
}
.id__topo .lg{ height:70px; }

.id__faixa{ position:relative; height:160px; background:var(--azul); }
.id__faixa::before{
  content:''; position:absolute; inset:0 0 0 20px;
  background:#fff; border-radius:80px 0 0 80px;
}
.id__linha{ position:absolute; left:157px; right:0; height:5px; background:var(--azul); }
.id__linha--cima{ top:7px; }
.id__linha--baixo{ bottom:3px; }

.id__foto{
  position:absolute; left:33px; top:50%; transform:translateY(-50%);
  width:141px; height:141px; border-radius:50%;
  object-fit:cover; border:3px solid var(--azul);
  box-shadow:0 0 0 12px #fff;
}
.id__pessoa{ position:absolute; left:192px; right:28px; top:50%; transform:translateY(-50%); }
.id__nome{
  font-size:18px; font-weight:800; line-height:1.12;
  color:#111; letter-spacing:-.3px;
}
.id__curso{
  margin-top:6px; font-size:13.5px; line-height:1.15;
  color:#3A3A3A; letter-spacing:-.1px;
}

.id__base{
  background:var(--azul); color:#fff;
  width:92%; max-width:345px;
  border-top-right-radius:52px;
  padding:25px 0 24px 33px;
  flex:1;
}
.id__campo{ margin-bottom:8px; max-width:258px; }
.id__rotulo{ font-size:13.5px; color:var(--azul-claro); line-height:1.3; }
.id__valor{ font-size:17px; font-weight:700; line-height:1.25; }

.id__rodape{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:14px;
}
.id__validade{
  background:#fff; border-radius:9px;
  padding:6px 14px 8px; text-align:center; margin-left:64px;
}
.id__validade b{ display:block; font-size:14px; color:#111; font-weight:700; }
.id__validade span{ display:block; font-size:20px; font-weight:800; color:var(--azul); letter-spacing:-.5px; }
.id__qr{
  background:#fff; border-radius:26px 0 0 0;
  padding:13px 14px 11px 20px; margin-right:-30px; width:99px;
}
.id__qr img{ display:block; width:41px; height:41px; }

/* modal do QR */
.modal{
  position:fixed; inset:0; z-index:130;
  background:rgba(0,0,0,.55);
  display:grid; place-items:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal.aberto{ opacity:1; pointer-events:auto; }
.modal__caixa{ background:#F1F2F4; border-radius:2px; padding:24px; width:100%; max-width:290px; }
.modal__caixa img{ display:block; width:100%; height:auto; image-rendering:pixelated; }
.modal__fechar{
  display:block; width:100%; margin-top:22px;
  background:#0F5AA8; color:#fff; font-size:19px;
  padding:13px; border-radius:3px; text-align:center;
}

/* ─────────── telas simples ─────────── */
.vazio{ padding:70px 30px; text-align:center; color:#5A6E8C; }
.vazio .ic{ width:64px; height:64px; margin:0 auto 20px; color:#C3D0E2; }
.vazio h2{ font-size:22px; color:var(--azul); margin:0 0 8px; }
.vazio p{ font-size:16px; line-height:1.45; margin:0; }

/* ─────────── convite de instalação ─────────── */
.instalar{
  position:fixed; left:10px; right:10px; z-index:110;
  bottom:calc(var(--h-rodape) + var(--base) + 10px);
  background:#fff; border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  padding:14px 16px; display:none; gap:12px; align-items:flex-start;
}
.instalar.visivel{ display:flex; }
.instalar__ico{ width:44px; height:44px; border-radius:10px; flex:none; }
.instalar__txt{ flex:1; font-size:14px; line-height:1.35; color:#2A2A2A; }
.instalar__txt b{ display:block; font-size:15px; color:var(--azul); margin-bottom:3px; }
.instalar__acoes{ display:flex; gap:8px; margin-top:9px; }
.instalar__acoes button{
  font-size:14px; font-weight:600; padding:7px 13px; border-radius:7px;
}
.instalar__ok{ background:var(--azul); color:#fff; }
.instalar__nao{ color:#7A7A7A; }

@media (display-mode: standalone){ .instalar{ display:none !important; } }

/* ═══════════ telas internas: cabeçalho com abas ═══════════ */
.appbar--abas{ flex-direction:column; height:auto; align-items:stretch; padding:0; }
.appbar--abas .appbar__linha{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--h-appbar); padding:0 4px;
}
.appbar--abas .appbar__title{ font-size:17px; letter-spacing:0; }
.appbar__voltar{ display:grid; place-items:center; width:48px; height:44px; }
.appbar__voltar .ic{ width:22px; height:22px; }
.appbar__sub{ padding:0 0 10px; text-align:center; font-size:15px; }

.abas{ display:flex; overflow-x:auto; scrollbar-width:none; }
.abas::-webkit-scrollbar{ display:none; }
.aba{
  flex:1 0 auto; min-width:33.33%; padding:11px 12px 9px;
  font-size:11.8px; font-weight:600; letter-spacing:.5px;
  color:rgba(255,255,255,.62); text-align:center; white-space:nowrap;
  border-bottom:3px solid transparent;
}
.aba--ativa{ color:#fff; border-bottom-color:#fff; }

/* ═══════════ cartões de lista (comunica / eventos) ═══════════ */
.lista{ padding:14px 8px 6px; }
.cartao{
  background:#fff; border:1px solid var(--borda); border-radius:2px;
  margin-bottom:20px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.cartao img{ display:block; width:100%; height:auto; }
.cartao__titulo{
  padding:14px 13px; font-size:15.5px; font-weight:700;
  line-height:1.32; color:#3A3A3A;
}
.cartao__pe{
  display:flex; align-items:center; justify-content:flex-end; gap:7px;
  padding:9px 14px; background:var(--rodape); border-top:1px solid #EDEDED;
  font-size:14.4px; color:#555;
}
.cartao__pe .ic{ width:14px; height:14px; color:#555; }
.cartao--evento .cartao__titulo{ font-size:16px; }
.cartao--evento .cartao__pe{ justify-content:center; }

/* ═══════════ grade horária ═══════════ */
.dia{
  background:#fff; border:1px solid var(--borda); border-radius:3px;
  margin:0 8px 20px; padding:13px 10px 11px;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.dia__nome{ font-size:14.5px; font-weight:700; color:#2B2B2B; margin:0 0 10px 4px; }
.dia .aula__nome{ font-size:13.3px; line-height:1.22; letter-spacing:0; }
.dia .aula__hora{ flex-basis:44px; font-size:12.8px; }
.dia .aula{ margin:0 0 8px; }
.dia .aula:last-child{ margin-bottom:0; }
.aula__tag{
  display:inline-block; margin-left:6px; padding:2px 8px;
  background:#EDEDED; border-radius:3px;
  font-size:11.5px; font-weight:600; letter-spacing:.4px; color:#505156;
  vertical-align:1px; white-space:nowrap;
}
.aula__meta{
  display:flex; align-items:flex-start; gap:7px;
  margin-top:4px; font-size:10.3px; line-height:1.3; color:#3C3C3C;
}
.aula__meta .ic{ width:11px; height:11px; margin-top:1px; flex:none; color:#2B2B2B; }
.aula__faltas .ic{
  width:11px; height:11px; display:inline-block;
  vertical-align:-1px; margin-right:3px; color:#3B3B3B;
}

/* ═══════════ notas e faltas ═══════════ */
.semestre{
  background:#fff; border:1px solid var(--borda); border-radius:2px;
  margin:14px 9px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.semestre__nome{
  padding:15px 13px; font-size:16px; font-weight:700; color:#2B2B2B;
  border-bottom:1px solid #E8E8E8;
}
.disciplina{
  display:flex; align-items:center; gap:12px;
  padding:14px; background:#F4F4F4; border-bottom:1px solid #E8E8E8;
}
.disciplina:last-child{ border-bottom:none; }
.disciplina__nome{ flex:1; min-width:0; font-size:14px; line-height:1.35; color:#3A3A3A; }
.disciplina__situacao{
  display:inline-block; margin-top:6px; padding:3px 9px;
  background:#444; color:#fff; border-radius:2px;
  font-size:12.5px; font-weight:700;
}
.medida{ text-align:center; flex:none; width:54px; }
.medida__bola{
  width:46px; height:46px; margin:0 auto; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  font-size:16px; font-weight:700;
}
.medida__bola--nota{ background:var(--azul); }
.medida__bola--faltas{ background:#CE8540; }
.medida__rotulo{ margin-top:4px; font-size:12.5px; color:#4A4A4A; }

/* ═══════════ tíquetes RU ═══════════ */
.saldo{
  background:#fff; border:1px solid var(--borda); border-radius:2px;
  margin:14px 9px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.saldo__numero{
  padding:24px 14px; text-align:center;
  font-size:62px; font-weight:800; color:#3A3A3A; line-height:1;
}
.saldo__numero span{ font-size:22px; font-weight:400; margin-left:4px; }
.saldo__comprar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  width:100%; padding:8px; background:#28A44C; color:#fff; font-size:17px;
}
.saldo__comprar .ic{ width:21px; height:21px; }

.painel{
  background:#fff; border:1px solid var(--borda); border-radius:2px;
  margin:14px 9px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.painel__topo{
  padding:12px; background:var(--azul); color:#fff;
  font-size:15px; letter-spacing:.6px; text-align:center;
}
.painel__corpo{ padding:26px 14px; text-align:center; color:#8A8A8A; font-size:15px; }

.girando{
  width:34px; height:34px; margin:0 auto; border-radius:50%;
  border:3px solid #DDE4EE; border-top-color:var(--azul);
  animation:gira .8s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

.preco{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-bottom:1px solid #EDEDED; font-size:16px; color:#3A3A3A;
}
.preco:last-child{ border-bottom:none; }
.preco b{ color:var(--azul); }