/** * CAPA DE UI COMPARTIDA DEL MÓDULO DE ESTADÍSTICAS * ------------------------------------------------ * Estética: la del resto del portal (panel blanco redondeado sobre fondo gris, * rojo de marca, Syne para títulos) con la retícula editorial del módulo: * numeración de bloques, etiquetas en mono y flechas >>> en los destinos. * * La cargan todas las páginas mostrar_estadisticas*.php, después de stats.css: * * incluircss("css/stats.css,css/stats-ui.css"); * * REGLA 1: todos los selectores van prefijados con .stx- y anidados bajo .stx. * stats.css es una hoja heredada con selectores muy genéricos (.list, .item, * .title, .card2...) y esta capa no debe pisarla en las páginas sin migrar. * * REGLA 2: NADA de tamaños en rem/px fijos. Todo se deriva de --stx-s, la * unidad de escala fluida. Si se usan px fijos, en un monitor ancho el módulo * se ve diminuto. Excepciones: los filetes de 1px y los radios, que son * constantes visuales compartidas con el resto del portal. * * Los tokens de marca salen de css/constantes.css, con fallback por si la hoja * se carga de forma aislada. */ /* El stylesheet de escritorio fija body{min-width:1200px}. Se libera solo en las páginas ya migradas para que el módulo pueda ser realmente fluido. */ body.stx-page { min-width: 0; } /** * TOKENS * Van en :root y NO en .stx a propósito. Los modales de Bootstrap viven fuera * del
, así que si los tokens colgaran de .stx no los * heredarían: todos los calc(var(--stx-s)...) quedarían inválidos y el modal * se quedaría sin tamaños ni fondos. Solo se definen aquí; el uso siempre va * bajo un selector .stx-. */ :root { /* Mismas superficies que el resto del portal: panel claro sobre fondo gris */ --stx-panel: var(--main-content-color, #f9f9f9); --stx-cell: var(--main-bg-color, #e3e3e3); --stx-white: #fff; --stx-ink: #050505; --stx-ink-soft: #666; --stx-accent: var(--componet-primary-color, #e32203); --stx-accent-dark: var(--componet-secondary-color, #a01819); --stx-line: rgba(5, 5, 5, 0.09); /* Filete visible: el borde que marca "esto se puede pinchar" */ --stx-line-link: rgba(5, 5, 5, 0.18); --stx-font-display: "Syne", sans-serif; --stx-font-body: "DM Sans", Helvetica, Arial, sans-serif; /* Mono del sistema: cero peticiones de red y siempre disponible */ --stx-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace; /* Radios del portal: 20 para el panel, 16 para tarjeta, 100 para píldora */ --stx-radio: 16px; --stx-radio-panel: 20px; --stx-pill: 100px; /** * UNIDAD DE ESCALA * ~18.5px a 1440px de ancho -> tope 26px en monitores muy anchos, con suelo * de ~17.6px en móvil (antes 16px: en pantallas <1024px el clamp se queda * pegado al suelo, así que ese suelo ES el tamaño real en todo el rango * móvil/tablet, no solo en el peor caso). Todo el dimensionado (tipografía, * padding, escudos) se deriva de aquí, así el módulo crece con la pantalla * en vez de encogerse. El suelo se mantiene por debajo del valor a 1440px * para no tocar el aspecto de escritorio. * * En PX, no en rem: css/bootstrap.min.css fija html{font-size:10px} sin * media query, sin overridarlo en ningún otro sitio del portal. Con rem * (asumiendo el 16px de un root normal) esta unidad se quedaba en el 62.5% * de los px de arriba -suelo real de 11px, tope de 16.5px-, mucho más * pequeña de lo que este mismo comentario decía. En px la unidad no * depende de qué valga el font-size del en cada página. */ --stx-s: clamp(17.6px, 11.2px + 0.5vw, 26.4px); --stx-pad: calc(var(--stx-s) * 0.9); --stx-gap: calc(var(--stx-s) * 0.55); } /** * AFORDANCIA: QUÉ SE PUEDE PINCHAR Y QUÉ NO * ----------------------------------------- * El módulo mezcla en la misma columna bloques de dato y bloques de destino, * y antes ambos eran barras rojas o tarjetas grises indistinguibles. La regla, * aplicada en toda la hoja, es: * * SUPERFICIE ROJA RELLENA .... destino pinchable (.stx-cta, chips de acción) * SUPERFICIE NEGRA ........... estructura inerte (cabeceras de tabla, nº de bloque) * SUPERFICIE GRIS PLANA ...... dato inerte (KPIs, barra meta, estado vacío) * SUPERFICIE BLANCA + FILETE . destino pinchable en formato tarjeta/fila * * Además, TODO lo pinchable lleva las tres marcas de .stx-link: * cursor de mano, flecha >>> y un cambio de estado claro en hover/foco. */ .stx a, .stx .stx-link { cursor: pointer; } /* La flecha es el distintivo del módulo: si hay >>>, se pincha */ .stx-flecha { flex: none; font-family: var(--stx-font-mono); letter-spacing: 0.02em; } /* El panel es el equivalente al .content-body del resto del portal */ .stx { display: flex; flex-direction: column; gap: var(--stx-gap); max-width: 2400px; margin: calc(var(--stx-s) * 1.1) auto; padding: var(--stx-pad); border-radius: var(--stx-radio-panel); background-color: var(--stx-panel); color: var(--stx-ink); font-family: var(--stx-font-body); font-size: var(--stx-s); } .stx *, .stx *::before, .stx *::after { box-sizing: border-box; } /* ===================================================== CABECERA EMBED == */ /** * Solo aparece cuando la página va embebida en el WebView de la app * (mostrar_estadisticas*.php?embed=1). includes/cabecera.php oculta ahí la * cabecera de navegación completa; esto la sustituye por dos selectores * encadenados -temporada y competición- que llevan siempre a la portada del * módulo. Vive fuera de
, por eso no va bajo ese selector * -los tokens cuelgan de :root justo por casos así- pero toma su mismo * fondo, radio y ancho máximo para leerse como la ceja de ese mismo panel, * no como una barra de navegación aparte. Fija arriba (sticky, no fixed: * así reserva su propio hueco y no hace falta compensar con padding en el * resto de la página) porque es la única forma de moverse en modo embed. * Ver includes/cabecera/embed_stats.php. */ .stx-embed-cabecera { /* Más baja que el resto del módulo: es una barra de navegación de paso, no una sección de contenido. Solo se recorta lo VERTICAL (relleno arriba/ abajo, sombra) con --stx-es; el ancho de cada campo y el relleno horizontal del ) es su propio campo: con dos en la misma barra necesitan poder envolver de forma independiente en móvil. */ .stx-embed-campo { display: flex; align-items: center; gap: calc(var(--stx-es) * 0.4); /* Ancho a --stx-s, no --stx-es: es el sitio para el texto del le queda tan poco sitio que el nombre de la competición se corta a lo bruto ("DIVISIÓN DE HONOR FEMENINA..." -> "DIVISK"), porque un