/* ============================================================
   MI VITAL · OPTIMIZACIÓN MÓVIL COMÚN
   Mantiene intacto el diseño de escritorio.
   ============================================================ */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.mi-vital-page{
  overflow-x:hidden;
}

body.mv-menu-open{
  overflow:hidden;
}

.header .nav{
  position:relative;
}

.mv-mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:#111619;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.mv-mobile-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:99px;
  background:#fff;
  transition:transform .2s ease,opacity .2s ease;
}

.mv-mobile-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.mv-mobile-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.mv-mobile-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mv-mobile-backdrop{
  display:none;
}

/* Evita desbordes de contenido dinámico */
img,video,iframe,svg{
  max-width:100%;
}

input,select,textarea,button{
  max-width:100%;
}

.prof-tab-panels,
.mv-card,
.mv-trimester,
.mv-final-section,
.mv-annual-section,
.mv-student-video,
.mv-match-card,
.mv-challenge-main,
.mv-challenge-side{
  min-width:0;
}

@media (max-width: 860px){

  :root{
    --mv-mobile-header:72px;
  }

  .header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(8,11,13,.97);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .header .container.nav{
    min-height:var(--mv-mobile-header);
    padding-top:10px;
    padding-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }

  .header .logo{
    position:relative;
    z-index:1002;
    flex:0 0 auto;
  }

  .header .logo img{
    max-height:48px;
    width:auto;
  }

  .mv-mobile-toggle{
    display:flex;
    position:relative;
    z-index:1002;
    flex:0 0 auto;
  }

  .header .menu{
    position:fixed;
    z-index:1001;
    top:0;
    right:0;
    bottom:0;
    width:min(86vw,360px);
    padding:calc(var(--mv-mobile-header) + 24px) 20px 30px;
    background:#0d1114;
    border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-20px 0 45px rgba(0,0,0,.38);
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px;
    transform:translateX(105%);
    transition:transform .24s ease;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .header .menu.mv-mobile-open{
    transform:translateX(0);
  }

  .header .menu a{
    display:flex;
    align-items:center;
    min-height:48px;
    width:100%;
    padding:12px 13px !important;
    border-radius:9px;
    font-size:13px !important;
    line-height:1.2;
    letter-spacing:.02em;
    white-space:normal !important;
    border:1px solid transparent;
  }

  .header .menu a:hover,
  .header .menu a:focus-visible{
    background:rgba(255,255,255,.05);
  }

  .header .menu a.active,
  .header .menu a.mi-vital-nav.active{
    background:rgba(139,208,0,.1);
    border-color:rgba(139,208,0,.22);
    color:#9bd400;
  }

  .mv-mobile-backdrop{
    position:fixed;
    z-index:999;
    inset:0;
    background:rgba(0,0,0,.58);
    opacity:0;
    pointer-events:none;
    display:block;
    transition:opacity .2s ease;
  }

  .mv-mobile-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  /* Separación correcta bajo la cabecera en pantallas pequeñas */
  main{
    min-width:0;
  }

  .container{
    width:min(100% - 28px,1200px) !important;
    max-width:100% !important;
  }

  .prof-editor,
  .mi-vital-dashboard{
    overflow-x:hidden;
  }

  /* Controles táctiles */
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea{
    width:100%;
    min-height:46px;
    font-size:16px !important; /* evita zoom automático en Safari iPhone */
  }

  textarea{
    min-height:120px;
  }

  button,
  .btn,
  a.btn{
    min-height:44px;
    touch-action:manipulation;
  }

  .btn,
  a.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  /* Formularios siempre cómodos */
  .prof-form-grid,
  .mv-video-form,
  .mv-match-form,
  .mv-final-prof-grid,
  .mv-new-student-grid,
  .mv-new-user-wrap,
  .mv-reto-grid{
    grid-template-columns:1fr !important;
  }

  .prof-form-grid > *,
  .mv-video-form > *,
  .mv-match-form > *,
  .mv-final-prof-grid > *,
  .mv-new-student-grid > *{
    grid-column:auto !important;
  }

  /* Pasaporte */
  .mv-map-grid,
  .mv-trim-grid,
  .mv-trim-insights,
  .mv-annual-grid,
  .mv-annual-insights,
  .mv-final-summary,
  .mv-final-insights,
  .mv-final-quick{
    grid-template-columns:1fr !important;
  }

  .mv-annual-summary{
    gap:10px !important;
  }

  .mv-annual-steps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .mv-chart-wrap{
    overflow:hidden;
  }

  .mv-evo-chart{
    min-width:640px;
  }

  .mv-chart-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Vídeos */
  .mv-videos-grid,
  .mv-videos-grid.single{
    grid-template-columns:1fr !important;
  }

  .mv-student-video{
    width:100%;
  }

  /* Partidos */
  .mv-match-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    min-width:0 !important;
    width:100%;
  }

  .mv-match-card-top,
  .mv-match-top{
    flex-direction:column;
  }

  /* Dashboard alumno */
  .mv-overview{
    grid-template-columns:1fr !important;
  }

  .mv-dashboard-grid{
    grid-template-columns:1fr !important;
  }

  /* Profesor: tarjetas mejor que "tabla mental" */
  .prof-student-card{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .mv-student-main{
    width:100%;
  }

  .mv-student-side{
    width:100% !important;
    min-width:0 !important;
  }

  .mv-student-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .mv-student-actions a{
    width:100%;
  }

  /* Administración: las tablas se pueden deslizar sin romper el viewport */
  .mv-admin-panel{
    max-width:100%;
    overflow:hidden;
  }

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

  .mv-admin-table th,
  .mv-admin-table td{
    min-width:130px;
  }

  .mv-admin-table td:first-child{
    min-width:200px;
  }

  /* Cabeceras grandes */
  .mv-videos-hero,
  .mv-match-hero,
  .mv-challenge-hero,
  .mv-season-hero,
  .mv-admin-head,
  .mv-new-student-head,
  .mv-new-user-head{
    padding-top:34px !important;
  }

  .mv-videos-hero h1,
  .mv-match-hero h1,
  .mv-challenge-hero h1,
  .mv-season-hero h1{
    font-size:36px !important;
  }

  /* Evita textos que fuerzan ancho */
  h1,h2,h3,p,strong,span,a{
    overflow-wrap:anywhere;
  }
}

@media (max-width: 520px){

  .container{
    width:min(100% - 22px,1200px) !important;
  }

  .header .logo img{
    max-height:43px;
  }

  .mv-mobile-toggle{
    width:42px;
    height:42px;
  }

  .mv-student-actions{
    grid-template-columns:1fr !important;
  }

  .mv-match-stats{
    grid-template-columns:1fr 1fr !important;
  }

  .mv-annual-steps{
    grid-template-columns:1fr 1fr !important;
  }

  .mv-score-buttons{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  .mv-score-choice span{
    min-width:0 !important;
    width:100% !important;
  }
}

/* Respeta usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce){
  .header .menu,
  .mv-mobile-backdrop,
  .mv-mobile-toggle span{
    transition:none !important;
  }
}