/* ══════════════════════════════════════════════════════════════════ COP · LA FICHA DEL MODO (07/09/2026) ────────────────────────────────────────────────────────────────── Franco: *«los modos de juego tienen que tener un botón con la i de información donde se abra un menú así como la tercer imagen que te cargo, que es con fondo gris que explica de qué se trata el modo y todo»*. Y con las referencias de Sorare: *«la que es toda gris es para la descripción del modo que te dije, con el botón de rules arriba a la izquierda que después abrirá un link con las reglas»*. ══ QUÉ ES Y QUÉ NO ═══════════════════════════════════════════════ ⚠⚠ ACÁ NO HAY UNA HOJA NUEVA. El velo, la caja, el tirador, la cabecera y la animación son `cop-ui-hoja.css` —la misma hoja de «Tus mercados» y de los accesos—. Este archivo pone SÓLO lo que va adentro: el emblema, el nombre del modo, las secciones y el pie. Es la regla del sistema: *«una hoja no tiene por qué saber qué se muestra en ella»*, y la vuelta es igual de cierta. ⚠ LOS DOS BOTONES DE ARRIBA SON PIEZAS QUE YA EXISTEN. «Reglas» es `.cop-b .cop-b--sm .cop-borde` —el botón del sistema en talla chica— y la ✕ es `.cop-hoja-x`, la misma de todas las hojas. Ninguno de los dos se redibuja acá: si el botón de la app cambia, éste cambia con él. La ✕ va a la derecha y «Reglas» a la izquierda porque `.cop-hoja-head` ya reparte con `space-between`. ⚠ EL DORADO ES DE LOS TÍTULOS DE SECCIÓN Y DE NADA MÁS. Regla 6: el color va en los acentos, nunca en el cuerpo del texto. Y es dorado y no el acento de la competencia a propósito: la ficha se abre desde cualquier modo —celestes y violetas— y si el título cambiara de color según el modo, la misma pantalla se leería como cuatro pantallas. ══ CÓMO SE USA ═══════════════════════════════════════════════════ El que abre la ficha no escribe nada de esto: lo arma `cop-modo-info.js` a partir de la tabla de modos. Y la ficha se puede abrir a mano: COPModoInfo.abrir('champions') ══════════════════════════════════════════════════════════════════ */ /* ── EL BOTÓN «i» ────────────────────────────────────────────────── ⚠ ES DE LA FAMILIA «ÍCONO», NO UN BOTÓN. El sistema separa cinco familias y sólo la primera lleva `.cop-b`: esto es cuadrado, sin texto, y vive pegado a un título — meterle el cuerpo del botón lo volvería tan pesado como la acción principal de la pantalla, que es lo contrario de lo que es. ⚠ 28 px DE DIBUJO Y 40 DE ÁREA TÁCTIL: el círculo se ve chico porque tiene que verse chico, pero el dedo necesita 40. El `::after` agranda el área sin agrandar la pieza. */ .cop-mi-i{ box-sizing:border-box; position:relative; width:28px; height:28px; flex:0 0 auto; border-radius:50%; border:1.4px solid rgba(255,255,255,.28); background:none; color:var(--text-dim, #9aa3b5); font-family:var(--texto, Inter, system-ui, sans-serif); font-weight:800; font-size:var(--fs-sm, .8rem); line-height:1; display:inline-grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .2s, color .2s; } .cop-mi-i[hidden]{display:none} .cop-mi-i::after{ content:''; position:absolute; top:50%; left:50%; width:40px; height:40px; transform:translate(-50%,-50%); } /* ── LA «i» DE LA FILA DEL VOLVER · MÁS CHICA (Franco, 12/09/2026) ── *«el símbolo de info tiene que ser más chico y estar siempre a la misma altura que el botón de volver»*. El reparto lo hace `.cop-fila-volver` (`cop-ui-main.css`); acá vive el tamaño. ⚠ 22 px DE DIBUJO Y LOS MISMOS 40 DE ÁREA TÁCTIL. El círculo se achica; el dedo NO. El `::after` que agranda el área no se toca, así que la pieza se ve más liviana sin volverse difícil de tocar — es la misma decisión que ya estaba escrita para los 28 px, un paso más abajo. ⚠ AL LADO DEL VOLVER, 22 px ES LA MEDIDA Y NO UN GUSTO: `.volver` es texto de .85rem con interlineado normal, o sea ~18 px de altura de letra. Con 28 px el círculo se leía más alto que el renglón que tiene al lado y la fila quedaba desparejada; con 22 los dos bloques miden casi lo mismo. */ .cop-mi-i--sm{ width:22px; height:22px; border-width:1.2px; font-size:var(--fs-xs, .72rem); } /* ── LA «i» ESPEJADA, CUANDO EL VOLVER NO ESTÁ EN EL FLUJO ────────── ⚠⚠ LA LEY ES LA ALTURA, NO EL MECANISMO (12/09/2026). Franco pidió la «i» *«siempre a la misma altura que el botón de volver de la página en la que esté»*, y hay pantallas donde ese botón NO está en una fila: en `duelo-de-penales.html` la flecha es `position:absolute` pegada al borde izquierdo de la cabecera, con el logo y el título centrados detrás. Meterla en una fila obligaría a rehacer la cabecera de una pantalla de juego que nadie pidió tocar. Así que la «i» **espeja la flecha**: absoluta, pegada al borde derecho, centrada en la misma vertical. El invariante que se mide es el mismo —misma altura, a la derecha, 22 px— y el arnés no distingue cuál de las dos formas se usó, que es como tiene que ser. ⚠ EL CONTENEDOR TIENE QUE SER `position:relative` (lo es, porque ya ancla al volver). Si no lo fuera, la «i» se iría a la esquina de la pantalla: es el único requisito de esta variante. */ .cop-mi-i--espejo{ position:absolute; right:0; top:50%; transform:translateY(-50%); } @media (hover:hover) and (pointer:fine){ .cop-mi-i:hover{ border-color:rgba(255,255,255,.6); color:var(--text, #f4f6fb) } } .cop-mi-i:focus{outline:none} .cop-mi-i:focus-visible{ border-color:rgb(var(--cop-acento-rgb, 12,149,235)); color:var(--text, #f4f6fb); box-shadow:0 0 0 3px rgba(var(--cop-acento-rgb, 12,149,235), .22); } /* ── EL EMBLEMA Y EL NOMBRE ──────────────────────────────────────── ⚠ EL EMBLEMA VA CENTRADO Y GRANDE, como en la referencia: es lo primero que confirma «estoy leyendo sobre ESTE modo». Sin él, cuatro fichas de cuatro modos son cuatro paredes de texto iguales. */ .cop-mi-emb{ display:block; margin:.2rem auto var(--gap-md, .7rem); height:64px; width:auto; max-width:60%; object-fit:contain; } .cop-mi-nombre{ margin:0 0 var(--gap-xs, .3rem); font-family:'Anton', 'Arial Narrow', Impact, sans-serif; font-weight:400; font-size:var(--fs-2xl, 1.5rem); line-height:var(--lh-tight, 1.1); text-transform:uppercase; text-align:center; color:var(--text, #f4f6fb); } /* la línea que resume el modo en una frase, antes de las secciones */ .cop-mi-bajada{ margin:0 auto var(--gap-xl, 1.2rem); max-width:38ch; font-size:var(--fs-base, 1rem); font-weight:600; line-height:var(--lh-loose, 1.5); color:var(--text-dim, #9aa3b5); text-align:center; } /* ── LAS SECCIONES ───────────────────────────────────────────────── ⚠ SIN CAJAS Y SEPARADAS POR UNA LÍNEA (regla 1). Es la corrección que Franco pide siempre, y en una ficha de cuatro bloques es donde más se nota: cuatro cajas grises adentro de una hoja gris son cuatro parches. ⚠ LA LÍNEA VA ARRIBA Y NO ABAJO —`+`— para que la última sección no termine en una raya suelta encima del botón. */ .cop-mi-sec + .cop-mi-sec{ margin-top:var(--gap-lg, 1rem); padding-top:var(--gap-lg, 1rem); border-top:1px solid var(--card-border, #1e2330); } .cop-mi-tit{ margin:0 0 var(--gap-xs, .3rem); font-size:var(--fs-xs, .72rem); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold, #ffc233); } .cop-mi-txt{ margin:0; font-size:var(--fs-md, .88rem); font-weight:600; line-height:var(--lh-loose, 1.5); color:var(--text-dim, #9aa3b5); } .cop-mi-txt b{ color:var(--text, #f4f6fb); font-weight:800 } .cop-mi-txt + .cop-mi-txt{ margin-top:var(--gap-sm, .5rem) } /* la lista de una sección: viñetas sin punto, con guión del color del texto tenue — un `