/* 2J Brand System v2 */ /* UI font: IBM Plex Sans (self-hosted, woff2). */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.d28498895ed7.woff2") format("woff2"); } :root { color-scheme: dark; /* Font stack (system-first): evita fallos de `collectstatic` por fonts no incluidas. */ --prod-font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --prod-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Dark (default): ligeramente más claro para mejorar legibilidad. */ --prod-bg: #0b1626; --prod-bg-soft: #101f33; --prod-panel: linear-gradient(180deg, rgba(24, 38, 62, 0.92), rgba(14, 26, 45, 0.9)); --prod-panel-flat: rgba(18, 30, 50, 0.94); --prod-line: rgba(144, 161, 185, 0.28); --prod-line-strong: rgba(244, 180, 0, 0.3); --prod-text: #f5f7fa; --prod-muted: #a7b6cf; --prod-muted-soft: #c3cee0; --prod-info: #22d3ee; --prod-success: #22c55e; --prod-primary: #2f7d32; --prod-primary-soft: #183f26; --prod-secondary: #f4b400; --prod-secondary-soft: #c89408; --prod-warning: #f4b400; --prod-danger: #d64545; --prod-space-1: 0.25rem; --prod-space-2: 0.5rem; --prod-space-3: 0.75rem; --prod-space-4: 1rem; --prod-space-5: 1.25rem; --prod-space-6: 1.5rem; --prod-fs-xs: 0.7rem; --prod-fs-sm: 0.78rem; --prod-fs-md: 0.9rem; --prod-fs-lg: 1.05rem; --prod-fs-xl: 1.3rem; --prod-lh-tight: 1.15; --prod-lh-normal: 1.45; --prod-radius-lg: 22px; --prod-radius-md: 16px; --prod-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34); --prod-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.24); --prod-ice: #f5f7fa; --prod-midnight: #0b1626; --prod-pitch: #2f7d32; --prod-amber: #f4b400; --prod-slate: #a7b6cf; /* ---- Regla de acento (una sola, para todo el producto) ---- VERDE = lo que pasa en el campo: entrenamiento, tareas, pizarra, partido. AMBAR = club y direccion: gobierno, contratos, ojeo, facturacion. Cualquier pantalla nueva elige UNO de los dos segun su area, y no mezcla. */ --prod-accent-pitch: var(--prod-primary); --prod-accent-pitch-soft: var(--prod-primary-soft); --prod-accent-club: var(--prod-secondary); --prod-accent-club-soft: var(--prod-secondary-soft); } /* Light theme (default): activado con . Objetivo: look tipo informe/PDF (superficies claras + texto oscuro). */ :root[data-theme="light"] { color-scheme: light; --prod-bg: #f4f7fb; --prod-bg-soft: #eef2f7; --prod-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)); --prod-panel-flat: rgba(255, 255, 255, 0.94); --prod-line: rgba(15, 23, 42, 0.14); --prod-line-strong: rgba(244, 180, 0, 0.28); --prod-text: #0f172a; --prod-muted: rgba(15, 23, 42, 0.64); --prod-muted-soft: rgba(15, 23, 42, 0.78); --prod-shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.14); --prod-shadow-md: 0 16px 36px rgba(15, 23, 42, 0.12); --prod-midnight: #0f172a; --prod-slate: rgba(15, 23, 42, 0.64); } /* El crema de estas dos piezas está pensado para el fondo oscuro: sobre el fondo claro (--prod-bg: #f4f7fb) queda casi invisible. Mismo ámbar, pero oscuro, para mantener el "esto destaca" sin perder contraste. */ :root[data-theme="light"] .product-brand-strip-copy strong { color: #92400e; } :root[data-theme="light"] .product-nav-shortcuts a.is-active { color: #7a3d00; } /* High contrast: maximiza legibilidad (iPad exterior / baja visión). */ :root[data-theme="hc"] { --prod-bg: #000000; --prod-bg-soft: #050505; --prod-panel: linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.98)); --prod-panel-flat: rgba(12, 12, 12, 0.98); --prod-line: rgba(255, 255, 255, 0.34); --prod-line-strong: rgba(255, 255, 255, 0.5); --prod-text: #ffffff; --prod-muted: rgba(255, 255, 255, 0.82); --prod-muted-soft: rgba(255, 255, 255, 0.9); --prod-shadow-lg: 0 0 0 rgba(0, 0, 0, 0); --prod-shadow-md: 0 0 0 rgba(0, 0, 0, 0); --prod-midnight: #000000; --prod-slate: rgba(255, 255, 255, 0.82); } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--prod-font-ui); font-size: var(--prod-font-size-base, 16px); font-weight: var(--prod-font-weight, 400); font-style: var(--prod-font-style, normal); text-decoration: var(--prod-text-decoration, none); background-color: var(--prod-bg); color: var(--prod-text); } /* iOS/Android: evitar scroll horizontal accidental y mejorar viewport dinámico. */ body { overflow-x: hidden; } @supports (min-height: 100dvh) { body { min-height: 100dvh; } } @supports (padding: env(safe-area-inset-top)) { :root { --safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); } } img, svg, video, canvas { max-width: 100%; } .product-shell { max-width: 1180px; margin: 0 auto; } .product-page { max-width: 1280px; margin: 0 auto; padding: 1.25rem; } @supports (padding: env(safe-area-inset-left)) { .product-page { padding-top: calc(1.25rem + var(--safe-top, 0px)); padding-right: calc(1.25rem + var(--safe-right, 0px)); padding-bottom: calc(1.25rem + var(--safe-bottom, 0px)); padding-left: calc(1.25rem + var(--safe-left, 0px)); } } @media (max-width: 820px) { .product-page { padding: 0.9rem; } @supports (padding: env(safe-area-inset-left)) { .product-page { padding-top: calc(0.9rem + var(--safe-top, 0px)); padding-right: calc(0.9rem + var(--safe-right, 0px)); padding-bottom: calc(0.9rem + var(--safe-bottom, 0px)); padding-left: calc(0.9rem + var(--safe-left, 0px)); } } /* iOS: inputs con font-size < 16px hacen zoom al tocar. */ input, select, textarea { font-size: 16px; } /* Mejor respuesta táctil (reduce el “delay” y doble-tap accidental). */ a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .product-title-stack h1 { font-size: 1.18rem; } .product-title-stack p { font-size: 0.95rem; } } .product-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .product-title-stack h1 { margin: 0.25rem 0 0; font-family: var(--prod-font-display); font-size: 1.45rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prod-text); } .product-title-stack p { margin: 0.2rem 0 0; color: var(--prod-muted); } .product-brand { display: inline-flex; align-items: center; gap: 1rem; } .product-brand img { display: block; max-width: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28)); } .product-brand-copy { display: grid; gap: 0.18rem; } .product-brand-copy strong { font-family: var(--prod-font-display); font-size: 0.84rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--prod-ice); } .product-brand-copy span { font-size: 0.74rem; color: var(--prod-muted-soft); letter-spacing: 0.08em; } .product-brand-strip { display: inline-flex; align-items: center; gap: 0.9rem; } .product-brand-strip img { width: 148px; height: auto; } .product-brand-strip-copy { display: grid; gap: 0.14rem; } .product-brand-strip-copy strong { display: block; font-family: var(--prod-font-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff1c2; } .product-brand-strip-copy span { display: block; color: var(--prod-muted); } .product-brand-badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--prod-line-strong); border-radius: 999px; background: linear-gradient(135deg, rgba(244, 180, 0, 0.12), rgba(47, 125, 50, 0.1)); color: var(--prod-ice); padding: 0.34rem 0.78rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .product-chip { display: inline-flex; align-items: center; border: 1px solid var(--prod-line); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prod-text); background: rgba(255, 255, 255, 0.04); } .product-chip.role { border-color: rgba(20, 184, 166, 0.5); background: rgba(20, 184, 166, 0.15); } .product-card { border: 1px solid var(--prod-line); border-radius: var(--prod-radius-lg); background: var(--prod-panel); box-shadow: var(--prod-shadow-lg); } .product-pill-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 999px; padding: 0.8rem 1.15rem; background: linear-gradient(135deg, #f5c538, #f4b400); color: #0a1520; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: none; box-shadow: var(--prod-shadow-md); } .product-profile-chip { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.95rem; border-radius: 999px; border: 1px solid rgba(244, 180, 0, 0.18); background: rgba(15, 23, 39, 0.72); } .product-profile-chip img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; object-position: center 22%; border: 1px solid rgba(255, 255, 255, 0.18); } .product-profile-chip strong { display: block; } .product-inline-note { margin-top: 0.3rem; } .product-empty { border: 1px dashed rgba(148, 163, 184, 0.5); border-radius: var(--prod-radius-md); padding: 1rem; color: var(--prod-muted); text-align: center; } .product-kicker { margin: 0; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--prod-muted-soft); } .product-nav-shortcuts { margin-top: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.42rem; } .product-nav-shortcuts a { text-decoration: none; color: var(--prod-text); border: 1px solid rgba(244, 180, 0, 0.14); border-radius: 999px; padding: 0.42rem 0.86rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.04); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .product-nav-shortcuts a:hover { border-color: rgba(244, 180, 0, 0.3); background: rgba(244, 180, 0, 0.09); } .product-nav-shortcuts a.is-active { border-color: rgba(244, 180, 0, 0.38); background: linear-gradient(135deg, rgba(244, 180, 0, 0.15), rgba(47, 125, 50, 0.12)); color: #fff7dd; } .nav-season-form { margin-left: auto; } .nav-season-form select { min-height: 1.9rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; padding: 0.22rem 1.85rem 0.22rem 0.72rem; color: var(--prod-text); background: rgba(15, 23, 42, 0.72); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .product-scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } @media (max-width: 820px) { .product-shell { width: 100%; max-width: 100%; } .product-nav-shortcuts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; } .product-nav-shortcuts a { white-space: nowrap; flex: 0 0 auto; } } /* --- Broadcast KPI utilities (TV-style) --- */ .broadcast-kpis { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.45rem; } .broadcast-kpis.is-3up .broadcast-kpi { flex-basis: calc(33.333% - 0.45rem); } .broadcast-kpis.is-4up .broadcast-kpi { flex-basis: calc(25% - 0.45rem); } .broadcast-kpi { flex: 1 1 calc(50% - 0.45rem); min-width: 140px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(2, 6, 23, 0.46), rgba(2, 6, 23, 0.32)); padding: 0.34rem 0.55rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.55rem; } .broadcast-kpi .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prod-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .broadcast-kpi .v { font-weight: 950; font-size: 0.98rem; letter-spacing: 0.02em; color: var(--prod-text); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .broadcast-kpi.is-accent { border-color: rgba(244, 180, 0, 0.32); background: linear-gradient(180deg, rgba(244, 180, 0, 0.11), rgba(2, 6, 23, 0.3)); } .broadcast-kpi.is-cool { border-color: rgba(56, 189, 248, 0.32); background: linear-gradient(180deg, rgba(56, 189, 248, 0.11), rgba(2, 6, 23, 0.3)); } @media (max-width: 540px) { .broadcast-kpi { min-width: 0; flex-basis: 100%; } } /* ============================================================ FORMATO MOVIL (<=700px) · capa compartida Lo carga casi todo el sistema (115 plantillas), asi que aqui va lo que se repite pantalla tras pantalla en el telefono. La regla es la misma que en el editor: no se apaga contenido, se recoloca. 1) Las filas de pestanias/chips se parten a mitad de palabra ("PRESENT ACION", "EXPORTA R") porque reparten el ancho a partes iguales entre 3 botones en 375px. En el telefono ruedan en horizontal y cada una mide lo que mide. 2) Ninguna etiqueta de control se parte por dentro de la palabra. ============================================================ */ @media (max-width: 700px) { .task-detail-tabs, .workspace-tabs, .tabs, .chips, .player-chips, .pro-chips, .toolbar, .summary-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .task-detail-tabs::-webkit-scrollbar, .workspace-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .chips::-webkit-scrollbar, .player-chips::-webkit-scrollbar, .pro-chips::-webkit-scrollbar, .toolbar::-webkit-scrollbar, .summary-toolbar::-webkit-scrollbar { display: none; } .task-detail-tabs > *, .workspace-tabs > *, .tabs > *, .chips > *, .player-chips > *, .pro-chips > *, .toolbar > *, .summary-toolbar > * { flex: 0 0 auto !important; white-space: nowrap; } /* Ninguna etiqueta se parte por dentro de la palabra. `min-content` = la palabra mas larga: el boton nunca baja de ahi, pero sigue pudiendo repartirse en varias lineas entre palabras. Una sola regla en vez de perseguir clase por clase. */ button, .button, a.button, .btn, .chip, .toolbar-pill, .task-detail-tab, label, .info-label, .bvc-etiqueta, .pb-badge, .badge, .pill { min-width: min-content !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } } @media (max-width: 700px) { /* El asistente es un boton fijo: en 375px su pastilla se comia el texto de debajo. Se queda (es la puerta al ayudante), pero mas pequenio y con sitio reservado al final de la pagina para que nunca tape la ultima linea. */ #global-guard-widget-shell .guard-widget-toggle { font-size: 0.62rem !important; padding: 0.38rem 0.62rem !important; letter-spacing: 0.06em !important; } body { padding-bottom: 64px; } } @media (max-width: 700px) { /* Tablas: la de la ficha de sesion mide 423px en una pantalla de 375 y se comia una columna. En vez de encogerlas hasta lo ilegible, ruedan dentro de su caja: se ven todas las columnas con el dedo y la pagina no se descuadra. */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 700px) { /* Lo que se sale por la derecha en un móvil casi siempre es una de estas dos cosas, y las dos se arreglan igual de barato: 1. Un CAMPO con ancho propio. Un `select` de 459 px en una pantalla de 390 no se encoge solo: `size`, `cols` o un ancho puesto a mano mandan sobre el contenedor. Se ve en la pantalla del portal del jugador. 2. Un HIJO de rejilla o de caja flexible que no baja de su contenido. Sin `min-width: 0` una tabla ancha empuja a su tarjeta hasta 630 px, y el `overflow-x: auto` que ya tiene el envoltorio no llega a usarse NUNCA, porque nunca hay nada que recortar. Se aplica sólo en móvil: en escritorio no sobra sitio pero tampoco falta, y tocar ahí sería arreglar lo que no está roto. */ input, select, textarea, form { max-width: 100%; } .grid > *, .grid2 > *, .cards > *, .card, .row > * { min-width: 0; } }