/* Tipografía: se carga desde el con preconnect (ver head_fonts() en includes/seo.php). El @import que estaba acá encadenaba dos orígenes en serie y bloqueaba el render. */ /* ===================================================================== Compromiso con Tigre — Design System v2 ("Vibrante deportivo") Superficies claras, tipografía con carácter, el molinete de marca como acento protagonista, colores de marca usados con energía pero ordenados. ===================================================================== */ :root { /* Paleta de marca */ --green: #8AC341; --cyan: #00ADEF; --mustard: #F8B133; --magenta: #E9007F; --orange: #F37022; --purple: #5C2E91; --bordo: #A71C20; --olive: #27A64C; /* Acciones (variantes con contraste accesible sobre texto blanco) */ --primary: #0a7db3; --primary-600: #086288; --primary-050: #e6f5fd; --success: #2f9a3d; --danger: #c62330; /* Neutros (cálidos, aireados) */ --ink: #12141a; --ink-soft: #565d6b; --ink-mute: #949aa6; --line: #e9ecf3; --line-2: #f2f4f9; --surface: #ffffff; --bg: #f4f7fc; --bg-2: #eef2f9; /* Gradiente "molinete" de marca */ --brand-gradient: linear-gradient(115deg, var(--green) 0%, var(--cyan) 28%, var(--purple) 52%, var(--magenta) 76%, var(--orange) 100%); --r-sm: 10px; --r: 16px; --r-lg: 26px; --shadow-sm: 0 1px 2px rgba(18, 20, 26, .04), 0 2px 8px rgba(18, 20, 26, .05); --shadow: 0 6px 16px rgba(18, 20, 26, .07), 0 18px 46px rgba(18, 20, 26, .09); --shadow-brand: 0 10px 28px rgba(0, 173, 239, .18); --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; /* 16px base: evita el zoom automático en iOS */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Nombres/emails largos no desbordan el layout. */ overflow-wrap: break-word; word-break: break-word; } h1, h2, h3, h4 { line-height: 1.14; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; } h1 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.6rem); } h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); } h3 { font-size: clamp(1.05rem, .98rem + .3vw, 1.18rem); letter-spacing: -.02em; } p { margin: 0 0 1rem; text-wrap: pretty; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Imágenes fluidas: nunca desbordan ni se deforman. */ img, svg, video { max-width: 100%; } img { height: auto; } .muted { color: var(--ink-soft); } .small { font-size: .85rem; } code { background: var(--bg-2); padding: .1em .4em; border-radius: 6px; font-size: .9em; } ::selection { background: rgba(0, 173, 239, .22); } /* Palabras destacadas en colores sólidos de marca (sin degradé) */ .hl { font-weight: 800; } .hl-1 { color: var(--primary); } .hl-2 { color: var(--olive); } .hl-3 { color: var(--magenta); } /* --------------------------------------------------------------- Layout */ .container { width: 100%; max-width: 1120px; margin-inline: auto; /* Padding fluido: 18px en móviles chicos → 28px en pantallas grandes, respetando el área segura (notch) en horizontal. */ padding-inline: clamp(18px, 5vw, 28px); padding-inline: max(clamp(18px, 5vw, 28px), env(safe-area-inset-left), env(safe-area-inset-right)); } .container--narrow { max-width: 780px; } .stack > * + * { margin-top: 1rem; } /* Solo padding vertical: NO pisar el padding lateral de .container (main usa ambas clases: "container section"). */ .section { padding-block: clamp(26px, 5vw, 40px); } .grid { display: grid; gap: clamp(14px, 2.5vw, 20px); } /* min(240px, 100%): en pantallas < 240px la columna nunca supera el ancho disponible → cero scroll horizontal en Galaxy Fold (280px) y similares. */ .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); } /* En pantallas anchas, las tarjetas de torneo (las de la flecha) usan columnas más amplias. Con el mínimo de 240px, una sola tarjeta quedaba angosta y el nombre largo se partía en 4 líneas. En celular NO cambia nada: el media query arranca en 640px, y debajo de eso la tarjeta sigue ocupando todo el ancho. */ @media (min-width: 640px) { .grid--auto:has(.tournament-card--arrow) { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Barra superior de marca: bandas de color SÓLIDAS (sin blend) */ .brand-stripe { height: 5px; background: linear-gradient(90deg, var(--green) 0 16.66%, var(--cyan) 16.66% 33.32%, var(--olive) 33.32% 50%, var(--purple) 50% 66.66%, var(--magenta) 66.66% 83.32%, var(--orange) 83.32% 100%); } /* --------------------------------------------------------- Marca / logo */ .brand-mark { width: 40px; height: 40px; flex: 0 0 auto; background: url("../img/logo.svg") center / contain no-repeat; } .brand-mark--lg { width: 76px; height: 76px; margin: 0 auto 12px; } .brand-logo { display: block; width: 40px; height: 40px; } .brand-lockup { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .brand-lockup:hover { text-decoration: none; } .brand-lockup small { display: block; font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .brand-lockup strong { font-size: 1.08rem; line-height: 1.05; } /* ------------------------------------------------------------- Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; padding: .74em 1.2em; border-radius: 999px; min-block-size: 44px; /* área táctil mínima accesible (WCAG 2.2) */ border: 1.5px solid transparent; cursor: pointer; background: var(--surface); color: var(--ink); transition: transform .08s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease; text-decoration: none; /* El texto puede envolver en pantallas muy chicas en vez de desbordar. */ white-space: normal; text-align: center; -webkit-tap-highlight-color: transparent; /* sin el flash gris de iOS */ } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px) scale(.99); } .btn:focus-visible { outline: 3px solid var(--primary-050); outline-offset: 1px; box-shadow: 0 0 0 2px var(--primary); } .btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(10,125,179,.20); } .btn--primary:hover { background: var(--primary-600); border-color: var(--primary-600); } .btn--brand { background: var(--magenta); color: #fff; border: none; box-shadow: 0 6px 16px rgba(233,0,127,.22); } .btn--brand:hover { background: #cf0071; } .btn--dark { background: #14161d; border-color: #14161d; color: #fff; box-shadow: 0 6px 16px rgba(18,20,26,.18); } .btn--dark:hover { background: #262a33; border-color: #262a33; } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); } .btn--ghost:hover { background: var(--bg-2); border-color: #d8deea; } .btn--danger { background: var(--surface); border-color: #eccdd0; color: var(--danger); } .btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* Compartir por WhatsApp (verde suave de marca) */ .btn--wa { background: #7cc142; border-color: #7cc142; color: #fff; box-shadow: 0 6px 16px rgba(124,193,66,.22); } .btn--wa:hover, .btn--wa:active, .btn--wa.is-pressed { background: #6ba838; border-color: #6ba838; color: #fff; } .btn--sm { padding: .52em .85em; font-size: .85rem; } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn.is-copied { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; animation: copied-pop .3s ease; } .tick { display: inline-block; vertical-align: -2px; } .tick path { stroke-dasharray: 26; stroke-dashoffset: 26; } .is-copied .tick path { animation: tick-draw .38s ease .04s forwards; } @keyframes tick-draw { to { stroke-dashoffset: 0; } } @keyframes copied-pop { 0% { transform: scale(1); } 42% { transform: scale(1.07); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .btn.is-copied { animation: none; } .is-copied .tick path { animation: none; stroke-dashoffset: 0; } } /* --------------------------------------------------------------- Cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: clamp(16px, 4vw, 22px); /* respira menos en móvil, más en desktop */ } .card--pad-lg { padding: clamp(18px, 5vw, 28px); } /* Cabecera de torneo: crest + info, panel de puntos y acciones. */ .t-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .t-hero-info { min-width: 0; flex: 1 1 200px; } .t-hero-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .t-hero-titlerow h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); } /* Meta con íconos: "Julio 2026 | Una rueda | Categoría" */ .t-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; } .t-hero-meta .t-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .92rem; font-weight: 600; } .t-hero-meta .t-meta svg { color: var(--ink-mute); flex: 0 0 auto; } .t-hero-meta .t-meta + .t-meta { position: relative; padding-inline-start: 14px; } .t-hero-meta .t-meta + .t-meta::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: var(--line); } /* Panel de puntos + leyenda */ .t-points { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; } .t-points .tp-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* Brillo/halo radial alrededor del trofeo (no un marco sólido). */ background: radial-gradient(circle at 50% 50%, rgba(233,0,127,.15) 0%, rgba(233,0,127,.05) 45%, rgba(233,0,127,0) 70%); } .t-points .tp-icon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; filter: drop-shadow(0 0 3px rgba(233,0,127,.22)); } .t-points .tp-main { display: flex; flex-direction: column; line-height: 1.1; } .tp-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); font-weight: 800; } .tp-v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .tp-v i { color: var(--ink-mute); font-style: normal; font-weight: 600; margin: 0 3px; } .t-legend { display: flex; gap: 12px; margin-inline-start: auto; flex-wrap: wrap; } .t-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--ink-soft); } .t-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .dot--g { background: var(--olive); } .dot--e { background: var(--mustard); } .dot--p { background: var(--bordo); } /* Acciones: fila de botones al pie, a todo el ancho. */ .t-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .t-hero-actions .btn { flex: 1 1 auto; } @media (max-width: 560px) { .t-hero { gap: 12px; } .t-hero .crest--lg { --size: 58px; } /* escudo más chico en el celu */ /* La leyenda G/E/P queda al lado de los puntos, no abajo. */ .t-points { gap: 12px; } .t-legend { margin-inline-start: auto; gap: 9px; } .t-legend span { font-size: .8rem; } } .card-link { display: block; color: inherit; transition: transform .14s ease, box-shadow .18s ease, border-color .16s ease; } .card-link:hover { text-decoration: none; border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); } /* Base: card en COLUMNA (dashboard del panel, resultados de equipos, etc.). */ .tournament-card { display: flex; flex-direction: column; gap: 14px; height: 100%; } .tournament-card .tc-head { display: flex; align-items: center; gap: 13px; } .tournament-card .tc-info { min-width: 0; flex: 1 1 auto; } .tournament-card h3 { margin: 0; font-size: 1.08rem; } .tournament-card .tc-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .85rem; margin-top: 2px; } .tournament-card .tc-meta svg { color: var(--ink-mute); flex: 0 0 auto; } .tournament-card .tc-foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* Variante con flecha (cards públicas del inicio): contenido + chevron a la derecha. */ .tournament-card--arrow { flex-direction: row; align-items: center; gap: 12px; } .tournament-card--arrow .tc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .tournament-card--arrow .tc-foot { margin-top: 0; } .tournament-card--arrow .tc-arrow { color: var(--ink-mute); flex: 0 0 auto; align-self: center; transition: transform .16s ease, color .16s ease; } .card-link:hover .tc-arrow { transform: translateX(3px); color: var(--ink-soft); } /* Pills con ícono (equipos / estado) */ .tc-pill { display: inline-flex; align-items: center; gap: 6px; padding: .38em .8em; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: -.01em; background: var(--bg-2); color: var(--ink-soft); border: 1px solid transparent; } .tc-pill svg { flex: 0 0 auto; } /* "En curso": texto e ícono en #FAB617, fondo amarillo suave, sin borde. */ .tc-pill--activo { background: rgba(250,182,23,.14); color: #fab617; } .tc-pill--borrador { background: #fdf1e0; color: #a4671a; } .tc-pill--finalizado { background: #ece6f4; color: #543a86; } /* --------------------------------------------------------------- Escudo */ .crest { --size: 42px; width: var(--size); height: var(--size); border-radius: 12px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink-mute); overflow: hidden; } .crest--round { border-radius: 50%; } .crest--sm { --size: 27px; font-size: .72rem; border-radius: 8px; } .crest--sm.crest--round { border-radius: 50%; } .crest--lg { --size: 76px; font-size: 1.5rem; border-radius: 20px; } .crest--lg.crest--round { border-radius: 50%; } /* Cuando el escudo es una imagen (no la inicial), se muestra COMPLETO en vez de recortado: object-fit:cover llenaba el círculo cortando los bordes del logo (se comían el nombre o el marco del escudo). Con contain se ve entero —queda un poco más chico dentro del círculo, pero sin recorte— sobre fondo blanco para que los logos con transparencia se vean prolijos. img.crest (0,1,1) le gana a .crest (0,1,0), así que sólo afecta a las imágenes; la inicial de respaldo (span.crest) conserva su fondo gris. */ img.crest { object-fit: contain; background: #fff; padding: 2px; } img.crest.crest--lg { padding: 6px; } /* --------------------------------------------------------------- Badges */ .badge { display: inline-flex; align-items: center; gap: .4em; padding: .3em .72em; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: var(--bg-2); color: var(--ink-soft); } .badge--activo { background: #e6f7ec; color: #1c7d2c; } .badge--borrador { background: #fdf1e0; color: #a4671a; } .badge--finalizado { background: #ece6f4; color: #543a86; } /* -------------------------------------------------------------- Header */ .site-header { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } /* Al saltar a #torneos, el encabezado fijo taparía el título: se deja ese espacio libre arriba. Sin esto el ancla queda escondida detrás del header. */ #torneos { scroll-margin-top: 88px; } #torneos:focus-visible { outline: none; } /* En celulares se cambia el desenfoque por un fondo sólido. backdrop-filter obliga a la GPU a releer y re-desenfocar lo que hay debajo del header en CADA frame del scroll; en gama media/baja eso se traduce en scroll trabado. El efecto se conserva en pantallas grandes, donde no cuesta nada. */ @media (max-width: 900px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } } /* Y si el equipo pide menos movimiento, tampoco tiene sentido el desenfoque. */ @media (prefers-reduced-motion: reduce) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 10px; flex-wrap: wrap; } .brand-lockup { min-width: 0; } .brand-lockup strong { overflow: hidden; text-overflow: ellipsis; } .site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .site-nav a { color: var(--ink-soft); font-weight: 600; padding: 9px 13px; border-radius: 999px; } .site-nav a:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; } /* Los botones dentro de la nav conservan su color propio (blanco), no el gris de los enlaces */ .site-nav a.btn--primary, .site-nav a.btn--primary:hover, .site-nav a.btn--dark, .site-nav a.btn--brand, .site-nav a.btn--brand:hover { color: #fff; } /* Botón oscuro de la nav: al pasar el mouse O al tocarlo (móvil) queda blanco, con letras negras y borde negro. (.is-pressed lo activa el JS en iOS.) */ .site-nav a.btn--dark:hover, .site-nav a.btn--dark:active, .site-nav a.btn--dark:focus, .site-nav a.btn--dark:focus-visible, .site-nav a.btn--dark.is-pressed { background: #fff; border-color: #14161d; color: #000; } /* --------------------------------------------------------------- Hero */ .hero { position: relative; overflow: hidden; background: #eef5fc; border-bottom: 1px solid var(--line); } .hero .container { position: relative; z-index: 2; padding-block: clamp(40px, 7vw, 62px); max-width: 1120px; } .hero h1 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.5rem); max-width: 15ch; margin-bottom: .35em; } .hero p { color: var(--ink-soft); max-width: 46ch; font-size: clamp(1rem, .95rem + .4vw, 1.12rem); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); background: var(--primary-050); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } /* Molinete decorativo (protagonista sutil) */ .hero-mark { position: absolute; z-index: 1; right: -110px; top: -70px; width: 560px; height: 560px; pointer-events: none; object-fit: contain; /* ahora es para que la animación SVG corra */ opacity: .14; /* mismo degradado/marca de agua sutil que ya tenías */ } .hero-features { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; color: var(--ink-soft); font-weight: 600; font-size: .92rem; } .hero-features span { display: inline-flex; align-items: center; gap: 7px; } .hero-features span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); } .hero-features span:nth-child(2)::before { background: var(--olive); } .hero-features span:nth-child(3)::before { background: var(--magenta); } /* Buscador */ .search-bar { display: flex; flex-wrap: wrap; gap: 9px; max-width: 500px; margin-top: 26px; } .search-field { position: relative; flex: 1 1 200px; min-width: 0; display: flex; } .search-bar input { width: 100%; border-radius: 999px; padding: .8em 1.25em; border-color: transparent; background: var(--surface); box-shadow: var(--shadow-sm); } .search-bar .btn { flex: 0 0 auto; } .search-bar input:focus { box-shadow: 0 0 0 3px var(--primary-050), var(--shadow-sm); } /* Placeholder animado: las letras entran con desenfoque (blur) y se van al cambiar. */ .search-anim { position: absolute; left: 1.25em; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 2.5em); font-size: max(16px, 1rem); line-height: 1; } /* Sin will-change acá: mantenerlo en el estado base obliga al navegador a sostener ~24 capas compositadas en memoria todo el tiempo, incluso cuando no hay ninguna animación corriendo. Se declara sólo mientras la letra anima. */ .search-anim .ltr { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(10px); } .search-anim .ltr.in { animation: search-ltr-in .4s ease forwards; will-change: opacity, filter, transform; } .search-anim .ltr.out { animation: search-ltr-out .3s ease forwards; will-change: opacity, filter, transform; } @keyframes search-ltr-in { to { opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes search-ltr-out { to { opacity: 0; filter: blur(12px); transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .search-anim .ltr { opacity: 1; filter: none; transform: none; animation: none; } } /* Botón "Buscar" que se da vuelta (flip 3D) y pasa a "Limpiar" en resultados. Respeta el color magenta de la marca; solo gira el texto. */ .search-submit { perspective: 700px; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Al pasar a "Limpiar" cambia al azul del logo (más notorio). */ .search-submit.is-clear { background: #00adef; border-color: #00adef; color: #fff; box-shadow: 0 6px 16px rgba(0,173,239,.24); } .search-submit.is-clear:hover { background: #0098d1; border-color: #0098d1; } .search-submit .flip-inner { position: relative; display: inline-block; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .75, .2, 1); } .search-submit .flip-sizer { visibility: hidden; white-space: nowrap; } /* reserva el ancho del texto más largo */ .search-submit .flip-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .search-submit .flip-back { transform: rotateX(180deg); } .search-submit.is-clear .flip-inner { transform: rotateX(180deg); } @media (prefers-reduced-motion: reduce) { .search-submit .flip-inner { transition: none; } } /* Resultados de búsqueda: fade suave al intercambiar (sin recargar la página). */ #search-results { transition: opacity .18s ease; } #search-results.is-loading { opacity: .5; } @media (prefers-reduced-motion: reduce) { #search-results { transition: none; } } /* --------------------------------------------------------------- Forms */ .field { margin-bottom: 17px; } .field > label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; letter-spacing: -.01em; } .field .hint { color: var(--ink-mute); font-size: .8rem; margin-top: 5px; } .field .field-alert { margin-top: 22px; margin-bottom: 8px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input[type=datetime-local], select, textarea { width: 100%; font: inherit; color: var(--ink); font-size: max(16px, 1rem); /* nunca < 16px: evita el zoom automático en iOS */ min-block-size: 44px; /* alto táctil accesible */ padding: .6em .85em; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; max-width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-050); } textarea { min-height: 120px; resize: vertical; } .form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } .form-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } .check { display: flex; align-items: center; gap: 10px; font-weight: 500; } .check input { width: auto; } input[type=file] { /* width/max-width: el input de archivo no entra en la regla general de arriba y con su ancho intrínseco se desbordaba de la card. */ width: 100%; max-width: 100%; min-width: 0; padding: .5em .7em; border: 1.5px dashed var(--line); border-radius: var(--r-sm); background: var(--bg-2); cursor: pointer; font-size: .88rem; color: var(--ink-soft); } input[type=file]:hover { border-color: #c9d2e2; } input[type=file]::file-selector-button { font: inherit; font-weight: 700; color: var(--ink); padding: .45em 1em; margin-right: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; transition: background .16s ease; } input[type=file]::file-selector-button:hover { background: var(--bg-2); } /* Buscador de equipos: ancho completo en móvil (igual que las cards); acotado en pantallas grandes para que no se estire de más. */ .search-inline { width: 100%; } @media (min-width: 640px) { .search-inline { max-width: 360px; } } /* Mostrar/ocultar contraseña (ojito). Lo agrega app.js a cada campo de contraseña. */ .pw-wrap { position: relative; display: block; } .pw-wrap input { padding-inline-end: 48px; } /* espacio para el botón */ .pw-toggle { position: absolute; inset-block: 0; inset-inline-end: 0; width: 46px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--ink-mute); -webkit-tap-highlight-color: transparent; } .pw-toggle:hover { color: var(--ink-soft); } .pw-toggle:focus-visible { outline: 3px solid var(--primary-050); outline-offset: -3px; border-radius: var(--r-sm); } .pw-toggle[aria-pressed="true"] { color: var(--primary); } /* --------------------------------------------------------------- Alerts */ .alert { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: .93rem; border: 1px solid transparent; font-weight: 500; } .alert--success { background: #e9f7ec; border-color: #c6e9cd; color: #1f7a2c; } .alert--error { background: #fdeceb; border-color: #f3cdcb; color: #a52620; } .alert--info { background: var(--primary-050); border-color: #bfe4f5; color: #0a5f88; } .flash-stack { margin-bottom: 6px; } /* --------------------------------------------------------------- Tables */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; /* scroll con inercia en iOS */ overscroll-behavior-x: contain; /* no dispara "volver atrás" al llegar al borde */ scrollbar-width: thin; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); } table.data { width: 100%; border-collapse: collapse; font-size: clamp(.85rem, .8rem + .2vw, .93rem); min-width: 540px; } table.data th, table.data td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line-2); white-space: nowrap; } table.data thead th { background: var(--bg-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); position: sticky; top: 0; font-weight: 700; } table.data tbody tr { transition: background .12s ease; } table.data tbody tr:hover { background: var(--line-2); } table.data tbody tr:last-child td { border-bottom: none; } table.data td.num, table.data th.num { text-align: center; font-variant-numeric: tabular-nums; } table.data td.pts { font-weight: 800; } table.data .team-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; white-space: normal; font-weight: 600; color: var(--ink); } /* Tabla de posiciones */ .standings td.pos { font-weight: 800; color: var(--ink-soft); width: 40px; text-align: center; } .standings tbody tr.is-leader td.pos { color: #fff; } .standings tbody tr.is-leader td:first-child { position: relative; } .standings tbody tr.is-leader td.pos { background: var(--olive); border-radius: 8px; } .standings tbody tr.is-leader { background: #edf7e3; } .standings tbody tr.is-leader:hover { background: #e5f3d6; } /* ----------------------------------------------------- Racha (form) */ .form-chips { display: inline-flex; gap: 3px; } .fchip { width: 21px; height: 21px; border-radius: 6px; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .fchip--g { background: var(--olive); } .fchip--e { background: var(--mustard); color: #7a5400; } .fchip--p { background: var(--bordo); } /* --------------------------------------------------------------- Tabs */ .tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 24px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .tabs a { position: relative; padding: 12px 16px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; letter-spacing: -.01em; border-radius: 10px; /* fondo de tap redondeado, no cuadrado */ -webkit-tap-highlight-color: transparent; /* sin el recuadro gris de iOS */ transition: background .15s ease, color .15s ease; } .tabs a:hover { color: var(--ink); background: var(--bg-2); text-decoration: none; } .tabs a:active, .tabs a.is-pressed { background: var(--line-2); } .tabs a.is-active { color: var(--primary); } /* Indicador de la pestaña activa: línea recta abajo (no se redondea). bottom:0 (no -1px) para no generar scroll vertical en la barra. */ .tabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); } /* Transición suave al cambiar de pestaña (pjax): solo el contenido hace fade; la barra de pestañas (#tab-nav) queda fija, sin parpadear. */ #tab-panel { transition: opacity .18s ease; } #tab-panel.is-loading { opacity: .45; } @media (prefers-reduced-motion: reduce) { #tab-panel { transition: none; } #tab-panel.is-loading { opacity: 1; } } /* ------------------------------------------------------------- Fixture */ .matchday { margin-bottom: 24px; } .matchday > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: 11px; } .match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); margin-bottom: 8px; box-shadow: var(--shadow-sm); } .match .side { display: flex; align-items: center; gap: 8px; min-width: 0; } .match .side.home { justify-content: flex-end; text-align: right; } .match .side .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* min-width chico: el "vs" es angosto, así el bloque central no roba ancho a los nombres y los logos quedan pegados al vs. El marcador jugado (pill) igual crece solo porque la celda es auto. */ .match .score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; font-size: 1.05rem; } .match .score .vs { color: var(--ink-mute); font-weight: 700; font-size: .8rem; } .match .score .pill { background: var(--ink); color: #fff; border-radius: 9px; padding: 4px 11px; display: inline-block; } .match-meta { margin: -4px 0 12px; padding: 0 6px; } /* Marcador editable (carga de resultados): inputs que achican en móvil para dejar más lugar a los nombres de los equipos. */ .score.score-edit { display: flex; gap: 6px; align-items: center; min-width: 120px; } .score-edit .score-in { width: 56px; text-align: center; } @media (max-width: 420px) { .score.score-edit { min-width: 0; gap: 4px; } .score-edit .score-in { width: 46px; } } .match-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 3px; } .text-right { text-align: right; } /* ------------------------------------------------------- Copa (bracket) */ .bracket { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .bracket-round { flex: 0 0 clamp(210px, 70vw, 252px); display: flex; flex-direction: column; gap: 16px; } .bracket-fase { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); margin: 0 0 2px; } .bracket-match { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .bm-row { display: flex; align-items: center; gap: 8px; padding: 10px 13px; } .bm-row + .bm-row { border-top: 1px solid var(--line-2); } .bm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .9rem; } .bm-score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; } .bm-row.is-win { background: #edf7e3; } .bm-row.is-win .bm-name { color: var(--olive); } /* Equipos clickeables en cualquier vista (llevan a la ficha del equipo), sin ningún cambio visual respecto del texto normal. */ .team-clickable { color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .12s ease; } .team-clickable:hover { text-decoration: none; } .team-clickable:active { opacity: .55; } /* feedback sutil al tocar, sin recuadro gris */ .bm-team { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .match .side .side-team { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; } .match .side.home .side-team { justify-content: flex-end; } .match .side .side-team .name { min-width: 0; } /* --------------------------------------------------------------- Stats */ .stat-grid { display: grid; gap: clamp(12px, 2vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat .k { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); font-weight: 800; } .stat .v { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.05; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .stat .sub { color: var(--ink-soft); font-size: .85rem; margin-top: 3px; } .stat--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); } /* --------------------------------------------------------- Empty state */ .empty { text-align: center; padding: 52px 22px; color: var(--ink-soft); } .empty .brand-mark { margin: 0 auto 14px; opacity: .55; } /* --------------------------------------------------------- Auth layout */ .auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(16px, 5vw, 32px) clamp(12px, 4vw, 16px); background: #eef5fc; } .auth-card { width: 100%; max-width: 430px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(22px, 6vw, 36px); text-align: center; } .auth-card h1 { font-size: 1.55rem; } .auth-card form { text-align: left; margin-top: 20px; } .auth-card .alt { margin-top: 16px; font-size: .92rem; color: var(--ink-soft); } /* ----------------------------------------------------- Admin (sidebar) */ .admin { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; min-height: 100dvh; } .admin-side { background: #14161d; color: #cfd3dd; padding: 22px 16px; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; } .admin-side .brand-lockup { color: #fff; margin-bottom: 24px; } .admin-side .brand-lockup small { color: rgba(255,255,255,.5); } .admin-side .brand-lockup strong { color: #fff; } .admin-nav { display: flex; flex-direction: column; gap: 2px; } .admin-nav a { color: #b9bfcc; padding: 10px 13px; border-radius: 10px; font-weight: 600; font-size: .92rem; } .admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .admin-nav a.is-active { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--cyan); } .admin-nav .sep { height: 1px; background: rgba(255,255,255,.09); margin: 13px 4px; } .admin-side .side-user { margin-top: 20px; font-size: .82rem; color: rgba(255,255,255,.55); } .admin-main { padding: 30px; background: var(--bg); min-width: 0; } .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .crumbs { color: var(--ink-mute); font-size: .85rem; } .crumbs a { color: var(--ink-soft); } .admin-cols { display: grid; gap: 20px; grid-template-columns: 350px 1fr; align-items: start; } @media (max-width: 820px) { .admin-cols { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- Utils */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .flex-gap-sm { gap: 6px; } .spacer { flex: 1; } .text-center { text-align: center; } .divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; } .list-reset { list-style: none; margin: 0; padding: 0; } .site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 30px 0; margin-top: 44px; color: var(--ink-soft); font-size: .9rem; } .site-footer .brand-stripe-inline { height: 4px; border-radius: 4px; width: 72px; margin-bottom: 14px; background: linear-gradient(90deg, var(--green) 0 16.66%, var(--cyan) 16.66% 33.32%, var(--olive) 33.32% 50%, var(--purple) 50% 66.66%, var(--magenta) 66.66% 83.32%, var(--orange) 83.32% 100%); } /* En móvil, todo el footer va centrado. */ @media (max-width: 600px) { .site-footer { text-align: center; } .site-footer .brand-stripe-inline { margin-inline: auto; } .site-footer .row-between { justify-content: center; text-align: center; gap: 10px; } } /* --------------------------------------------------------- Responsive Breakpoints elegidos por CONTENIDO (no por dispositivo). El diseño ya es fluido (clamp/min/auto-fit); estas reglas resuelven puntos concretos. */ /* Botón hamburguesa: oculto en desktop (barra lateral siempre visible). */ .admin-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-menu-toggle { display: none; background: rgba(255,255,255,.08); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .admin-menu-toggle:hover { background: rgba(255,255,255,.14); } /* Panel en móvil: la barra lateral pasa a barra superior con menú desplegable. */ @media (max-width: 860px) { .admin { grid-template-columns: 1fr; min-height: 0; } .admin-side { position: static; height: auto; padding: 12px clamp(14px, 4vw, 16px); } .admin-menu-toggle { display: inline-flex; } /* Menú y datos de sesión: ocultos hasta abrir con el hamburguesa. */ .admin-side .admin-nav, .admin-side > .side-user { display: none; } .admin-side.is-open .admin-nav { display: flex; flex-direction: column; margin-top: 12px; } .admin-side.is-open > .side-user { display: block; } .admin-nav .sep { display: block; } .admin-main { padding: clamp(16px, 4vw, 22px) clamp(14px, 4vw, 16px); } } /* Tablets chicas / móviles grandes. */ @media (max-width: 640px) { .form-row, .form-grid-3 { grid-template-columns: 1fr; } .site-nav a { padding: 9px 11px; } .hero-mark { width: min(70vw, 360px); height: min(70vw, 360px); right: -14%; top: -60px; } .match { padding: 11px 13px; gap: 6px; } .match .side { gap: 6px; } /* logo más pegado al nombre */ .match .side .name { font-size: .92rem; } .match-goals { grid-template-columns: 1fr; } .admin-topbar { gap: 10px; } /* Llaves (copa): en el celular se apilan a lo ancho en vez de hacer scroll horizontal, así ningún equipo queda pegado al borde. */ .bracket { flex-direction: column; overflow-x: visible; gap: 14px; } .bracket-round { flex: 1 1 auto; width: 100%; } } /* Header en móvil: marca arriba, botones en su propia fila (prolijo, no "roto"). Se activa cuando la marca + los 3 ítems no entran cómodos en una línea. */ @media (max-width: 600px) { .site-header .container { row-gap: 6px; padding-block: 10px; min-height: 0; } .brand-lockup { flex: 1 1 100%; } /* marca ocupa la fila 1 */ .site-nav { flex-basis: 100%; /* nav ocupa la fila 2 completa */ justify-content: flex-start; /* alineado a la izquierda, bajo la marca */ gap: 8px; } .site-nav a:first-child { margin-inline-start: -4px; } /* "Inicio" alineado con la marca */ } /* Móviles chicos y plegables (≈360px y menos). */ @media (max-width: 400px) { .site-nav { gap: 6px; } .btn--sm { padding: .52em .72em; } .tournament-card h3 { font-size: 1rem; } /* El marcador se apila si no entra en una línea. */ .match { grid-template-columns: 1fr auto 1fr; gap: 5px; padding: 10px; } .match .score { min-width: 34px; font-size: .98rem; } } /* Orientación horizontal en pantallas bajas (móvil apaisado): que la tarjeta de login no se corte y se pueda hacer scroll si hace falta. */ @media (orientation: landscape) and (max-height: 520px) { .auth-page { min-height: 0; padding-block: 24px; } } /* ------------------------------------------- Listas editables (equipos / plantel) */ .row-list { display: flex; flex-direction: column; gap: 10px; } .row-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease; } .row-item:hover { border-color: #d8deea; box-shadow: var(--shadow-sm); } .ri-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ri-num { flex: 0 0 auto; min-width: 28px; text-align: center; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .ri-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 150px; } .ri-id strong { line-height: 1.2; overflow-wrap: anywhere; } .ri-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; } .ri-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .ri-chip--grp { background: var(--primary-050); color: var(--primary-600); } .ri-tags { display: flex; gap: 5px; flex: 0 0 auto; } /* Estado vacío embebido dentro de una card */ .empty-inline { display: flex; align-items: center; gap: 14px; padding: 8px 2px; } .fp-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: .78rem; font-weight: 800; } .fp-tag--am { background: #fdf1e0; color: #a4671a; } .fp-tag--ro { background: #fdeceb; color: #b32026; } .ri-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } .ri-edit, .ri-fp { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } .fp-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; } .fp-card { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .fp-dot { width: 12px; height: 16px; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(18,20,26,.18); } .fp-dot--am { background: #f4c430; } .fp-dot--ro { background: #e5352b; } /* Fila de tarjetitas (fair play por jugador) */ .fp-cardline { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 30px; } /* En celular la tabla de amonestados se simplifica: se ocultan las columnas numéricas y las tarjetas pasan a verse debajo del nombre (sin scroll lateral). */ .show-sm { display: none; } @media (max-width: 560px) { .hide-sm { display: none; } /* 37px = ancho del escudo chico (27px) + el gap de .team-cell (10px), para que las tarjetas queden alineadas con el nombre y no bajo el escudo. */ .fp-cardline.show-sm { display: inline-flex; margin-top: 5px; margin-left: 37px; } } .fp-card-txt { min-width: 0; } .fp-add-grid { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; } .fp-add-grid .field { margin-bottom: 0; } .field--min input[type="number"] { width: 72px; } @media (max-width: 560px) { .fp-add-grid { grid-template-columns: 1fr 1fr; } .field--min { grid-column: 1 / -1; } .field--min input[type="number"] { width: 100%; } /* Acciones a lo ancho, en UNA fila y sin cortar palabras. */ .ri-actions { margin-left: 0; width: 100%; padding-top: 6px; gap: 6px; } .ri-actions > .btn, .ri-actions > form { flex: 1 1 auto; } .ri-actions > form { display: flex; } .ri-actions > form > .btn { width: 100%; } .ri-actions .btn { white-space: nowrap; padding-inline: .75em; font-size: .85rem; } /* El escudo y el nombre quedan siempre en la misma línea. */ .ri-id { flex: 1 1 auto; } .row-item { padding: 12px; } } /* -------------------------------------------- Programación del fixture (sede/día/hora) */ /* Cada partido es UNA tarjeta: encabezado con los equipos (fondo suave + línea) y cuerpo con los campos de día/hora/sede y las acciones. */ .fx-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 14px; transition: box-shadow .16s ease, border-color .16s ease; } .fx-card:hover { box-shadow: var(--shadow); border-color: #d8deea; } .fx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 13px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); } .fx-head .side { display: flex; align-items: center; gap: 8px; min-width: 0; } .fx-head .side.home { justify-content: flex-end; text-align: right; } .fx-head .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-head .score { min-width: 40px; text-align: center; } .fx-head .vs { color: var(--ink-mute); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .fx-head .pill { background: var(--ink); color: #fff; border-radius: 9px; padding: 4px 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .fx-body { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 15px 18px; } .fx-fields { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.6fr); gap: 10px 12px; flex: 1 1 360px; min-width: 0; } .fx-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; } .sched-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sched-field > span { font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-mute); text-transform: uppercase; } .sched-field input { min-block-size: 42px; } @media (max-width: 700px) { .fx-body { flex-direction: column; align-items: stretch; } .fx-fields { grid-template-columns: 1fr 1fr; } .fx-fields .sched-field--sede { grid-column: 1 / -1; } .fx-actions { justify-content: flex-end; } } /* Botón de guardar: queda pegado abajo mientras se recorre el fixture. */ .sched-save { position: sticky; bottom: 12px; display: flex; justify-content: center; margin-top: 16px; z-index: 5; } .sched-save .btn { box-shadow: var(--shadow); } /* ---------------------------------------------- Próximo partido (ficha de equipo) */ .next-match { border: 1px solid var(--line); border-radius: var(--r); background: radial-gradient(120% 120% at 0% 0%, var(--primary-050) 0%, transparent 55%), var(--surface); box-shadow: var(--shadow-sm); padding: 16px 18px; } .nm-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .nm-teams { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; } .nm-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .nm-team strong { font-size: 1.05rem; letter-spacing: -.01em; } .nm-vs { color: var(--ink-mute); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; } .nm-info { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .nm-info span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-soft); } .nm-info svg { color: var(--primary); flex: 0 0 auto; } /* En celular los equipos se apilan: Equipo / VS / Equipo, centrados. En horizontal (desktop) quedaban con nombres largos que envolvían feo. */ @media (max-width: 560px) { .nm-teams { flex-direction: column; gap: 8px; } } /* Día/hora + sede debajo de cada partido de la lista */ .match-meta { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; color: var(--ink-soft); font-size: .84rem; } .match-meta-dot { color: var(--ink-mute); } /* Celda de jugador en la tabla de plantel: foto chica + nombre */ .player-cell { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } /* ---------------------------------------------- Credencial de jugador (carnet) */ .cred-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); } .cred { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .16s ease; } .cred:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* Banda de marca arriba (como el borde de un carnet oficial). */ .cred::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--green) 0 16.66%, var(--cyan) 16.66% 33.32%, var(--olive) 33.32% 50%, var(--purple) 50% 66.66%, var(--magenta) 66.66% 83.32%, var(--orange) 83.32% 100%); } .cred-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; min-width: 0; } .cred-club { font-size: .74rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; } .cred-num { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border-radius: 7px; font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; } .cred-photo { display: flex; align-items: center; justify-content: center; padding: 8px 12px 4px; } .cred-photo img { width: 120px; height: 140px; object-fit: cover; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); } .cred-photo-ph { width: 120px; height: 140px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--line); font-size: 3rem; font-weight: 800; color: var(--ink-mute); } .cred-body { padding: 4px 14px 12px; text-align: center; } .cred-name { margin: 6px 0 0; font-size: 1.05rem; line-height: 1.2; } .cred-pos { color: var(--ink-soft); font-size: .84rem; margin-top: 2px; } .cred-data { margin: 12px 0 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .cred-data > div { background: var(--bg-2); border-radius: 9px; padding: 6px 12px; min-width: 0; } .cred-data dt { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin: 0; } .cred-data dd { margin: 1px 0 0; font-weight: 800; font-size: .92rem; color: var(--ink); font-variant-numeric: tabular-nums; } .cred-foot { margin-top: auto; padding: 8px 12px; text-align: center; border-top: 1px solid var(--line-soft); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); } /* ---------------------------------------------- Modal de confirmación (borrado) */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(18, 20, 26, .55); backdrop-filter: blur(2px); animation: modal-fade .18s ease; } .modal-card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 30px); text-align: center; animation: modal-pop .2s cubic-bezier(.2, .9, .3, 1.2); } .modal-icon { width: 54px; height: 54px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--p0-bg, #fbeaea); color: var(--danger); } .modal-card h3 { font-size: 1.3rem; margin: 0 0 8px; } .modal-lead { color: var(--ink-soft); margin: 0 0 14px; } .modal-lead strong { color: var(--ink); } .modal-list { list-style: none; margin: 0 0 14px; padding: 14px 16px; background: var(--bg-2); border-radius: var(--r-sm); text-align: left; display: flex; flex-direction: column; gap: 8px; } .modal-list li { display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); } .modal-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; transform: translateY(-2px); } .modal-list strong { color: var(--ink); font-variant-numeric: tabular-nums; } .modal-warn { color: var(--danger); font-weight: 600; font-size: .92rem; margin: 0 0 18px; } .modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .modal-actions .btn { flex: 1 1 auto; min-width: 130px; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-card { animation: none; } } /* --------------------------------------------------------- Impresión */ .no-print { } @media print { .site-header, .site-footer, .brand-stripe, .hero, .tabs, .admin-side, .no-print, .search-bar, .btn, .flash-stack, .card-actions { display: none !important; } body { background: #fff; color: #000; } .admin-main, .container, .container--narrow { padding: 0 !important; margin: 0 !important; max-width: 100% !important; } .card, .table-wrap, .match, .stat, .bracket-match { box-shadow: none !important; border-color: #bbb !important; } a { color: #000 !important; text-decoration: none; } table.data thead th { background: #eee !important; color: #000 !important; } .matchday, .table-wrap, .stat, .bracket-round { page-break-inside: avoid; } .standings tbody tr.is-leader { background: #f0f0f0 !important; } h1, h2 { margin-top: 0; } @page { margin: 1.4cm; } }