/* * SOCCER442 — estilos del frontend (Fase 4) * --------------------------------------------------------------------- * Rediseño moderno manteniendo los tonos de la web original (azul vivo + * azul marino + naranja), pero con formas más actuales: tarjetas con * sombra suave, esquinas redondeadas, más aire, tipografía Inter y * "chips" en vez de las barras sólidas de color de la web antigua. * * OJO: esto solo da estilo a lo que pinta el propio plugin (selección, * grupos de amigos, clasificación, estadísticas). La cabecera, el menú * principal y la barra lateral (login, redes, blog) los pinta el TEMA de * WordPress, no el plugin — para que también cambien de aspecto hace * falta tocar el tema (o el CSS adicional del Personalizador), esto no * lo sustituye. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root { --s442-blue: #1670b3; --s442-blue-light: #eaf3fb; --s442-blue-dark: #0b3350; --s442-orange: #f2994a; --s442-orange-light: #fef3e8; --s442-green: #2e9e5b; --s442-green-light: #eaf7ef; --s442-red: #d64545; --s442-red-light: #fcebeb; --s442-amber: #b9790c; --s442-amber-light: #fff6e2; --s442-bg: #f4f6f9; --s442-surface: #ffffff; --s442-border: #e2e7ee; --s442-text: #1a2733; --s442-muted-color: #6b7785; --s442-radius-lg: 14px; --s442-radius: 10px; --s442-radius-sm: 6px; --s442-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06); --s442-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* --------------------------------------------------------------------- * Base compartida por todos los bloques del plugin * ------------------------------------------------------------------ */ .s442-seleccion-wrap, .s442-friends-wrap, .s442-clasificacion-wrap, .s442-stats-wrap, .s442-mini-standings { font-family: var(--s442-font); color: var(--s442-text); -webkit-font-smoothing: antialiased; } /* Barra combinada arriba a la derecha (idioma + cuenta), flotando a la MISMA * altura que la cabecera del tema (el logo) — no ocupa su propia franja ni * empuja el resto de la página hacia abajo (position: absolute, fuera del * flujo normal). Ver S442_Account_Bar::render_top_bar(), enganchada al hook * wp_body_open. En ESCRITORIO se queda con esta posición fija (hay hueco de * sobra a la derecha del logo); en MÓVIL cambia de comportamiento del todo * — ver el bloque @media más abajo — porque una posición fija en píxeles * aquí siempre acababa solapándose con el logo en pantallas estrechas. */ .s442-top-bar { position: absolute; top: 12px; right: 16px; z-index: 9999; display: flex; align-items: center; gap: 10px; } .s442-top-bar .s442-lang-switcher { margin-bottom: 0; } /* La barra de administración de WordPress (arriba del todo, solo visible con * sesión de administrador iniciada — un visitante normal no la ve) tapa el * selector si no se aparta: mide 32px en escritorio y 46px en móvil, y * WordPress añade la clase "admin-bar" al cuando está presente. */ body.admin-bar .s442-top-bar { top: 44px; } @media screen and (max-width: 782px) { body.admin-bar .s442-top-bar { top: 58px; } } /* Selector de idioma ES/EU (Polylang). Cuando se usa dentro de una pantalla * del plugin (shortcode [soccer442_idioma] suelto, por ejemplo) en vez de en * la barra superior, se le añade separación por debajo. */ .s442-lang-switcher { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 16px; } .s442-lang-link { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--s442-border); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--s442-muted-color); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .s442-lang-link:hover { color: var(--s442-blue); border-color: var(--s442-blue); } .s442-lang-link.is-active { color: #fff; background: var(--s442-blue); border-color: var(--s442-blue); } /* ---------- Widget de cuenta (login compacto / avatar + menú) ---------- * Ver S442_Account_Bar::render_account_widget(). Vive dentro de * .s442-top-bar junto al selector de idioma (ver más arriba), o suelto si * se usa el shortcode [soccer442_login] en otro sitio. */ .s442-account-widget { position: relative; } .s442-account-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px; cursor: pointer; border-radius: 999px; color: var(--s442-text); } .s442-account-toggle-entrar { padding: 4px 12px 4px 8px; border: 1px solid var(--s442-border); background: var(--s442-surface); } .s442-account-toggle-entrar:hover { border-color: var(--s442-blue); color: var(--s442-blue); } .s442-account-toggle-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } /* En móvil, el botón "Entrar" se reduce solo al circulito (sin la palabra al * lado, que no cabe bien en la franja estrecha) — ver también account-bar.js, * que no toca esto para nada, es puro CSS. */ @media (max-width: 480px) { .s442-account-toggle-label { display: none; } .s442-account-toggle-entrar { padding: 4px; } } .s442-account-avatar { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .s442-account-avatar-anon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s442-blue-light); color: var(--s442-blue); } .s442-account-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10000; min-width: 220px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: 0 8px 24px rgba(11, 51, 80, 0.14); padding: 14px; } .s442-account-greeting { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--s442-text); } .s442-account-link { display: block; padding: 6px 0; font-size: 13px; color: var(--s442-blue); text-decoration: none; } .s442-account-link:hover { text-decoration: underline; } .s442-account-login-form { display: flex; flex-direction: column; gap: 8px; } .s442-account-login-form input[type='text'], .s442-account-login-form input[type='password'] { padding: 7px 10px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); font-size: 13px; } .s442-account-login-form .button { margin-top: 2px; } /* Título de sección con la firma visual: una barra de degradado azul → naranja, * homenaje a los dos colores de la marca original, delante de cada título. */ .s442-clasificacion-wrap h2, .s442-stats-wrap h2, .s442-seleccion-wrap h2, .s442-friend-group-card h3 { position: relative; margin: 0 0 16px; padding-left: 16px; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--s442-blue-dark); } .s442-clasificacion-wrap h2::before, .s442-stats-wrap h2::before, .s442-seleccion-wrap h2::before, .s442-friend-group-card h3::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--s442-blue), var(--s442-orange)); } .s442-muted { color: var(--s442-muted-color); font-weight: 400; font-size: 0.88em; } /* --------------------------------------------------------------------- * Avisos (éxito / error / info / aviso) — tarjeta blanca con acento de color * a la izquierda, en vez del bloque de color plano de antes. * ------------------------------------------------------------------ */ .s442-notice { background: var(--s442-surface); border: 1px solid var(--s442-border); border-left: 4px solid var(--s442-blue); border-radius: var(--s442-radius-sm); box-shadow: var(--s442-shadow); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; } .s442-success { border-left-color: var(--s442-green); background: var(--s442-green-light); color: #1c6b3c; } .s442-error { border-left-color: var(--s442-red); background: var(--s442-red-light); color: #99302f; } .s442-info { border-left-color: var(--s442-blue); background: var(--s442-blue-light); color: var(--s442-blue-dark); } .s442-warning { border-left-color: var(--s442-amber); background: var(--s442-amber-light); color: #7a5600; } /* --------------------------------------------------------------------- * Selección de equipos/jugadores * ------------------------------------------------------------------ */ .s442-seleccion-wrap { max-width: 760px; } .s442-league-block { margin-bottom: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--s442-border); } .s442-league-block:last-child { border-bottom: none; } /* Selector de pestañas para elegir en qué liga trabajar (selección/cambios), * cuando hay más de una liga activa. Deliberadamente más grande y visible * que el ancho desborde la columna en pantallas estrechas */ } @media (max-width: 720px) { .s442-groups-columns { grid-template-columns: 1fr; } } .s442-groups-column-title { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s442-blue-dark); } /* El fieldset es la tarjeta de cada grupo; el legend se convierte en una * "píldora" de color sobre el propio borde de la tarjeta (comportamiento * nativo del ), heredando el espíritu de las barras "GRUPO" de la * web original pero en formato chip, más pequeño y moderno. */ .s442-group-fieldset { position: relative; border: 1px solid var(--s442-border); border-radius: var(--s442-radius); background: var(--s442-surface); box-shadow: var(--s442-shadow); padding: 22px 20px 18px; margin: 0 0 18px; } .s442-group-fieldset legend { background: var(--s442-blue-dark); color: #fff; padding: 5px 14px; border-radius: 999px; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; } .s442-group-fieldset legend .s442-muted { color: rgba(255, 255, 255, 0.75); font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 0.95em; } .s442-group-error { border-color: var(--s442-red); } .s442-group-error legend { background: var(--s442-red); } .s442-select { display: block; width: 100%; max-width: 380px; padding: 9px 36px 9px 12px; margin-bottom: 10px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); background-color: var(--s442-surface); color: var(--s442-text); font-family: inherit; font-size: 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3e%3cpath fill='none' stroke='%236b7785' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.15s ease; } .s442-select:focus { border-color: var(--s442-blue); outline: 2px solid var(--s442-blue-light); outline-offset: 1px; } .s442-select:disabled { background-color: var(--s442-bg); color: var(--s442-muted-color); } .s442-submit { margin-top: 6px; } .s442-submit .button.button-primary { background: var(--s442-blue); border: none; color: #fff; padding: 10px 22px; border-radius: var(--s442-radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--s442-shadow); transition: background-color 0.15s ease; } .s442-submit .button.button-primary:hover { background: var(--s442-blue-dark); } /* --------------------------------------------------------------------- * Grupos de amigos * ------------------------------------------------------------------ */ .s442-friends-wrap { max-width: 760px; } .s442-friend-group-card { background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius-lg); box-shadow: var(--s442-shadow); padding: 20px 22px; margin-bottom: 22px; transition: box-shadow 0.15s ease; } .s442-friend-group-card:hover { box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.08); } .s442-friend-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .s442-leave-group-btn { background: none; border: 1px solid var(--s442-border); border-radius: var(--s442-radius); padding: 6px 12px; font-size: 13px; color: var(--s442-error, #c0392b); cursor: pointer; white-space: nowrap; } .s442-leave-group-btn:hover { background: var(--s442-error, #c0392b); border-color: var(--s442-error, #c0392b); color: #ffffff; } .s442-friends-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 8px; } .s442-friends-table th, .s442-friends-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--s442-border); } .s442-friends-table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s442-muted-color); font-weight: 600; } .s442-friends-table tr:last-child td { border-bottom: none; } .s442-friend-forms { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; } .s442-friend-form-col { flex: 1; min-width: 240px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: var(--s442-shadow); padding: 18px 20px; } .s442-friend-form-col h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--s442-blue-dark); } .s442-friend-form-col form { display: flex; flex-direction: column; gap: 10px; } .s442-friend-form-col input[type='text'], .s442-friend-form-col input[type='number'] { padding: 9px 12px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); font-family: inherit; font-size: 14px; } .s442-friend-form-col .button.button-primary { align-self: flex-start; background: var(--s442-orange); border: none; color: #fff; padding: 9px 18px; border-radius: var(--s442-radius-sm); font-weight: 600; cursor: pointer; } .s442-friend-form-col .button.button-primary:hover { background: #e08636; } /* --------------------------------------------------------------------- * Clasificación (completa y widget mini) * ------------------------------------------------------------------ */ .s442-clasificacion-wrap { max-width: 1100px; } .s442-league-selector { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .s442-league-selector select { padding: 8px 34px 8px 12px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); background: var(--s442-surface); font-family: inherit; font-size: 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3e%3cpath fill='none' stroke='%236b7785' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; } .s442-standings-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 32px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: var(--s442-shadow); overflow: hidden; } .s442-standings-table th, .s442-standings-table td { text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--s442-border); } .s442-standings-table th { background: var(--s442-blue); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #ffffff; font-weight: 600; } .s442-standings-table tr:last-child td { border-bottom: none; } /* Filas intercaladas (cebra): la fila par se queda con el fondo normal de la * tabla, la impar recibe un gris azulado suave — mismo criterio que ya * usaba .striped en otras tablas del admin, aplicado aquí a la tabla * pública de Clasificación, como pidió el usuario a partir de una imagen * de referencia. */ .s442-standings-table tbody tr:nth-child(even) td { background: var(--s442-bg); } .s442-standings-table tbody tr:hover td { background: var(--s442-blue-light); } .s442-pos-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; font-weight: 700; font-size: 12.5px; background: var(--s442-bg); color: var(--s442-muted-color); } .s442-pos-1 { background: linear-gradient(135deg, #ffdd8a, #f2b53a); color: #6b4a00; } .s442-pos-2 { background: linear-gradient(135deg, #eef0f2, #cfd4da); color: #444d56; } .s442-pos-3 { background: linear-gradient(135deg, #f0c39c, #dd9a63); color: #5c3512; } /* Selector "Ver clasificación de: General / " — vive en la sidebar */ .s442-friend-filter-form { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--s442-border); } .s442-friend-filter-form label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s442-muted-color); font-weight: 600; } .s442-friend-filter-form select { width: 100%; padding: 8px 30px 8px 10px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); background: var(--s442-orange-light); font-family: inherit; font-size: 14px; } .s442-friend-filter-form .s442-muted { font-size: 12px; } /* Layout de dos columnas: clasificación en el centro, navegación a la derecha. */ .s442-clas-layout { display: flex; align-items: flex-start; gap: 28px; } .s442-clas-main { flex: 1 1 auto; min-width: 0; } .s442-clas-sidebar { flex: 0 0 260px; width: 260px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: var(--s442-shadow); padding: 16px; position: sticky; top: 20px; } .s442-clas-sidebar h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s442-muted-color); } .s442-season-block { margin-bottom: 14px; } .s442-season-title { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--s442-blue-dark); display: flex; align-items: center; gap: 6px; } .s442-badge-current { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s442-green); background: var(--s442-green-light); padding: 2px 7px; border-radius: 999px; } .s442-season-nav { list-style: none; margin: 0; padding: 0; } .s442-season-nav li { margin: 0; } .s442-season-nav a { display: block; padding: 6px 8px; margin: 1px 0; border-radius: var(--s442-radius-sm); color: var(--s442-text); text-decoration: none; font-size: 13.5px; } .s442-season-nav a:hover { background: var(--s442-blue-light); } .s442-season-nav li.active a { background: var(--s442-blue); color: #fff; font-weight: 600; } .s442-old-seasons { margin-top: 6px; border-top: 1px solid var(--s442-border); padding-top: 10px; } .s442-old-seasons > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--s442-blue); list-style: none; } .s442-old-seasons > summary::-webkit-details-marker { display: none; } .s442-old-seasons > summary::before { content: '▸ '; } .s442-old-seasons[open] > summary::before { content: '▾ '; } @media (max-width: 780px) { .s442-clas-layout { flex-direction: column; } .s442-clas-sidebar { width: 100%; flex-basis: auto; position: static; } /* En móvil, la barra combinada deja de flotar "junto al logo" (ahí es * donde se solapaba, confirmado con capturas reales) y pasa a ser una * franja fina de ANCHO COMPLETO justo debajo de la cabecera. El "top" * (a qué altura exacta cae esa franja) lo calcula y aplica * assets/account-bar.js, midiendo la altura real ya renderizada de la * cabecera — aquí en CSS solo se define el aspecto, no la posición * vertical exacta (si JS no llegara a ejecutarse por lo que sea, se * queda con el "top" de escritorio de más arriba como último recurso, * en vez de desaparecer del todo). */ .s442-top-bar { left: 0; right: 0; width: 100%; justify-content: space-between; padding: 8px 14px; background: #ffffff; border-bottom: 1px solid #e2e7ee; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); box-sizing: border-box; } .s442-top-bar .s442-lang-switcher { justify-content: flex-start; } .s442-lang-link { padding: 3px 9px; font-size: 11px; } } /* Widget mini: pequeño, fijo, top N, pensado para un lateral. */ .s442-mini-standings { max-width: 260px; padding: 14px 16px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: var(--s442-shadow); font-size: 13px; } .s442-mini-standings-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s442-blue-dark); } .s442-mini-standings-list { list-style: none; margin: 0; padding: 0; } .s442-mini-standings-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--s442-border); } .s442-mini-standings-list li:last-child { border-bottom: none; } .s442-mini-pos { width: 18px; color: var(--s442-muted-color); font-weight: 700; font-size: 12px; } .s442-mini-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s442-mini-total { font-weight: 700; color: var(--s442-blue); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- * Estadísticas de elección * ------------------------------------------------------------------ */ .s442-stats-wrap { max-width: 760px; } /* Cabecera de cada grupo (GRUPO 1, GRUPO 2...): misma idea de "chip" que el * legend del formulario de selección, para que ambas pantallas se sientan * de la misma familia visual. */ .s442-stats-wrap h3 { display: inline-flex; align-items: center; gap: 6px; margin: 26px 0 10px; padding: 6px 14px; background: var(--s442-blue-dark); color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .s442-stats-wrap h3:first-of-type { margin-top: 4px; } .s442-stats-wrap h3 .s442-muted { color: rgba(255, 255, 255, 0.7); font-weight: 500; text-transform: none; letter-spacing: normal; } .s442-stats-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 4px 0 22px; } .s442-stats-table td { padding: 7px 8px; vertical-align: middle; border-bottom: 1px solid var(--s442-border); } .s442-stats-table tr:last-child td { border-bottom: none; } .s442-stats-name { white-space: nowrap; width: 1%; font-weight: 500; } .s442-stats-bar-cell { width: 100%; } .s442-stats-bar-wrap { background: var(--s442-bg); border-radius: 999px; overflow: hidden; height: 10px; min-width: 80px; } .s442-stats-bar { background: linear-gradient(90deg, var(--s442-blue), #4fb0e8); height: 100%; border-radius: 999px; transition: width 0.4s ease; } .s442-stats-pct { white-space: nowrap; width: 1%; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--s442-blue-dark); } /* --------------------------------------------------------------------- * Contacto y Registro — mismo lenguaje de tarjeta + campos que el resto. * ------------------------------------------------------------------ */ .s442-contact-wrap, .s442-registro-wrap { max-width: 480px; font-family: var(--s442-font); color: var(--s442-text); } .s442-form { display: flex; flex-direction: column; gap: 16px; background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius-lg); box-shadow: var(--s442-shadow); padding: 26px 28px; } .s442-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s442-blue-dark); } .s442-form input[type='text'], .s442-form input[type='email'], .s442-form input[type='password'], .s442-form textarea { font-family: inherit; font-size: 14px; font-weight: 400; color: var(--s442-text); padding: 9px 12px; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); resize: vertical; transition: border-color 0.15s ease; } .s442-form input:focus, .s442-form textarea:focus { border-color: var(--s442-blue); outline: 2px solid var(--s442-blue-light); outline-offset: 1px; } .s442-form .s442-submit { margin-top: 4px; } /* --------------------------------------------------------------------- * Inicio y Cómo jugar — mismo lenguaje de tarjeta que el resto del plugin. * ------------------------------------------------------------------ */ .s442-content-wrap { max-width: 720px; font-family: var(--s442-font); color: var(--s442-text); } .s442-content-wrap h2 { position: relative; margin: 0 0 4px; padding-left: 16px; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--s442-blue-dark); } .s442-content-wrap h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--s442-blue), var(--s442-orange)); } .s442-content-wrap .s442-muted { margin: 0 0 20px 16px; } /* Bloque de bienvenida (Inicio) */ .s442-hero-card { background: linear-gradient(135deg, var(--s442-blue-dark), var(--s442-blue)); border-radius: var(--s442-radius-lg); box-shadow: var(--s442-shadow); padding: 32px 30px; color: #ffffff; margin-bottom: 20px; } .s442-hero-card h1 { margin: 0 0 10px; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; } .s442-hero-card h1 span { font-weight: 500; opacity: 0.85; font-size: 0.6em; display: block; } .s442-hero-tagline { font-size: 15px; margin: 0 0 16px; opacity: 0.95; } .s442-hero-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .s442-hero-list li { padding-left: 18px; position: relative; } .s442-hero-list li::before { content: '\2022'; position: absolute; left: 0; color: var(--s442-orange); font-weight: 800; } .s442-season-banner { background: var(--s442-orange-light); border: 1px solid var(--s442-orange); border-radius: var(--s442-radius); padding: 18px 22px; text-align: center; } .s442-season-flag { margin: 0 0 6px; font-weight: 800; color: var(--s442-amber); text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; } .s442-season-leagues { margin: 0 0 10px; font-weight: 700; color: var(--s442-blue-dark); font-size: 15px; } .s442-season-more { margin: 0; font-size: 13px; } .s442-season-more a { color: var(--s442-blue); font-weight: 700; text-decoration: none; } .s442-season-more a:hover { text-decoration: underline; } /* Últimas noticias (portada) */ .s442-latest-posts { margin-top: 24px; } .s442-latest-posts h2 { position: relative; margin: 0 0 14px; padding-left: 16px; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--s442-blue-dark); } .s442-latest-posts h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--s442-blue), var(--s442-orange)); } .s442-latest-posts-grid { display: flex; flex-direction: column; gap: 12px; } .s442-latest-post-card { background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); padding: 16px 18px; } .s442-latest-post-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; } .s442-latest-post-title a { color: var(--s442-blue-dark); text-decoration: none; } .s442-latest-post-title a:hover { color: var(--s442-blue); text-decoration: underline; } .s442-latest-post-excerpt { margin: 0 0 8px; font-size: 13.5px; color: var(--s442-muted-color); line-height: 1.5; } .s442-latest-post-link { font-size: 13px; font-weight: 700; color: var(--s442-blue); text-decoration: none; } .s442-latest-post-link:hover { text-decoration: underline; } /* Reglas del juego (Cómo jugar) */ .s442-rules-card { background: var(--s442-surface); border: 1px solid var(--s442-border); border-radius: var(--s442-radius); box-shadow: var(--s442-shadow); padding: 20px 24px; margin-bottom: 16px; } .s442-rules-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; } .s442-rules-card p:last-child { margin-bottom: 0; } .s442-rules-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; counter-reset: s442-rule; } ol.s442-rules-list { counter-reset: s442-rule; } ol.s442-rules-list li { padding-left: 26px; position: relative; } ol.s442-rules-list li::before { counter-increment: s442-rule; content: counter(s442-rule) '.'; position: absolute; left: 0; font-weight: 800; color: var(--s442-blue); } ul.s442-rules-list li { padding-left: 18px; position: relative; } ul.s442-rules-list li::before { content: '\2022'; position: absolute; left: 0; color: var(--s442-orange); font-weight: 800; } .s442-rules-leagues { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: var(--s442-blue-light); border-color: var(--s442-blue-light); } .s442-rules-league h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--s442-blue-dark); text-transform: uppercase; letter-spacing: 0.02em; } .s442-rules-league p { font-size: 13px; } .s442-rules-note { color: var(--s442-amber); font-weight: 600; } .s442-rules-warning { background: var(--s442-amber-light); border-color: var(--s442-amber); } .s442-rules-warning h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--s442-amber); } /* --------------------------------------------------------------------- * Modal de "elecciones de un usuario" (Clasificación) * Se abre al pulsar el nombre de un usuario en cualquier tabla de * clasificación (liga individual o "Grandes ligas"). No usa AJAX: los * datos ya vienen embebidos en la página, ver assets/clasificacion-modal.js. * ------------------------------------------------------------------ */ .s442-user-picks-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--s442-blue); font-weight: 600; cursor: pointer; text-align: left; border-bottom: 1px dashed transparent; display: inline-flex; align-items: center; gap: 8px; } /* Variante con foto de perfil (clasificaciones de grupos de amigos): a * diferencia de la variante simple (arriba, sin foto, centrada tal cual * por el text-align:center heredado de la celda), aquí el botón ocupa * todo el ancho de la celda para que la foto quede SIEMPRE pegada al * borde izquierdo y el nombre SIEMPRE centrado en el hueco que queda a * su derecha — así todas las filas quedan alineadas igual, tengan o no * foto, en vez de aparecer como un bloque compacto centrado que se mueve * de sitio según lo larga que sea cada foto+nombre. La línea de * "subrayado" al pasar el ratón se queda solo bajo el nombre (no hay * ninguna línea divisoria entre la foto y el nombre en ningún caso). */ .s442-user-picks-btn-with-avatar { display: flex; width: 100%; text-align: left; border-bottom: none; } .s442-user-avatar-slot { flex: 0 0 28px; display: flex; align-items: center; justify-content: flex-start; } .s442-user-name-slot { flex: 1; text-align: center; border-bottom: 1px dashed transparent; } .s442-user-picks-btn-with-avatar:hover .s442-user-name-slot, .s442-user-picks-btn-with-avatar:focus-visible .s442-user-name-slot { border-bottom-color: currentColor; } .s442-mini-avatar { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .s442-user-picks-btn:hover, .s442-user-picks-btn:focus-visible { color: var(--s442-blue-dark); border-bottom-color: currentColor; outline: none; } .s442-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 5vh 16px; background: rgba(11, 51, 80, 0.55); overflow-y: auto; font-family: var(--s442-font); } .s442-modal-overlay.is-open { display: flex; } .s442-modal-box { position: relative; width: 100%; max-width: 480px; background: var(--s442-surface); border-radius: var(--s442-radius-lg); box-shadow: 0 12px 32px rgba(11, 51, 80, 0.28); padding: 28px 24px 24px; color: var(--s442-text); } .s442-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--s442-bg); color: var(--s442-muted-color); font-size: 20px; line-height: 1; cursor: pointer; } .s442-modal-close:hover, .s442-modal-close:focus-visible { background: var(--s442-blue-light); color: var(--s442-blue-dark); outline: none; } .s442-modal-title { margin: 0 32px 16px 0; font-size: 17px; font-weight: 800; color: var(--s442-blue-dark); } .s442-modal-selectors { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .s442-modal-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; } .s442-modal-field[hidden] { display: none; } .s442-modal-field label { font-size: 12px; font-weight: 600; color: var(--s442-muted-color); text-transform: uppercase; letter-spacing: 0.02em; } .s442-modal-field select { appearance: none; -webkit-appearance: none; background: var(--s442-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7785'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--s442-border); border-radius: var(--s442-radius-sm); padding: 8px 30px 8px 10px; font: inherit; color: var(--s442-text); } .s442-modal-body { border-top: 1px solid var(--s442-border); padding-top: 14px; max-height: 50vh; overflow-y: auto; } .s442-modal-group-title { display: inline-block; margin: 14px 0 6px; padding: 3px 12px; border-radius: 999px; background: var(--s442-blue-dark); color: #fff; font-size: 12px; font-weight: 700; } .s442-modal-group-title:first-child { margin-top: 0; } .s442-modal-group-player { background: var(--s442-orange); } .s442-modal-options-list { list-style: none; margin: 0 0 4px; padding: 0; } .s442-modal-options-list li { padding: 6px 4px; border-bottom: 1px solid var(--s442-border); font-size: 14px; } .s442-modal-options-list li:last-child { border-bottom: none; } .s442-modal-option-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .s442-modal-option-name { flex: 1; } .s442-modal-option-points { flex-shrink: 0; font-weight: 700; color: var(--s442-blue-dark); white-space: nowrap; }