/* open-shove-static-view.css (v6.2) */
.open-shove-view{
  --bg:#0f1720; --border:#233243;
  --allin:#ff9800; --fold:#263238;
  --cell:36px; --gap:2px; color:#d6eef3;
}
.open-shove-view *, .open-shove-view *::before, .open-shove-view *::after{ box-sizing:border-box; }
.open-shove-view h2{ margin:0 0 .5rem; font-weight:800; text-align:center; }
.open-shove-view .osv-header{ width:100%; max-width:980px; margin-inline:auto; }
.open-shove-view .osv-controls{
  display:grid; grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:10px; justify-items:center; margin:.5rem 0 1rem;
}
.open-shove-view .osv-control{ min-width:140px; display:flex; flex-direction:column; gap:6px; text-align:center; }
.open-shove-view .osv-control label{ font-weight:700; text-transform:capitalize; }
.open-shove-view .osv-control select{
  background:#172331; color:#d6eef3; border:1px solid var(--border);
  border-radius:8px; padding:.45rem .6rem; font-weight:700; text-transform:capitalize;
}
/* Posiciones: ocupar la fila completa del grid y centrar contenido */
.open-shove-view .osv-control.osv-pos-wrap{
  grid-column: 1 / -1;   /* que atraviese las 3 columnas */
  justify-self: center;  /* centro como item del grid */
  align-items: center;   /* centro su contenido en el eje cruzado */
  width: 100%;
}
.open-shove-view .osv-control.osv-pos-wrap > label{
  align-self: center;    /* que el label también quede centrado */
}
.open-shove-view .osv-pos{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;  /* centro horizontal de los botones */
  margin-inline: auto;      /* por si el contenedor no ocupa 100% */
}
.open-shove-view .pos-btn{
  background:#172331; color:#b7c9d6; border:1px solid var(--border);
  border-radius:8px; padding:.45rem .6rem; font-weight:700; cursor:pointer; text-transform:uppercase;
}
.open-shove-view .pos-btn.active{ background:#1de9b6; color:#06221c; border-color:#1de9b6; }

/* Grilla */
.open-shove-view .osv-grid-wrap{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:980px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  border:1px solid #293745; border-radius:12px; background:#111a22;
  padding:12px; padding-right:24px;
  scrollbar-gutter:stable both-edges; overscroll-behavior-x:contain;
}
.open-shove-view .osv-grid{
  display:grid; grid-template-columns:repeat(13,var(--cell)); gap:var(--gap);
  width:max-content; 
  min-width:calc(13*var(--cell) + 12*var(--gap)); /* OK para desktop */
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
  margin:0 auto;
}
.open-shove-view .osv-cell{
  inline-size:var(--cell); block-size:var(--cell);
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; line-height:1; letter-spacing:.2px;
  font-weight:700; font-size:calc(var(--cell)*0.35);
  color:#d6eef3; background:#172331; border:0;
}
.open-shove-view .osv-cell.allin{ background:var(--allin); color:#000; }
.open-shove-view .osv-cell.fold { background:var(--fold);  color:#cfd8dc; }
.open-shove-view .osv-cell.pair { position:relative; background-image:linear-gradient(135deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px); background-size:100% 100%; }
.open-shove-view .osv-summary{ margin:.6rem 0 0; text-align:center; font-weight:700; }

/* Desktop */
@media (min-width: 992px){
  #main-content .view.open-shove-view-wrap, .open-shove-view{ margin-inline:auto; }
}

@media (max-width: 640px){
  .open-shove-view{ --gap:2px; }

  .open-shove-view .osv-controls{
    grid-template-columns:repeat(3,minmax(90px,1fr));
    max-width:360px;
  }
  .open-shove-view .osv-control{ min-width:100px; }
  .open-shove-view .osv-control select{ padding:.38rem .5rem; font-size:.9rem; }
  .open-shove-view .pos-btn{ padding:.36rem .5rem; font-size:.85rem; }

  /* el wrap NO scrollea y corta cualquier 0.5px sobrante */
  .open-shove-view-wrap,
  #open-shove-view.view{
    overflow-x: clip !important; /* asegura que no herede scroll del view */
  }
  .open-shove-view .osv-grid-wrap{
    justify-content:center;
    overflow-x: clip;
    padding-inline:12px;
    margin-inline:0;
    scrollbar-gutter: auto;
  }

  /* columnas exactas y compensación de redondeo */
  .open-shove-view .osv-grid{
    width: calc(100% - 0.5px);                  /* ← compensa el sub-píxel */
    min-width:0;
    margin:0 auto;
    gap: var(--gap);
    grid-template-columns: repeat(13, calc((100% - 12 * var(--gap)) / 13));
  }

  .open-shove-view .osv-cell{
    aspect-ratio: 1 / 1;
    inline-size:auto;
    block-size:auto;
    min-width:0;
    overflow:hidden; text-overflow:ellipsis;
    font-size: clamp(10px, 2.22vw, 13px);       /* un pelín menor que 2.25vw */
    letter-spacing:.11px;
    border-radius:4px;
  }
}

/* Mobile landscape — priorizamos aire, aceptamos scroll-x */
@media (orientation: landscape) and (max-height: 420px){
  .open-shove-view{ --cell:46px; --gap:2px; }

  .open-shove-view .osv-grid-wrap{
    justify-content:center;
    overflow-x:auto;        /* ← permitimos scroll horizontal */
    -webkit-overflow-scrolling:touch;
    padding-inline:12px 28px;  /* colchón para la última columna */
    margin-inline:0;
    scrollbar-gutter: stable both-edges;
  }

  .open-shove-view .osv-grid{
    display:grid;
    grid-template-columns:repeat(13,var(--cell));
    gap:var(--gap);
    width:max-content;
    min-width:calc(13*var(--cell) + 12*var(--gap));
    margin:0 auto;
  }

  .open-shove-view .osv-cell{
    inline-size:var(--cell);
    block-size:var(--cell);
    aspect-ratio: auto;
    font-size: calc(var(--cell)*0.34);
    min-width:0;
  }
}

.open-shove-view .osv-title, .open-shove-view h2 { text-transform:none !important; }

/* Freno extra de overflow horizontal SOLO dentro de open-shove */
#open-shove-view.view,
#open-shove-view.view *{
  max-width: 100%;
}

/* =========================
   OPEN SHOVE — DESKTOP ONLY
   ========================= */
@media (min-width: 992px){
  /* Centrado + permitir tamaño mayor */
  .open-shove-view .osv-grid-wrap{
    max-width: 800px !important;    
    margin: 0 auto !important;
    padding: 10px 14px !important;
    overflow-x: auto !important;        /* NO clip: dejá scrollear si hace falta */
    scrollbar-gutter: stable both-edges !important;
  }

  /* Dejá que el JS fije el width/min-width por var(--cell) */
  .open-shove-view .osv-grid{
    width: auto !important;         
    min-width: calc(13*var(--cell) + 12*var(--gap)) !important;
    margin: 0 auto !important;
  }
}

  /* Tipografía general un poco más chica (fuera del 13×13) */
  .open-shove-view h2{
    font-size: clamp(1.6rem, 1vw + 1.1rem, 2.1rem) !important;
    letter-spacing: .01em;
  }
  .open-shove-view .osv-control label{
    font-size: 1.05rem !important;
    font-weight: 800 !important;
  }
  .open-shove-view .osv-control select{
    font-size: 1.05rem !important;
    padding: .6rem .85rem !important;
    border-radius: 10px !important;
  }
  .open-shove-view .pos-btn{
    font-size: 1rem !important;
    padding: .5rem .8rem !important;
    border-radius: 10px !important;
  }
  .open-shove-view .osv-summary{
    font-size: 1rem !important;
    margin-top: .85rem !important;
  }
  
  .open-shove-view .osv-controls{
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
    gap: 6px !important;              /* antes 10px */
    column-gap: 6px !important;
    max-width: 760px !important;      /* hace que queden más próximas */
    margin: .5rem auto 1rem !important; /* centradas */
  }
  .open-shove-view .osv-control{
    min-width: 120px !important;      /* antes 140px */
  }

  /* NO tocamos la tipografía de las celdas del 13×13 */

  /* Celdas del 13×13: ya estaban bien → solo reforzamos bold */
  .open-shove-view .osv-cell{
    font-size: calc(var(--cell) * 0.24);
    font-weight: 700;
  }
  
  /* Color en las opciones de Ajuste (fallback visual) */
  .open-shove-view select#osv-adj option[data-type="tight"]{ color: #0ea86b; }
  .open-shove-view select#osv-adj option[data-type="loose"]{ color: #e14b4b; }
  .open-shove-view select#osv-adj option[data-type="base"] { color: #d6eef3; }