/* app.css source lines: 830-930, 931-948 — mobile responsive (768px + 480px) */
/* ══ MOBILE RESPONSIVE (≤ 768px) ═══════════════════════════════════════ */
@media(max-width:768px){
  /* Reducir padding general */
  .main{padding:16px 16px 80px !important}
  .cb{padding:16px}

  /* Header compacto */
  .hdr{padding:0 16px;height:52px;gap:10px}
  .hdr-divider,.hdr-badge{display:none}
  .hdr-title{font-size:13px}
  .hdr-sub{display:none}
  .pbar{padding:0 12px}
  .pstep{font-size:10px;padding:10px 4px}
  .pstep .sn{width:16px;height:16px;font-size:8px;margin-right:3px}

  /* Landing OME/MG */
  .landing{padding:20px 0 10px}
  .landing h2{font-size:22px}
  .igrid{grid-template-columns:1fr !important}
  .icard{padding:18px 16px 16px}
  .wlc-title{font-size:22px !important}
  .wlc-sub{font-size:13px}
  .wlc-bento{padding:20px 0 40px;gap:20px}
  .bento-grid{grid-template-columns:1fr}

  /* Instrument list */
  .il-top-bar{padding:12px 16px;flex-wrap:wrap;gap:10px}
  .il-content{padding:16px 16px 60px}
  .il-card{padding:14px 14px 12px}
  .il-progress-track{width:70px}

  /* Scale buttons — más compactos en móvil */
  .sb{min-width:44px;min-height:48px;font-size:16px;border-radius:10px}
  .ab{padding:8px 10px;font-size:11px;min-height:40px}

  /* Botones de navegación */
  .btn{padding:12px 18px;font-size:13px;min-height:48px}
  .navbts{flex-direction:column-reverse;gap:10px}
  .navbts .btn{width:100%;justify-content:center}

  /* Preguntas técnicas (N3 test) */
  .qblock{padding:14px}
  .aopt{padding:11px 12px;font-size:13px}
  .alts{gap:8px}

  /* Supervisor dashboard */
  .sv-hero{padding:20px 16px 18px;border-radius:0}
  .sv-hero h1,.sv-hero h2{font-size:20px}
  .sv-hero p{font-size:12px}
  .sv-stats{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 20px}
  .sv-stat{padding:14px 16px}
  .sv-stat-val{font-size:22px}
  .sv-toolbar{flex-wrap:wrap;gap:8px}
  .sv-toolbar .sv-vtoggle{flex-shrink:0}
  .sv-toolbar .sv-search{width:100%;order:3;flex-basis:100%}
  .sv-toolbar div[style*="margin-left:auto"]{margin-left:0 !important;order:2;flex-wrap:wrap;gap:6px}
  #svLastUpdate{display:none}
  #svRefreshBtn{padding:8px 12px;font-size:11px}

  /* Supervisor matrix — scroll horizontal */
  .sv-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Global dashboard KPIs — 1 columna */
  div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}

  /* Formulario de evaluación conductual */
  .card .cb > div[style*="display:flex"][style*="justify-content:space-between"]{flex-direction:column;gap:8px}

  /* Firma canvas */
  canvas{max-width:100% !important;touch-action:none}

  /* Formulario conductual N1 — ítem texto + controles */
  .itext{min-width:0 !important;font-size:13px}
  .ictrl{width:100%;justify-content:flex-start;margin-top:6px}
  .eitem{padding:12px 14px;gap:8px}
  .sb{min-width:44px;min-height:48px;font-size:16px}
  .ab{min-height:44px;padding:10px 12px;font-size:12px}

  /* Preview banner */
  .preview-banner{width:calc(100% - 32px);border-radius:16px;white-space:normal}
  .preview-banner-name{max-width:140px}

  /* OME Landing (renderOMELanding) */
  div[style*="max-width:700px"]{max-width:100% !important}
  div[style*="max-width:760px"]{max-width:100% !important}
  div[style*="max-width:860px"]{max-width:100% !important}

  /* Generación tabs en hero supervisor */
  .sv-hero div[style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap;gap:6px}
  .sv-hero button{padding:6px 12px;font-size:11px}

  /* Welcome hero (admin/supervisor landing) */
  .welcome-hero{padding:24px 16px 20px !important;grid-template-columns:1fr !important}
  .welcome-h1{font-size:28px !important;letter-spacing:-1px;margin-bottom:10px}
  .welcome-obj-text{font-size:13px !important;line-height:1.6}
  .welcome-obj-sub{font-size:12px !important}
  .welcome-hero-cta{display:none !important}
  .welcome-hero-right{display:none !important}
}

/* ══ PHONE-SPECIFIC (≤ 480px) ══════════════════════════════════════════ */
@media(max-width:480px){
  .main{padding:12px 12px 80px !important}
  .hdr-title{font-size:12px}
  .landing h2{font-size:20px}
  .wlc-title{font-size:20px !important}
  .sv-stats{grid-template-columns:1fr}
  .sv-stat-val{font-size:28px}
  .sb{min-width:38px;min-height:44px;font-size:14px;border-radius:8px;padding:0 4px}
  .btn{padding:13px 16px;font-size:13px}
  .il-content{padding:12px 12px 60px}
  .qtext{font-size:13px}
  .aopt{font-size:12.5px;padding:10px 11px}
  /* Ocultar algunos elementos de header del OME landing */
  div[style*="padding:28px 32px"]{padding:18px 16px !important}
  div[style*="padding:24px 32px"]{padding:16px 14px !important}
}