/* SIGEducMunicipal - Painéis 100% responsivos no celular
   Login não é alterado. Foco: painéis, dashboards, módulos e formulários internos.
*/

@media (max-width: 768px){

  html, body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }

  body{
    background:#eef5ff !important;
  }

  *{
    box-sizing:border-box !important;
  }

  body *{
    max-width:100% !important;
  }

  /* ===== PAINÉIS / WRAPPERS PRINCIPAIS ===== */
  .app-shell,
  .page-shell,
  .layout,
  .layout-shell,
  .wrapper,
  .page-wrapper,
  .main-wrapper,
  .content-wrapper,
  .module-wrapper,
  .dashboard-wrapper,
  .painel-wrapper,
  .container,
  .content,
  .main,
  main,
  .page,
  .dashboard,
  .dashboard-wrap,
  .module,
  .module-content,
  .area-conteudo,
  .painel-conteudo{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow-x:hidden !important;
  }

  /* Remove largura desktop muito comum em estilos antigos */
  [style*="width: 1200px"],
  [style*="width:1200px"],
  [style*="min-width: 1200px"],
  [style*="min-width:1200px"],
  [style*="width: 1100px"],
  [style*="width:1100px"],
  [style*="min-width: 1100px"],
  [style*="min-width:1100px"],
  [style*="width: 1000px"],
  [style*="width:1000px"],
  [style*="min-width: 1000px"],
  [style*="min-width:1000px"],
  [style*="width: 980px"],
  [style*="width:980px"],
  [style*="min-width: 980px"],
  [style*="min-width:980px"]{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* ===== TOPO DOS PAINÉIS ===== */
  .gov-topbar,
  .gov-top-strip,
  .barra-brasil,
  .brasil-topo{
    width:100% !important;
    max-width:100% !important;
    min-height:28px !important;
    height:auto !important;
    padding:6px 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12px !important;
    overflow:hidden !important;
  }

  header,
  .header,
  .app-header,
  .main-header,
  .main-topbar,
  .topo,
  .topo-sistema,
  .cabecalho,
  .cabecalho-sistema,
  .painel-institucional,
  .institucional,
  .brand,
  .brandbar,
  .brand-bar,
  .header-brand{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:10px 12px !important;
    margin:0 !important;
    overflow:hidden !important;
    background:linear-gradient(135deg,#0b4fa8,#1d73d4) !important;
    color:#fff !important;
  }

  header > *,
  .header > *,
  .app-header > *,
  .main-header > *,
  .main-topbar > *,
  .topo > *,
  .topo-sistema > *,
  .cabecalho > *,
  .cabecalho-sistema > *,
  .painel-institucional > *,
  .institucional > *,
  .brand > *,
  .brandbar > *,
  .brand-bar > *,
  .header-brand > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    background:transparent !important;
  }

  /* Esconde só blocos vazios que causam faixa branca */
  .header-left:empty,
  .header-right:empty,
  .top-left:empty,
  .top-right:empty,
  .brand-left:empty,
  .brand-right:empty,
  .institution-left:empty,
  .institution-right:empty,
  .header-spacer:empty,
  .top-spacer:empty,
  .spacer:empty,
  .empty:empty,
  .blank:empty{
    display:none !important;
  }

  .logo-area,
  .brand-area,
  .avatar-area,
  .usuario-area,
  .perfil-area,
  .top-user,
  .user-box,
  .user-area,
  .profile-area{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    background:transparent !important;
    color:#fff !important;
  }

  header img,
  .header img,
  .app-header img,
  .main-header img,
  .main-topbar img,
  .topo img,
  .brand img,
  .logo-area img,
  .avatar-area img,
  .usuario-area img,
  .top-user img,
  .user-box img{
    max-width:48px !important;
    max-height:48px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  header h1,
  .header h1,
  .app-header h1,
  .main-header h1,
  .main-topbar h1,
  .topo h1,
  .brand h1,
  .sig-title strong{
    font-size:20px !important;
    line-height:1.1 !important;
    margin:0 !important;
    color:#fff !important;
    white-space:normal !important;
    word-break:break-word !important;
  }

  header p,
  .header p,
  .app-header p,
  .main-header p,
  .main-topbar p,
  .topo p,
  .brand p,
  .sig-title span{
    font-size:12px !important;
    line-height:1.25 !important;
    color:#eaf3ff !important;
    margin:0 !important;
  }

  /* ===== MENU ===== */
  nav,
  .nav,
  .navbar,
  .menu,
  .top-menu,
  .menu-principal,
  .barra-menu{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    padding:8px 6px !important;
    margin:0 !important;
    border-radius:0 !important;
    -webkit-overflow-scrolling:touch !important;
  }

  nav ul,
  .nav ul,
  .navbar ul,
  .menu ul,
  .top-menu ul,
  .menu-principal ul{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    width:max-content !important;
    min-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  nav li,
  .nav li,
  .navbar li,
  .menu li,
  .top-menu li,
  .menu-principal li{
    flex:0 0 auto !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .menu a,
  .top-menu a,
  .menu-principal a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:8px 12px !important;
    font-size:13px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* ===== BREADCRUMB / HERO ===== */
  .breadcrumb,
  .breadcrumbs{
    width:100% !important;
    max-width:100% !important;
    font-size:14px !important;
    padding:8px 0 !important;
    overflow-wrap:break-word !important;
  }

  .hero,
  .dashboard-hero,
  .painel-hero,
  .transporte-hero,
  [class*="hero"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:10px 0 14px !important;
    padding:22px 18px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  .hero h1,
  .dashboard-hero h1,
  .painel-hero h1,
  .transporte-hero h1,
  [class*="hero"] h1{
    font-size:25px !important;
    line-height:1.1 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  .hero p,
  .dashboard-hero p,
  .painel-hero p,
  .transporte-hero p,
  [class*="hero"] p{
    font-size:14px !important;
    line-height:1.4 !important;
  }

  /* ===== GRIDS / CARDS ===== */
  .dashboard-grid,
  .cards,
  .grid,
  .row,
  .kpi-grid,
  .painel-grid,
  .painel-turmas-grid,
  .transporte-grid,
  .lista-cards,
  .stats-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .card,
  .panel,
  .box,
  .widget,
  .dashboard-card,
  .modulo-card,
  .turma-card,
  .transporte-card,
  .kpi,
  div[class*="card"],
  div[class*="painel"],
  div[class*="box"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:16px !important;
    padding:16px !important;
    overflow:hidden !important;
  }

  .dashboard-card,
  .modulo-card,
  .turma-card,
  .transporte-card,
  .kpi{
    display:block !important;
  }

  /* ===== FORMULÁRIOS ===== */
  form,
  fieldset,
  .form,
  .formulario,
  .form-grid,
  .form-row,
  .linha-form,
  .campo,
  .form-group{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .form-grid,
  .form-row,
  .linha-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  label{
    display:block !important;
    text-align:left !important;
    margin-bottom:5px !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:16px !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select{
    min-height:42px !important;
    padding:10px 12px !important;
  }

  textarea{
    min-height:110px !important;
    padding:10px 12px !important;
  }

  /* ===== BOTÕES / ABAS ===== */
  .tabs,
  .tab-buttons,
  .tab-nav,
  .acoes,
  .actions,
  .botoes,
  .btn-group,
  .transporte-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    overflow-x:auto !important;
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  a.btn{
    min-height:42px !important;
    padding:10px 14px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  /* ===== TABELAS ===== */
  .table-responsive,
  .tabela,
  .tabela-wrap{
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
  }

  table th,
  table td{
    padding:10px 12px !important;
    font-size:13px !important;
  }

  /* ===== RODAPÉ / AJUDA ===== */
  footer,
  .footer,
  .rodape,
  .legal-footer{
    width:100% !important;
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.35 !important;
    padding:12px 8px !important;
    text-align:center !important;
  }

  .help,
  .help-button,
  .floating-help,
  [class*="help"]{
    right:10px !important;
    bottom:10px !important;
    z-index:50 !important;
  }
}

/* Celular pequeno */
@media (max-width:480px){
  .hero h1,
  .dashboard-hero h1,
  .painel-hero h1,
  .transporte-hero h1,
  [class*="hero"] h1{
    font-size:22px !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .menu a,
  .top-menu a,
  .menu-principal a{
    font-size:12px !important;
    padding:7px 10px !important;
  }

  .card,
  .panel,
  .box,
  .widget,
  .dashboard-card,
  .modulo-card,
  .turma-card,
  .transporte-card{
    padding:14px !important;
  }
}

/* v415 busca aluno inteligente: estilos principais em estilo.css */