/* app/lib/include/css/MappSurveyResponsiveMobile.css */

return <<<HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hub do Participante</title>
  <style>
    /* ========================================
       🔥 MOBILE - RESET ADIANTI CONTAINERS
       ======================================== */
    @media screen and (max-width: 768px) {
      /* Remove espaçamento de TODOS containers pais */
      body,
      body > *,
      #adianti_div_content,
      #adianti_online_content,
      #adianti_online_content2,
      .adianti_tabs_content,
      .container-live,
      .builder-template-layout,
      div[id*="adianti"],
      div[class*="adianti"],
      div[class*="container"],
      div[class*="master"] {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
      }
      
      html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      
    }

    /* ===== INSTRUÇÕES - MOBILE ===== */
@media(max-width:800px) {
    /* Remove margens do form */
    form[name='form_MappSurveyStepInstrucoesNew'],
    form[name='form_MappSurveyStepInstrucoesNew'] > div,
    form[name='form_MappSurveyStepInstrucoesNew'] .panel,
    form[name='form_MappSurveyStepInstrucoesNew'] .card,
    form[name='form_MappSurveyStepInstrucoesNew'] .panel-body,
    form[name='form_MappSurveyStepInstrucoesNew'] .card-body {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Conteúdo das instruções */
    .instrucoes-area {
        padding: 16px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Container do form */
    .form-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Sort wrap sem margens */
    .sort-wrap {
        padding: 0 !important;
        margin: 0 !important;
    }
}

    /* ========================================
   RESET ESPECÍFICO PARA TREINO/QUESTIONÁRIOS
   (BootstrapFormBuilder cria divs extras)
   ======================================== */
@media screen and (max-width: 768px) {
  
  /* Remove padding de TODAS as divs do Adianti */
  .card-panel,
  .panel-body,
  .tab-content,
  .form-horizontal,
  .form-group,
  div[widget="bootstrap"],
  div[class*="bootstrap"] {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Container do form */
  .form-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Panel específico do treino */
  .card-panel .panel-heading,
  .panel-heading {
    padding: 8px 12px !important;
    font-size: 16px !important;
  }
  
  /* Área de conteúdo do form */
  .card-body,
  .panel-body,
  .form-body {
    padding: 0 !important;
  }
  
  /* Rodapé com botões */
  .form-actions,
  .bootstrap-form-footer,
  .panel-footer {
    padding: 10px 8px !important;
    margin: 0 !important;
  }
}
    
    /* ======================================== 
       BASE STYLES (Desktop)
       ======================================== */
    :root{ --radius:16px; --shadow:0 4px 14px rgba(0,0,0,.08); --brand:#0275b1; --brand-2:#2db3c6; }
    
    [data-theme="light"]{ 
      --bg:#fff; --text:#0f172a; --muted:#475569; --card:#fff; --card-hover:#f8fafc;
      --link-bg:#f8fafc; --link-bg-hover:#eef2f7; --link-border:rgba(15,23,42,.12);
      --divider:rgba(15,23,42,.08);
      --chip-bg:rgba(15,23,42,.06); --chip-border:rgba(15,23,42,.08);
    }
    
    [data-theme="dark"]{
      --bg:#0b1220; --text:#f8fafc; --muted:#94a3b8; --card:#0f172a; --card-hover:#1e293b;
      --link-bg:#0f172a; --link-bg-hover:#111827; --link-border:rgba(255,255,255,.12);
      --divider:rgba(15,23,42,.08);
      --chip-bg:rgba(255,255,255,.08); --chip-border:rgba(255,255,255,.06);
    }

    html,body{height:100%;margin:0;padding:0}
    body{color:var(--text);background:var(--bg);font:15px/1.5 system-ui,-apple-system,sans-serif}
    .container{max-width:100%;padding:0}

    header.topbar{ background: var(--brand); padding: 14px 16px; margin-bottom: 14px; }
    header.topbar .bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    header.topbar .bar-title{ margin:0; font-size:18px; font-weight:800; color:#fff; line-height:1.2; }
    
    .userbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .chip{ padding:8px 14px; border-radius:999px; background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.22); color:#fff; font-size:13px; font-weight:700; display:inline-block; white-space:nowrap;
    }
    button.chip{cursor:pointer;transition:all .2s}
    button.chip:hover{filter:brightness(1.1)}

    .welcome{margin:10px 0 18px;padding:0 16px}
    .welcome .greeting{ margin: 8px 0 10px; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.25; }
    .welcome .subtitle{color:var(--muted);margin:0;font-size:15px;line-height:1.6}

    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding:0 16px;margin-top:20px}
    .card{padding:20px;border-radius:var(--radius);background:var(--card);border:1px solid var(--divider);box-shadow:var(--shadow);transition:all .2s}
    .card:hover{transform:translateY(-2px);background:var(--card-hover)}
    .card .icon svg{width:28px;height:28px;stroke-width:2.25;stroke:var(--brand)}
    .card .title{margin:10px 0 6px;font-weight:700;font-size:18px;color:var(--text);display:flex;align-items:center;gap:10px}
    .badge-red{background:#ef4444;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}
    .card .desc{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.5}
    .card .actions{display:flex;gap:10px;flex-wrap:wrap}

    .link{cursor:pointer;border:1px solid var(--link-border);padding:10px 14px;border-radius:12px;font-weight:600;background:var(--link-bg);color:var(--text);text-decoration:none;display:inline-block;transition:all .2s;font-size:14px}
    .link:hover:not(.disabled){background:var(--link-bg-hover)}
    .link.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

    footer{margin-top:48px;padding:24px 16px;border-top:1px solid var(--divider);text-align:center;color:var(--muted);font-size:13px}
    footer a.inline{color:var(--brand-2);text-decoration:underline}

    /* ========================================
       🔥 MOBILE RESPONSIVE - LAYOUT COMPACTO
       ======================================== */
    @media screen and (max-width: 768px) {
      
      /* Seu container principal */
      .container { 
        padding: 0 6px !important;
        margin: 0 !important;
        width: 100% !important;
      }
      
      /* Header compacto */
      header.topbar { 
        padding: 6px 8px !important;
        margin: 0 0 6px 0 !important;
      }
      
      header.topbar .bar { 
        gap: 6px !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
      
      header.topbar .bar-title { 
        font-size: 15px !important;
        text-align: center !important;
      }
      
      .userbar { 
        gap: 6px !important;
        justify-content: center !important;
      }
      
      .chip { 
        padding: 4px 8px !important;
        font-size: 11px !important;
      }
      
      /* Welcome compacto */
      .welcome { 
        margin: 4px 0 8px !important;
        padding: 0 8px !important;
      }
      
      .welcome .greeting { 
        font-size: 16px !important;
        margin: 4px 0 4px !important;
      }
      
      .welcome .subtitle { 
        font-size: 12px !important;
        line-height: 1.4 !important;
      }
      
      /* Grid - 1 coluna */
      .grid { 
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 6px !important;
        margin: 8px 0 0 0 !important;
      }
      
      /* Cards compactos */
      .card { 
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 10px !important;
      }
      
      .card .icon {
        margin-bottom: 6px !important;
      }
      
      .card .icon svg { 
        width: 20px !important;
        height: 20px !important;
      }
      
      .card .title { 
        font-size: 14px !important;
        margin: 4px 0 4px !important;
        gap: 6px !important;
      }
      
      .card .desc { 
        font-size: 12px !important;
        margin: 0 0 8px !important;
        line-height: 1.3 !important;
      }
      
      .card .actions { 
        gap: 6px !important;
        flex-direction: column !important;
      }
      
      /* Botões full width */
      .link { 
        padding: 7px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      
      .badge-red { 
        padding: 2px 6px !important;
        font-size: 10px !important;
      }
      
      /* Footer compacto */
      footer { 
        margin-top: 16px !important;
        padding: 10px 6px !important;
        font-size: 10px !important;
      }
    }

    /* Tablet - 2 colunas */
    @media screen and (min-width: 769px) and (max-width: 1024px) {
      .grid { 
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
      }
    }

    /* ========================================
   TREINO - MappSortQuestionarioTreino
   ======================================== */
  @media screen and (max-width: 768px) {
  
  /* Container principal */
  .treino-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Modal de introdução */
  .modal-treino-intro .modal-box {
    width: 96% !important;
    max-width: none !important;
    max-height: 92vh !important;
    margin: 8px !important;
  }
  
  .modal-intro-header {
    padding: 12px 16px !important;
  }
  
  .modal-intro-header h2 {
    font-size: 16px !important;
  }
  
  .modal-intro-body {
    padding: 16px !important;
    max-height: 70vh !important;
  }
  
  .treino-instrucoes h3 {
    font-size: 15px !important;
  }
  
  .treino-steps li {
    padding-left: 35px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  
  .treino-steps li::before {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
  
  .treino-exemplo {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  
  /* Instrução contextual */
  .treino-instrucao-contextual {
    margin-bottom: 10px !important;
  }
  
  .instrucao-box {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }
  
  .instrucao-icon {
    font-size: 20px !important;
  }
  
  .instrucao-texto {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  /* Área da pergunta */
  .treino-pergunta-area {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  
  .pergunta-titulo h3 {
    font-size: 16px !important;
    margin: 0 0 8px 0 !important;
  }
  
  .pergunta-texto {
    font-size: 14px !important;
    margin: 0 0 12px 0 !important;
  }
  
  /* Helper/Dicas */
  .helper-treino {
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  
  .helper-icon {
    font-size: 16px !important;
  }
  
  .helper-text {
    font-size: 12px !important;
  }
  
  /* Campo de treino */
  .campo-treino {
    margin-top: 12px !important;
  }
  
  /* Progresso */
  .treino-progresso {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  
  .progresso-header {
    font-size: 15px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  
  .progresso-checks {
    gap: 8px !important;
  }
  
  .check-item {
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 6px !important;
  }
  
  .check-icon {
    font-size: 18px !important;
  }
  
  .check-text {
    font-size: 12px !important;
  }
  
  /* ===== ELEMENTOS DO SORTRANK4 ===== */
  
  /* Opções disponíveis */
  .sr4-available-options,
  .sr4-opts-wrap {
    padding: 8px !important;
    gap: 6px !important;
  }
  
  .sr4-opt-item {
    padding: 10px !important;
    font-size: 13px !important;
    margin: 4px 0 !important;
  }
  
  .sr4-opt-title {
    font-size: 14px !important;
  }
  
  .sr4-opt-subtitle {
    font-size: 11px !important;
  }
  
  /* Área de ranking */
  .sr4-chosen-area,
  .sr4-ranking-area {
    padding: 8px !important;
    gap: 6px !important;
  }
  
  .sr4-chosen-item {
    padding: 10px !important;
    font-size: 13px !important;
  }
  
  .sr4-rank-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  
  /* Ícones de help */
  .sr4-help-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  
  /* Botão de remover */
  .sr4-remove {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
  }
  
  /* Botões de ação */
  .form-actions,
  .bootstrap-form-footer {
    padding: 10px 8px !important;
    gap: 8px !important;
  }
  
  .form-actions .btn,
  .bootstrap-form-footer .btn {
    padding: 10px 12px !important;
    font-size: 13px !important;
    width: 100% !important;
  }
}

  </style>
</head>

<body data-theme="light">
<div class="container">
  <!-- Seu HTML aqui -->
</div>
</body>
</html>
HTML;