/* Global mobile overrides (keeps current design, only improves responsiveness) */
:root{--gb-gap:12px}
*{box-sizing:border-box}
img,video,canvas{max-width:100%;height:auto}

/* Prevent accidental horizontal scroll */
html,body{max-width:100%;overflow-x:hidden}

/* Tables: scroll horizontally on mobile instead of breaking layout */
@media (max-width: 860px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
}

/* Common containers/cards/buttons */
@media (max-width: 860px){
  .container{max-width:100% !important;margin:22px auto !important;padding:12px !important}
  .card{padding:16px !important}
  .topbar{padding:12px 12px !important}
  .menu{flex-wrap:wrap !important;gap:12px !important}
  .menu a{font-size:14px !important}

  /* Forms */
  input,select,textarea,button{max-width:100%}

  /* Cartelera (VS grid): stack on small screens so Rojo never gets cut */
  .vs{grid-template-columns:1fr !important;gap:10px !important}
  .vs span{display:block !important}
  .vs .box{width:100% !important}
  .row{flex-wrap:wrap !important}
  .row > *{width:100% !important}
  .actions, .btn-row{flex-wrap:wrap !important}
  .actions > *, .btn-row > *{width:100% !important}

  /* Common fixed widths */
  .login-box, .register-box, .box{width:calc(100vw - 24px) !important;max-width:520px !important}
}

@media (max-width: 520px){
  body{font-size:14px}
  .card{border-radius:14px !important}
  .topbar{gap:10px !important}
  .logo{margin-right:12px !important}
  .notify-popup{width:min(92vw, 340px) !important}
}

/* Login/Register pages that use full-height center layout */
@media (max-width: 520px){
  body{height:auto !important;min-height:100vh !important;align-items:flex-start !important}
  .login-box, .register-box{margin-top:18px !important}
}