/* Duelos Troll MLBB - "Opciones del sorteo" (js/sorteo-opciones.js). Prefijo sopc.
   Va después de mis-heroes.css y ruleta.css: recoloca, solo dentro de .sopc, las piezas que esas
   funciones pintan en sus huecos (.misbox, .missort, .rulopc). Colores: tokens de base.css.
   Una sola tarjeta (.sopc) con tres partes:
     .sopcbtn     el botón del desplegable: título, resumen de lo que está puesto y la flecha
     .sopcpanel   lo que se despliega: .sopcacc (los otros dos sorteos) y .sopcaj (los ajustes)
     .misbox      la fila "Mis héroes · Tienes N de 133", siempre a la vista
   Reparto:
     teléfono       una columna: botón, panel (si está abierto) y "Mis héroes"
     700-1279 px    botón y "Mis héroes" lado a lado; el panel, debajo, a todo el ancho y en dos columnas
     >= 1280 px     en la columna de filtros (208 px): una columna, como en teléfono
   Los dos botones principales (.actions) se reparten en css/layout.css. */

.sopc{display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border-radius:12px;overflow:hidden}

/* ---------- botón del desplegable ---------- */
.sopcbtn{
  position:relative;   /* el ": " para lectores de pantalla (.vh, absoluto) queda dentro */
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;
  width:100%;min-height:56px;padding:7px 14px 7px 16px;border:0;background:transparent;color:var(--fg);
  text-align:left;cursor:pointer;touch-action:manipulation;
}
.sopcbtn:active{background:var(--fill)}
.sopcbtn:focus-visible{outline-offset:-3px}
.sopct{grid-column:1;font-size:17px;line-height:22px;font-weight:600}
.sopcr{grid-column:1;font-size:13px;line-height:18px;color:var(--fg2)}
.sopcr.on{color:var(--link);font-weight:600}   /* hay algo puesto que no es lo normal */
.sopcchev{
  grid-column:2;grid-row:1 / span 2;width:8px;height:8px;margin:0 4px 0 2px;
  border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(-45deg);
}
.sopcbtn[aria-expanded="true"] .sopcchev{transform:rotate(45deg)}

/* ---------- lo que se despliega ---------- */
.sopcpanel{
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;
  padding:12px;border-top:.5px solid var(--sep);
}
.sopcacc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.sopcacc .btn{min-width:0;min-height:44px;padding:6px 8px;font-size:15px}
.sopcaj{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.sopcmis:empty,.sopcrul:empty{display:none}
.sopc .rulopc{flex:none;margin:0 4px}

/* ---------- fila "Mis héroes": una línea más de la tarjeta ---------- */
.sopc .misbox{
  grid-template-columns:minmax(0,1fr);align-items:stretch;
  background:none;border-radius:0;border-top:.5px solid var(--sep);
}

@media (max-width:359.98px){
  .sopcpanel{padding:12px 8px}
  .sopcacc{gap:8px}
  .sopcacc .btn{padding-inline:4px;letter-spacing:-.3px}
}

/* ---------- desde 700 px: "Mis héroes" con la cuenta debajo, como el botón del desplegable ---------- */
@media (min-width:700px){
  .sopc{flex:1 1 100%}
  .sopc .misopen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;min-height:56px}
  .sopc .misopen .misc{grid-column:1;grid-row:2;margin-left:0;font-size:13px;line-height:18px;text-align:left}
  .sopc .misopen .chev{grid-column:2;grid-row:1 / span 2;align-self:center}
}

/* ---------- tablet y PC sin columna de filtros ---------- */
@media (min-width:700px) and (max-width:1279.98px){
  .sopc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sopcbtn{grid-column:1;grid-row:1}
  .sopc .misbox{grid-column:2;grid-row:1;border-top:0;border-left:.5px solid var(--sep)}
  /* a la izquierda los otros dos sorteos, uno sobre otro; a la derecha, los ajustes: "mis héroes" y, al lado
     si caben (si no, debajo), las casillas de la ruleta */
  .sopcpanel{grid-column:1 / -1;grid-row:2;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;align-items:start;padding:12px 16px 10px}
  .sopcacc{grid-template-columns:minmax(0,1fr)}
  .sopcacc .btn{padding-inline:16px}
  .sopcaj{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 28px}
  .sopcmis{flex:1 1 300px;max-width:340px;min-width:0}
  .sopcrul{flex:1 1 170px;min-width:0}
}

/* ---------- PC ancho: en la columna de filtros ---------- */
@media (min-width:1280px){
  .sopcbtn{padding:8px 12px}
  .sopct,.sopc .misot{font-size:15px;line-height:20px}
  .sopcpanel{padding:10px 6px 8px}
  .sopcacc{grid-template-columns:minmax(0,1fr);gap:8px;padding:0 2px}
  .sopcaj{gap:4px}
}

@media (hover:hover){
  .sopcbtn:hover{background:var(--fill)}
}