/* ═════════════════════════════════════════════════════════════════════════════ sistema.css — Sistema visual de GRID. Reemplaza por completo al styles.css anterior. Nada de aquí hereda de aquel. Los tokens viven en tokens.css (Entrega 1). Esta hoja se va vaciando a medida que cada pantalla se rehace con piezas.css. REGLAS · Color de marca solo en acentos y acciones; el fondo es papel. · Nada que se toque mide menos de 44px. · Los números de marcador y hora van tabulares para que las tablas no bailen. · Ningún estado se comunica solo con color: siempre color + palabra o forma. · Un solo verde, un solo ámbar, un solo rojo de estado — el rojo de marca NO es el rojo de error. ═══════════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:var(--f-texto); background:var(--fondo); color:var(--tinta); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100dvh; } a{color:var(--azul-osc);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:var(--r-sm)} img{max-width:100%;display:block} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--e5)} .oculto{display:none!important} /* ── Barra superior ─────────────────────────────────────────────────────── */ /* El marco oscuro del diseño. Lleva la marca de la PLATAFORMA y los destinos de fuera de un evento: Inicio, Torneos y —con sesión— Mis jornadas. Dentro de un evento las secciones son las pestañas de la cabecera del torneo (#evCab, piezas.css). El fondo lo pone marca.css (`body .barra`). */ .barra{ position:sticky;top:0;z-index:60;background:var(--marino);color:var(--fuerte); border-bottom:3px solid var(--marca); } .barra-in{display:flex;align-items:center;gap:var(--e3);height:56px; max-width:var(--ancho);margin:0 auto;padding:0 22px} .marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em; line-height:1.1;flex-shrink:0;min-height:var(--toque);text-decoration:none} .marca:hover{text-decoration:none} .barra-sp{flex:1} /* Pantallas de 320px (iPhone SE de primera generación y similares). El logotipo, tres destinos y «Salir» sumaban 343px con los rellenos normales: 10px de scroll horizontal. Se aprieta el marco, no se quita nada. */ @media (max-width:360px){ .barra-in{padding:var(--e2) var(--e3);gap:var(--e2)} .barra-nav{margin-left:0;gap:0} .ruta-btn{padding:0 var(--e2)} .btn-sm{padding:0 var(--e2)} } /* Destinos de fuera del evento. En el celular (≤900 px) se esconden enteros: los lleva la barra de abajo (ver la regla de `.nav-app` más abajo). */ .barra-nav{display:flex;align-items:center;gap:2px;margin-left:var(--e4)} .ruta-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;font:inherit; font-family:var(--f-texto);font-weight:600;font-size:.88rem;color:var(--g-tinta-2);cursor:pointer; min-height:var(--toque);padding:0 var(--e3);border-radius:var(--r-sm);white-space:nowrap; transition:background .15s,color .15s} .ruta-btn:hover{background:color-mix(in srgb,var(--fuerte) 9%,transparent);color:var(--fuerte)} .ruta-btn.active{color:var(--fuerte)} /* En el celular la navegación de arriba se va entera: la barra de abajo lleva lo mismo y los iconos solos de aquí arriba la duplicaban (recorrido: arriba solo logo y avatar). */ @media (max-width:900px){ .nav-app{display:none} } /* ── Iconos ─────────────────────────────────────────────────────────────── */ /* UIcons entra por una fuente de iconos: el glifo hereda el color y el tamaño del texto, así que un icono nunca se queda de un color que no contrasta. Todos son decorativos y van con su palabra al lado; si el CDN no responde, no se pierde ninguna información. */ .fi{display:inline-flex;align-items:center;justify-content:center;line-height:0; flex-shrink:0;font-size:1em} .btn .fi{font-size:.95em} /* ── Marco: el contenido a todo el ancho ─────────────────────────────────── La columna lateral se fue en la Entrega 2. El aire lateral lo pone `.marco-cue` y no `.contenedor`, así la cabecera del torneo (#evCab, fuera de
) queda alineada con el contenido a cualquier ancho. */ .marco{margin:0 auto} /* El tope del contenido vive aquí y no en `.marco` ni en `.contenedor`: así la cabecera del torneo mide lo mismo que la tabla, y las pantallas sin cromo (Torre, Arena) lo quitan en un solo sitio (marca.css, lista de `es-torre`…). Es el ancho del recorrido: 1000 px en el torneo y 1040 en Mis jornadas, centrado. A todo lo ancho, en 1440 px los dos equipos de una fila quedaban a un metro el uno del otro. */ .marco-cue{min-width:0;max-width:calc(1000px + 2 * var(--e5));margin:0 auto;padding:0 var(--e5)} .marco-cue:has(#p-casa.active, #p-jornadas.active, #p-staff.active){max-width:calc(1040px + 2 * var(--e5))} @media (max-width:620px){ .marco-cue{padding:0 var(--e4)} } .marco-cue .contenedor{max-width:none;padding:0} /* Lo del staff está OCULTO por defecto y solo aparece con sesión abierta. La regla vive aquí, no en JavaScript: antes la ocultaba `setAdmin()`, pero a esa función solo se la llamaba SI había sesión, así que a una familia no se la llamaba nunca y el Tablero le quedaba a la vista. Siendo CSS es correcto desde el primer pintado, sin parpadeo y sin depender de en qué orden corran los scripts. (Lo que hay detrás ya estaba protegido: el API responde 403 sin sesión.) */ .admin-only{display:none} body.is-admin .admin-only{display:revert} /* `revert` devuelve el valor que trae el navegador para la etiqueta —`inline-block` en un