/* =====================================================================
 * EG Treinamentos — Portal do Aluno · MOBILE-FIRST
 * ---------------------------------------------------------------------
 * Este arquivo é carregado DEPOIS de portal.css e só age em telas
 * pequenas (ou reforça o layout de app em qualquer toque).
 *
 * Objetivo: o portal do aluno parecer um APLICATIVO no celular —
 * cabeçalho compacto, cartões deslizáveis, barra inferior fixa
 * (Início · Cursos · Certificados · Perfil) e formulários com alvo de
 * toque de 44px. Nada do portal deixa de funcionar no desktop.
 * ===================================================================== */

:root{
  --mob-nav-h: 62px;
  --mob-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============ REGRAS GERAIS DE TOQUE ============ */
@media (max-width: 900px){

  html,body{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
  body{ padding-bottom: calc(var(--mob-nav-h) + var(--mob-safe-b)); }

  /* --- campos e botões com alvo de toque confortável --- */
  .form-input, .form-group input, .form-group select, .form-group textarea{
    min-height:46px; font-size:16px; /* 16px evita o zoom automático do iOS */
    padding:12px 14px; border-radius:10px;
  }
  .btn, .btn-primary, .btn-accent, .btn-full, .inst-btn{
    min-height:48px; font-size:.95rem; border-radius:11px;
  }
  .btn-sm{ min-height:40px; }

  /* foco visível para navegação por teclado */
  .form-input:focus-visible, .btn:focus-visible, .sb-item:focus-visible,
  .al-bottomnav a:focus-visible{ outline:3px solid var(--accent,#ff6f00); outline-offset:2px; }
}

/* ============ LOGIN (mockup "Bem-vindo") ============ */
@media (max-width: 900px){
  #loginContainer{
    align-items:flex-start; padding:0; background:#f5f7fa;
  }
  .login-box{
    max-width:100%; width:100%; min-height:100vh; border-radius:0;
    padding:38px 22px 30px; display:flex; flex-direction:column;
    justify-content:center; box-shadow:none;
  }
  .login-logo{ width:86px; margin:0 auto 8px; }
  .login-title{ font-size:1.45rem; }
  .login-subtitle{ font-size:.86rem; margin-bottom:26px; }
  .login-form .btn{ width:100%; margin-top:6px; }
}

/* ============ CABEÇALHO / TOPBAR do aluno ============ */
@media (max-width: 900px){
  .al-topbar{
    height:auto; padding:12px 14px; gap:10px;
    background:linear-gradient(135deg, var(--primary-dark,#0d1442), var(--primary,#1a237e));
    color:#fff; border-bottom:none; position:sticky; top:0; z-index:40;
  }
  .al-topbar-title{
    color:#fff; font-size:1rem; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #alDate{ display:none; }
  #btnMenuAl{ display:inline-flex !important; color:#fff; border-color:rgba(255,255,255,.45); }
}

/* ============ MENU LATERAL (gaveta) ============ */
@media (max-width: 900px){
  .al-sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:82%; max-width:310px; transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .al-sidebar.open{ transform:translateX(0); }
  /* sem o menu lateral não quebra: a barra inferior assume a navegação */
  .al-main{ margin-left:0 !important; }
}

/* ============ CONTEÚDO ============ */
@media (max-width: 900px){
  .al-content{ padding:14px 12px 24px; }

  /* --- boas-vindas (mockup "Olá, João!") --- */
  .al-welcome{ padding:0 2px 14px; }
  .al-welcome h2{ font-size:1.32rem; line-height:1.25; }
  .al-welcome p{ font-size:.86rem; color:var(--text-light,#607d8b); margin-top:4px; }

  /* --- cartões de estatística: 3 colunas compactas --- */
  .al-dash-stats{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:9px; margin-bottom:20px;
  }
  .al-stat-card{
    padding:13px 8px; border-radius:14px; text-align:center;
    background:linear-gradient(150deg, var(--primary,#1a237e), var(--primary-light,#3949ab));
    color:#fff; box-shadow:0 6px 18px rgba(26,35,126,.22);
  }
  .al-stat-card .stat-val{ font-size:1.32rem; font-weight:800; line-height:1.1; }
  .al-stat-card .stat-lbl{ font-size:.66rem; opacity:.9; margin-top:3px; line-height:1.25; }

  /* --- cartões de curso: lista vertical, imagem à esquerda --- */
  .al-courses-grid{ display:flex; flex-direction:column; gap:12px; }
  .al-course-card{
    display:flex; flex-direction:row; align-items:stretch; gap:0;
    border-radius:15px; overflow:hidden; box-shadow:0 3px 14px rgba(15,42,92,.10);
  }
  .al-course-card > img{ width:104px; min-width:104px; height:auto; object-fit:cover; }
  .al-course-card .card-body{ padding:12px 13px; flex:1; min-width:0; }
  .al-course-card h4{ font-size:.94rem; line-height:1.25; }
  .al-course-card p{
    font-size:.78rem; color:var(--text-light,#607d8b); margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .course-meta{ font-size:.74rem; gap:10px; margin-top:5px; }

  /* --- materiais --- */
  .mat-card{ padding:12px; border-radius:13px; gap:11px; }
  .mat-icon{ width:40px; height:40px; font-size:1.1rem; }

  /* --- tabelas administrativas: rolagem horizontal --- */
  .adm-table, table.adm-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ============ BARRA INFERIOR (mockup: Início·Cursos·Certificados·Perfil) ============ */
.al-bottomnav{ display:none; }

@media (max-width: 900px){
  .al-bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    height:calc(var(--mob-nav-h) + var(--mob-safe-b));
    padding-bottom:var(--mob-safe-b);
    background:#fff; border-top:1px solid var(--border,#e0e0e0);
    box-shadow:0 -4px 20px rgba(15,42,92,.09);
  }
  .al-bottomnav a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; text-decoration:none; color:var(--text-light,#90a4ae);
    font-size:.66rem; font-weight:600; transition:color .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .al-bottomnav a i{ font-size:1.16rem; line-height:1; }
  .al-bottomnav a.active,
  .al-bottomnav a:active{ color:var(--primary,#1a237e); }
  .al-bottomnav a.active i{ transform:translateY(-1px); }
}

/* ============ CERTIFICADOS (lista) ============ */
@media (max-width: 900px){
  #alunoContent > div[style*="display:flex"]{ flex-direction:column; align-items:stretch !important; }
  #alunoContent > div[style*="display:flex"] .btn{ width:100%; }
}

/* ============ MÓDULO/LEITOR DE CURSO ============ */
@media (max-width: 900px){
  .mod-tabs, .al-mod-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .mod-tab{ flex:0 0 auto; }
  iframe{ max-width:100%; }
  .video-wrap, .mod-video{ border-radius:12px; overflow:hidden; }
}

/* ============ MODAIS ============ */
@media (max-width: 900px){
  .modal-box{
    width:calc(100% - 20px); max-width:100%; max-height:90vh;
    border-radius:16px; margin:0 auto;
  }
  .modal-header{ position:sticky; top:0; background:#fff; z-index:2; }
  .modal-body{ max-height:calc(90vh - 70px); overflow-y:auto; }
}

/* ============ TOASTS ============ */
@media (max-width: 900px){
  .toast-container{ left:12px; right:12px; bottom:calc(var(--mob-nav-h) + var(--mob-safe-b) + 10px); }
  .toast{ width:100%; }
}

/* ============ PAINEL DO INSTRUTOR (dark) ============ */
@media (max-width: 900px){
  .inst-sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:80%; max-width:300px; transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
  }
  .inst-sidebar.open{ transform:translateX(0); }
  .inst-main{ margin-left:0 !important; }
  .inst-topbar{ flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .inst-topbar h1{ font-size:.98rem; flex:1 1 100%; order:3; }
  .inst-topbar-actions{ flex-wrap:wrap; gap:6px; }
  #btnMenuInst{ display:inline-flex !important; }
  .inst-content{ padding:14px 12px; }
  .inst-form-row, .grid2{ grid-template-columns:1fr !important; display:grid; gap:12px; }
  .inst-media-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ============ AJUSTE FINO EM TELAS MUITO ESTREITAS ============ */
@media (max-width: 380px){
  .al-stat-card .stat-val{ font-size:1.15rem; }
  .al-stat-card .stat-lbl{ font-size:.6rem; }
  .al-course-card > img{ width:86px; min-width:86px; }
  .login-box{ padding:28px 16px 24px; }
}

/* ============ ORIENTAÇÃO PAISAGEM (telas baixas) ============ */
@media (max-width: 900px) and (orientation: landscape){
  .login-box{ min-height:auto; padding:26px 20px; }
  #loginContainer{ align-items:center; padding:18px 0; }
}

/* ============ DESKTOP: a barra inferior nunca aparece ============ */
@media (min-width: 901px){
  .al-bottomnav{ display:none !important; }
}

/* =====================================================================
 * TELAS NOVAS DA CAMADA MOBILE (Perfil e Catálogo/Descobrir)
 * ===================================================================== */

/* ============ PERFIL ============ */
.eg-perfil{padding:4px 0 20px}
.eg-perfil-top{
  text-align:center;padding:26px 18px 22px;border-radius:18px;
  background:linear-gradient(150deg,var(--primary-dark,#0d1442),var(--primary,#1a237e));
  color:#fff;box-shadow:0 10px 26px rgba(26,35,126,.24);
}
.eg-perfil-avatar{
  width:78px;height:78px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:var(--primary,#1a237e);
  background:linear-gradient(150deg,var(--gold-light,#f0d060),var(--gold,#c9a227));
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.eg-perfil-top h3{font-size:1.16rem;font-weight:700}
.eg-perfil-top p{font-size:.82rem;opacity:.85;margin-top:3px;word-break:break-word}
.eg-perfil-cpf{
  display:inline-block;margin-top:10px;font-size:.74rem;letter-spacing:.4px;
  background:rgba(255,255,255,.16);padding:5px 12px;border-radius:20px;
}
.eg-perfil-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;
}
.eg-perfil-stats > div{
  background:#fff;border-radius:14px;padding:14px 8px;text-align:center;
  box-shadow:0 3px 14px rgba(15,42,92,.09);
}
.eg-perfil-stats strong{display:block;font-size:1.26rem;color:var(--primary,#1a237e);line-height:1.1}
.eg-perfil-stats span{font-size:.68rem;color:var(--text-light,#607d8b)}
.eg-perfil-linha{
  display:flex;align-items:center;gap:13px;background:#fff;
  border-radius:14px;padding:14px 16px;margin-bottom:10px;
  box-shadow:0 3px 14px rgba(15,42,92,.08);
}
.eg-perfil-linha > i{color:var(--primary,#1a237e);font-size:1rem;width:20px;text-align:center}
.eg-perfil-linha small{display:block;font-size:.7rem;color:var(--text-light,#607d8b);text-transform:uppercase;letter-spacing:.5px}
.eg-perfil-linha strong{font-size:.88rem;color:var(--text,#263238);font-weight:600}
.eg-perfil-acoes{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.eg-perfil-acoes .btn{width:100%;justify-content:center;display:flex;gap:8px;align-items:center}
.eg-btn-sair{background:#fdeaea !important;color:#c62828 !important;border:none}

/* ============ DESCOBRIR / CATÁLOGO ============ */
.eg-descobrir{padding:2px 0 20px}
.eg-busca{position:relative;margin-bottom:12px}
.eg-busca > i{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--text-light,#90a4ae);font-size:.95rem;pointer-events:none;
}
.eg-busca input{
  width:100%;min-height:48px;padding:12px 16px 12px 44px;font-size:16px;
  border:1px solid var(--border,#e0e0e0);border-radius:14px;background:#fff;
  box-shadow:0 3px 14px rgba(15,42,92,.07);outline:none;
}
.eg-busca input:focus{border-color:var(--primary,#1a237e);box-shadow:0 0 0 3px rgba(26,35,126,.12)}

.eg-chips{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.eg-chips::-webkit-scrollbar{display:none}
.eg-chip{
  flex:0 0 auto;padding:9px 16px;border-radius:22px;font-size:.8rem;font-weight:600;
  border:1px solid var(--border,#e0e0e0);background:#fff;color:var(--text-light,#607d8b);
  cursor:pointer;transition:all .18s ease;white-space:nowrap;min-height:40px;
}
.eg-chip.ativa{background:var(--primary,#1a237e);color:#fff;border-color:var(--primary,#1a237e)}

.eg-lista{display:flex;flex-direction:column;gap:12px}
.eg-curso{
  display:flex;background:#fff;border-radius:15px;overflow:hidden;
  box-shadow:0 4px 16px rgba(15,42,92,.10);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
.eg-curso:active{transform:scale(.99)}
.eg-curso > img{width:112px;min-width:112px;object-fit:cover;background:#eef2f8}
.eg-curso-corpo{padding:12px 13px;flex:1;min-width:0}
.eg-curso-cat{
  display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--accent,#ff6f00);margin-bottom:4px;
}
.eg-curso-corpo h4{font-size:.92rem;font-weight:700;line-height:1.28;color:var(--text,#263238)}
.eg-curso-corpo p{
  font-size:.76rem;color:var(--text-light,#607d8b);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.eg-curso-meta{display:flex;gap:12px;font-size:.73rem;color:var(--text-light,#607d8b);margin-top:6px}
.eg-curso-prog{display:flex;align-items:center;gap:8px;margin-top:8px}
.eg-bar{flex:1;height:6px;border-radius:6px;background:#e8edf5;overflow:hidden}
.eg-bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--primary,#1a237e),var(--accent,#ff6f00))}
.eg-curso-prog em{font-size:.72rem;font-style:normal;font-weight:700;color:var(--primary,#1a237e)}
.eg-curso-preco{font-size:.9rem;font-weight:800;color:var(--accent,#ff6f00);margin-top:8px}
.eg-curso-btn{
  margin-top:10px;width:100%;min-height:42px;border:none;border-radius:11px;
  background:var(--primary,#1a237e);color:#fff;font-weight:700;font-size:.83rem;
  cursor:pointer;transition:filter .18s ease;
}
.eg-curso-btn:active{filter:brightness(.92)}
.eg-curso-btn:disabled{opacity:.6;cursor:default}
.eg-vazio{
  text-align:center;color:var(--text-light,#90a4ae);font-size:.86rem;
  padding:40px 16px;background:#fff;border-radius:15px;
}
.eg-vazio i{display:block;font-size:1.7rem;margin-bottom:10px;opacity:.5}

@media (max-width:380px){
  .eg-curso > img{width:92px;min-width:92px}
  .eg-perfil-stats strong{font-size:1.1rem}
}

/* no desktop, o perfil/descobrir ganham respiro */
@media (min-width:901px){
  .eg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
  .eg-perfil{max-width:640px;margin:0 auto}
  .eg-descobrir{max-width:900px;margin:0 auto}
}