/* ════════════════════════════════════════════════════════════════════
   COP · LA HOJA QUE SUBE DESDE ABAJO — UN SOLO ARCHIVO  (31/08/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: *«el botón de accesos tiene que abrir un menú expandible desde
   abajo con todos los accesos a torneos… básicamente tiene que abrir y
   mostrarse con el mismo diseño que abre y muestra el botón de
   información de tus mercados presente en la página de mis picks»*.

   ⚠⚠ NO ES UNA COPIA DE LA HOJA DE «TUS MERCADOS»: ES ESA HOJA, MUDADA.
   El velo, la caja, el tirador, la cabecera y la animación vivían
   escritos adentro de `cop-mis-mercados.css`, mezclados con el
   contenido de esa hoja en particular (el resumen, las filas, las
   chips). Copiar el marco para la segunda pantalla habría dejado dos
   hojas que se ven iguales hoy y se separan en el primer ajuste — la
   misma historia de la escalera, del cartel de recompensas, del
   interruptor y de las cuatro tarjetas de historial.

   ⚠ ACÁ VA SÓLO EL MARCO. Lo que va ADENTRO lo pone quien la abre:
   `cop-mis-mercados` sigue siendo el dueño de las filas de mercados, y
   `cop-accesos` lo es de la lista de torneos. Una hoja no tiene por qué
   saber qué se muestra en ella.

   ⚠ EL `z-index` ES 520 Y VIENE DE LA CANCHA: la hoja se abre DESDE la
   pantalla de picks, que tiene la cancha en 400. Es un número heredado,
   no elegido acá — y por eso está escrito, para que el día que alguien
   lo baje sepa contra qué estaba compitiendo.
   ════════════════════════════════════════════════════════════════════ */

.cop-hoja{
  position:fixed; inset:0; z-index:520;
  display:none; align-items:flex-end; justify-content:center;
}
.cop-hoja.abierta{display:flex}
.cop-hoja-fondo{
  position:absolute; inset:0;
  background:rgba(4,6,10,.62);
  /* ⚠ EL DESENFOQUE NO ES ADORNO: debajo hay tarjetas de colores y la
     hoja es texto y números. Sin él, la lectura compite con el dibujo
     de atrás. */
  backdrop-filter:blur(3px);
}
.cop-hoja-caja{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg, #0b0e14);
  border-radius:var(--r-card, 14px) var(--r-card, 14px) 0 0;
  padding:1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  animation:copHojaSube .22s ease;
}
@keyframes copHojaSube{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }

/* ⚠ EL TIRADOR ES LA SEÑAL DE QUE SE ARRASTRA. Sin él, una hoja que sube
   desde abajo se lee como una pantalla nueva y el jugador busca un
   «volver» que no está. */
/* ⚠⚠ Y DESDE EL 10/09/2026 EL TIRADOR ARRASTRA DE VERDAD
   (`cop-ui-hoja.js`). Hasta entonces era un dibujo que prometía un gesto
   que no existía.
   ⚠ EL BLANCO DE TOQUE SE AGRANDA CON UN `::after` Y NO CON PADDING: una
   línea de 4 px es imposible de agarrar con el pulgar, pero engordarla
   la convertiría en una barra. El pseudo-elemento la deja de 4 px a la
   vista y de 26 px al dedo.
   ⚠ `touch-action:none` PARA QUE EL NAVEGADOR NO SE LLEVE EL GESTO: sin
   esto, el arrastre hacia abajo lo interpreta como scroll de la página y
   el `pointermove` llega una vez y se corta. */
.cop-hoja-tirador{
  position:relative;
  width:38px; height:4px; border-radius:99px; margin:0 auto var(--gap-md, .7rem);
  background:rgba(255,255,255,.18);
  touch-action:none; cursor:grab;
}
.cop-hoja-tirador::after{
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:96px; height:26px;
}
.cop-hoja-tirador:active{cursor:grabbing;background:rgba(255,255,255,.32)}
/* la cabecera también agarra: es la zona muerta de arriba de la hoja */
.cop-hoja-head{touch-action:pan-x}
.cop-hoja-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-md, .7rem);
  margin-bottom:var(--gap-lg, 1rem);
}
.cop-hoja-tit{
  font-family:'Anton',sans-serif; font-size:var(--fs-xl, 1.3rem); letter-spacing:.4px;
  color:#fff; text-transform:uppercase; margin:0;
}
/* ⚠⚠ LA ✕ NO LLEVA FONDO PROPIO (Franco, 10/09/2026): *«que la X que
   está a la derecha no tenga fondo diferente detrás, debe estar apoyada
   sobre el menú que está»*. Tenía un disco `rgba(255,255,255,.06)` que
   sobre el fondo de la hoja se leía como un segundo plano flotando arriba
   del primero — la caja de la hoja YA es la superficie, y una pastilla
   encima es la caja adentro de la caja que la regla 1 del sistema evita.
   ⚠ EL ÁREA TÁCTIL NO SE ACHICA: sigue midiendo 32 × 32 aunque no se
   pinte nada. Lo que se fue es el fondo, no el blanco de toque.
   ⚠ Y EL FOCO DE TECLADO SE QUEDA: no es decoración. */
.cop-hoja-x{
  width:32px; height:32px; border-radius:50%; border:none; flex:0 0 auto;
  background:none; color:var(--text-dim,#9aa3b5); font-size:var(--fs-base, 1rem); font-weight:700;
  display:grid; place-items:center; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .cop-hoja-x:hover{color:#fff}
}
.cop-hoja-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}