/* ===================================================================== COPA ECYD MÉRIDA Identidad según el manual de marca de WeBrand (agosto 2025). Paleta oficial, p. 36 del branding: #F6F9ED primario claro — "Pureza Profesional" #303030 primario oscuro #FEF74F secundario — "Energético" Jerarquía tipográfica del handover, p. 37: primaria datos, etiquetas y cifras secundaria texto corrido e interfaz terciaria piezas de display y citas El logotipo NO se compone con tipografía: el wordmark "COPA ECYD" es una letra hecha a la medida de la marca y solo existe como imagen. La hoja está escrita PRIMERO PARA TELÉFONO. Cada @media (min-width) va sumando lo que solo tiene sentido con más pantalla. ===================================================================== */ /* ---------------- Tipografías ------------------------------------------ Las tipografías del manual (PP Neue Montreal, Mono Spec y PP Editorial New) llegaron como .otf de ESCRITORIO y sin licencia web, que se compra aparte. Mientras esa licencia no exista, el sitio usa sustitutas libres (SIL Open Font License) elegidas por parecido, no por conveniencia: PP Neue Montreal -> Inter misma grotesca neutra Mono Spec -> DM Mono mono geométrica y ligera PP Editorial New -> Instrument Serif display editorial de alto contraste Los .otf originales quedaron en private/marca/fuentes-licenciadas/. Si compran la licencia web, se convierten a .woff2 y se cambian las tres variables --sans, --mono y --display de aquí abajo. Nada más. Se sirven desde el propio dominio, no desde Google Fonts: evita una petición a terceros, cookies ajenas y depender de que su CDN responda. font-display:swap deja leer el texto desde el primer momento. */ @font-face { font-family: 'Inter var'; src: url('/assets/fuentes/inter-var.woff2') format('woff2'); font-weight: 100 900; /* un solo archivo para todos los pesos */ font-style: normal; font-display: swap; } @font-face { font-family: 'Inter var'; src: url('/assets/fuentes/inter-var-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/assets/fuentes/dmmono-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/assets/fuentes/dmmono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/assets/fuentes/instrumentserif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/assets/fuentes/instrumentserif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ---------------- Tokens ---------------- */ :root { /* Paleta de marca */ --carbon: #303030; --carbon-suave: #454545; --crema: #f6f9ed; --amarillo: #fef74f; /* Derivados, para jerarquía. No son colores nuevos: son el carbón y la crema a distintas opacidades, para no ensuciar la paleta oficial. */ --tinta: var(--carbon); --tinta-suave: #6b6b66; --borde: #dedfd6; /* Los dos de encima del carbón, para lo que va sobre fondo oscuro. */ --tinta-clara: #a9aa9e; --borde-oscuro: #4a4a48; --papel: var(--crema); --papel-hueso: #fbfcf6; /* Estados. El torneo necesita decir "bien" y "falta", y la paleta de marca es neutra a propósito, así que se añaden dos verdes/rojos sobrios que no compiten con el amarillo. */ --bien: #2f6b42; --falta: #9e3b1f; --sans: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace; --display: 'Instrument Serif', 'Times New Roman', Georgia, serif; --radio: 2px; /* la marca es editorial y recta: casi sin redondeo */ --ancho: 1180px; /* Un solo sitio donde se decide el aire lateral: en teléfono es ajustado, en pantalla grande respira. Todo lo demás lo hereda. */ --margen: 1.15rem; /* La cabecera son dos renglones en teléfono: el logotipo y la tira de destinos. --alto-cabecera es la suma, y es lo que usan la cabecera pegajosa, el scroll-padding de los anclajes y la barra de patronos. */ --alto-marca: 3rem; --alto-menu: 2.5rem; --alto-cabecera: calc(var(--alto-marca) + var(--alto-menu)); /* Altura mínima de cualquier cosa que se toca con el dedo. 44px es el mínimo que recomiendan Apple y las WCAG; en táctil se sube a 48. */ --toque: 44px; } @media (min-width: 640px) { :root { --margen: 2rem; --alto-marca: 3.5rem; --alto-menu: 2.75rem; } } @media (min-width: 1024px) { :root { --margen: 2.5rem; } } /* En un renglón, la cabecera vuelve a ser una altura sola. Tiene que ser el MISMO ancho al que el menú se pone en fila (abajo, en CABECERA): si no, la barra de patronos se pega a la altura equivocada. */ @media (min-width: 960px) { :root { --alto-cabecera: 4rem; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Al saltar a un ancla, deja libre la cabecera pegajosa. */ scroll-padding-top: calc(var(--alto-cabecera) + 1rem); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* En iPhone, el gris de toque por defecto ensucia botones y fichas. */ -webkit-tap-highlight-color: rgba(48, 48, 48, .12); /* Red de seguridad para que la página no se vaya de lado. `clip` y no `hidden`: con `hidden` el body se convierte en contenedor de scroll, y eso pelea con las cabeceras position:sticky —las obliga a recalcular en cada cuadro— además de romper el anclaje del scroll. `clip` recorta igual y no crea contenedor. */ overflow-x: clip; } /* Respaldo para navegadores sin overflow:clip (Safari anterior a 16). */ @supports not (overflow: clip) { body { overflow-x: hidden; } } h1, h2, h3 { line-height: 1.05; margin: 0; font-weight: 500; } p { margin: 0 0 1rem; } a { color: inherit; } img { max-width: 100%; } /* Titulares: la grotesca en caja alta y muy apretada, como el logotipo. No se usa la de display aquí — esa es para citas y portadas. */ .titular { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; overflow-wrap: break-word; /* "ELIMINATORIAS" no rompe la caja en móvil */ } /* Escala de titulares. Fluida: el mismo elemento mide distinto en un teléfono de 360px que en un monitor, sin puntos de quiebre bruscos. */ /* El interlineado se afloja conforme baja el tamaño: un titular grande vive de ir apretado, pero uno chico parte en dos o tres renglones en el teléfono y con 0.95 las líneas se tocan. */ .titular--xl { font-size: clamp(1.9rem, 8vw, 3rem); } .titular--l { font-size: clamp(1.45rem, 5.5vw, 2rem); line-height: 1.05; } .titular--m { font-size: clamp(1.1rem, 4vw, 1.3rem); line-height: 1.2; } /* Etiquetas y datos: monoespaciada, caja alta, muy espaciada. Es el recurso más reconocible del look & feel de la marca. */ .dato, .etiqueta, th, .portada__eyebrow, .metrica__t, .tiempo__anio, .patrono-linea__cuando, .partido__cuando { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; } /* Cita / display */ .display { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; border-radius: var(--radio); } .portada a:focus-visible, .cabecera a:focus-visible, .cabecera summary:focus-visible, .pie a:focus-visible { outline-color: var(--amarillo); } .salto { position: absolute; left: -9999px; } .salto:focus { left: 0.75rem; top: 0.75rem; z-index: 60; background: var(--carbon); color: var(--crema); padding: 0.5rem 1rem; } /* ===================================================================== CABECERA El menú está SIEMPRE a la vista: no hay nada que abrir ni desplegar. Teléfono: dos renglones — el logotipo arriba y debajo una tira de destinos que rueda de lado con el dedo. Con ocho entradas es la única forma de tenerlas todas visibles sin comerse media pantalla. Computadora: todo en un renglón, logotipo, menú y botón de inscripción. ===================================================================== */ .cabecera { position: sticky; top: 0; z-index: 40; background: var(--carbon); padding-top: env(safe-area-inset-top); /* muesca del iPhone */ } .cabecera__barra { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; padding: 0 var(--margen); } .marca { display: flex; align-items: center; flex: 0 0 auto; min-height: var(--alto-marca); } .marca img { height: 18px; width: auto; display: block; } @media (min-width: 640px) { .marca img { height: 22px; } } /* --- El renglón de destinos --- En teléfono: los tres primeros a la vista y el resto detrás de «Ver más». Ocupa todo el ancho de la cabecera, por debajo del logotipo. `position: relative` para que el desplegable cuelgue de aquí. */ .nav { flex: 1 0 100%; position: relative; display: flex; align-items: stretch; justify-content: space-between; border-top: 1px solid rgba(246, 249, 237, .12); } .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; min-height: var(--alto-menu); } .menu a { display: flex; align-items: center; height: var(--alto-menu); padding: 0 0.55rem; color: rgba(246, 249, 237, .78); text-decoration: none; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border-bottom: 2px solid transparent; } .menu li:first-child a { padding-left: 0; } .menu a:hover { color: var(--crema); } .menu a[aria-current="page"] { color: var(--amarillo); border-bottom-color: var(--amarillo); } /* --- «Ver más» --- */ .mas { position: relative; display: flex; align-items: stretch; } .mas__boton { display: flex; align-items: center; gap: 0.4rem; height: var(--alto-menu); padding: 0 0.1rem 0 0.6rem; cursor: pointer; list-style: none; color: rgba(246, 249, 237, .78); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .mas__boton::-webkit-details-marker { display: none; } .mas__boton:hover { color: var(--crema); } .mas__flecha { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .18s ease; } .mas[open] .mas__boton { color: var(--amarillo); } .mas[open] .mas__flecha { transform: rotate(180deg); } /* Si la página en la que estás es una de las escondidas, el botón lleva su nombre y se marca como marcado está cualquier otro destino activo. */ .mas--aqui .mas__boton { color: var(--amarillo); border-bottom: 2px solid var(--amarillo); } /* El desplegable cuelga del borde derecho de la cabecera. Está FUERA del
y se muestra con el selector de hermano: así el menú no necesita JavaScript en ningún ancho. */ .menu--resto { display: none; } .mas[open] ~ .menu--resto { display: block; } .menu--resto { position: absolute; right: 0; top: 100%; min-width: 13rem; background: var(--carbon); border: 1px solid rgba(246, 249, 237, .16); border-top: 0; box-shadow: 0 18px 30px rgba(48, 48, 48, .35); padding-bottom: env(safe-area-inset-bottom); } .menu--resto a { height: auto; min-height: 48px; padding: 0 1.1rem; border-bottom: 1px solid rgba(246, 249, 237, .08); font-size: 0.75rem; } .menu--resto li:last-child a { border-bottom: 0; } .menu--resto li:first-child a { padding-left: 1.1rem; } .menu--resto a:hover { background: rgba(246, 249, 237, .05); } .menu--resto a[aria-current="page"] { border-bottom-color: rgba(246, 249, 237, .08); box-shadow: inset 3px 0 0 var(--amarillo); } /* El botón de inscripción solo existe en pantalla grande: en teléfono estorbaría al lado del logotipo, y «Registro» ya está en la tira. */ .cabecera__cta { display: none; } /* Medido con la tipografía de marca cargada: los ocho destinos en fila ocupan 636px y el logotipo 173. Con los márgenes, 922 — así que desde 960 caben todos y no hace falta esconder ninguno detrás de «Ver más». El botón de inscribir pide 157 más, y esos solo aparecen a partir de 1120. No se pierde nada en medio: «Registro» es uno de los ocho. */ @media (min-width: 960px) { .cabecera__barra { flex-wrap: nowrap; gap: 2rem; min-height: var(--alto-cabecera); } .marca { min-height: 0; } .nav { flex: 1 1 auto; justify-content: flex-end; border-top: 0; } .menu { min-height: 0; } .menu a { height: auto; padding: 0.45rem 0.55rem; font-size: 0.68rem; border-bottom: 0; } .menu li:first-child a { padding-left: 0.55rem; } .menu a[aria-current="page"] { border-bottom: 0; } /* Aquí caben los ocho: el botón sobra y el segundo grupo se suelta en fila junto al primero, como si nunca hubiera estado escondido. Se muestra esté el
abierto o cerrado, porque ya no depende de él. */ .mas { display: none; } .menu--resto, .mas[open] ~ .menu--resto { position: static; display: flex; min-width: 0; background: none; border: 0; box-shadow: none; padding-bottom: 0; } .menu--resto a { min-height: 0; height: auto; padding: 0.45rem 0.55rem; border-bottom: 0; font-size: 0.68rem; } .menu--resto li:first-child a { padding-left: 0.55rem; } .menu--resto a:hover { background: none; } .menu--resto a[aria-current="page"] { box-shadow: none; } /* En fila, el destino activo se marca igual que los tres primeros. */ .menu--resto a[aria-current="page"] { color: var(--amarillo); } /* El botón de inscribir no cabe hasta aquí. Hasta entonces, fuera: la gente llega a Registro por el menú. */ .cabecera__cta { display: none; } } @media (min-width: 1120px) { .cabecera__cta { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; background: var(--amarillo); color: var(--carbon); text-decoration: none; border-radius: var(--radio); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } .cabecera__cta:hover { background: #fffa8a; } } /* ---------------- Estructura ---------------- */ .contenedor { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.25rem, 7vw, 3.5rem) var(--margen); } .estrecho { max-width: 48rem; } .portada { background: var(--carbon); color: var(--crema); } .portada .contenedor { padding-block: clamp(2.5rem, 10vw, 5rem) clamp(2.25rem, 8vw, 4rem); } .portada__eyebrow { font-size: 0.7rem; color: var(--amarillo); margin-bottom: 1rem; } .portada__lema { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 9vw, 4rem); line-height: 1.05; max-width: 18ch; margin: 0; color: var(--crema); letter-spacing: -0.01em; } .portada__bajada { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(246, 249, 237, .6); margin-top: 1.25rem; } /* Ficha de datos de la portada. En teléfono son dos renglones apilados; a partir de tableta, dos columnas. */ .portada dl { display: grid; gap: 1.25rem; max-width: 42rem; margin: clamp(2rem, 7vw, 3rem) 0 0; padding-top: clamp(1.5rem, 5vw, 2rem); border-top: 1px solid rgba(246, 249, 237, .16); } @media (min-width: 560px) { .portada dl { grid-template-columns: 1fr 1fr; gap: 2rem; } } .portada dt { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amarillo); } .portada dd { margin: 0.4rem 0 0; font-size: 1.02rem; } /* Botonera de la portada: en teléfono la acción principal ocupa el ancho completo —es lo que se quiere tocar— y las secundarias van debajo. */ .portada__acciones { display: grid; gap: 0.6rem; margin: clamp(2rem, 7vw, 2.5rem) 0 0; } .portada__acciones .boton--oro { grid-column: 1 / -1; } @media (min-width: 480px) { /* auto-flow en columna: los tres botones caben en un renglón sin tener que saber cuántos son. Con repeat(2, auto) el tercero caía a otra fila. */ .portada__acciones { grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; } .portada__acciones .boton--oro { grid-column: auto; } } .portada__acciones .boton--linea { color: var(--crema); border-color: rgba(246, 249, 237, .3); } .portada__acciones .boton--linea:hover { border-color: var(--amarillo); color: var(--amarillo); } .portada__nota { font-size: 0.68rem; color: rgba(246, 249, 237, .6); margin: 1.25rem 0 0; } .franja { background: var(--papel-hueso); border-block: 1px solid var(--borde); } .rejilla-3 { display: grid; gap: clamp(1.75rem, 6vw, 2.5rem); } @media (min-width: 720px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } } .tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1.15rem, 4.5vw, 1.5rem); } .tarjeta--plana { padding: 0; overflow: hidden; } .tarjeta + .tarjeta { margin-top: 1rem; } /* ---------------- Botones ---------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; min-height: var(--toque); padding: 0.7rem 1.5rem; border-radius: var(--radio); font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease; } /* En pantallas que se tocan, el dedo necesita más blanco que el ratón. */ @media (pointer: coarse) { .boton { min-height: 48px; } } .boton--principal { background: var(--carbon); color: var(--crema); } .boton--principal:hover { background: var(--carbon-suave); } .boton--oro { background: var(--amarillo); color: var(--carbon); } .boton--oro:hover { background: #fffa8a; } .boton--linea { background: transparent; border-color: var(--borde); color: var(--carbon); } .boton--linea:hover { border-color: var(--carbon); } .boton--chico { min-height: 0; padding: 0.5rem 0.9rem; font-size: 0.64rem; } /* El panel del comité se usa a pie de cancha: hasta los botones secundarios necesitan alto suficiente para no fallar el toque. */ @media (pointer: coarse) { .boton--chico { min-height: 40px; } } /* Ancho completo solo en teléfono: ahí es la única acción de la pantalla. En computadora un botón de borde a borde se ve desproporcionado. */ .boton--ancho { width: 100%; } @media (min-width: 640px) { .boton--ancho { width: auto; } } .boton[disabled] { opacity: 0.55; cursor: progress; } /* ---------------- Formularios ---------------- */ .campo { margin-bottom: 1.25rem; } .campo label { display: block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; } .campo .ayuda { font-size: 0.78rem; color: var(--tinta-suave); margin: 0.25rem 0 0; } .campo input, .campo select, .campo textarea { width: 100%; margin-top: 0.45rem; min-height: var(--toque); padding: 0.7rem 0.8rem; border: 1px solid var(--borde); border-radius: var(--radio); font: inherit; background: #fff; color: inherit; /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom solo al tocar el campo y deja al usuario perdido dentro del formulario. */ font-size: 16px; } @media (min-width: 640px) { .campo input, .campo select, .campo textarea { font-size: 0.95rem; } } .campo input:focus, .campo select:focus { border-color: var(--carbon); } .campo input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: 0 0 auto; accent-color: var(--carbon); } /* La casilla de privacidad se toca entera, no solo el cuadrito. */ .campo--casilla label { display: flex; gap: 0.75rem; align-items: flex-start; font-family: var(--sans); font-size: 0.88rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 0.6rem 0; cursor: pointer; line-height: 1.55; } .requerido { color: var(--falta); } .fila { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .fila--2 { grid-template-columns: 1fr 1fr; } .fila--3 { grid-template-columns: repeat(3, 1fr); } } .separador { border: 0; border-top: 1px solid var(--borde); margin: 1.75rem 0; } /* Pasos numerados de "cómo funciona": se leen mejor que una lista suelta. */ .pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; } .pasos li { counter-increment: paso; position: relative; padding: 0 0 1.1rem 2.9rem; } .pasos li:last-child { padding-bottom: 0; } .pasos li::before { content: counter(paso); position: absolute; left: 0; top: -0.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--amarillo); color: var(--carbon); font-family: var(--mono); font-size: 0.72rem; } .pasos li:not(:last-child)::after { content: ""; position: absolute; left: 0.95rem; top: 2.1rem; bottom: 0.4rem; width: 1px; background: var(--borde); } /* ---------------- Avisos ---------------- */ .avisos { max-width: var(--ancho); margin: 1.25rem auto 0; padding: 0 var(--margen); } .aviso { margin: 0 0 0.5rem; padding: 0.85rem 1.1rem; border-radius: var(--radio); font-size: 0.9rem; border-left: 3px solid; } .aviso--exito { background: rgba(47,107,66,.07); color: var(--bien); border-color: var(--bien); } .aviso--error { background: rgba(158,59,31,.07); color: var(--falta); border-color: var(--falta); } .aviso--info { background: rgba(48,48,48,.05); color: var(--tinta-suave); border-color: var(--borde); } /* ---------------- Tablas ---------------- Una tabla de posiciones tiene nueve columnas y no cabe en un teléfono. En vez de encogerla hasta lo ilegible, rueda de lado con el nombre del equipo clavado a la izquierda, que es la columna que da sentido al resto. */ .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Sombra en el borde mientras quede tabla por ver, y solo mientras quede: las dos primeras capas viajan con el contenido y tapan a las otras dos cuando ya no hay nada más de ese lado. */ background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 2.5rem 100% no-repeat, linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 2.5rem 100% no-repeat, linear-gradient(to right, rgba(48,48,48,.10), rgba(48,48,48,0)) left center / 0.75rem 100% no-repeat, linear-gradient(to left, rgba(48,48,48,.10), rgba(48,48,48,0)) right center / 0.75rem 100% no-repeat; background-attachment: local, local, scroll, scroll; } table { border-collapse: collapse; width: 100%; font-size: 0.9rem; } th { text-align: left; font-size: 0.62rem; color: var(--tinta-suave); font-weight: 400; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--borde); white-space: nowrap; } td { padding: 0.7rem 0.5rem; border-top: 1px solid var(--borde); } .centro { text-align: center; } .derecha { text-align: right; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Primera columna fija en la tabla de posiciones. */ .tabla-posiciones th:first-child, .tabla-posiciones td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 9.5rem; box-shadow: 1px 0 0 var(--borde); } .tabla-posiciones td, .tabla-posiciones th { padding-inline: 0.45rem; } .tabla-posiciones .pos { color: var(--tinta-suave); font-family: var(--mono); font-size: 0.75rem; } /* Tabla que se convierte en fichas cuando no hay ancho. Cada lleva data-etiqueta y en teléfono la muestra como rótulo. */ @media (max-width: 639px) { /* La cabecera sigue existiendo para Google y para un lector de pantalla; solo deja de verse, porque cada celda ya lleva su propio rótulo. */ .tabla-fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .tabla-fichas, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; } .tabla-fichas tr { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; padding: 0.35rem 0.9rem; margin-bottom: 0.6rem; } .tabla-fichas td { border: 0; padding: 0.4rem 0; display: flex; justify-content: space-between; gap: 1rem; } .tabla-fichas td + td { border-top: 1px dashed var(--borde); } .tabla-fichas td::before { content: attr(data-etiqueta); font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); flex: 0 0 auto; } /* La primera celda es el título de la ficha: sin rótulo y destacada. */ .tabla-fichas td:first-child { font-size: 1.05rem; padding-top: 0.6rem; } .tabla-fichas td:first-child::before { display: none; } } /* ---------------- Sede y mapa ---------------- */ .sede { display: grid; gap: 1.25rem; margin-top: 2rem; } @media (min-width: 820px) { .sede { grid-template-columns: 1fr 1.3fr; align-items: stretch; gap: 1.5rem; } } .sede__datos { background: var(--carbon); color: var(--crema); border-radius: var(--radio); padding: clamp(1.4rem, 5vw, 2rem); } .sede__nombre { font-family: var(--sans); font-weight: 500; text-transform: uppercase; font-size: clamp(1.2rem, 5vw, 1.5rem); letter-spacing: -0.01em; margin: 0; } .sede__direccion { font-style: normal; font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: rgba(246,249,237,.7); margin: 0.75rem 0 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .sede__datos .silencio { color: rgba(246,249,237,.6); } .sede__apps { display: grid; gap: 0.5rem; margin-top: 0.5rem; } @media (min-width: 420px) { .sede__apps { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); } } .sede__apps .boton--linea { border-color: rgba(246,249,237,.3); color: var(--crema); } .sede__apps .boton--linea:hover { border-color: var(--amarillo); color: var(--amarillo); } .sede__mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--papel-hueso); min-height: 260px; display: flex; } @media (min-width: 640px) { .sede__mapa { min-height: 320px; } } .sede__mapa iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; } /* ---------------- Redes ---------------- */ .redes__cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .redes__rejilla { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .redes__rejilla { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } } @media (min-width: 960px) { .redes__rejilla { grid-template-columns: repeat(6, 1fr); } } .redes__post { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radio); background: var(--borde); text-decoration: none; color: var(--crema); } .redes__post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .redes__post:hover img { transform: scale(1.05); } .redes__video { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.7rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .redes__pie { position: absolute; inset: auto 0 0 0; padding: 2rem 0.6rem 0.55rem; font-family: var(--mono); font-size: 0.62rem; line-height: 1.4; background: linear-gradient(transparent, rgba(48,48,48,.85)); opacity: 0; transition: opacity .2s ease; } .redes__post:hover .redes__pie, .redes__post:focus-visible .redes__pie { opacity: 1; } /* Con el dedo no hay "hover": en táctil el pie del post se ve siempre. */ @media (pointer: coarse) { .redes__pie { opacity: 1; } } .redes__enlaces { display: grid; gap: 0.5rem; margin-top: 2rem; } @media (min-width: 480px) { .redes__enlaces { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } } .redes__enlace { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: 0.75rem 1.5rem; border-radius: var(--radio); background: var(--carbon); color: var(--crema); text-decoration: none; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; } .redes__enlace:hover { background: var(--amarillo); color: var(--carbon); } /* ===================================================================== PORTADA ===================================================================== */ /* El hero se parte en dos en computadora: el lema a la izquierda y la cuenta atrás a la derecha, que es el hueco que antes quedaba vacío. */ .portada__rejilla { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: end; } @media (min-width: 860px) { .portada__rejilla { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } } /* El número de edición, a tamaño de titular. */ .edicion { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 1.25rem; } .edicion__num { font-family: var(--display); font-size: clamp(3.25rem, 11vw, 5.5rem); line-height: 0.8; color: var(--amarillo); } .edicion__txt { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta-clara); line-height: 1.5; } /* «más grande» en cursiva y amarillo: una sola palabra destacada basta. */ .portada__lema em { font-style: italic; color: var(--amarillo); } /* Cuenta atrás. Un torneo es una fecha que se acerca. */ .cuenta { border: 1px solid var(--borde-oscuro); background: rgba(0, 0, 0, 0.18); padding: 1.25rem 1.35rem; } .cuenta__t { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta-clara); margin: 0 0 0.9rem; } .cuenta__cifras { display: flex; gap: 1.75rem; margin: 0; } .cuenta__n { display: block; font-family: var(--display); font-size: clamp(2.1rem, 6vw, 2.9rem); line-height: 1; color: var(--amarillo); font-variant-numeric: tabular-nums; } .cuenta__u { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-clara); } .cuenta__cuando { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--borde-oscuro); font-size: 0.92rem; color: #d8dac9; } .cuenta__cuando strong { color: var(--crema); font-weight: 500; } .cuenta__nota { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--tinta-clara); } /* El logotipo a lo ancho del pie del hero: la firma de la marca a tamaño de lona. Decorativo, así que aria-hidden y sin texto alternativo. */ .portada__firma { display: block; width: 100%; height: auto; margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--borde-oscuro); opacity: 0.16; } /* ---------------- Cifras del torneo ---------------- */ .cifras { background: var(--papel-hueso); border-block: 1px solid var(--borde); padding-block: clamp(1.75rem, 4vw, 2.5rem); } .cifras .contenedor { display: grid; gap: 1.75rem 3rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .cifras .contenedor { grid-template-columns: minmax(0, 15rem) 1fr; } } .cifras__marca { display: flex; flex-direction: column; gap: 0.6rem; } .cifras__marca img { display: block; width: 100%; max-width: 13rem; height: auto; } .cifras__desde { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-suave); } .cifras__datos { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 620px) { .cifras__datos { grid-template-columns: repeat(4, 1fr); } } .cifra__n { margin: 0; font-family: var(--display); font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1; color: var(--carbon); font-variant-numeric: tabular-nums; } /* El amarillo, en una raya corta bajo cada cifra: sigue estando, deja de gritar. */ .cifra__t { display: inline-block; margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 3px solid var(--amarillo); font-family: var(--mono); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); } /* ---------------- Categorías en fichas ---------------- */ .cabeza-seccion { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.75rem; } .categorias { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } /* Una ficha se señala con el dedo; una tabla se lee de corrido. Es lo que hace un papá buscando la categoría de su hijo. */ .cat { border: 1px solid var(--borde); background: var(--papel-hueso); padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; } .cat--fem { background: #fffdf0; } .cat__clave { margin: 0; font-family: var(--display); font-size: 2.1rem; line-height: 1; } .cat__rama { margin: 0; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); } .cat__anios { margin: auto 0 0; padding-top: 0.6rem; font-size: 0.88rem; color: var(--tinta-suave); } .cat__formato { margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--borde); font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; } /* ===================================================================== COMPETENCIA ===================================================================== */ /* Selector de categoría. En teléfono es una tira que rueda de lado y se detiene en cada ficha, para no apilar diez renglones antes de la tabla. */ .fichas { display: flex; gap: 0.4rem; margin: 1.75rem 0; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.4rem; scrollbar-width: thin; } .fichas::-webkit-scrollbar { height: 3px; } .fichas::-webkit-scrollbar-thumb { background: var(--borde); } .ficha { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: var(--toque); padding: 0.5rem 0.95rem; border-radius: var(--radio); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; border: 1px solid var(--borde); background: #fff; color: var(--tinta-suave); } .ficha:hover { border-color: var(--carbon); color: var(--carbon); } .ficha[aria-current="page"] { background: var(--carbon); color: var(--crema); border-color: var(--carbon); } @media (min-width: 720px) { .fichas { flex-wrap: wrap; overflow: visible; } } /* Rótulo de la categoría sobre la que se está trabajando. La tira de fichas por sí sola no se leía como un selector: hacía falta decir en grande dónde está uno parado. */ .cat-activa { margin: 1.5rem 0 0; padding: 0.9rem 1.15rem; border: 1px solid var(--carbon); border-left-width: 5px; border-radius: var(--radio); background: #fff; } .cat-activa__rotulo { margin: 0; font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); } .cat-activa__nombre { margin: 0.2rem 0 0; font-family: var(--display); font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.1; text-transform: uppercase; color: var(--carbon); } .cat-activa__nombre span { font-family: var(--sans); font-weight: 400; text-transform: none; font-size: 0.6em; color: var(--tinta-suave); } .grupos { display: grid; gap: 1rem; } @media (min-width: 900px) { .grupos { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .grupo__titulo { background: var(--carbon); color: var(--crema); padding: 0.75rem 1rem; margin: 0; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; } .grupo__juegos { border-top: 1px solid var(--borde); } .grupo__juegos > summary { display: flex; align-items: center; min-height: var(--toque); padding: 0.7rem 1rem; cursor: pointer; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); } .grupo__juegos > summary:hover { background: var(--papel-hueso); } .grupo__juegos ul { list-style: none; margin: 0; padding: 0; } .grupo__juegos li { border-top: 1px solid var(--borde); background: var(--papel-hueso); } /* Llaves: tira horizontal que rueda. En teléfono se ve una fase y media, que es justo lo que invita a arrastrar para ver la siguiente. */ .llaves { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.75rem; scroll-snap-type: x proximity; } .llave-fase { min-width: 13.5rem; flex: 0 0 auto; scroll-snap-align: start; } @media (min-width: 640px) { .llaves { gap: 1rem; } .llave-fase { min-width: 15rem; } } .llave-fase h3 { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); margin-bottom: 0.75rem; } .llave { border: 1px solid var(--borde); background: #fff; overflow: hidden; margin-bottom: 0.5rem; } .llave__lado { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; } .llave__lado + .llave__lado { border-top: 1px solid var(--borde); } .llave__lado--gana { background: var(--amarillo); font-weight: 500; } /* Calendario de partidos. Teléfono: rejilla de dos renglones — arriba cuándo y dónde, abajo los dos equipos con el marcador en medio. Nunca parte el marcador de fila. Computadora: todo en un renglón. */ .partidos { list-style: none; margin: 1.5rem 0 0; padding: 0; border: 1px solid var(--borde); background: #fff; } /* Los enfrentamientos de un grupo se maquetan igual que el calendario general: es el mismo dato y conviene que se lea igual en los dos sitios. */ .partidos li, .grupo__juegos li { display: grid; gap: 0.15rem 0.75rem; grid-template-columns: 1fr auto 1fr; grid-template-areas: "cuando cuando cuando" "local marcador visita"; align-items: center; padding: 0.8rem 1rem; } .partidos li + li { border-top: 1px solid var(--borde); } .partido__cuando { grid-area: cuando; font-size: 0.62rem; color: var(--tinta-suave); margin-bottom: 0.2rem; } .partido__equipo { grid-area: local; font-size: 0.92rem; line-height: 1.3; } .partido__equipo.derecha { grid-area: visita; } .partido__marcador { grid-area: marcador; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 0.3rem; } @media (min-width: 720px) { .partidos li { grid-template-columns: 11rem 1fr auto 1fr; grid-template-areas: "cuando local marcador visita"; gap: 1rem; } .partidos .partido__cuando { margin-bottom: 0; font-size: 0.66rem; } } /* El grupo va en media columna hasta en pantalla grande: ahí no hay sitio para el renglón único, así que se queda con las dos líneas. */ @media (min-width: 1100px) { .grupo__juegos li { grid-template-columns: 8.5rem 1fr auto 1fr; grid-template-areas: "cuando local marcador visita"; gap: 0.75rem; } .grupo__juegos .partido__cuando { margin-bottom: 0; } } /* Renglón de "todavía no hay nada": no es un partido, no se maqueta como uno. */ .partidos li.vacio { display: block; padding: 1.25rem 1rem; } /* ---------------- Línea de tiempo ---------------- */ .tiempo { list-style: none; margin: 2.5rem 0 0; padding: 0; } .tiempo li { display: flex; gap: 1rem; padding-bottom: 2rem; position: relative; } @media (min-width: 640px) { .tiempo li { gap: 1.5rem; padding-bottom: 2.5rem; } } .tiempo li:last-child { padding-bottom: 0; } .tiempo__anio { flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--carbon); color: var(--amarillo); display: flex; align-items: center; justify-content: center; font-size: 0.64rem; letter-spacing: 0.02em; } .tiempo li:not(:last-child)::before { content: ""; position: absolute; left: 1.55rem; top: 3.5rem; bottom: 0.4rem; width: 1px; background: var(--borde); } /* ---------------- Jugadores y documentos ---------------- */ .jugador { margin-bottom: 0.75rem; } .jugador > summary { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: space-between; min-height: var(--toque); padding: 0.9rem clamp(1rem, 4vw, 1.5rem); cursor: pointer; } .jugador__playera { display: inline-block; min-width: 1.8rem; padding: 0 0.35rem; background: var(--amarillo); color: var(--carbon); font-family: var(--mono); font-size: 0.66rem; text-align: center; margin-right: 0.6rem; } .jugador__docs { display: grid; gap: 0.75rem; padding: 1.15rem clamp(1rem, 4vw, 1.5rem); border-top: 1px solid var(--borde); background: var(--papel-hueso); } @media (min-width: 640px) { .jugador__docs { grid-template-columns: 1fr 1fr; } } .doc { border: 1px solid var(--borde); background: #fff; padding: 1rem; } .doc__cab { display: flex; justify-content: space-between; gap: 0.5rem; align-items: start; } .doc__nombre { font-size: 0.88rem; font-weight: 500; } .doc input[type="file"] { width: 100%; margin: 0.7rem 0; font-size: 0.8rem; } .doc ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.76rem; color: var(--falta); } .etiqueta { font-size: 0.6rem; } .etiqueta--ok { color: var(--bien); } .etiqueta--mal { color: var(--falta); } .etiqueta--espera { color: var(--tinta-suave); } /* Marca que además invita a tocarse: en el inventario un ✓ suelto no se leía como «aquí está el archivo». */ .etiqueta--ver { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.9rem; padding: 0.2rem 0.5rem; border: 1px solid currentColor; border-radius: var(--radio); text-decoration: none; white-space: nowrap; font-family: var(--mono); letter-spacing: 0.04em; } .etiqueta--ver:hover { background: var(--crema); } /* Preguntas de sí o no en un formulario. Dos opciones, ninguna marcada de entrada: hay que contestar a propósito. */ .opciones { border: 0; padding: 0; margin: 0 0 1.25rem; } .opciones legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--tinta); } .opcion { display: flex; align-items: center; gap: 0.6rem; min-height: var(--toque); padding: 0.5rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; cursor: pointer; margin-bottom: 0.4rem; font-size: 0.95rem; } .opcion:hover { border-color: var(--carbon); } .opcion input { width: 1.1rem; height: 1.1rem; margin: 0; flex: 0 0 auto; } .opcion:has(input:checked) { border-color: var(--carbon); background: var(--crema); } .opcion:has(input:focus-visible) { outline: 2px solid var(--carbon); outline-offset: 1px; } @media (min-width: 560px) { .opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .opciones legend { flex: 1 0 100%; } .opcion { margin-bottom: 0; min-width: 11rem; } } /* ---------------- Página de pago ---------------- */ /* Un aviso que ocupa su espacio: es lo primero que el delegado tiene que leer al entrar, antes que el desglose. */ .aviso-grande { border-left: 5px solid var(--borde); margin-bottom: 1rem; } .aviso-grande--ok { border-left-color: var(--bien); background: #f2f8f4; } .aviso-grande--espera { border-left-color: var(--amarillo); background: #fffdf0; } .aviso-grande--mal { border-left-color: var(--falta); background: #fdf4f1; } .motivo { margin: 0.6rem 0 0; padding: 0.75rem 1rem; background: #fff; border-left: 3px solid var(--falta); font-size: 0.95rem; line-height: 1.55; } .desglose { width: 100%; border-collapse: collapse; margin-top: 0.75rem; } .desglose td { padding: 0.65rem 0; border-bottom: 1px solid var(--borde); } .desglose td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .desglose__total td { border-bottom: 0; padding-top: 0.9rem; font-size: 1.15rem; font-weight: 500; } .cuenta-banco { margin: 0; display: grid; gap: 0.75rem; } .cuenta-banco dt { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); } .cuenta-banco dd { margin: 0.15rem 0 0; font-size: 0.95rem; } /* La CLABE y el folio se copian y se pegan en la app del banco. Monoespaciada, separada y seleccionable de un clic. */ .clabe { display: inline-block; font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.08em; background: var(--crema); padding: 0.3rem 0.55rem; border-radius: var(--radio); user-select: all; } @media (min-width: 620px) { .cuenta-banco { grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; } } /* ---------------- Equipos por confirmar ---------------- */ .cupos { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } .cupo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.7rem 0.85rem; background: var(--papel-hueso); display: flex; flex-direction: column; gap: 0.15rem; } /* Una categoría llena tiene que verse de lejos: es lo que hace que alguien deje de confirmar equipos para ella. */ .cupo--lleno { border-color: var(--falta); background: #fdf4f1; } .cupo__cat { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); } .cupo__n { font-size: 1.6rem; line-height: 1; font-weight: 500; } .cupo--lleno .cupo__n { color: var(--falta); } .cupo__de { font-size: 0.72rem; color: var(--tinta-suave); } .equipo-ficha { margin-top: 0.85rem; } .equipo-ficha__cab { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; justify-content: space-between; margin-bottom: 0.9rem; } /* El folio en monoespaciada: es lo que se dicta a Economía para cuadrar un cobro, y ahí una O y un 0 no se pueden confundir. */ .equipo-ficha__folio { margin: 0 0 0.2rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--tinta-suave); } .equipo-ficha__nombre { margin: 0; font-size: 1.05rem; } .equipo-ficha__datos { display: grid; gap: 0.6rem 1.5rem; margin: 0; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .equipo-ficha__datos dt { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); } .equipo-ficha__datos dd { margin: 0.1rem 0 0; font-size: 0.9rem; } .equipo-ficha__motivo { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; background: #fdf4f1; border-left: 3px solid var(--falta); font-size: 0.88rem; } .equipo-ficha__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--borde); } .equipo-ficha__acciones form { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } .equipo-ficha__rechazo { flex: 1 1 20rem; } .equipo-ficha__rechazo input[type="text"] { flex: 1 1 12rem; min-width: 0; min-height: var(--toque); padding: 0.45rem 0.7rem; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 0.85rem; } /* ---------------- Acciones sobre un equipo del archivo ---------------- */ .equipo__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding: 0.85rem 1.25rem; border-top: 1px solid var(--borde); background: var(--crema); } .equipo__acciones form { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } /* El enlace privado del delegado: ancho, seleccionable de un clic y en monoespaciada, porque se copia y se pega, no se lee. */ .enlace-equipo { flex: 1 1 18rem; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; font-family: var(--mono); font-size: 0.7rem; color: var(--tinta-suave); } .enlace-equipo:focus { color: var(--carbon); outline: 2px solid var(--carbon); } .metodo-pago { width: 11rem; max-width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 0.8rem; } /* Un botón que es solo un símbolo. Chico en pantalla, grande para el dedo. */ .boton-icono { display: inline-flex; align-items: center; justify-content: center; min-width: var(--toque); min-height: var(--toque); padding: 0; border: 0; background: none; cursor: pointer; color: var(--tinta-suave); font-size: 1rem; line-height: 1; } .boton-icono:hover { color: var(--falta); } .reabrir { display: inline; } /* ---------------- Lista de movimientos ---------------- */ .movimientos { margin: 1rem 0 0; } .movimiento { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: baseline; padding: 0.6rem 0 0.6rem 0.85rem; border-bottom: 1px solid var(--borde); border-left: 3px solid var(--borde); font-size: 0.9rem; } /* Una franja de color por área: de un vistazo se ve si la semana fue de papeles o de cancha, sin leer renglón por renglón. */ .movimiento--registro { border-left-color: var(--amarillo); } .movimiento--futbol { border-left-color: var(--carbon); } .movimiento--panel { border-left-color: var(--tinta-suave); } .movimiento__cuando { flex: 0 0 8.5rem; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); } .movimiento__que { flex: 1 1 16rem; min-width: 0; line-height: 1.5; } @media (max-width: 560px) { .movimiento__cuando { flex-basis: 100%; } } /* ---------------- Accesos del comité ---------------- */ .cuenta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.75rem; } .cuenta__quien { flex: 1 1 13rem; min-width: 0; } .cuenta__que { flex: 0 1 12rem; } .cuenta__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* El código corto del equipo. Monoespaciado y espaciado: se dicta por teléfono y hay que poder leer letra por letra sin dudar. */ .codigo-equipo { display: inline-block; margin-left: 0.5rem; padding: 0.15rem 0.45rem; border-radius: var(--radio); background: var(--amarillo); color: var(--carbon); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; user-select: all; /* un clic lo selecciona entero para copiarlo */ } /* ---------------- Buscador del inventario ---------------- */ .buscador { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.5rem 0 1rem; } .buscador__campo { flex: 1 1 14rem; margin: 0; } .buscador__campo input { width: 100%; min-height: var(--toque); padding: 0.6rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; font-family: var(--sans); font-size: 1rem; } .buscador__campo input:focus-visible { outline: 2px solid var(--carbon); outline-offset: 1px; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------------- Equipo plegable del inventario ---------------- */ .equipo { border: 1px solid var(--borde); background: #fff; border-radius: var(--radio); overflow: hidden; } .equipo[open] { border-color: var(--carbon); } .equipo__cabeza { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.85rem 1.25rem; cursor: pointer; min-height: var(--toque); } .equipo__cabeza { list-style: none; } .equipo__cabeza::-webkit-details-marker { display: none; } .equipo__cabeza:hover { background: var(--crema); } .equipo__flecha { flex: 0 0 auto; color: var(--tinta-suave); font-size: 0.9rem; transition: transform 0.15s ease; } .equipo[open] .equipo__flecha { transform: rotate(90deg); color: var(--carbon); } .equipo__nombre { flex: 1 1 12rem; min-width: 0; } .equipo__cuenta { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); } @media (prefers-reduced-motion: reduce) { .equipo__flecha { transition: none; } } /* ---------------- Métricas del panel ---------------- */ .metricas { display: grid; gap: 0.75rem; margin: 2rem 0 0; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .metricas { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .metrica__t { font-size: 0.62rem; color: var(--tinta-suave); margin: 0; } .metrica__v { font-family: var(--sans); font-weight: 500; font-size: clamp(1.5rem, 6vw, 1.9rem); margin: 0.35rem 0 0; letter-spacing: -0.02em; } /* ---------------- Captura de resultados (panel del comité) ---------------- Esta pantalla se usa a pie de cancha, con el teléfono en una mano y entre dos partidos. En teléfono cada equipo se lleva su renglón con la casilla de goles grande a la derecha, y el botón de guardar ocupa todo el ancho. En computadora vuelve a ser un solo renglón. El orden del HTML es el de computadora; en teléfono lo reacomodan las áreas de la retícula. Así, además, al tabular se pasa de un marcador al otro sin escalas, que es como se captura de verdad. */ .captura { display: grid; gap: 0.6rem 0.9rem; align-items: center; grid-template-columns: 1fr auto; grid-template-areas: "fase fase" "local goll" "visita golv" "pens pens" "guardar guardar"; margin-bottom: 0.6rem; } .captura__fase { grid-area: fase; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); } .captura__equipo { font-size: 0.95rem; font-weight: 500; line-height: 1.3; } .captura__equipo--local { grid-area: local; } .captura__equipo--visita { grid-area: visita; } .captura__goles { width: 4.25rem; min-height: 48px; text-align: center; padding: 0.5rem 0.3rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; color: inherit; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; /* grande: se teclea rápido y Safari no hace zoom */ } .captura__goles--local { grid-area: goll; } .captura__goles--visita { grid-area: golv; } .captura__pens { grid-area: pens; display: flex; gap: 0.4rem; align-items: center; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); } .captura__pens input { width: 3.25rem; min-height: var(--toque); text-align: center; padding: 0.4rem 0.25rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; color: inherit; font-family: var(--mono); font-size: 16px; } .captura__guardar { grid-area: guardar; width: 100%; } .captura__raya { display: none; } @media (min-width: 900px) { .captura { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; } .captura__fase { width: 9rem; flex: 0 0 auto; } .captura__equipo { flex: 1 1 8rem; } .captura__equipo--visita { text-align: right; } .captura__goles { width: 3.5rem; min-height: 0; padding: 0.4rem 0.3rem; font-size: 0.95rem; } .captura__pens input { min-height: 0; padding: 0.3rem 0.25rem; font-size: 0.85rem; } .captura__guardar { width: auto; } .captura__raya { display: inline; color: var(--tinta-suave); } } /* ---------------- Puertas ---------------- Dos entradas grandes: el panel se partió en Registro y Fútbol, y el registro público en «inscribir equipo» y «sumarme a uno». En los dos casos la duda es la misma —¿por dónde entro?— y se responde mejor con dos bloques grandes que con una lista de enlaces. */ .puertas { display: grid; gap: 1rem; margin-top: 2rem; } @media (min-width: 640px) { .puertas { grid-template-columns: 1fr 1fr; } } .puertas--registro { margin-top: 1.5rem; } .puerta { position: relative; display: block; padding: clamp(1.4rem, 5vw, 1.9rem); background: var(--carbon); color: var(--crema); border-radius: var(--radio); text-decoration: none; border-bottom: 4px solid var(--amarillo); transition: background .15s ease; } .puerta:hover { background: var(--carbon-suave); } .puerta__que { display: block; font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amarillo); } .puerta__titulo { display: block; margin-top: 0.4rem; font-weight: 500; font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.1; } .puerta__pie { display: block; margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.5; color: rgba(246, 249, 237, .72); } .puerta__alerta { display: inline-block; margin-top: 1rem; padding: 0.3rem 0.65rem; border-radius: var(--radio); background: var(--amarillo); color: var(--carbon); font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; } .atajos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } /* ---------------- Código del equipo ---------------- */ .codigo-bloque { margin-top: 2rem; display: grid; gap: 1.25rem; border-left: 4px solid var(--amarillo); } @media (min-width: 620px) { .codigo-bloque { grid-template-columns: auto 1fr; align-items: center; } } .codigo-bloque__codigo { margin: 0.3rem 0 0; font-family: var(--mono); font-size: clamp(1.8rem, 8vw, 2.4rem); letter-spacing: 0.18em; line-height: 1; } .codigo-bloque__texto { margin: 0; font-size: 0.88rem; line-height: 1.6; } /* La caja donde se teclea el código: grande, espaciada y en mayúsculas, que es como viene escrito en el mensaje de WhatsApp. */ .codigo-caja { font-family: var(--mono) !important; font-size: 1.6rem !important; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; } /* ---------------- Revisión de documentos ---------------- Un renglón por JUGADOR, no por documento: el comité revisa personas, y un jugador con tres papeles pendientes salía tres veces en la lista. */ .revisar { margin-top: 1.5rem; border: 1px solid var(--borde); background: #fff; } .revisar__jugador + .revisar__jugador { border-top: 1px solid var(--borde); } .revisar__jugador > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0.85rem 1rem; cursor: pointer; } .revisar__jugador > summary:hover { background: var(--papel-hueso); } .revisar__donde { display: block; font-size: 0.82rem; margin-top: 0.15rem; } .revisar__cuantos { flex: 0 0 auto; min-width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--amarillo); color: var(--carbon); font-family: var(--mono); font-size: 0.75rem; } /* Cuando ya no le queda nada, se desvanece antes de irse: así se ve que se fue, en vez de que desapareció sin más. */ .revisar__jugador--listo { opacity: 0; transform: translateX(1.5rem); transition: opacity .35s ease, transform .35s ease; } .revisar__ficha { margin: 0; padding: 0.6rem 1rem; border-top: 1px solid var(--borde); background: var(--papel-hueso); font-size: 0.82rem; } .revisar__doc { padding: 1rem; border-top: 1px solid var(--borde); background: var(--papel-hueso); } /* El renglón al que se acaba de llegar desde la revisión, resaltado: en una tabla de cien jugadores, encontrar el correcto es el problema. */ /* La tabla del inventario tiene el nombre, la fecha, cinco documentos y lo que falta: apretada en el ancho de la pantalla, el nombre del jugador se parte en cuatro renglones y deja de leerse. Mejor que ruede de lado, que para eso está dentro de .tabla-scroll. */ .equipo table { min-width: 56rem; } .equipo td:first-child, .equipo th:first-child { white-space: nowrap; } .equipo td:last-child { min-width: 14rem; font-size: 0.8rem; } .tabla-scroll tr:target { background: var(--amarillo); } .tabla-scroll tr:target td { font-weight: 500; } .revisar__doc--esperando { opacity: .5; } .revisar__tipo { margin: 0; font-weight: 500; font-size: 0.95rem; } .revisar__ia { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--tinta-suave); } .revisar__problemas { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; color: var(--falta); } .revisar__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.85rem; } .revisar__error { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--falta); } .revisar__vocero { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; background: rgba(47, 107, 66, .08); border-left: 3px solid var(--bien); font-size: 0.85rem; color: var(--bien); } /* ---------------- Armado del calendario ---------------- Grupos, equipos dentro de cada grupo y horarios. Se usa desde la compu de la casa, pero también desde el teléfono a media semana, así que todo se apila en vez de apretarse. */ .armado__equipo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 1rem; border-top: 1px solid var(--borde); font-size: 0.9rem; margin: 0; } .armado__pie { border-top: 1px solid var(--borde); background: var(--papel-hueso); padding: 0.9rem 1rem; display: grid; gap: 0.75rem; } .armado__agregar { display: flex; gap: 0.5rem; flex-wrap: wrap; } .armado__agregar select { flex: 1 1 9rem; min-width: 0; min-height: var(--toque); padding: 0.45rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--radio); font: inherit; font-size: 16px; background: #fff; color: inherit; } @media (min-width: 640px) { .armado__agregar select { font-size: 0.85rem; min-height: 0; } } .armado__botones { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Una fila de horario: fase arriba, quién juega debajo, y los campos. En teléfono todo apilado; en computadora, un renglón. */ .horario { display: grid; gap: 0.6rem 0.9rem; align-items: center; margin-bottom: 0.6rem; grid-template-columns: 1fr; } .horario__fase { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); margin: 0; } .horario__quien { margin: 0; font-size: 0.95rem; line-height: 1.35; } /* Quién armó el partido y quién le puso el marcador. Va en chiquito y a un lado: sirve para preguntarle a alguien, no para leerlo cada vez. */ .horario__firma { margin: 0; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); } .horario__cuando, .horario__cancha { min-height: var(--toque); padding: 0.5rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--radio); font: inherit; font-size: 16px; background: #fff; color: inherit; min-width: 0; } .horario__botones { display: flex; gap: 0.5rem; } @media (min-width: 900px) { .horario { grid-template-columns: 1fr 12.5rem 8rem auto; grid-template-areas: "fase firma firma firma" "quien cuando cancha botones"; } .horario__fase { grid-area: fase; } .horario__firma { grid-area: firma; text-align: right; } .horario__quien { grid-area: quien; } .horario__cuando { grid-area: cuando; min-height: 0; font-size: 0.85rem; } .horario__cancha { grid-area: cancha; min-height: 0; font-size: 0.85rem; } .horario__botones { grid-area: botones; } } /* Fila de un documento por revisar: en teléfono el motivo y los dos botones se apilan debajo del nombre en vez de apretujarse a su derecha. */ /* Va dentro de un