/* Estilos propios de Parley sobre Bootstrap 5. El tema claro/oscuro usa el soporte nativo de Bootstrap 5.3: el atributo data-bs-theme en conmuta todas las variables de color. Acá solo se redefinen los tokens de marca y se ajusta la barra superior y los componentes. */ :root { --pl-acento: #4f46e5; --pl-barra-alto: 56px; /* Ancho máximo de la vitrina. Sin tope, en un monitor ancho la tabla de posiciones separa el nombre de sus cifras hasta volverse ilegible. */ --pl-ancho: 1120px; /* Tokens de Bootstrap redefinidos: el resto del framework los hereda */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-border-radius: .625rem; --bs-border-radius-sm: .45rem; --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Tema claro */ [data-bs-theme="light"] { --pl-fondo: #f4f5f7; --pl-superficie: #ffffff; --pl-acento-tenue: rgba(79, 70, 229, .1); --pl-acento-texto: #4338ca; --bs-body-bg: #f4f5f7; --bs-body-color: #1f2430; --bs-border-color: #e5e7eb; --bs-link-color: #4338ca; --bs-link-hover-color: #3730a3; } /* Tema oscuro */ [data-bs-theme="dark"] { --pl-fondo: #14151a; --pl-superficie: #1c1e26; --pl-acento-tenue: rgba(129, 121, 247, .16); --pl-acento-texto: #a9a2ff; --bs-body-bg: #14151a; --bs-body-color: #e6e8ee; --bs-border-color: #2b2e3a; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(230, 232, 238, .65); --bs-link-color: #a9a2ff; --bs-link-hover-color: #c4bfff; } /* Bootstrap genera .btn-primary con el azul fijo del framework: no mira --bs-primary. Se le pasan sus propias variables para usar el acento. */ .btn-primary { --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3; --bs-btn-disabled-bg: #4f46e5; --bs-btn-disabled-border-color:#4f46e5; } body { background: var(--pl-fondo); min-height: 100vh; } /* ---------- Barra superior ---------- */ .pl-barra { min-height: var(--pl-barra-alto); padding-top: 0; padding-bottom: 0; background: var(--pl-superficie); border-bottom: 1px solid var(--bs-border-color); } .pl-marca { font-weight: 600; letter-spacing: .14em; margin-right: 1.5rem; } .pl-barra .nav-link { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: var(--bs-border-radius-sm); color: var(--bs-secondary-color); font-size: .9rem; /* Anula la transición que trae Bootstrap en .nav-link: al depender de variables que cambian con el tema, deja el color viejo congelado al conmutar claro/oscuro. */ transition: none; } .pl-barra .nav-link:hover { color: var(--bs-body-color); } /* El activo se marca con un fondo tenue del acento, no con un relleno sólido. */ .pl-barra .nav-link.activo, .pl-barra .nav-link.activo:hover { background: var(--pl-acento-tenue); color: var(--pl-acento-texto); font-weight: 500; } .pl-icono { width: 1rem; height: 1rem; flex: none; fill: currentColor; } .pl-boton-icono { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid transparent; border-radius: var(--bs-border-radius-sm); background: transparent; color: var(--bs-secondary-color); } .pl-boton-icono:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } /* El icono de tema que corresponde lo decide el tema activo */ [data-bs-theme="light"] .pl-solo-oscuro, [data-bs-theme="dark"] .pl-solo-claro { display: none; } /* ---------- Contenido ---------- */ .pl-contenido { padding: 1.5rem 0 3rem; } /* ---------- Tabla de clientes del panel ---------- */ /* Las celdas que nunca deben partirse en dos líneas: fechas, montos y cifras. Partirlas convierte una tabla de tres clientes en nueve renglones y cuesta más leerla que un scroll horizontal, que es lo que hace table-responsive cuando no entra. */ .pl-sin-cortar { white-space: nowrap; } /* El correo puede ser largo; se recorta antes de empujar el resto de las columnas. */ .pl-tabla-clientes td:first-child { max-width: 22rem; } /* ---------- Aviso de vencimiento ---------- */ /* Una franja de una línea bajo la barra, no un modal ni un toast: empuja el contenido hacia abajo en vez de taparlo, y no hay que cerrarla para seguir cargando jugadas. Se apaga sola cuando el pago se reporta y desaparece cuando se aprueba. */ .pl-aviso-membresia { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-bottom: 1px solid var(--bs-warning-border-subtle); font-size: .875rem; } /* Con el pago ya reportado el aviso deja de pedir algo y solo informa: baja de tono. */ .pl-aviso-membresia--espera { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border-bottom-color: var(--bs-info-border-subtle); } .pl-aviso-membresia > .pl-contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding-top: .5rem; padding-bottom: .5rem; } .pl-aviso-membresia a { color: inherit; font-weight: 600; } .pl-titulo { margin-bottom: 1.25rem; font-size: 1.35rem; font-weight: 600; } /* Crédito de autoría al pie. Discreto: el color secundario del tema lo mantiene legible en claro y en oscuro sin competir con el contenido. */ .pl-pie { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 0 1.5rem; color: var(--bs-secondary-color); font-size: .8125rem; text-align: center; } .pl-pie > .pl-contenedor { display: flex; align-items: center; justify-content: center; gap: .5rem; } /* El crédito no debe llamar la atención más que el contenido: apagado en reposo, y el logotipo recupera su color al apuntarlo o al llegar con el teclado. */ .pl-credito { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; opacity: .75; } .pl-credito:hover, .pl-credito:focus-visible { color: inherit; opacity: 1; } /* El logotipo trae su propio alto en el SVG; acá manda el del pie. */ .pl-credito-logo { width: auto; height: 1.15rem; display: block; } .pl-credito-anio { opacity: .75; } /* ---------- Eventos ---------- */ /* ---------- Agenda de eventos ---------- Los eventos se listan como una agenda cronológica agrupada por mes, con el bloque de fecha a la izquierda y el afiche como miniatura al costado. La alternativa evidente —una grilla de tarjetas-afiche— es exactamente la forma de la página que el dueño tomó como referencia, y conviene no parecerse: acá la pieza que manda es la fecha, no el afiche, que además es lo que el jugador busca (cuándo es la próxima). */ /* Dos secciones y nada más: lo que viene y lo que pasó. El mes vive en el chip de fecha de cada fila, así que no hacen falta encabezados por mes encima. */ .pl-agenda-seccion { margin: 1.75rem 0 .6rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--bs-secondary-color); } .pl-agenda-seccion:first-of-type { margin-top: 0; } .pl-agenda { display: flex; flex-direction: column; gap: .5rem; } .pl-agenda-item { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; background: var(--pl-superficie); border: 1px solid var(--bs-border-color); border-left: 3px solid var(--bs-border-color); border-radius: var(--bs-border-radius); color: inherit; text-decoration: none; } /* El borde izquierdo dice el estado sin ocupar sitio: el distintivo lo repite en texto. */ .pl-agenda-porvenir { border-left-color: var(--pl-acento); } .pl-agenda-encurso { border-left-color: #16a34a; } .pl-agenda-terminado { border-left-color: var(--bs-border-color); } a.pl-agenda-item:hover, a.pl-agenda-item:focus-visible { border-color: var(--pl-acento); background: var(--pl-acento-tenue); } a.pl-agenda-item:hover.pl-agenda-porvenir, a.pl-agenda-item:focus-visible.pl-agenda-porvenir { border-left-color: var(--pl-acento); } /* Chip de fecha: día de la semana, número grande y mes. Es el ancla de lectura de la fila y lo que hace que la lista se entienda como calendario y no como catálogo. */ .pl-fecha { flex: 0 0 3.25rem; padding: .35rem 0; text-align: center; line-height: 1.15; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-sm); } .pl-fecha-dia { display: block; font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; } .pl-fecha-semana, .pl-fecha-mes { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); } /* El cierre de un campeonato de varios días («al 26»), bajo el mes. Va en el acento y no en gris como el resto del chip: es lo único que distingue un evento de dos días de uno de uno, y en gris se pierde. Solo se pinta cuando hay rango, así que no ensancha el chip de los eventos normales. */ .pl-fecha-hasta { display: block; margin-top: .1rem; font-size: .625rem; font-weight: 600; letter-spacing: .02em; color: var(--pl-acento-texto); } .pl-agenda-cuerpo { flex: 1 1 auto; min-width: 0; } .pl-agenda-nombre { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; line-height: 1.25; } .pl-agenda-dato { margin: 0; font-size: .8125rem; color: var(--bs-secondary-color); } /* La miniatura acompaña, no manda: vertical y chica, al costado. */ .pl-agenda-afiche { flex: 0 0 auto; width: 4.25rem; height: 6rem; object-fit: cover; object-position: top center; border-radius: var(--bs-border-radius-sm); background: var(--pl-acento-tenue); } .pl-agenda-acciones { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; } /* El enlace para compartir baja a su propia línea dentro de la fila: es largo y no compite con las acciones. */ .pl-agenda-enlace { flex: 1 1 100%; } .pl-agenda-nombre a { color: inherit; } .pl-agenda-nombre a:hover { color: var(--pl-acento-texto); } @media (max-width: 575.98px) { .pl-agenda-item { gap: .75rem; padding: .75rem; } .pl-fecha { flex-basis: 2.5rem; } .pl-fecha-dia { font-size: 1.35rem; } .pl-agenda-afiche { width: 3rem; height: 4.25rem; } .pl-agenda-acciones { flex-basis: 100%; justify-content: flex-start; } } /* El afiche manda, pero con relación fija: si cada tarjeta respetara el alto de su imagen, la grilla quedaría desparejada. */ .pl-evento-afiche { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pl-acento-tenue); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; } /* Recorte desde arriba, no desde el centro: el afiche de coleo es vertical y lleva el nombre del campeonato en la cabeza, que es justo lo que un recorte centrado tira. */ .pl-evento-imagen { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Sin afiche: la inicial del evento, que es mejor que un hueco gris. */ .pl-evento-inicial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.75rem; font-weight: 600; color: var(--pl-acento-texto); } /* El distintivo lleva su propio fondo oscuro: en la cabecera del evento va sobre el afiche, y es lo único que garantiza que se lea sobre cualquier imagen. */ .pl-evento-estado { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .62); } .pl-evento-porvenir { color: #c7d2fe; } .pl-evento-encurso { color: #86efac; } .pl-evento-terminado { color: #e5e7eb; } /* Nombre del evento en el que se está trabajando, en la barra superior. */ .pl-evento-actual { max-width: 14rem; } /* Vista previa del afiche en el formulario */ .pl-afiche-vista { max-width: 420px; } .pl-afiche-imagen { display: block; width: 100%; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* ---------- Componentes ---------- */ .card { background: var(--pl-superficie); border-color: var(--bs-border-color); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: transparent; border-bottom-color: var(--bs-border-color); padding: .875rem 1rem; font-weight: 600; } .table { --bs-table-bg: transparent; margin-bottom: 0; vertical-align: middle; } .table > thead th { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); white-space: nowrap; } .table > tbody td { border-bottom-color: var(--bs-border-color); } /* Listas de coleadores dentro de la tabla: sin viñetas ni sangría */ .pl-lista-simple { margin: 0; padding: 0; list-style: none; font-size: .875rem; } .form-label { font-size: .8rem; font-weight: 500; color: var(--bs-secondary-color); } /* Errores de validación del servidor, en una alerta en vez de texto suelto */ .pl-errores ul { margin: 0; padding-left: 1.1rem; } .pl-errores li + li { margin-top: .25rem; } /* Notificaciones flotantes (partial _Avisos) */ .pl-aviso { border-left: 4px solid; background: var(--pl-superficie); color: var(--bs-body-color); } .pl-aviso-exito { border-left-color: var(--bs-success); } .pl-aviso-error { border-left-color: var(--bs-danger); } /* Cinta de estado de disponibilidad de una jugada */ .pl-estado { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: var(--bs-border-radius-sm); font-size: .875rem; font-weight: 500; } .pl-estado-libre { background: rgba(25, 135, 84, .1); border: 1px solid rgba(25, 135, 84, .3); color: var(--bs-success-text-emphasis); } .pl-estado-ocupado { background: rgba(220, 53, 69, .1); border: 1px solid rgba(220, 53, 69, .3); color: var(--bs-danger-text-emphasis); } /* ---------- Móvil ---------- */ @media (max-width: 991.98px) { .pl-barra .navbar-collapse { padding-bottom: .75rem; } .pl-barra .navbar-nav { margin-bottom: .5rem; } /* Con el menú desplegado, el bloque de la derecha se alinea a la izquierda */ .pl-barra .navbar-collapse > .d-flex { justify-content: flex-start; } .pl-secundario { padding-left: .7rem; } } /* ---------- Vitrina pública ---------- */ /* Todo lo público se centra dentro del mismo ancho: el contenido no persigue el borde de la pantalla y las dos páginas quedan alineadas entre sí. */ .pl-contenedor { width: 100%; max-width: var(--pl-ancho); margin-inline: auto; padding-inline: 1rem; } .pl-publico-barra { padding: .65rem 0; border-bottom: 1px solid var(--bs-border-color); background: var(--pl-superficie); } /* Dentro de un evento, el nombre del organizador vuelve a su cartelera. Se pinta como enlace de verdad (acento + flecha), no como el texto apagado que era antes: es la salida de quien llegó por WhatsApp y no tiene historial al que volver. */ .pl-volver { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-size: .875rem; color: var(--pl-acento-texto); text-decoration: none; } .pl-volver:hover, .pl-volver:focus-visible { color: var(--bs-link-hover-color); text-decoration: underline; } .pl-publico-cuerpo { padding-block: 1.5rem 3rem; } /* El afiche manda, pero se muestra entero y en su propia proporción: recortarlo a una franja ancha le cortaba la cabeza a los afiches verticales, que son casi todos. El hueco que deja a los lados lo llena el mismo afiche desenfocado, así que la cabecera toma el color de la pieza sin robarle protagonismo. */ .pl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--pl-acento-tenue); border-bottom: 1px solid var(--bs-border-color); } .pl-hero-fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* La escala tapa los bordes que el desenfoque deja translúcidos. */ transform: scale(1.2); filter: blur(2.5rem) saturate(1.5); } /* El velo no es decoración: es lo que garantiza que el nombre se lea sobre un afiche claro, uno oscuro o uno lleno de texto. */ .pl-hero-velo { position: absolute; inset: 0; z-index: -1; background: rgba(9, 10, 15, .66); } .pl-hero-interior { display: grid; gap: 1.25rem; justify-items: center; padding-block: 1.5rem; text-align: center; } /* En el teléfono el afiche se queda en menos de media pantalla: si ocupa todo, el jugador que entra a buscar su ticket abre el enlace y no ve ni las pestañas. */ .pl-hero-afiche { display: block; width: auto; max-width: 100%; max-height: 42vh; border-radius: var(--bs-border-radius); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45); } .pl-hero-texto { color: #fff; } .pl-hero-titulo { margin: .5rem 0 .6rem; font-size: clamp(1.45rem, 4.5vw, 2.35rem); font-weight: 650; line-height: 1.12; letter-spacing: -.01em; } .pl-hero-dato { font-size: .9375rem; color: rgba(255, 255, 255, .82); } /* Desde tableta, el afiche a un lado y los datos al otro: se lee como un afiche pegado en la pared con su ficha al lado, y deja de comerse la pantalla. */ @media (min-width: 768px) { .pl-hero-interior { grid-template-columns: minmax(0, 17rem) 1fr; gap: 2rem; align-items: center; justify-items: start; padding-block: 2.25rem; text-align: start; } .pl-hero-afiche { max-height: 22rem; } } /* Las tres pestañas tienen que entrar en una línea a 375 px: partidas en dos, se leen como una lista rota y el jugador no encuentra la de su ticket. */ @media (max-width: 575.98px) { .pl-publico-cuerpo .nav-tabs { flex-wrap: nowrap; } .pl-publico-cuerpo .nav-tabs .nav-link { padding-inline: .65rem; font-size: .9375rem; white-space: nowrap; } } /* Sin afiche no hay nada que desenfocar: la cabecera vuelve a los colores del tema. */ .pl-hero-sin-afiche { background: var(--pl-superficie); } .pl-hero-sin-afiche .pl-hero-texto { color: var(--bs-body-color); } .pl-hero-sin-afiche .pl-hero-dato { color: var(--bs-secondary-color); } @media (min-width: 768px) { .pl-hero-sin-afiche .pl-hero-interior { grid-template-columns: 1fr; } } /* ---------- Tabla de posiciones ---------- */ /* La lista va sobre una superficie con bordes redondeados en vez de rayas de borde a borde: encierra la tabla y ata cada nombre con sus cifras. */ .pl-posiciones { background: var(--pl-superficie); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; } .pl-posiciones-encabezado, .pl-posicion { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .pl-posicion:last-child { border-bottom: 0; } .pl-posicion:hover { background: var(--pl-acento-tenue); } .pl-posiciones-encabezado { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); } .pl-pos-numero { flex: 0 0 2rem; } .pl-pos-nombre { flex: 1 1 auto; min-width: 0; font-weight: 500; } .pl-pos-cifra { flex: 0 0 4.5rem; text-align: right; font-variant-numeric: tabular-nums; } .pl-medalla { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-secondary-bg); font-size: .8125rem; font-weight: 600; } /* ---------- Portada del organizador ---------- */ /* Una franja de acento tenue bajo la barra: le da peso a la página sin imágenes, sin peso extra de descarga y con el índigo de siempre. El afiche manda en la página del evento; acá el protagonista es el organizador. */ .pl-publico-portada { padding: 1.75rem 0 1.5rem; background: var(--pl-acento-tenue); border-bottom: 1px solid var(--bs-border-color); } .pl-publico-nombre { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; } /* La bajada de la portada: explica qué es Parley a quien nunca la vio. Se acota el ancho porque un párrafo que cruza toda la pantalla no se lee. */ .pl-portada-bajada { max-width: 44rem; margin: .5rem 0 0; color: var(--bs-secondary-color); } /* La entrada al área privada, al final de la portada y sin destacar. */ .pl-portada-entrar { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bs-border-color); } .pl-cifras { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1rem; } .pl-cifra { display: flex; flex-direction: column; line-height: 1.1; } .pl-cifra-numero { font-size: 1.75rem; font-weight: 700; color: var(--pl-acento-texto); font-variant-numeric: tabular-nums; } .pl-cifra-etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); } /* Cuántas jugadas van, sobre el afiche. Un poco más de peso que el resto de los datos del hero: es el número que dice que el campeonato está vivo. */ .pl-hero-jugadas { margin-top: .6rem; font-size: .95rem; } .pl-hero-jugadas strong { font-size: 1.15rem; } .pl-hero-jugadas-extra { opacity: .75; } /* ---------- Los más jugados ---------- */ /* Misma superficie con bordes redondeados que la tabla de posiciones: en la vitrina las listas son bloques, no rayas de borde a borde. */ .pl-mas-jugados { list-style: none; margin: 0; padding: 0; background: var(--pl-superficie); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden; } .pl-mas-jugado { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color); } .pl-mas-jugado:last-child { border-bottom: 0; } .pl-mas-jugado-puesto { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bs-tertiary-bg); font-size: .8125rem; font-weight: 600; } /* El nombre se come el espacio sobrante y se recorta antes de empujar la cifra. */ .pl-mas-jugado-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .pl-mas-jugado-cifra { flex-shrink: 0; text-align: right; font-size: .875rem; line-height: 1.3; } .pl-mas-jugado-campeonatos { font-size: .75rem; color: var(--bs-secondary-color); } /* Oro, plata y bronce desaturados: se entiende el podio sin que grite. */ .pl-medalla-1 { background: #c9a227; color: #fff; } .pl-medalla-2 { background: #9ca3af; color: #fff; } .pl-medalla-3 { background: #a97449; color: #fff; } /* En el teléfono no se aprietan cinco columnas: las cifras bajan a una segunda línea, alineadas con el nombre y con su etiqueta delante. */ @media (max-width: 767.98px) { .pl-posicion { flex-wrap: wrap; row-gap: .15rem; padding-inline: .75rem; } .pl-pos-nombre { flex: 1 1 60%; } .pl-pos-cifra { flex: 0 0 auto; margin-left: 2.75rem; font-size: .8125rem; color: var(--bs-secondary-color); } .pl-pos-cifra + .pl-pos-cifra { margin-left: .9rem; } .pl-pos-cifra::before { content: attr(data-etiqueta) ": "; } } /* ---------- Cómo pagar ---------- */ /* Tarjetas y no una lista: cada método es una unidad que se lee sola, y el jugador busca la suya de un vistazo en vez de recorrer renglones. */ .pl-pagos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; } .pl-pago { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: var(--pl-superficie); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* El chip es **claro en los dos temas**, a propósito. Los logotipos van en su color oficial —el morado de Zelle, el amarillo de Binance, el verde de Zinli— porque un logo recoloreado para tema oscuro ya no es el que la gente reconoce, y justamente el valor de ponerlo es que se reconozca sin leer. Un fondo claro fijo es lo que hace que ese color funcione sobre el tema oscuro, y es como lo resuelven las pasarelas de cobro. */ .pl-pago-marca { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius); background: #fff; border: 1px solid rgba(0, 0, 0, .1); } .pl-pago-marca img { width: 1.5rem; height: 1.5rem; object-fit: contain; } /* El icono genérico del sprite hereda `currentColor`, que sobre el chip blanco en tema oscuro sería blanco sobre blanco: acá se le fija la tinta. */ .pl-pago-marca .pl-icono { width: 1.35rem; height: 1.35rem; color: #495057; } /* La ranura ancha del Pago Móvil. Los bancos del país publican su marca **en horizontal** —Bancamiga son 3573×784, el BBVA 3543×1059— y no un isotipo: metida en el chip cuadrado queda una raya de colores. Acá entra entera, que es lo que hace que el jugador reconozca su banco sin leer. Fondo blanco fijo en los dos temas, por lo mismo que el chip: la marca va en su color oficial y es el fondo claro el que la sostiene sobre el tema oscuro. Por eso además el archivo tiene que ser siempre la variante **positiva o a color**; la negativa, pensada para fondo oscuro, acá desaparecería. */ .pl-pago-banco { display: grid; place-items: center; flex-shrink: 0; width: 8.25rem; height: 2.5rem; padding: 0 .5rem; border-radius: var(--bs-border-radius); background: #fff; border: 1px solid rgba(0, 0, 0, .1); } /* `contain` y no `cover`: una marca recortada deja de ser la marca. */ .pl-pago-banco img { max-width: 100%; max-height: 1.6rem; object-fit: contain; } /* Con la ranura ancha, dos tarjetas por fila dejan el dato en una columna muy angosta: a partir de acá la rejilla va a una sola columna ancha. */ @media (min-width: 576px) { .pl-pagos { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } } /* El código del banco cuando no hay logotipo. No es un relleno: «0102» es lo que el jugador teclea para pagar y lo que de verdad distingue un banco de otro, así que en cuatro dígitos dice más que un teléfono gris repetido en todas las tarjetas. */ .pl-pago-codigo { font-size: .8125rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #343a40; } .pl-pago-cuerpo { min-width: 0; line-height: 1.35; } .pl-pago-nombre { display: block; font-weight: 600; font-size: .9375rem; } /* Los saltos de línea que escribió el organizador se respetan —el Pago Móvil son dos datos, en dos renglones— y un número largo parte antes que desbordar la tarjeta. */ .pl-pago-datos { display: block; white-space: pre-line; overflow-wrap: anywhere; font-size: .875rem; color: var(--bs-secondary-color); } .pl-pagos-aviso { margin: .75rem 0 0; font-size: .8125rem; color: var(--bs-secondary-color); } /* ---------- Jugadas ---------- */ /* Un campo de ancho completo para escribir «12» queda desproporcionado. */ .pl-buscador { max-width: 32rem; } .pl-ticket { display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 .5rem; border-radius: var(--bs-border-radius); background: var(--pl-acento-tenue); color: var(--pl-acento-texto); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .pl-jugada-jugador { font-weight: 600; line-height: 1.2; } .pl-coleadores { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; } .pl-coleadores li { padding: .15rem .5rem; border-radius: 999px; background: var(--bs-secondary-bg); font-size: .75rem; }