/* Base de la cara pública: la lanzadera, el calendario y los concursos. Vive en /comun para escribirla una vez y no tres. Misma identidad que la aplicación del comité (azul del logo, oro de acento, tarjetas blancas), porque es la misma casa. La diferencia es que aquí no hay sesión, no hay botón de salir y no se puede tocar nada. */ *, *::before, *::after { box-sizing: border-box; } /* Outfit, servida desde aquí y no desde Google Fonts: sin depender de nadie de fuera y sin contarle a un tercero quién abre la página. */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --azul: #1d3fe8; /* Los tres altos del DEGRADADO DE MARCA: la cabecera, la banda de la cuenta atrás, la portada, el botón primario, la etiqueta del precio. Van aparte de --azul-noche/--azul-oscuro/--azul porque aquí lo que manda no es la identidad sino que se lea lo que llevan encima: el extremo claro está frenado para que el blanco, el oro y los azules pálidos pasen 4,5:1 en TODO el barrido y no sólo en el lado oscuro. Antes el extremo claro era --azul, y ahí "Salir" sobre la cabecera del tema oscuro daba 3,60:1 y las unidades del reloj ("min", "seg") 2,39:1. Ver server/pruebas/contraste.mjs, que es quien lo comprueba. */ --sup-baja: #0a1250; --sup-media: #0e1d7a; --sup-alta: #172cae; --azul-oscuro: #12279c; --azul-noche: #0b1660; --oro: #d9a520; --oro-suave: #f7e8c3; --fondo: #eef1fa; --tarjeta: #ffffff; --tinta: #1a2040; --tinta-suave: #666c8d; /* 4,54:1 sobre el fondo de la página: con #6a7196 se quedaba en 4,21 */ --borde: #dde2f2; --radio: 14px; --sombra: 0 2px 10px rgba(18, 39, 156, .08); --salida: cubic-bezier(.23, 1, .32, 1); --titulo: #0b1660; --titulo-2: #12279c; --oro-fondo: #f7e8c3; --oro-tinta: #7a5b06; --oro-tenue: #fffdf6; --rojo-tenue: #fdeef0; --rojo-borde: #f3c3ca; --verde-tenue: #e4f5eb; --verde-tinta: #12603a; --oro-borde: rgba(217, 165, 32, .5); --campo: #f7f9ff; } /* --------------------------------------------------------------- el tema Dos paletas y un único juego de nombres, así que el resto de la hoja no se entera de cuál está puesta. Lo que NO se invierte son los azules de marca: --azul-noche y --azul-oscuro siguen siendo azul oscuro en los dos temas, porque no son "el color del texto", son superficies —la cabecera, el degradado de la cuenta atrás, la tarjeta del saldo— que llevan texto blanco encima y que en modo oscuro siguen funcionando tal cual. Para los títulos, que sí tenían que aclararse, están --titulo y --titulo-2. "sistema" no se resuelve en JavaScript a claro u oscuro: se escribe tal cual en el y decide el CSS. Así, si alguien cambia el tema del móvil con la página abierta —los móviles lo hacen solos al anochecer—, cambia sola. */ :root[data-tema="oscuro"] { --fondo: #0c1226; --tarjeta: #141c36; --tinta: #e9edfc; --tinta-suave: #98a3c9; --borde: #28325a; --azul: #5a7dff; /* Los mismos tres, en el tema oscuro: ver el bloque del tema claro. */ --sup-baja: #070d28; --sup-media: #111a4e; --sup-alta: #2b3a8f; --azul-oscuro: #16205c; --azul-noche: #0a1130; --titulo: #dfe6ff; --titulo-2: #b9c8f7; --oro: #e9bd47; --oro-fondo: #3a2e10; --oro-tinta: #f0d79a; --oro-tenue: #241d0c; --rojo-tenue: #3a1620; --rojo-borde: #6b2a38; --verde-tenue: #122f22; --verde-tinta: #7fe0ac; --oro-borde: rgba(233, 189, 71, .38); --rojo: #ff7183; --verde: #3fcb85; --campo: #0e1630; --sombra: 0 2px 12px rgba(0, 0, 0, .45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-tema="sistema"] { --fondo: #0c1226; --tarjeta: #141c36; --tinta: #e9edfc; --tinta-suave: #98a3c9; --borde: #28325a; --azul: #5a7dff; /* Los mismos tres, en el tema oscuro: ver el bloque del tema claro. */ --sup-baja: #070d28; --sup-media: #111a4e; --sup-alta: #2b3a8f; --azul-oscuro: #16205c; --azul-noche: #0a1130; --titulo: #dfe6ff; --titulo-2: #b9c8f7; --oro: #e9bd47; --oro-fondo: #3a2e10; --oro-tinta: #f0d79a; --oro-tenue: #241d0c; --rojo-tenue: #3a1620; --rojo-borde: #6b2a38; --verde-tenue: #122f22; --verde-tinta: #7fe0ac; --oro-borde: rgba(233, 189, 71, .38); --rojo: #ff7183; --verde: #3fcb85; --campo: #0e1630; --sombra: 0 2px 12px rgba(0, 0, 0, .45); color-scheme: dark; } } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--fondo); color: var(--tinta); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { line-height: 1.25; margin: 0; } .hidden { display: none !important; } /* ------------------------------------------------------------------ cabecera */ .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--azul-oscuro); color: #fff; position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-family: Outfit, system-ui, sans-serif; letter-spacing: .2px; } .brand img { height: 30px; width: auto; } .volver { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 7px 13px; border-radius: 9px; font-size: 14px; text-decoration: none; } .volver:hover { background: rgba(255, 255, 255, .18); } main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; } /* -------------------------------------------------------------------- paneles */ .panel { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; } .panel + .panel { margin-top: 18px; } .panel h2 { font-size: 17px; color: var(--titulo); margin-bottom: 10px; font-family: Outfit, system-ui, sans-serif; } .vacio { color: var(--tinta-suave); font-size: 15px; padding: 6px 2px; } /* ------------------------------------------------------------------- cargando */ .esqueleto { height: 74px; border-radius: 12px; background: linear-gradient(100deg, #edf0f8 30%, #f6f8fd 50%, #edf0f8 70%); background-size: 250% 100%; animation: brillo 1.4s linear infinite; } @keyframes brillo { from { background-position: 130% 0; } to { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } } /* "Esto ya no está": por qué has acabado en la portada. No es un error de la página —la página está bien— así que va en el oro de avisar, no en rojo. */ .aviso-cerrada { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--oro-tenue); border: 1px solid var(--oro-borde); color: var(--oro-tinta); font-size: 15px; line-height: 1.5; } .aviso-cerrada.hidden { display: none; }