:root{
  /* Paleta lúdica Kidstino: índigo (confiança), amarelo ônibus escolar (destaque), verde (ação), coral (alerta) */
  --azul:#05336F; --azul2:#0570DC; --verde:#02BCC4; --verde-esc:#00858C; --ambar:#FEC307;
  --verm:#F0505A; --fundo:#F3F8FD; --card:#fff; --txt:#0B2A4F; --mudo:#5C7390; --borda:#DCE9F5; --raio:18px;
  --lilas:#E6F1FD; --sombra:0 2px 0 rgba(5,51,111,.06),0 8px 22px rgba(5,51,111,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--fundo);color:var(--txt);font-size:16px;line-height:1.45}
a{color:var(--azul2)}
img{max-width:100%}
h1,h2,h3{line-height:1.2;margin:0 0 .6rem}
.titulo-pagina{font-size:1.5rem;margin:.2rem 0 1rem}
.peq{font-size:.85rem;color:var(--mudo)}
.mudo{color:var(--mudo)}
.centro{text-align:center}
.dir{text-align:right}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}

/* topo e menu */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.6rem;background:var(--azul);color:#fff;padding:.55rem .8rem;padding-top:calc(.55rem + env(safe-area-inset-top))}
.topbar .marca{display:flex;align-items:center;gap:.45rem;color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem}
.topbar-emp{margin-left:auto;font-size:.82rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.menu-btn{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;padding:.2rem .4rem;cursor:pointer}
.sidebar{position:fixed;z-index:40;top:0;bottom:0;left:0;width:260px;background:#fff;border-right:1px solid var(--borda);padding:1rem .6rem;overflow-y:auto;transform:translateX(-100%);transition:transform .2s}
.sidebar a{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-radius:10px;color:var(--txt);text-decoration:none;font-weight:500}
.sidebar a:hover{background:#eef3f8}
.sidebar a.ativo{background:var(--azul);color:#fff}
.sidebar .ico{width:1.4rem;text-align:center}
.sidebar-rodape{margin-top:1.2rem;border-top:1px solid var(--borda);padding-top:.8rem}
.menu-fundo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}
body.menu-aberto .sidebar{transform:none}
body.menu-aberto .menu-fundo{display:block}
.conteudo{padding:1rem;max-width:1100px;margin:0 auto}
@media(min-width:960px){
  .menu-btn{display:none}
  .sidebar{transform:none;top:49px;width:230px}
  .conteudo{margin-left:230px;max-width:none;padding:1.4rem 2rem;}
  .conteudo>*{max-width:1000px}
}

/* cartões e listas */
.card{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);padding:1rem;margin-bottom:1rem}
.card h2{font-size:1.1rem}
.grid{display:grid;gap:.8rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);padding:.9rem 1rem;border-left:5px solid var(--azul2)}
.kpi.verde{border-left-color:var(--verde)}.kpi.vermelho{border-left-color:var(--verm)}.kpi.amarelo{border-left-color:var(--ambar)}
.kpi-valor{font-size:1.45rem;font-weight:800}
.kpi-rotulo{font-size:.82rem;color:var(--mudo)}
.kpi-link{text-decoration:none;color:inherit}

/* avisos */
.aviso{padding:.7rem .9rem;border-radius:10px;margin-bottom:.8rem;font-size:.95rem}
.aviso-ok{background:#e4f7f1;color:#0b5d4f}
.aviso-erro{background:#fde8e9;color:#8a1e24}
.aviso-info{background:#e8f1fb;color:#164a7c}
.aviso-aviso{background:#fff4dc;color:#7a5200}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:10px;padding:.65rem 1rem;font-size:1rem;font-weight:600;background:var(--azul2);color:#fff;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{filter:brightness(1.08)}
.btn-verde{background:var(--verde-esc)}
.btn-verm{background:var(--verm)}
.btn-claro{background:#e8eef4;color:var(--azul)}
.btn-peq{padding:.35rem .7rem;font-size:.88rem;min-height:34px;border-radius:8px}
.btn-bloco{display:flex;width:100%}
.acoes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* formulários */
label{display:block;font-weight:600;font-size:.9rem;margin:.7rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],input[type=time],input[type=search],select,textarea{width:100%;padding:.62rem .7rem;border:1px solid var(--borda);border-radius:10px;font-size:1rem;background:#fff;color:var(--txt);min-height:44px;font-family:inherit}
textarea{min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde);outline-offset:0;border-color:var(--verde)}
.campos{display:grid;gap:0 .9rem;grid-template-columns:1fr}
@media(min-width:700px){.campos{grid-template-columns:repeat(2,1fr)}.campos .largo{grid-column:1/-1}}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500}
.check input{width:20px;height:20px}
.dias-sem{display:flex;gap:.4rem;flex-wrap:wrap}
.dias-sem label{display:flex;align-items:center;gap:.3rem;margin:0;font-weight:500;background:#eef3f8;border-radius:8px;padding:.35rem .6rem}

/* tabelas / lista em cartões */
.tabela{width:100%;border-collapse:collapse;font-size:.95rem}
.tabela th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--mudo);padding:.5rem .6rem;border-bottom:2px solid var(--borda)}
.tabela td{padding:.6rem;border-bottom:1px solid var(--borda);vertical-align:top}
.rolavel{overflow-x:auto}
@media(max-width:699px){
  .tabela.cartoes thead{display:none}
  .tabela.cartoes,.tabela.cartoes tbody,.tabela.cartoes tr,.tabela.cartoes td{display:block;width:100%}
  .tabela.cartoes tr{background:var(--card);border-radius:var(--raio);box-shadow:var(--sombra);padding:.5rem .7rem;margin-bottom:.7rem}
  .tabela.cartoes td{border:0;padding:.25rem 0;display:flex;justify-content:space-between;gap:.8rem}
  .tabela.cartoes td::before{content:attr(data-r);font-size:.78rem;color:var(--mudo);flex:0 0 38%}
  .tabela.cartoes td.acoes-cel{justify-content:flex-start}
  .tabela.cartoes td.acoes-cel::before{content:none}
}

/* badges */
.badge{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.78rem;font-weight:700;white-space:nowrap}
.b-verde{background:#dcf5ee;color:#0b6b59}.b-vermelho{background:#fde0e2;color:#9b1c24}.b-amarelo{background:#fff0c9;color:#7a5200}
.b-azul{background:#e1eefb;color:#164a7c}.b-cinza{background:#e9edf1;color:#52606d}
.barra{background:#e6edf3;border-radius:99px;height:10px;overflow:hidden}
.barra>span{display:block;height:100%;background:var(--verde)}
.barra.cheia>span{background:var(--verm)}
.busca{display:flex;gap:.5rem;margin-bottom:.8rem}
.busca input{flex:1}
.vazio{padding:1.4rem;text-align:center;color:var(--mudo)}
.pix-box{word-break:break-all;background:#f1f5f9;border-radius:10px;padding:.7rem;font-family:ui-monospace,monospace;font-size:.8rem}
.abas{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1rem;padding-bottom:.2rem}
.abas a{white-space:nowrap;padding:.5rem .9rem;border-radius:99px;background:#e8eef4;color:var(--azul);text-decoration:none;font-weight:600;font-size:.92rem}
.abas a.ativa{background:var(--azul);color:#fff}

/* páginas de entrada (login/cadastro) */
body.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(160deg,var(--azul) 0%,var(--azul2) 55%,var(--verde-esc) 100%)}
.entrada .caixa{background:#fff;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:1.6rem;width:100%;max-width:420px}
.entrada .logo{display:flex;align-items:center;gap:.6rem;font-size:1.7rem;font-weight:800;color:var(--azul);margin-bottom:.2rem}
.entrada .slogan{color:var(--mudo);margin-bottom:1rem;font-size:.95rem}

/* app do motorista e portal */
body.app{background:var(--fundo);padding-bottom:5rem}
.app-topo{background:var(--azul);color:#fff;padding:.8rem 1rem;padding-top:calc(.8rem + env(safe-area-inset-top));position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem}
.app-topo a{color:#fff}
.app-topo h1{font-size:1.15rem;margin:0;flex:1}
.app-corpo{padding:1rem;max-width:640px;margin:0 auto}
.parada{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:1rem;overflow:hidden}
.parada-topo{background:#eaf1f8;padding:.6rem .9rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.parada-topo strong{font-size:1rem}
.aluno-linha{padding:.7rem .9rem;border-top:1px solid var(--borda)}
.aluno-nome{font-weight:700;font-size:1.05rem}
.aluno-botoes{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.5rem}
.aluno-botoes button{border:0;border-radius:10px;padding:.8rem .2rem;font-size:.95rem;font-weight:700;min-height:48px;background:#e8eef4;color:var(--azul)}
.aluno-botoes button.sel-emb{background:var(--verde-esc);color:#fff}
.aluno-botoes button.sel-falt{background:var(--verm);color:#fff}
.aluno-botoes button.sel-desem{background:var(--azul2);color:#fff}
.aluno-ausente{opacity:.6}
.fixo-baixo{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--borda);padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));display:flex;gap:.6rem;justify-content:center;z-index:25}
.fixo-baixo .btn{flex:1;max-width:300px}
.status-rede{position:fixed;top:0;left:0;right:0;background:var(--ambar);color:#3b2a00;text-align:center;padding:.3rem;font-size:.85rem;z-index:50;display:none}
body.offline .status-rede{display:block}

/* ===== Tema lúdico: botões grandes, cantos redondos, cores alegres ===== */
body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--fundo) radial-gradient(circle at 100% 0,#FFEFB0 0,transparent 22%) no-repeat fixed}
a{color:var(--azul2);font-weight:600}
h1,h2,h3{color:var(--azul);font-weight:800}
.titulo-pagina{font-size:1.7rem}
.topbar,.app-topo{background:linear-gradient(135deg,#05336F 0%,#0570DC 100%);border-bottom:5px solid var(--ambar)}
.app-topo h1,.topbar .marca{color:#fff}
.sidebar{background:#fff;border-right:0;box-shadow:4px 0 24px rgba(5,51,111,.10)}
.sidebar a{border-radius:14px;font-weight:700;color:var(--txt)}
.sidebar a:hover{background:var(--lilas)}
.sidebar a.ativo{background:var(--ambar);color:#0B2A4F;box-shadow:0 3px 0 #D9A100}
.card,.kpi,.parada{border:2px solid #fff;border-radius:var(--raio)}
.card h2{font-size:1.15rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1rem}
.kpi{border-left:0;border-top:6px solid var(--azul2);text-align:left}
.kpi.verde{border-top-color:var(--verde)}.kpi.vermelho,.kpi.verm{border-top-color:var(--verm)}.kpi.amarelo{border-top-color:var(--ambar)}
.kpi-valor{font-size:1.6rem;color:var(--azul)}
.tabela-rolagem{overflow-x:auto}

/* botões: grandes, "gordinhos", com sombra de pressionar */
.btn{border-radius:16px;min-height:52px;padding:.7rem 1.3rem;font-weight:800;font-size:1.02rem;background:var(--azul2);box-shadow:0 4px 0 #03458F;transition:transform .08s,box-shadow .08s;letter-spacing:.01em}
.btn:hover{filter:none;transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #03458F}
.btn-verde{background:var(--verde-esc);box-shadow:0 4px 0 #00585D}
.btn-verde:active{box-shadow:0 1px 0 #00585D}
.btn-verm{background:var(--verm);box-shadow:0 4px 0 #B72A33}
.btn-verm:active{box-shadow:0 1px 0 #B72A33}
.btn-claro{background:var(--lilas);color:var(--azul);box-shadow:0 4px 0 #BFD8F2}
.btn-claro:active{box-shadow:0 1px 0 #BFD8F2}
.btn-amarelo{background:var(--ambar);color:#0B2A4F;box-shadow:0 4px 0 #D9A100}
.btn-peq{min-height:38px;padding:.4rem .85rem;font-size:.9rem;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.btn-claro.btn-peq{box-shadow:0 3px 0 #BFD8F2}
.btn-bloco{min-height:58px;font-size:1.1rem}

/* formulários mais amigáveis */
label{color:var(--azul);font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],input[type=time],input[type=search],select,textarea{border:2px solid var(--borda);border-radius:14px;min-height:50px;background:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--azul2);box-shadow:0 0 0 4px rgba(5,112,220,.18)}
.dias-sem label{background:var(--lilas);border-radius:12px}
.check input{accent-color:var(--verde-esc)}

/* avisos e selos coloridos */
.aviso{border-radius:16px;border:2px solid transparent;font-weight:600}
.aviso-ok{background:#DDF8EC;color:#0B5A3C;border-color:#B7EDD5}
.aviso-erro{background:#FFE3E5;color:#98202A;border-color:#FFC4C8}
.aviso-info{background:#E3EEFF;color:#03458F;border-color:#C3D8FF}
.aviso-aviso{background:#FFF1C7;color:#7A5200;border-color:#FFE08A}
.badge{padding:.2rem .7rem;font-weight:800}
.b-verde{background:#D5F6E7;color:#0B6B46}.b-vermelho{background:#FFDCDF;color:#A3202B}.b-amarelo{background:#FFEFB8;color:#7A5200}
.b-azul{background:#DCEBFC;color:#03458F}.b-cinza{background:#E9EFF6;color:#4A6285}
.tabela th{color:var(--azul);border-bottom:3px solid var(--ambar)}
.abas a{background:var(--lilas);color:var(--azul)}.abas a.ativa{background:var(--azul);color:#fff}
.barra{height:14px;background:var(--lilas)}.barra>span{background:linear-gradient(90deg,var(--verde),#7FE3E8)}
.pix-box{background:var(--lilas);border:2px dashed #9CC3EE;font-size:.85rem}
.vazio{font-size:1.05rem}

/* entrada (login/cadastro): fundo festivo */
body.entrada{background:radial-gradient(circle at 12% 18%,#FEC307 0,#FEC307 9%,transparent 9.2%),radial-gradient(circle at 90% 82%,#02BCC4 0,#02BCC4 11%,transparent 11.2%),radial-gradient(circle at 85% 10%,#F0505A 0,#F0505A 5%,transparent 5.2%),linear-gradient(160deg,#05336F 0%,#0570DC 100%)}
.entrada .caixa{border-radius:28px;border:4px solid #fff;box-shadow:0 18px 50px rgba(20,20,80,.35)}
.entrada .logo{color:var(--azul);font-size:1.9rem}

/* app do motorista e portal dos pais */
.app-corpo{font-size:1.05rem}
.parada-topo{background:var(--lilas)}
.aluno-linha{border-top:2px dashed var(--borda)}
.aluno-botoes button{border-radius:14px;min-height:56px;font-size:1rem;font-weight:800;background:var(--lilas);color:var(--azul);box-shadow:0 3px 0 #BFD8F2}
.aluno-botoes button:active{transform:translateY(2px);box-shadow:none}
.aluno-botoes button.sel-emb{background:var(--verde-esc);color:#fff;box-shadow:0 3px 0 #00585D}
.aluno-botoes button.sel-falt{background:var(--verm);color:#fff;box-shadow:0 3px 0 #B72A33}
.aluno-botoes button.sel-desem{background:var(--azul2);color:#fff;box-shadow:0 3px 0 #03458F}
.fixo-baixo{border-top:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(5,51,111,.16)}
.status-rede{background:var(--ambar)}

/* ===== Identidade do logotipo ===== */
.marca-logo{display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:12px;padding:.25rem .6rem .25rem .4rem;text-decoration:none}
.marca-logo img{height:30px;width:auto;display:block}
.marca-logo span{font-weight:800;color:var(--azul);font-size:1.05rem}
.entrada .logo-img{display:block;width:min(260px,80%);height:auto;margin:0 auto .4rem}
.entrada .slogan{text-align:center}
.app-topo .selo{background:#fff;border-radius:10px;padding:3px 5px;display:flex}
.app-topo .selo img{height:26px;width:auto}

/* menu em grupos, contador de alertas e componentes novos */
.menu-grupo{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;font:inherit;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--azul);opacity:.85;padding:.75rem 1rem;font-weight:800;cursor:pointer;border-radius:14px;text-align:left}
.menu-grupo:hover{background:var(--lilas,#eef3f8)}
.menu-grupo .seta{transition:transform .2s;font-size:.9rem}
.menu-sec.aberto>.menu-grupo .seta{transform:rotate(180deg)}
.menu-itens{display:none;padding-left:.4rem}
.menu-sec.aberto>.menu-itens{display:block}
.menu-fechar{display:block;margin:0 0 .4rem auto;background:#eef3f8;border:0;border-radius:50%;width:2.2rem;height:2.2rem;font-size:1.1rem;cursor:pointer;color:var(--azul)}
@media(min-width:960px){.menu-fechar{display:none}}
.contador{display:inline-block;min-width:1.3rem;padding:0 .35rem;border-radius:999px;background:#F0505A;color:#fff;font-size:.72rem;font-weight:800;text-align:center;margin-left:.3rem}
.mural-item{border-left:5px solid #FEC307;padding:.5rem .8rem;margin:.5rem 0;background:#fff;border-radius:10px}
.mural-item.fixo{border-left-color:#02BCC4}
.mapa{height:380px;border-radius:16px;border:2px solid #dbe7f5;margin:.6rem 0;z-index:0}
.foto-aluno{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #FEC307;background:#eef4fb}
.foto-ocorrencia{max-width:100%;border-radius:12px;margin-top:.4rem}
.pos-ok{color:#14905F;font-weight:800}.pos-neg{color:#F0505A;font-weight:800}
.aluno-botoes button[data-cheguei]{grid-column:1/-1;background:#fff;border:2px solid var(--borda);min-height:42px;font-size:.9rem}
.aluno-botoes button[data-cheguei]:disabled{color:var(--verde-esc);border-color:var(--verde-esc)}
[hidden]{display:none!important}